Fix transparent navigation block submenus (#28904)

* Fix submenu backgrounds * Ensure submenus are the same width regardless of bg color, and align items left * Switch to stretch as items should be full-width of the container * Use align-items normal * Fix issue with glitching appender. Co-authored-by: jasmussen <[email protected]>
WordPress · Feb 10, 2021 · 94cc72e · 94cc72e
1 parent 9a5fef7
commit 94cc72e
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 9 deletions.
diff --git a/packages/block-library/src/navigation-link/editor.scss b/packages/block-library/src/navigation-link/editor.scss
@@ -28,6 +28,7 @@
 		margin: $grid-unit-10 * 2;
 		margin-left: $grid-unit-10 * 1.25;
 		margin-top: $grid-unit-10 * 1.25;
+		margin-right: auto;
 	}
 }
 

diff --git a/packages/block-library/src/navigation/style.scss b/packages/block-library/src/navigation/style.scss
@@ -1,15 +1,25 @@
+// Default background and font color
+.wp-block-navigation:not(.has-background) .wp-block-navigation__container {
+	.wp-block-navigation__container {
+		// Set a background color for submenus so that they're not transparent.
+		// NOTE TO DEVS - if refactoring this code, please double-check that
+		// submenus have a default background color, this feature has regressed
+		// several times, so care needs to be taken.
+		background-color: $white;
+		color: $gray-900;
+	}
+}
+
+.wp-block-navigation .wp-block-navigation__container {
+	.wp-block-navigation__container {
+		align-items: normal;
+		min-width: 200px;
+	}
+}
+
 .wp-block-navigation__container {
 	// Vertically align child blocks, like Social Links or Search.
 	align-items: center;
-
-	// Default background and font color
-	&:not(.has-background) .wp-block-navigation__container {
-		.wp-block-navigation__container {
-			color: $gray-900;
-			background-color: $white;
-			min-width: 200px;
-		}
-	}
 }
 
 .items-justified-center > ul {