From 1fdf183ac0202b0ae4f5a89a6e51a3fbbd77f624 Mon Sep 17 00:00:00 2001 From: tellthemachines Date: Fri, 5 Nov 2021 16:12:49 +1100 Subject: [PATCH] Move overlay styles back to inner container. --- .../src/navigation/edit/index.js | 1 - .../block-library/src/navigation/editor.scss | 21 ++++++------ .../block-library/src/navigation/style.scss | 32 +++++++++---------- packages/block-library/src/navigation/view.js | 3 -- 4 files changed, 25 insertions(+), 32 deletions(-) diff --git a/packages/block-library/src/navigation/edit/index.js b/packages/block-library/src/navigation/edit/index.js index 67d7f1988f7e74..42140ea3db8079 100644 --- 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 index 629f1fa7254887..c768f1e10261fb 100644 --- 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,7 +441,7 @@ $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 + @@ -450,20 +449,20 @@ $color-control-label-height: 20px; } } -.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 index be8a1d57f5c40e..8547d420c91b72 100644 --- 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 index 4a78455cc4a0c3..ff5957d8dd66b7 100644 --- 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;