diff --git a/packages/block-library/src/navigation-link/style.scss b/packages/block-library/src/navigation-link/style.scss index 12f2df5bf9780..e987810090fc1 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 fd6b7f5eee483..540fb5435fb06 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 9c65b730255b2..08bb9a61d7eba 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; }