Varia / Maywood: Allow Full Site Editing blocks to be styled with Gutenberg attributes (#1500)

Remove most hardcoded styles from Site Title, Site Description, and Navigation Menu blocks, allowing the user to customize them in the Block Editor.

maywood/languages/maywood.pot

@@ -2,7 +2,7 @@
 # This file is distributed under the GNU General Public License v2 or later.
 msgid ""
 msgstr ""
-"Project-Id-Version: Maywood 1.1.2\n"
+"Project-Id-Version: Maywood 1.1.5\n"
 "Report-Msgid-Bugs-To: http://wordpress.org/support/theme/maywood\n"
 "POT-Creation-Date: 2019-08-28 16:20:11+00:00\n"
 "MIME-Version: 1.0\n"

maywood/package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "maywood",
-  "version": "1.0.0",
+  "version": "1.1.5",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {

maywood/package.json

@@ -1,6 +1,6 @@
 {
   "name": "maywood",
-  "version": "1.1.4",
+  "version": "1.1.5",
   "description": "Maywood",
   "bugs": {
     "url": "https://github.com/Automattic/themes/issues"

maywood/sass/_full-site-editing-editor.scss

@@ -26,14 +26,9 @@
 
 .site-header {
 	.site-title {
-		text-align: center;
 		text-decoration: none;
 	}
 
-	.site-description{
-		text-align: center;
-	}
-
 	.main-navigation {
 		text-align: center;
 		ul {

maywood/sass/style-child-theme.scss

@@ -5,7 +5,7 @@ Author: Automattic
 Author URI: https://automattic.com/
 Description: Maywood is a refined theme designed for restaurants and food-related businesses seeking a modern look.
 Requires at least: WordPress 4.9.6
-Version: 1.1.4
+Version: 1.1.5
 License: GNU General Public License v2 or later
 License URI: LICENSE
 Template: varia

maywood/style-editor.css

@@ -1060,7 +1060,6 @@ b, strong {
 .site-title {
 	color: #181818;
 	font-family: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
-	font-size: 1.2rem;
 	letter-spacing: normal;
 	line-height: 1;
 }
@@ -1081,6 +1080,13 @@ b, strong {
 .site-description {
 	color: currentColor;
 	font-family: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+}
+
+body:not(.fse-enabled) .site-title {
+	font-size: 1.2rem;
+}
+
+body:not(.fse-enabled) .site-description {
 	font-size: 0.83333rem;
 }
 
@@ -1238,7 +1244,6 @@ b, strong {
 	color: #181818;
 	display: block;
 	font-family: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
-	font-size: 1rem;
 	font-weight: 700;
 	padding: 4px 0;
 }
@@ -1296,6 +1301,10 @@ b, strong {
 	overflow: hidden;
 }
 
+body:not(.fse-enabled) .main-navigation a {
+	font-size: 1rem;
+}
+
 .social-navigation > div > ul {
 	align-content: center;
 	display: flex;
@@ -1417,7 +1426,6 @@ b, strong {
 
 .footer-navigation .footer-menu a, .site-footer .main-navigation .footer-menu a {
 	font-family: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
-	font-size: 0.83333rem;
 	font-weight: 700;
 	padding: 8px;
 	color: currentColor;
@@ -1431,6 +1439,10 @@ b, strong {
 	color: #685636;
 }
 
+body:not(.fse-enabled) .footer-menu a {
+	font-size: 0.83333rem;
+}
+
 .template-block .site-header,
 .template-block .site-footer {
 	padding: 16px;
@@ -1451,14 +1463,6 @@ b, strong {
 	color: inherit;
 }
 
-.a8c-template-editor .wp-block:not(.is-selected) [data-block] {
-	margin-bottom: 14px;
-}
-
-.a8c-template-editor .wp-block:not(:first-child):not(.is-selected) [data-block] {
-	margin-top: 14px;
-}
-
 .a8c-template-editor .wp-block-cover .site-title,
 .a8c-template-editor .wp-block-cover .site-description,
 .a8c-template-editor .wp-block-cover-image .site-title,
@@ -1569,10 +1573,6 @@ b, strong {
 	border-radius: 0;
 }
 
-.site-header .main-navigation a {
-	font-size: 21.6px;
-}
-
 .post-content__block {
 	margin-bottom: 160px;
 	margin-top: 36px;
@@ -1589,6 +1589,14 @@ b, strong {
 	display: block;
 }
 
+.site-footer .main-navigation .footer-menu {
+	color: inherit;
+}
+
+.site-footer .main-navigation > div {
+	display: block;
+}
+
 .site-footer .main-navigation .hide-visually,
 .site-footer .main-navigation #toggle-menu {
 	display: none;
@@ -1606,6 +1614,50 @@ b, strong {
 	}
 }
 
+.site-header .site-title.has-background,
+.site-header .site-description.has-background,
+.site-footer .site-title.has-background,
+.site-footer .site-description.has-background {
+	border-radius: 0;
+	padding: 16px;
+}
+
+.site-header .main-navigation .main-menu.footer-menu li a,
+.site-footer .main-navigation .main-menu.footer-menu li a {
+	font-size: inherit;
+}
+
+.site-header .main-navigation .main-menu.footer-menu li.menu-item-has-children > a::after,
+.site-footer .main-navigation .main-menu.footer-menu li.menu-item-has-children > a::after {
+	font-size: 0.6em;
+	vertical-align: middle;
+}
+
+.site-header .main-navigation .has-text-color > .main-menu.footer-menu > li > a,
+.site-footer .main-navigation .has-text-color > .main-menu.footer-menu > li > a {
+	color: inherit;
+}
+
+.site-header .main-navigation .has-text-align-left > .main-menu.footer-menu,
+.site-footer .main-navigation .has-text-align-left > .main-menu.footer-menu {
+	justify-content: flex-start;
+}
+
+.site-header .main-navigation .has-text-align-center > .main-menu.footer-menu,
+.site-footer .main-navigation .has-text-align-center > .main-menu.footer-menu {
+	justify-content: center;
+}
+
+.site-header .main-navigation .has-text-align-right > .main-menu.footer-menu,
+.site-footer .main-navigation .has-text-align-right > .main-menu.footer-menu {
+	justify-content: flex-end;
+}
+
+.site-header .main-navigation .has-background > .main-menu.footer-menu,
+.site-footer .main-navigation .has-background > .main-menu.footer-menu {
+	padding: 16px;
+}
+
 .site-header .site-title, .site-footer .site-title {
 	font-size: 20px;
 }
@@ -1637,14 +1689,9 @@ b, strong {
 }
 
 .site-header .site-title {
-	text-align: center;
 	text-decoration: none;
 }
 
-.site-header .site-description {
-	text-align: center;
-}
-
 .site-header .main-navigation {
 	text-align: center;
 }

maywood/style-rtl.css

@@ -6,7 +6,7 @@ Author: Automattic
 Author URI: https://automattic.com/
 Description: Maywood is a refined theme designed for restaurants and food-related businesses seeking a modern look.
 Requires at least: WordPress 4.9.6
-Version: 1.1.4
+Version: 1.1.5
 License: GNU General Public License v2 or later
 License URI: LICENSE
 Template: varia
@@ -2339,7 +2339,6 @@ table th,
 .site-title {
 	color: #181818;
 	font-family: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
-	font-size: 1.2rem;
 	letter-spacing: normal;
 	line-height: 1;
 }
@@ -2360,6 +2359,13 @@ table th,
 .site-description {
 	color: currentColor;
 	font-family: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+}
+
+body:not(.fse-enabled) .site-title {
+	font-size: 1.2rem;
+}
+
+body:not(.fse-enabled) .site-description {
 	font-size: 0.83333rem;
 }
 
@@ -2517,7 +2523,6 @@ table th,
 	color: #181818;
 	display: block;
 	font-family: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
-	font-size: 1rem;
 	font-weight: 700;
 	padding: 4px 0;
 }
@@ -2575,6 +2580,10 @@ table th,
 	overflow: hidden;
 }
 
+body:not(.fse-enabled) .main-navigation a {
+	font-size: 1rem;
+}
+
 .social-navigation > div > ul {
 	align-content: center;
 	display: flex;
@@ -2696,7 +2705,6 @@ table th,
 
 .footer-navigation .footer-menu a, .fse-enabled .site-footer .main-navigation .footer-menu a {
 	font-family: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
-	font-size: 0.83333rem;
 	font-weight: 700;
 	padding: 8px;
 	color: currentColor;
@@ -2710,6 +2718,10 @@ table th,
 	color: #685636;
 }
 
+body:not(.fse-enabled) .footer-menu a {
+	font-size: 0.83333rem;
+}
+
 .entry-title {
 	font-size: 1.728rem;
 	letter-spacing: normal;
@@ -3937,6 +3949,14 @@ p:not(.site-title) a:hover {
 	display: block;
 }
 
+.fse-enabled .site-footer .main-navigation .footer-menu {
+	color: inherit;
+}
+
+.fse-enabled .site-footer .main-navigation > div {
+	display: block;
+}
+
 .fse-enabled .site-footer .main-navigation .hide-visually,
 .fse-enabled .site-footer .main-navigation #toggle-menu {
 	display: none;
@@ -3958,6 +3978,37 @@ p:not(.site-title) a:hover {
 	text-align: center;
 }
 
+.fse-enabled .main-navigation .has-text-color > .main-menu.footer-menu > li > a {
+	color: inherit;
+}
+
+.fse-enabled .main-navigation .has-text-align-left > .main-menu.footer-menu {
+	justify-content: flex-start;
+}
+
+.fse-enabled .main-navigation .has-text-align-center > .main-menu.footer-menu {
+	justify-content: center;
+}
+
+.fse-enabled .main-navigation .has-text-align-right > .main-menu.footer-menu {
+	justify-content: flex-end;
+}
+
+.fse-enabled .main-navigation .has-background > .main-menu.footer-menu {
+	padding: 16px 0;
+}
+
+@media only screen and (min-width: 560px) {
+	.fse-enabled .main-navigation .has-background > .main-menu.footer-menu {
+		padding: 16px;
+	}
+}
+
+.fse-enabled .main-navigation > div > .main-menu.footer-menu > .menu-item-has-children > a::after {
+	font-size: 0.6em;
+	vertical-align: middle;
+}
+
 .fse-enabled .site-header.entry-content {
 	margin-bottom: 0;
 	max-width: 100%;

maywood/style.css

@@ -6,7 +6,7 @@ Author: Automattic
 Author URI: https://automattic.com/
 Description: Maywood is a refined theme designed for restaurants and food-related businesses seeking a modern look.
 Requires at least: WordPress 4.9.6
-Version: 1.1.4
+Version: 1.1.5
 License: GNU General Public License v2 or later
 License URI: LICENSE
 Template: varia
@@ -2356,7 +2356,6 @@ table th,
 .site-title {
 	color: #181818;
 	font-family: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
-	font-size: 1.2rem;
 	letter-spacing: normal;
 	line-height: 1;
 }
@@ -2377,6 +2376,13 @@ table th,
 .site-description {
 	color: currentColor;
 	font-family: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+}
+
+body:not(.fse-enabled) .site-title {
+	font-size: 1.2rem;
+}
+
+body:not(.fse-enabled) .site-description {
 	font-size: 0.83333rem;
 }
 
@@ -2534,7 +2540,6 @@ table th,
 	color: #181818;
 	display: block;
 	font-family: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
-	font-size: 1rem;
 	font-weight: 700;
 	padding: 4px 0;
 }
@@ -2592,6 +2597,10 @@ table th,
 	overflow: hidden;
 }
 
+body:not(.fse-enabled) .main-navigation a {
+	font-size: 1rem;
+}
+
 .social-navigation > div > ul {
 	align-content: center;
 	display: flex;
@@ -2713,7 +2722,6 @@ table th,
 
 .footer-navigation .footer-menu a, .fse-enabled .site-footer .main-navigation .footer-menu a {
 	font-family: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
-	font-size: 0.83333rem;
 	font-weight: 700;
 	padding: 8px;
 	color: currentColor;
@@ -2727,6 +2735,10 @@ table th,
 	color: #685636;
 }
 
+body:not(.fse-enabled) .footer-menu a {
+	font-size: 0.83333rem;
+}
+
 .entry-title {
 	font-size: 1.728rem;
 	letter-spacing: normal;
@@ -3966,6 +3978,14 @@ p:not(.site-title) a:hover {
 	display: block;
 }
 
+.fse-enabled .site-footer .main-navigation .footer-menu {
+	color: inherit;
+}
+
+.fse-enabled .site-footer .main-navigation > div {
+	display: block;
+}
+
 .fse-enabled .site-footer .main-navigation .hide-visually,
 .fse-enabled .site-footer .main-navigation #toggle-menu {
 	display: none;
@@ -3987,6 +4007,37 @@ p:not(.site-title) a:hover {
 	text-align: center;
 }
 
+.fse-enabled .main-navigation .has-text-color > .main-menu.footer-menu > li > a {
+	color: inherit;
+}
+
+.fse-enabled .main-navigation .has-text-align-left > .main-menu.footer-menu {
+	justify-content: flex-start;
+}
+
+.fse-enabled .main-navigation .has-text-align-center > .main-menu.footer-menu {
+	justify-content: center;
+}
+
+.fse-enabled .main-navigation .has-text-align-right > .main-menu.footer-menu {
+	justify-content: flex-end;
+}
+
+.fse-enabled .main-navigation .has-background > .main-menu.footer-menu {
+	padding: 16px 0;
+}
+
+@media only screen and (min-width: 560px) {
+	.fse-enabled .main-navigation .has-background > .main-menu.footer-menu {
+		padding: 16px;
+	}
+}
+
+.fse-enabled .main-navigation > div > .main-menu.footer-menu > .menu-item-has-children > a::after {
+	font-size: 0.6em;
+	vertical-align: middle;
+}
+
 .fse-enabled .site-header.entry-content {
 	margin-bottom: 0;
 	max-width: 100%;

varia/package.json

@@ -1,6 +1,6 @@
 {
   "name": "varia",
-  "version": "1.2.4",
+  "version": "1.2.5",
   "description": "A variable-based design system for WordPress sites built with Gutenberg.",
   "bugs": {
     "url": "https://github.com/Automattic/themes/issues?q=is%3Aopen+is%3Aissue+label%3Avaria"

varia/sass/components/footer/_footer-navigation.scss

@@ -40,7 +40,6 @@
 
 		a {
 			font-family: #{map-deep-get($config-header, "main-nav", "font", "family")};
-			font-size: #{map-deep-get($config-global, "font", "size", "sm")};
 			font-weight: #{map-deep-get($config-header, "main-nav", "font", "weight")};
 			padding: #{map-deep-get($config-header, "main-nav", "link-padding")};
 
@@ -57,3 +56,11 @@
 		}
 	}
 }
+
+// Prevent overruling the user defined font size value set inside Gutenberg
+// for Full Site Editing's Menu Navigation block.
+body:not( .fse-enabled ) {
+	.footer-menu a {
+		font-size: #{map-deep-get($config-global, "font", "size", "sm")};
+	}
+}

varia/sass/components/header/_site-branding.scss

@@ -16,7 +16,6 @@
 
 	color: #{map-deep-get($config-header, "branding", "color", "link")};
 	font-family: #{map-deep-get($config-header, "branding", "title", "font", "family")};
-	font-size: #{map-deep-get($config-header, "branding", "title", "font", "size")};
 	letter-spacing: normal;
 	line-height: #{map-deep-get($config-header, "branding", "title", "font", "line-height")};
 
@@ -40,5 +39,15 @@
 .site-description {
 	color: currentColor;
 	font-family: #{map-deep-get($config-header, "branding", "description", "font", "family")};
-	font-size: #{map-deep-get($config-header, "branding", "description", "font", "size")};
+}
+
+// Prevent overruling the user defined font size value set inside Gutenberg
+// for Full Site Editing's Site Title and Site Description blocks.
+body:not( .fse-enabled ) {
+	.site-title {
+		font-size: #{map-deep-get($config-header, "branding", "title", "font", "size")};
+	}
+	.site-description {
+		font-size: #{map-deep-get($config-header, "branding", "description", "font", "size")};
+	}
 }

varia/sass/components/header/_site-main-navigation.scss

@@ -147,7 +147,6 @@
 		color: #{map-deep-get($config-header, "main-nav", "color", "link")};
 		display: block;
 		font-family: #{map-deep-get($config-header, "main-nav", "font", "family")};
-		font-size: #{map-deep-get($config-header, "main-nav", "font", "size")};
 		font-weight: #{map-deep-get($config-header, "main-nav", "font", "weight")};
 		padding: #{0.5 * map-deep-get($config-header, "main-nav", "link-padding")} 0;
 
@@ -211,3 +210,11 @@
 		overflow: hidden;
 	}
 }
+
+// Prevent overruling the user defined font size value set inside Gutenberg
+// for Full Site Editing's Menu Navigation block.
+body:not( .fse-enabled ) {
+	.main-navigation a {
+		font-size: #{map-deep-get($config-header, "main-nav", "font", "size")};
+	}
+}

varia/sass/full-site-editing/_editor.scss

@@ -22,14 +22,6 @@
 }
 
 .a8c-template-editor {
-	.wp-block:not(.is-selected) [data-block] {
-		margin-bottom: 14px;
-	}
-	.wp-block:not(:first-child):not(.is-selected) [data-block] {
-		margin-top: 14px;
-	}
-
-
 	.wp-block-cover,
 	.wp-block-cover-image {
 		.site-title,
@@ -53,10 +45,6 @@
 
 	.main-navigation {
 		@import "../blocks/button/style";
-
-		a {
-			font-size: 21.6px;
-		}
 	}
 }
 
@@ -77,8 +65,15 @@
 
 	.main-navigation {
 		@extend .footer-navigation;
+		
+		.footer-menu {
+			color: inherit;
+		}
 
 		display: block;
+		& > div {
+			display: block;
+		}
 
 		.hide-visually,
 		#toggle-menu {
@@ -99,3 +94,41 @@
 		}
 	}
 }
+
+.site-header,
+.site-footer {
+	.site-title,
+	.site-description {
+		&.has-background {
+			border-radius: 0;
+			padding: #{map-deep-get($config-global, "spacing", "unit")};
+		}
+	}
+
+	.main-navigation {
+		.main-menu.footer-menu li {
+			a {
+				font-size: inherit;
+			}
+			&.menu-item-has-children > a::after {
+				font-size: 0.6em;
+				vertical-align: middle;
+			}
+		}
+		.has-text-color > .main-menu.footer-menu > li > a {
+			color: inherit;
+		}
+		.has-text-align-left > .main-menu.footer-menu {
+			justify-content: flex-start;
+		}
+		.has-text-align-center > .main-menu.footer-menu {
+			justify-content: center;
+		}
+		.has-text-align-right > .main-menu.footer-menu {
+			justify-content: flex-end;
+		}
+		.has-background > .main-menu.footer-menu {
+			padding: #{map-deep-get($config-global, "spacing", "unit")};
+		}
+	}
+}

varia/sass/full-site-editing/_imports.scss

@@ -5,7 +5,14 @@
 		.main-navigation {
 			@extend .footer-navigation;
 
+			.footer-menu {
+				color: inherit;
+			}
+
 			display: block;
+			& > div {
+				display: block;
+			}
 
 			.hide-visually,
 			#toggle-menu {
@@ -30,4 +37,29 @@
 			text-align: center;
 		}
 	}
+
+	.main-navigation {
+		.has-text-color > .main-menu.footer-menu > li > a {
+			color: inherit;
+		}
+		.has-text-align-left > .main-menu.footer-menu {
+			justify-content: flex-start;
+		}
+		.has-text-align-center > .main-menu.footer-menu {
+			justify-content: center;
+		}
+		.has-text-align-right > .main-menu.footer-menu {
+			justify-content: flex-end;
+		}
+		.has-background > .main-menu.footer-menu {
+			padding: #{map-deep-get($config-global, "spacing", "unit")} 0;
+			@include media(mobile) {
+				padding: #{map-deep-get($config-global, "spacing", "unit")};
+			}
+		}
+		& > div > .main-menu.footer-menu > .menu-item-has-children > a::after {
+			font-size: 0.6em;
+			vertical-align: middle;
+		}
+	}
 }

varia/style-editor.css

@@ -945,7 +945,6 @@ table th,
 .site-title {
 	color: blue;
 	font-family: sans-serif;
-	font-size: 1.2rem;
 	letter-spacing: normal;
 	line-height: 1;
 }
@@ -966,6 +965,13 @@ table th,
 .site-description {
 	color: currentColor;
 	font-family: serif;
+}
+
+body:not(.fse-enabled) .site-title {
+	font-size: 1.2rem;
+}
+
+body:not(.fse-enabled) .site-description {
 	font-size: 0.83333rem;
 }
 
@@ -1123,7 +1129,6 @@ table th,
 	color: blue;
 	display: block;
 	font-family: sans-serif;
-	font-size: 1.2rem;
 	font-weight: bold;
 	padding: 8px 0;
 }
@@ -1181,6 +1186,10 @@ table th,
 	overflow: hidden;
 }
 
+body:not(.fse-enabled) .main-navigation a {
+	font-size: 1.2rem;
+}
+
 .social-navigation > div > ul {
 	align-content: center;
 	display: flex;
@@ -1302,7 +1311,6 @@ table th,
 
 .footer-navigation .footer-menu a, .site-footer .main-navigation .footer-menu a {
 	font-family: sans-serif;
-	font-size: 0.83333rem;
 	font-weight: bold;
 	padding: 16px;
 	color: currentColor;
@@ -1316,6 +1324,10 @@ table th,
 	color: indigo;
 }
 
+body:not(.fse-enabled) .footer-menu a {
+	font-size: 0.83333rem;
+}
+
 .template-block .site-header,
 .template-block .site-footer {
 	padding: 16px;
@@ -1336,14 +1348,6 @@ table th,
 	color: inherit;
 }
 
-.a8c-template-editor .wp-block:not(.is-selected) [data-block] {
-	margin-bottom: 14px;
-}
-
-.a8c-template-editor .wp-block:not(:first-child):not(.is-selected) [data-block] {
-	margin-top: 14px;
-}
-
 .a8c-template-editor .wp-block-cover .site-title,
 .a8c-template-editor .wp-block-cover .site-description,
 .a8c-template-editor .wp-block-cover-image .site-title,
@@ -1454,10 +1458,6 @@ table th,
 	border-radius: 0;
 }
 
-.site-header .main-navigation a {
-	font-size: 21.6px;
-}
-
 .post-content__block {
 	margin-bottom: 160px;
 	margin-top: 36px;
@@ -1474,6 +1474,14 @@ table th,
 	display: block;
 }
 
+.site-footer .main-navigation .footer-menu {
+	color: inherit;
+}
+
+.site-footer .main-navigation > div {
+	display: block;
+}
+
 .site-footer .main-navigation .hide-visually,
 .site-footer .main-navigation #toggle-menu {
 	display: none;
@@ -1490,3 +1498,47 @@ table th,
 		display: none;
 	}
 }
+
+.site-header .site-title.has-background,
+.site-header .site-description.has-background,
+.site-footer .site-title.has-background,
+.site-footer .site-description.has-background {
+	border-radius: 0;
+	padding: 16px;
+}
+
+.site-header .main-navigation .main-menu.footer-menu li a,
+.site-footer .main-navigation .main-menu.footer-menu li a {
+	font-size: inherit;
+}
+
+.site-header .main-navigation .main-menu.footer-menu li.menu-item-has-children > a::after,
+.site-footer .main-navigation .main-menu.footer-menu li.menu-item-has-children > a::after {
+	font-size: 0.6em;
+	vertical-align: middle;
+}
+
+.site-header .main-navigation .has-text-color > .main-menu.footer-menu > li > a,
+.site-footer .main-navigation .has-text-color > .main-menu.footer-menu > li > a {
+	color: inherit;
+}
+
+.site-header .main-navigation .has-text-align-left > .main-menu.footer-menu,
+.site-footer .main-navigation .has-text-align-left > .main-menu.footer-menu {
+	justify-content: flex-start;
+}
+
+.site-header .main-navigation .has-text-align-center > .main-menu.footer-menu,
+.site-footer .main-navigation .has-text-align-center > .main-menu.footer-menu {
+	justify-content: center;
+}
+
+.site-header .main-navigation .has-text-align-right > .main-menu.footer-menu,
+.site-footer .main-navigation .has-text-align-right > .main-menu.footer-menu {
+	justify-content: flex-end;
+}
+
+.site-header .main-navigation .has-background > .main-menu.footer-menu,
+.site-footer .main-navigation .has-background > .main-menu.footer-menu {
+	padding: 16px;
+}

varia/style-rtl.css

@@ -6,7 +6,7 @@ Author: Automattic
 Author URI: https://automattic.com/
 Description: A variable-based design system for WordPress sites built with Gutenberg.
 Requires at least: WordPress 4.9.6
-Version: 1.2.4
+Version: 1.2.5
 License: GNU General Public License v2 or later
 License URI: LICENSE
 Text Domain: varia
@@ -2302,7 +2302,6 @@ table th,
 .site-title {
 	color: blue;
 	font-family: sans-serif;
-	font-size: 1.2rem;
 	letter-spacing: normal;
 	line-height: 1;
 }
@@ -2323,6 +2322,13 @@ table th,
 .site-description {
 	color: currentColor;
 	font-family: serif;
+}
+
+body:not(.fse-enabled) .site-title {
+	font-size: 1.2rem;
+}
+
+body:not(.fse-enabled) .site-description {
 	font-size: 0.83333rem;
 }
 
@@ -2480,7 +2486,6 @@ table th,
 	color: blue;
 	display: block;
 	font-family: sans-serif;
-	font-size: 1.2rem;
 	font-weight: bold;
 	padding: 8px 0;
 }
@@ -2538,6 +2543,10 @@ table th,
 	overflow: hidden;
 }
 
+body:not(.fse-enabled) .main-navigation a {
+	font-size: 1.2rem;
+}
+
 .social-navigation > div > ul {
 	align-content: center;
 	display: flex;
@@ -2659,7 +2668,6 @@ table th,
 
 .footer-navigation .footer-menu a, .fse-enabled .site-footer .main-navigation .footer-menu a {
 	font-family: sans-serif;
-	font-size: 0.83333rem;
 	font-weight: bold;
 	padding: 16px;
 	color: currentColor;
@@ -2673,6 +2681,10 @@ table th,
 	color: indigo;
 }
 
+body:not(.fse-enabled) .footer-menu a {
+	font-size: 0.83333rem;
+}
+
 .entry-title {
 	font-size: 2.48832rem;
 	letter-spacing: normal;
@@ -3525,6 +3537,14 @@ body.admin-bar .widget_eu_cookie_law_widget.widget.top {
 	display: block;
 }
 
+.fse-enabled .site-footer .main-navigation .footer-menu {
+	color: inherit;
+}
+
+.fse-enabled .site-footer .main-navigation > div {
+	display: block;
+}
+
 .fse-enabled .site-footer .main-navigation .hide-visually,
 .fse-enabled .site-footer .main-navigation #toggle-menu {
 	display: none;
@@ -3545,3 +3565,34 @@ body.admin-bar .widget_eu_cookie_law_widget.widget.top {
 .fse-enabled .site-footer .site-info {
 	text-align: center;
 }
+
+.fse-enabled .main-navigation .has-text-color > .main-menu.footer-menu > li > a {
+	color: inherit;
+}
+
+.fse-enabled .main-navigation .has-text-align-left > .main-menu.footer-menu {
+	justify-content: flex-start;
+}
+
+.fse-enabled .main-navigation .has-text-align-center > .main-menu.footer-menu {
+	justify-content: center;
+}
+
+.fse-enabled .main-navigation .has-text-align-right > .main-menu.footer-menu {
+	justify-content: flex-end;
+}
+
+.fse-enabled .main-navigation .has-background > .main-menu.footer-menu {
+	padding: 16px 0;
+}
+
+@media only screen and (min-width: 560px) {
+	.fse-enabled .main-navigation .has-background > .main-menu.footer-menu {
+		padding: 16px;
+	}
+}
+
+.fse-enabled .main-navigation > div > .main-menu.footer-menu > .menu-item-has-children > a::after {
+	font-size: 0.6em;
+	vertical-align: middle;
+}

varia/style.css

@@ -6,7 +6,7 @@ Author: Automattic
 Author URI: https://automattic.com/
 Description: A variable-based design system for WordPress sites built with Gutenberg.
 Requires at least: WordPress 4.9.6
-Version: 1.2.4
+Version: 1.2.5
 License: GNU General Public License v2 or later
 License URI: LICENSE
 Text Domain: varia
@@ -2319,7 +2319,6 @@ table th,
 .site-title {
 	color: blue;
 	font-family: sans-serif;
-	font-size: 1.2rem;
 	letter-spacing: normal;
 	line-height: 1;
 }
@@ -2340,6 +2339,13 @@ table th,
 .site-description {
 	color: currentColor;
 	font-family: serif;
+}
+
+body:not(.fse-enabled) .site-title {
+	font-size: 1.2rem;
+}
+
+body:not(.fse-enabled) .site-description {
 	font-size: 0.83333rem;
 }
 
@@ -2497,7 +2503,6 @@ table th,
 	color: blue;
 	display: block;
 	font-family: sans-serif;
-	font-size: 1.2rem;
 	font-weight: bold;
 	padding: 8px 0;
 }
@@ -2555,6 +2560,10 @@ table th,
 	overflow: hidden;
 }
 
+body:not(.fse-enabled) .main-navigation a {
+	font-size: 1.2rem;
+}
+
 .social-navigation > div > ul {
 	align-content: center;
 	display: flex;
@@ -2676,7 +2685,6 @@ table th,
 
 .footer-navigation .footer-menu a, .fse-enabled .site-footer .main-navigation .footer-menu a {
 	font-family: sans-serif;
-	font-size: 0.83333rem;
 	font-weight: bold;
 	padding: 16px;
 	color: currentColor;
@@ -2690,6 +2698,10 @@ table th,
 	color: indigo;
 }
 
+body:not(.fse-enabled) .footer-menu a {
+	font-size: 0.83333rem;
+}
+
 .entry-title {
 	font-size: 2.48832rem;
 	letter-spacing: normal;
@@ -3554,6 +3566,14 @@ body.admin-bar .widget_eu_cookie_law_widget.widget.top {
 	display: block;
 }
 
+.fse-enabled .site-footer .main-navigation .footer-menu {
+	color: inherit;
+}
+
+.fse-enabled .site-footer .main-navigation > div {
+	display: block;
+}
+
 .fse-enabled .site-footer .main-navigation .hide-visually,
 .fse-enabled .site-footer .main-navigation #toggle-menu {
 	display: none;
@@ -3574,3 +3594,34 @@ body.admin-bar .widget_eu_cookie_law_widget.widget.top {
 .fse-enabled .site-footer .site-info {
 	text-align: center;
 }
+
+.fse-enabled .main-navigation .has-text-color > .main-menu.footer-menu > li > a {
+	color: inherit;
+}
+
+.fse-enabled .main-navigation .has-text-align-left > .main-menu.footer-menu {
+	justify-content: flex-start;
+}
+
+.fse-enabled .main-navigation .has-text-align-center > .main-menu.footer-menu {
+	justify-content: center;
+}
+
+.fse-enabled .main-navigation .has-text-align-right > .main-menu.footer-menu {
+	justify-content: flex-end;
+}
+
+.fse-enabled .main-navigation .has-background > .main-menu.footer-menu {
+	padding: 16px 0;
+}
+
+@media only screen and (min-width: 560px) {
+	.fse-enabled .main-navigation .has-background > .main-menu.footer-menu {
+		padding: 16px;
+	}
+}
+
+.fse-enabled .main-navigation > div > .main-menu.footer-menu > .menu-item-has-children > a::after {
+	font-size: 0.6em;
+	vertical-align: middle;
+}

varia/style.scss

@@ -5,7 +5,7 @@ Author: Automattic
 Author URI: https://automattic.com/
 Description: A variable-based design system for WordPress sites built with Gutenberg.
 Requires at least: WordPress 4.9.6
-Version: 1.2.4
+Version: 1.2.5
 License: GNU General Public License v2 or later
 License URI: LICENSE
 Text Domain: varia