Update navigation block in Varia

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

@@ -45,25 +45,28 @@
 	@include media(tablet) {
 		display: block;
 	}
-}
 
-.main-navigation {
-	@include media(mobile-only) {
-		background-color: #{map-deep-get($config-button, "color", "background")};
-		border-radius: #{map-deep-get($config-button, "border-radius")};
-		color: #{map-deep-get($config-button, "color", "text")};
-		display: inline-block;
-		font-family: #{map-deep-get($config-button, "font", "family")};
-		font-size: 18px;
-		font-weight: #{map-deep-get($config-button, "font", "weight")};
-		line-height: #{map-deep-get($config-button, "font", "line-height")};
-		padding: #{map-deep-get($config-button, "padding", "vertical")} #{map-deep-get($config-button, "padding", "horizontal")};
+	.main-navigation {
+		@extend .footer-navigation;
+
+		display: block;
 
-		&:before {
-			content: "Menu";
+		.hide-visually,
+		#toggle-menu {
+			display: none;
 		}
-		&:after {
-			content: "+";
+
+		@include media(mobile-only) {
+			.menu-primary-container {
+				display: block;
+			}
+			li {
+				width: auto;
+
+				.sub-menu {
+					display: none;
+				}
+			}
 		}
 	}
 }

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

@@ -0,0 +1,27 @@
+.fse-enabled {
+	.site-footer {
+		.main-navigation {
+			@extend .footer-navigation;
+
+			display: block;
+
+			.hide-visually,
+			#toggle-menu {
+				display: none;
+			}
+
+			@include media(mobile-only) {
+				.menu-primary-container {
+					display: block;
+				}
+				li {
+					width: auto;
+
+					.sub-menu {
+						display: none;
+					}
+				}
+			}
+		}
+	}
+}

varia/style-editor.css

@@ -1154,12 +1154,12 @@ table th,
 	color: indigo;
 }
 
