From cd50b38a2a6eaa1e93379c2dd7cf720b5ccbb174 Mon Sep 17 00:00:00 2001
From: Joen A <1204802+jasmussen@users.noreply.github.com>
Date: Thu, 18 Mar 2021 11:17:46 +0100
Subject: [PATCH] Fix flyout bg color in page list. (#29932)

---
 .../block-library/src/navigation-link/style.scss     |  7 ++++---
 packages/block-library/src/page-list/editor.scss     |  7 -------
 packages/block-library/src/page-list/style.scss      | 12 +++++++++---
 3 files changed, 13 insertions(+), 13 deletions(-)

diff --git a/packages/block-library/src/navigation-link/style.scss b/packages/block-library/src/navigation-link/style.scss
index 12f2df5bf97807..e987810090fc1c 100644
--- 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
index fd6b7f5eee483c..540fb5435fb062 100644
--- 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
index 9c65b730255b2d..08bb9a61d7eba2 100644
--- 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;
 	}