Merge pull request #1630 from Automattic/enhancement/add-wc-support-refactor-menu

Varia: Fix FSE button-style `%extend` compiling error.

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

@@ -1,3 +1,4 @@
+@import "../base/extends";
 @import "../components/header/header";
 @import "../components/footer/footer";
 
@@ -16,7 +17,7 @@
 		.site-title,
 		.site-description {
 			background: transparent;
-			color: inherit;	
+			color: inherit;
 		}
 	}
 }
@@ -27,7 +28,7 @@
 		.site-title,
 		.site-description {
 			background: transparent;
-			color: inherit;	
+			color: inherit;
 		}
 	}
 }
@@ -65,7 +66,7 @@
 
 	.main-navigation {
 		@extend .footer-navigation;
-		
+
 		.footer-menu {
 			color: inherit;
 		}

varia/style-editor.css

@@ -1033,6 +1033,84 @@ table th,
  * Full Site Editing
  * - Full Site Editing overrides
  */
+/**
+ * Button Placeholder style
+ * - Since buttons appear in various blocks,
+ *   let’s use a placeholder to keep them all
+ *   in-sync
+ */
+.site-header .main-navigation button,
+.site-header .main-navigation .button,
+.site-header .main-navigation input[type="submit"],
+.site-header .main-navigation .wp-block-button__link,
+.site-header .main-navigation .wp-block-file__button {
+	line-height: 1;
+	color: white;
+	cursor: pointer;
+	font-weight: bold;
+	font-family: sans-serif;
+	font-family: var(--font-headings, sans-serif);
+	font-size: 1.2rem;
+	background-color: blue;
+	border-radius: 9px;
+	border-width: 0;
+	padding: 16px 16px;
+}
+
+.site-header .main-navigation button:before,
+.site-header .main-navigation .button:before,
+.site-header .main-navigation input[type="submit"]:before,
+.site-header .main-navigation .wp-block-button__link:before,
+.site-header .main-navigation .wp-block-file__button:before, .site-header .main-navigation button:after,
+.site-header .main-navigation .button:after,
+.site-header .main-navigation input[type="submit"]:after,
+.site-header .main-navigation .wp-block-button__link:after,
+.site-header .main-navigation .wp-block-file__button:after {
+	content: '';
+	display: block;
+	height: 0;
+	width: 0;
+}
+
+.site-header .main-navigation button:before,
+.site-header .main-navigation .button:before,
+.site-header .main-navigation input[type="submit"]:before,
+.site-header .main-navigation .wp-block-button__link:before,
+.site-header .main-navigation .wp-block-file__button:before {
+	margin-bottom: -0.12em;
+}
+
+.site-header .main-navigation button:after,
+.site-header .main-navigation .button:after,
+.site-header .main-navigation input[type="submit"]:after,
+.site-header .main-navigation .wp-block-button__link:after,
+.site-header .main-navigation .wp-block-file__button:after {
+	margin-top: -0.11em;
+}
+
+.site-header .main-navigation button:hover,
+.site-header .main-navigation .button:hover,
+.site-header .main-navigation input:hover[type="submit"],
+.site-header .main-navigation .wp-block-button__link:hover,
+.site-header .main-navigation .wp-block-file__button:hover, .site-header .main-navigation button:focus,
+.site-header .main-navigation .button:focus,
+.site-header .main-navigation input:focus[type="submit"],
+.site-header .main-navigation .wp-block-button__link:focus,
+.site-header .main-navigation .wp-block-file__button:focus, .site-header .main-navigation button.has-focus,
+.site-header .main-navigation .has-focus.button,
+.site-header .main-navigation input.has-focus[type="submit"],
+.site-header .main-navigation .has-focus.wp-block-button__link,
+.site-header .main-navigation .has-focus.wp-block-file__button {
+	color: white;
+	background-color: indigo;
+}
+
+/**
+ * Onsale Placeholder style
+ * - Since buttons appear in various blocks,
+ *   let’s use a placeholder to keep them all
+ *   in-sync
+ */
 .site-branding {
 	color: #444444;
 }