-.footer-navigation {
+.footer-navigation, .site-footer .main-navigation {
 	display: inline;
 }
 
 @media only screen and (min-width: 640px) {
-	.footer-navigation {
+	.footer-navigation, .site-footer .main-navigation {
 		flex: 1 0 50%;
 		order: 2;
 		margin-top: 0;
@@ -1168,37 +1168,37 @@ table th,
 	}
 }
 
-.footer-navigation > div {
+.footer-navigation > div, .site-footer .main-navigation > div {
 	display: inline;
 }
 
-.footer-navigation .footer-menu {
+.footer-navigation .footer-menu, .site-footer .main-navigation .footer-menu {
 	color: #767676;
 	margin: 0;
 	padding-left: 0;
 }
 
 @media only screen and (min-width: 640px) {
-	.footer-navigation .footer-menu {
+	.footer-navigation .footer-menu, .site-footer .main-navigation .footer-menu {
 		display: flex;
 		flex-wrap: wrap;
 		justify-content: flex-end;
 	}
 }
 
-.footer-navigation .footer-menu > li {
+.footer-navigation .footer-menu > li, .site-footer .main-navigation .footer-menu > li {
 	display: inline;
 }
 
-.footer-navigation .footer-menu > li:first-of-type > a {
+.footer-navigation .footer-menu > li:first-of-type > a, .site-footer .main-navigation .footer-menu > li:first-of-type > a {
 	padding-left: 0;
 }
 
-.footer-navigation .footer-menu > li:last-of-type {
+.footer-navigation .footer-menu > li:last-of-type, .site-footer .main-navigation .footer-menu > li:last-of-type {
 	padding-right: 0;
 }
 
-.footer-navigation .footer-menu a {
+.footer-navigation .footer-menu a, .site-footer .main-navigation .footer-menu a {
 	font-family: sans-serif;
 	font-size: 0.83333rem;
 	font-weight: bold;
@@ -1206,11 +1206,11 @@ table th,
 	color: currentColor;
 }
 
-.footer-navigation .footer-menu a:link, .footer-navigation .footer-menu a:visited {
+.footer-navigation .footer-menu a:link, .site-footer .main-navigation .footer-menu a:link, .footer-navigation .footer-menu a:visited, .site-footer .main-navigation .footer-menu a:visited {
 	color: currentColor;
 }
 
-.footer-navigation .footer-menu a:hover {
+.footer-navigation .footer-menu a:hover, .site-footer .main-navigation .footer-menu a:hover {
 	color: indigo;
 }
 
@@ -1258,22 +1258,23 @@ table th,
 	}
 }
 
+.site-footer .main-navigation {
+	display: block;
+}
+
+.site-footer .main-navigation .hide-visually,
+.site-footer .main-navigation #toggle-menu {
+	display: none;
+}
+
 @media only screen and (max-width: 559px) {
-	.main-navigation {
-		background-color: blue;
-		border-radius: 9px;
-		color: white;
-		display: inline-block;
-		font-family: sans-serif;
-		font-size: 18px;
-		font-weight: bold;
-		line-height: 1;
-		padding: 16px 16px;
+	.site-footer .main-navigation .menu-primary-container {
+		display: block;
 	}
-	.main-navigation:before {
-		content: "Menu";
+	.site-footer .main-navigation li {
+		width: auto;
 	}
-	.main-navigation:after {
-		content: "+";
+	.site-footer .main-navigation li .sub-menu {
+		display: none;
 	}
 }

varia/style-rtl.css

@@ -2567,12 +2567,12 @@ table th,
 	color: indigo;
 }
 
-.footer-navigation {
+.footer-navigation, .fse-enabled .site-footer .main-navigation {
 	display: inline;
 }
 
 @media only screen and (min-width: 640px) {
-	.footer-navigation {
+	.footer-navigation, .fse-enabled .site-footer .main-navigation {
 		flex: 1 0 50%;
 		order: 2;
 		margin-top: 0;
@@ -2581,37 +2581,37 @@ table th,
 	}
 }
 
-.footer-navigation > div {
+.footer-navigation > div, .fse-enabled .site-footer .main-navigation > div {
 	display: inline;
 }
 
-.footer-navigation .footer-menu {
+.footer-navigation .footer-menu, .fse-enabled .site-footer .main-navigation .footer-menu {
 	color: #767676;
 	margin: 0;
 	padding-right: 0;
 }
 
 @media only screen and (min-width: 640px) {
-	.footer-navigation .footer-menu {
+	.footer-navigation .footer-menu, .fse-enabled .site-footer .main-navigation .footer-menu {
 		display: flex;
 		flex-wrap: wrap;
 		justify-content: flex-end;
 	}
 }
 
-.footer-navigation .footer-menu > li {
+.footer-navigation .footer-menu > li, .fse-enabled .site-footer .main-navigation .footer-menu > li {
 	display: inline;
 }
 
-.footer-navigation .footer-menu > li:first-of-type > a {
+.footer-navigation .footer-menu > li:first-of-type > a, .fse-enabled .site-footer .main-navigation .footer-menu > li:first-of-type > a {
 	padding-right: 0;
 }
 
-.footer-navigation .footer-menu > li:last-of-type {
+.footer-navigation .footer-menu > li:last-of-type, .fse-enabled .site-footer .main-navigation .footer-menu > li:last-of-type {
 	padding-left: 0;
 }
 
-.footer-navigation .footer-menu a {
+.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;
@@ -2619,11 +2619,11 @@ table th,
 	color: currentColor;
 }
 
-.footer-navigation .footer-menu a:link, .footer-navigation .footer-menu a:visited {
+.footer-navigation .footer-menu a:link, .fse-enabled .site-footer .main-navigation .footer-menu a:link, .footer-navigation .footer-menu a:visited, .fse-enabled .site-footer .main-navigation .footer-menu a:visited {
 	color: currentColor;
 }
 
-.footer-navigation .footer-menu a:hover {
+.footer-navigation .footer-menu a:hover, .fse-enabled .site-footer .main-navigation .footer-menu a:hover {
 	color: indigo;
 }
 
@@ -3363,3 +3363,28 @@ img#wpstats {
 .wp-block-jetpack-subscriptions form > *:last-child {
 	margin-bottom: 0;
 }
+
+/**
+ * Full Site Editing
+ * - Full Site Editing overrides
+ */
+.fse-enabled .site-footer .main-navigation {
+	display: block;
+}
+
+.fse-enabled .site-footer .main-navigation .hide-visually,
+.fse-enabled .site-footer .main-navigation #toggle-menu {
+	display: none;
+}
+
+@media only screen and (max-width: 559px) {
+	.fse-enabled .site-footer .main-navigation .menu-primary-container {
+		display: block;
+	}
+	.fse-enabled .site-footer .main-navigation li {
+		width: auto;
+	}
+	.fse-enabled .site-footer .main-navigation li .sub-menu {
+		display: none;
+	}
+}

varia/style.css

@@ -2584,12 +2584,12 @@ table th,
 	color: indigo;
 }
 
-.footer-navigation {
+.footer-navigation, .fse-enabled .site-footer .main-navigation {
 	display: inline;
 }
 
 @media only screen and (min-width: 640px) {
-	.footer-navigation {
+	.footer-navigation, .fse-enabled .site-footer .main-navigation {
 		flex: 1 0 50%;
 		order: 2;
 		margin-top: 0;
@@ -2598,37 +2598,37 @@ table th,
 	}
 }
 
-.footer-navigation > div {
+.footer-navigation > div, .fse-enabled .site-footer .main-navigation > div {
 	display: inline;
 }
 
-.footer-navigation .footer-menu {
+.footer-navigation .footer-menu, .fse-enabled .site-footer .main-navigation .footer-menu {
 	color: #767676;
 	margin: 0;
 	padding-left: 0;
 }
 
 @media only screen and (min-width: 640px) {
-	.footer-navigation .footer-menu {
+	.footer-navigation .footer-menu, .fse-enabled .site-footer .main-navigation .footer-menu {
 		display: flex;
 		flex-wrap: wrap;
 		justify-content: flex-end;
 	}
 }
 
-.footer-navigation .footer-menu > li {
+.footer-navigation .footer-menu > li, .fse-enabled .site-footer .main-navigation .footer-menu > li {
 	display: inline;
 }
 
-.footer-navigation .footer-menu > li:first-of-type > a {
+.footer-navigation .footer-menu > li:first-of-type > a, .fse-enabled .site-footer .main-navigation .footer-menu > li:first-of-type > a {
 	padding-left: 0;
 }
 
-.footer-navigation .footer-menu > li:last-of-type {
+.footer-navigation .footer-menu > li:last-of-type, .fse-enabled .site-footer .main-navigation .footer-menu > li:last-of-type {
 	padding-right: 0;
 }
 
-.footer-navigation .footer-menu a {
+.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;
@@ -2636,11 +2636,11 @@ table th,
 	color: currentColor;
 }
 
-.footer-navigation .footer-menu a:link, .footer-navigation .footer-menu a:visited {
+.footer-navigation .footer-menu a:link, .fse-enabled .site-footer .main-navigation .footer-menu a:link, .footer-navigation .footer-menu a:visited, .fse-enabled .site-footer .main-navigation .footer-menu a:visited {
 	color: currentColor;
 }
 
-.footer-navigation .footer-menu a:hover {
+.footer-navigation .footer-menu a:hover, .fse-enabled .site-footer .main-navigation .footer-menu a:hover {
 	color: indigo;
 }
 
@@ -3392,3 +3392,28 @@ img#wpstats {
 .wp-block-jetpack-subscriptions form > *:last-child {
 	margin-bottom: 0;
 }
+
+/**
+ * Full Site Editing
+ * - Full Site Editing overrides
+ */
+.fse-enabled .site-footer .main-navigation {
+	display: block;
+}
+
+.fse-enabled .site-footer .main-navigation .hide-visually,
+.fse-enabled .site-footer .main-navigation #toggle-menu {
+	display: none;
+}
+
+@media only screen and (max-width: 559px) {
+	.fse-enabled .site-footer .main-navigation .menu-primary-container {
+		display: block;
+	}
+	.fse-enabled .site-footer .main-navigation li {
+		width: auto;
+	}
+	.fse-enabled .site-footer .main-navigation li .sub-menu {
+		display: none;
+	}
+}

varia/style.scss

@@ -77,3 +77,9 @@ Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
  * - Styles for 3rd party plugins and WP extensions
  */
 @import "sass/vendors/imports";
+
+/**
+ * Full Site Editing
+ * - Full Site Editing overrides
+ */
+ @import "sass/full-site-editing/imports";