Move overlay styles back to inner container.

WordPress · Nov 5, 2021 · 1fdf183 · 1fdf183
1 parent 547238c
commit 1fdf183
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 32 deletions.
diff --git a/packages/block-library/src/navigation/edit/index.js b/packages/block-library/src/navigation/edit/index.js
@@ -161,7 +161,6 @@ function Navigation( {
 			[ `items-justified-${ attributes.itemsJustification }` ]: itemsJustification,
 			'is-vertical': orientation === 'vertical',
 			'is-responsive': 'never' !== overlayMenu,
-			'is-responsive-menu-open': isResponsiveMenuOpen,
 			'has-text-color': !! textColor.color || !! textColor?.class,
 			[ getColorClassName(
 				'color',

diff --git a/packages/block-library/src/navigation/editor.scss b/packages/block-library/src/navigation/editor.scss
@@ -422,9 +422,8 @@ $color-control-label-height: 20px;
 // Most of this can be removed when the iframe lands.
 
 // When not fullscreen.
-.wp-block-navigation.is-responsive-menu-open {
+.wp-block-navigation__responsive-container.is-menu-open {
 	position: fixed;
-	max-width: 100%;
 	top:
 		$admin-bar-height-big + $header-height + $block-toolbar-height +
 		$border-width;
@@ -442,28 +441,28 @@ $color-control-label-height: 20px;
 	}
 }
 
-.has-fixed-toolbar .wp-block-navigation.is-responsive-menu-open {
+.has-fixed-toolbar .wp-block-navigation__responsive-container.is-menu-open {
 	@include break-medium() {
 		top:
 			$admin-bar-height + $header-height + $block-toolbar-height +
 			$border-width;
 	}
 }
 
-.is-mobile-preview .wp-block-navigation.is-responsive-menu-open,
-.is-tablet-preview .wp-block-navigation.is-responsive-menu-open {
+.is-mobile-preview .wp-block-navigation__responsive-container.is-menu-open,
+.is-tablet-preview .wp-block-navigation__responsive-container.is-menu-open {
 	top:
 		$admin-bar-height + $header-height + $block-toolbar-height +
 		$border-width;
 }
 
-.is-sidebar-opened .wp-block-navigation.is-responsive-menu-open {
+.is-sidebar-opened .wp-block-navigation__responsive-container.is-menu-open {
 	right: $sidebar-width;
 }
 
 // When fullscreen.
 .is-fullscreen-mode {
-	.wp-block-navigation.is-responsive-menu-open {
+	.wp-block-navigation__responsive-container.is-menu-open {
 		left: 0; // Unset the value from non fullscreen mode.
 		top:
 			$admin-bar-height-big + $header-height + $block-toolbar-height +
@@ -474,21 +473,21 @@ $color-control-label-height: 20px;
 		}
 	}
 
-	.has-fixed-toolbar .wp-block-navigation.is-responsive-menu-open {
+	.has-fixed-toolbar .wp-block-navigation__responsive-container.is-menu-open {
 		@include break-medium() {
 			top: $header-height + $block-toolbar-height + $border-width;
 		}
 	}
 
-	.is-mobile-preview .wp-block-navigation.is-responsive-menu-open,
-	.is-tablet-preview .wp-block-navigation.is-responsive-menu-open {
+	.is-mobile-preview .wp-block-navigation__responsive-container.is-menu-open,
+	.is-tablet-preview .wp-block-navigation__responsive-container.is-menu-open {
 		top: $header-height + $block-toolbar-height + $border-width;
 	}
 }
 
 // The iframe makes these rules a lot simpler.
 body.editor-styles-wrapper
-.wp-block-navigation.is-responsive-menu-open {
+.wp-block-navigation__responsive-container.is-menu-open {
 	top: 0;
 	right: 0;
 	bottom: 0;

diff --git a/packages/block-library/src/navigation/style.scss b/packages/block-library/src/navigation/style.scss
@@ -320,20 +320,13 @@
  * Mobile menu.
  */
 
-// Override default positioning
-.wp-block-navigation.is-responsive-menu-open {
+.wp-block-navigation__responsive-container {
+	display: none;
 	position: fixed;
 	top: 0;
 	left: 0;
 	right: 0;
 	bottom: 0;
-	// Give it a z-index just higher than the adminbar.
-	z-index: 100000;
-	padding: 72px 24px 24px 24px;
-}
-
-.wp-block-navigation__responsive-container {
-	display: none;
 
 	.wp-block-navigation__responsive-container-content {
 		display: contents;
@@ -345,7 +338,18 @@
 	// but otherwise provide a baseline.
 	// In a future version, we can explore more customizability.
 	&.is-menu-open {
-		display: contents;
+		display: flex; // Needs to be set to override "none".
+		flex-direction: column;
+
+		// Allow modal to scroll.
+		overflow: auto;
+
+		// Give it a z-index just higher than the adminbar.
+		z-index: 100000;
+
+		// Add extra top padding so items don't conflict with close button.
+		padding: 72px 24px 24px 24px;
+		background-color: inherit;
 		// Fallback to inheritance in case the --justification-setting variable fails.
 		align-items: inherit;
 
@@ -455,10 +459,8 @@
 // Default menu background and font color.
 .wp-block-navigation:not(.has-background)
 .wp-block-navigation__responsive-container.is-menu-open {
-	color: #000;
-}
-.wp-block-navigation:not(.has-background).is-responsive-menu-open {
 	background-color: #fff;
+	color: #000;
 }
 
 // Menu and close buttons.
@@ -485,10 +487,6 @@
 .wp-block-navigation__responsive-container-open {
 	display: flex;
 
-	.is-responsive-menu-open & {
-		display: none; // Or do we need this button to still be screen reader accessible?
-	}
-
 	&:not(.always-shown) {
 		@include break-small {
 			display: none;

diff --git a/packages/block-library/src/navigation/view.js b/packages/block-library/src/navigation/view.js
@@ -15,9 +15,6 @@ function navigationToggleModal( modal ) {
 	triggerButton.setAttribute( 'aria-expanded', ! isHidden );
 	closeButton.setAttribute( 'aria-expanded', ! isHidden );
 	modal.classList.toggle( 'has-modal-open', ! isHidden );
-	triggerButton
-		.closest( '.wp-block-navigation' )
-		.classList.toggle( 'is-responsive-menu-open', ! isHidden );
 
 	// Add a class to indicate the modal is open.
 	const htmlElement = document.documentElement;