reduce CSS specificity so that we can customize the overlay using the…

…me.json
WordPress · Oct 24, 2023 · 1e609fb · 1e609fb
1 parent 2ddd30a
commit 1e609fb
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 5 deletions.
diff --git a/packages/block-library/src/navigation/index.php b/packages/block-library/src/navigation/index.php
@@ -675,6 +675,7 @@ function render_block_core_navigation( $attributes, $content, $block ) {
 
 	$responsive_container_classes = array(
 		'wp-block-navigation__responsive-container',
+		'wp-block-navigation-overlay',
 		$is_hidden_by_default ? 'hidden-by-default' : '',
 		implode( ' ', $colors['overlay_css_classes'] ),
 	);

diff --git a/packages/block-library/src/navigation/style.scss b/packages/block-library/src/navigation/style.scss
@@ -462,6 +462,10 @@ button.wp-block-navigation-item__content {
 		transform: translateY(0);
 	}
 }
+
+:where(.wp-block-navigation__responsive-container.is-menu-open) {
+	background-color: inherit;
+}
 .wp-block-navigation__responsive-container {
 	display: none;
 	position: fixed;
@@ -498,7 +502,6 @@ button.wp-block-navigation-item__content {
 	&.is-menu-open {
 		display: flex; // Needs to be set to override "none".
 		flex-direction: column;
-		background-color: inherit;
 
 		// Animation.
 		animation: overlay-menu__fade-in-animation 0.1s ease-out;
@@ -631,13 +634,13 @@ button.wp-block-navigation-item__content {
 }
 
 // Default menu background and font color.
-.wp-block-navigation:not(.has-background)
-.wp-block-navigation__responsive-container.is-menu-open {
+:where(.wp-block-navigation:not(.has-background)
+.wp-block-navigation__responsive-container.is-menu-open) {
 	background-color: #fff;
 }
 
-.wp-block-navigation:not(.has-text-color)
-.wp-block-navigation__responsive-container.is-menu-open {
+:where(.wp-block-navigation:not(.has-text-color)
+.wp-block-navigation__responsive-container.is-menu-open) {
 	color: #000;
 }