Fix flyout bg color in page list. (#29932)

WordPress · Mar 18, 2021 · cd50b38 · cd50b38
1 parent 1e9dd97
commit cd50b38
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 13 deletions.
diff --git a/packages/block-library/src/navigation-link/style.scss b/packages/block-library/src/navigation-link/style.scss
@@ -84,9 +84,10 @@
 	}
 }
 
-// Default background and font color
-.wp-block-navigation:not(.has-background) .wp-block-navigation__container {
-	.wp-block-navigation-link__container {
+// Default background and font color.
+.wp-block-navigation:not(.has-background) {
+	.submenu-container, // This target items created by the Page List block.
+	.wp-block-navigation__container .wp-block-navigation-link__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

diff --git a/packages/block-library/src/page-list/editor.scss b/packages/block-library/src/page-list/editor.scss
@@ -4,13 +4,6 @@
 	.wp-block-page-list {
 		background-color: inherit;
 	}
-	// Make the dropdown background white if there's no background color set.
-	&:not(.has-background) {
-		.submenu-container {
-			color: $gray-900;
-			background-color: $white;
-		}
-	}
 }
 
 // Make links unclickable in the editor

diff --git a/packages/block-library/src/page-list/style.scss b/packages/block-library/src/page-list/style.scss
@@ -13,12 +13,14 @@
 	}
 }
 
-// The Pages block should inherit navigation styles when nested within it
+// The Page List block should inherit navigation styles when nested within it
 .wp-block-navigation {
 	.wp-block-page-list {
 		display: flex;
 		flex-wrap: wrap;
+		background-color: inherit;
 	}
+
 	.wp-block-pages-list__item__link {
 		display: block;
 		color: inherit;
@@ -33,10 +35,9 @@
 		> a {
 			padding-right: 0.5em;
 		}
+
 		> .submenu-container {
 			border: $border-width solid rgba(0, 0, 0, 0.15);
-			background-color: inherit;
-			color: inherit;
 			position: absolute;
 			left: 0;
 			top: 100%;
@@ -91,6 +92,11 @@
 		}
 	}
 
+	&.has-background .wp-block-pages-list__item.has-child > .submenu-container {
+		background-color: inherit;
+		color: inherit;
+	}
+
 	.submenu-container {
 		padding: 0;
 	}