From 365a3ed13f9ed170ee9fd33347be0117115d745d Mon Sep 17 00:00:00 2001 From: Dave Smith Date: Fri, 10 Nov 2023 11:55:24 +0000 Subject: [PATCH 1/6] Seperate menu open styles and combine small break point --- .../block-library/src/navigation/style.scss | 230 +++++++++--------- 1 file changed, 117 insertions(+), 113 deletions(-) diff --git a/packages/block-library/src/navigation/style.scss b/packages/block-library/src/navigation/style.scss index 0b70ebb656cfa8..ddd4f1d0bb88a9 100644 --- a/packages/block-library/src/navigation/style.scss +++ b/packages/block-library/src/navigation/style.scss @@ -467,6 +467,7 @@ button.wp-block-navigation-item__content { transform: translateY(0); } } + .wp-block-navigation__responsive-container { display: none; position: fixed; @@ -475,6 +476,20 @@ button.wp-block-navigation-item__content { right: 0; bottom: 0; + @include break-small() { + &:not(.hidden-by-default):not(.is-menu-open) { + display: block; + width: 100%; + position: relative; + z-index: auto; + background-color: inherit; + + .wp-block-navigation__responsive-container-close { + display: none; + } + } + } + // Low specificity so that themes can override. & :where(.wp-block-navigation-item a) { color: inherit; @@ -494,147 +509,136 @@ button.wp-block-navigation-item__content { color: inherit !important; background-color: inherit !important; } +} - // Overlay menu. - // Provide an opinionated default style for menu items inside. - // Inherit as much as we can regarding colors, fonts, sizes, - // but otherwise provide a baseline. - // In a future version, we can explore more customizability. - &.is-menu-open { - display: flex; // Needs to be set to override "none". - flex-direction: column; - background-color: inherit; +// Overlay menu. +// Provide an opinionated default style for menu items inside. +// Inherit as much as we can regarding colors, fonts, sizes, +// but otherwise provide a baseline. +// In a future version, we can explore more customizability. +.wp-block-navigation__responsive-container.is-menu-open { - // Animation. - animation: overlay-menu__fade-in-animation 0.1s ease-out; - animation-fill-mode: forwards; - @include reduce-motion("animation"); + display: flex; // Needs to be set to override "none". + flex-direction: column; + background-color: inherit; - // Try to inherit any root paddings set, so the X can align to a top-right aligned menu. - padding-top: clamp(1rem, var(--wp--style--root--padding-top), 20rem); - padding-right: clamp(1rem, var(--wp--style--root--padding-right), 20rem); - padding-bottom: clamp(1rem, var(--wp--style--root--padding-bottom), 20rem); - padding-left: clamp(1rem, var(--wp--style--root--padding-left), 20em); + // Animation. + animation: overlay-menu__fade-in-animation 0.1s ease-out; + animation-fill-mode: forwards; + @include reduce-motion("animation"); - // Allow modal to scroll. - overflow: auto; + // Try to inherit any root paddings set, so the X can align to a top-right aligned menu. + padding-top: clamp(1rem, var(--wp--style--root--padding-top), 20rem); + padding-right: clamp(1rem, var(--wp--style--root--padding-right), 20rem); + padding-bottom: clamp(1rem, var(--wp--style--root--padding-bottom), 20rem); + padding-left: clamp(1rem, var(--wp--style--root--padding-left), 20em); - // Give it a z-index just higher than the adminbar. - z-index: 100000; + // Allow modal to scroll. + overflow: auto; - .wp-block-navigation__responsive-container-content { - // Add padding above to accommodate close button. - padding-top: calc(2rem + #{ $navigation-icon-size }); + // Give it a z-index just higher than the adminbar. + z-index: 100000; - // Don't crop the focus style. - overflow: visible; + @include break-small() { + &.is-menu-open { + // Override breakpoint-inherited submenu rules. + .wp-block-navigation__submenu-container.wp-block-navigation__submenu-container.wp-block-navigation__submenu-container.wp-block-navigation__submenu-container { + left: 0; + } + } + } - // Override the container flex layout settings - // because we want overlay menu to always display - // as a column. - display: flex; - flex-direction: column; - flex-wrap: nowrap; + .wp-block-navigation__responsive-container-content { + // Add padding above to accommodate close button. + padding-top: calc(2rem + #{ $navigation-icon-size }); - // Inherit alignment settings from container. - align-items: var(--navigation-layout-justification-setting, inherit); + // Don't crop the focus style. + overflow: visible; - // Always align the contents of the menu to the top. - &, - .wp-block-page-list, - .wp-block-navigation__container { - justify-content: flex-start; - } + // Override the container flex layout settings + // because we want overlay menu to always display + // as a column. + display: flex; + flex-direction: column; + flex-wrap: nowrap; - .wp-block-navigation__submenu-icon { - display: none; - } + // Inherit alignment settings from container. + align-items: var(--navigation-layout-justification-setting, inherit); - // Always expand/unfold submenus inside the modal. - .has-child .wp-block-navigation__submenu-container { - // Unset CSS that hides dropdown menus. - opacity: 1; - visibility: visible; - height: auto; - width: auto; - overflow: initial; - min-width: 200px; - - // Position and style. - position: static; - border: none; - padding-left: 2rem; - padding-right: 2rem; - } + // Always align the contents of the menu to the top. + &, + .wp-block-page-list, + .wp-block-navigation__container { + justify-content: flex-start; + } - // Space unfolded items using gap and padding for submenus. - .wp-block-navigation__submenu-container, - .wp-block-navigation__container { - gap: inherit; - } + .wp-block-navigation__submenu-icon { + display: none; + } - // Apply top padding to nested submenus. - .wp-block-navigation__submenu-container { - padding-top: var(--wp--style--block-gap, 2em); - } + // Always expand/unfold submenus inside the modal. + .has-child .wp-block-navigation__submenu-container { + // Unset CSS that hides dropdown menus. + opacity: 1; + visibility: visible; + height: auto; + width: auto; + overflow: initial; + min-width: 200px; + + // Position and style. + position: static; + border: none; + padding-left: 2rem; + padding-right: 2rem; + } - // A default padding is added to submenu items. It's not appropriate inside the modal. - .wp-block-navigation-item__content { - padding: 0; - } + // Space unfolded items using gap and padding for submenus. + .wp-block-navigation__submenu-container, + .wp-block-navigation__container { + gap: inherit; + } - // Default column display for overlay menu contents. - .wp-block-navigation__container, - .wp-block-navigation-item, - .wp-block-page-list { - display: flex; - flex-direction: column; - // Inherit alignment settings from container. - align-items: var(--navigation-layout-justification-setting, initial); - } + // Apply top padding to nested submenus. + .wp-block-navigation__submenu-container { + padding-top: var(--wp--style--block-gap, 2em); + } + + // A default padding is added to submenu items. It's not appropriate inside the modal. + .wp-block-navigation-item__content { + padding: 0; } - // Remove background colors for items inside the overlay menu. - // Has to be !important to override global styles. - .wp-block-navigation-item .wp-block-navigation__submenu-container, + // Default column display for overlay menu contents. .wp-block-navigation__container, .wp-block-navigation-item, .wp-block-page-list { - color: inherit !important; - background: transparent !important; - } - - // Override justification dropdown menu positioning rules. - .wp-block-navigation__submenu-container.wp-block-navigation__submenu-container.wp-block-navigation__submenu-container.wp-block-navigation__submenu-container { - right: auto; - left: auto; + display: flex; + flex-direction: column; + // Inherit alignment settings from container. + align-items: var(--navigation-layout-justification-setting, initial); } } - @include break-small() { - &:not(.hidden-by-default) { - &:not(.is-menu-open) { - display: block; - width: 100%; - position: relative; - z-index: auto; - background-color: inherit; - - .wp-block-navigation__responsive-container-close { - display: none; - } - } - } + // Remove background colors for items inside the overlay menu. + // Has to be !important to override global styles. + .wp-block-navigation-item .wp-block-navigation__submenu-container, + .wp-block-navigation__container, + .wp-block-navigation-item, + .wp-block-page-list { + color: inherit !important; + background: transparent !important; + } - &.is-menu-open { - // Override breakpoint-inherited submenu rules. - .wp-block-navigation__submenu-container.wp-block-navigation__submenu-container.wp-block-navigation__submenu-container.wp-block-navigation__submenu-container { - left: 0; - } - } + // Override justification dropdown menu positioning rules. + .wp-block-navigation__submenu-container.wp-block-navigation__submenu-container.wp-block-navigation__submenu-container.wp-block-navigation__submenu-container { + right: auto; + left: auto; } + } + // Default menu background and font color. .wp-block-navigation:not(.has-background) .wp-block-navigation__responsive-container.is-menu-open { From c900f9847d14672a967202de4035bafa4228bb2c Mon Sep 17 00:00:00 2001 From: Dave Smith Date: Fri, 10 Nov 2023 12:52:02 +0000 Subject: [PATCH 2/6] Extract seperate CSS for overlay and add dedicated classnames --- .../src/navigation/edit/responsive-wrapper.js | 12 +- .../block-library/src/navigation/overlay.scss | 188 ++++++++++++++++++ .../block-library/src/navigation/style.scss | 118 +---------- packages/block-library/src/style.scss | 1 + 4 files changed, 200 insertions(+), 119 deletions(-) create mode 100644 packages/block-library/src/navigation/overlay.scss diff --git a/packages/block-library/src/navigation/edit/responsive-wrapper.js b/packages/block-library/src/navigation/edit/responsive-wrapper.js index ff66be85b5cde0..322c70232894f9 100644 --- a/packages/block-library/src/navigation/edit/responsive-wrapper.js +++ b/packages/block-library/src/navigation/edit/responsive-wrapper.js @@ -34,6 +34,7 @@ export default function ResponsiveWrapper( { const responsiveContainerClasses = classnames( 'wp-block-navigation__responsive-container', + 'wp-overlay-component', { 'has-text-color': !! overlayTextColor.color || !! overlayTextColor?.class, @@ -61,13 +62,16 @@ export default function ResponsiveWrapper( { const openButtonClasses = classnames( 'wp-block-navigation__responsive-container-open', + 'wp-overlay-component__open', + 'wp-overlay-component__toggle', { 'always-shown': isHiddenByDefault } ); const modalId = `${ id }-modal`; const dialogProps = { - className: 'wp-block-navigation__responsive-dialog', + className: + 'wp-block-navigation__responsive-dialog wp-overlay-component__dialog', ...( isOpen && { role: 'dialog', 'aria-modal': true, @@ -95,12 +99,12 @@ export default function ResponsiveWrapper( { id={ modalId } >
{ children } diff --git a/packages/block-library/src/navigation/overlay.scss b/packages/block-library/src/navigation/overlay.scss new file mode 100644 index 00000000000000..3a04d0a0d68d41 --- /dev/null +++ b/packages/block-library/src/navigation/overlay.scss @@ -0,0 +1,188 @@ + +// ******************************************************** +// ANIMATION +// ******************************************************** +@keyframes overlay-menu__fade-in-animation { + from { + opacity: 0; + transform: translateY(0.5em); + } + + to { + opacity: 1; + transform: translateY(0); + } +} + + +// ******************************************************** +// ROOT +// Alias: wp-block-navigation__responsive-container +// ******************************************************** +.wp-overlay-component { + display: none; + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; + + @include break-small() { + &:not(.hidden-by-default):not(.is-menu-open) { + display: block; + width: 100%; + position: relative; + z-index: auto; + background-color: inherit; + } + } + + &.is-menu-open { + display: flex; // Needs to be set to override "none". + flex-direction: column; + background-color: inherit; + + // Try to inherit any root paddings set, so the X can align to a top-right aligned menu. + padding-top: clamp(1rem, var(--wp--style--root--padding-top), 20rem); + padding-right: clamp(1rem, var(--wp--style--root--padding-right), 20rem); + padding-bottom: clamp(1rem, var(--wp--style--root--padding-bottom), 20rem); + padding-left: clamp(1rem, var(--wp--style--root--padding-left), 20em); + + // Animation. + animation: overlay-menu__fade-in-animation 0.1s ease-out; + animation-fill-mode: forwards; + @include reduce-motion("animation"); + + // Allow modal to scroll. + overflow: auto; + + // Give it a z-index just higher than the adminbar. + z-index: 100000; + } +} + + +// ******************************************************** +// DIALOG +// Alias: wp-block-navigation__responsive-dialog +// ******************************************************** +.wp-overlay-component__dialog { + position: relative; + + .is-menu-open & { + // Quesiton: why is this conditionally applied? + box-sizing: border-box; + } +} + + +// ******************************************************** +// CONTENT +// Alias: wp-block-navigation__responsive-container-content +// ******************************************************** +.wp-overlay-component__content { + // Always align the contents of the menu to the top. + + justify-content: flex-start; + + // Add padding above to accommodate close button. + padding-top: calc(2rem + #{ $navigation-icon-size }); + + // Don't crop the focus style. + overflow: visible; + + // Override the container flex layout settings + // because we want overlay menu to always display + // as a column. + display: flex; + flex-direction: column; + flex-wrap: nowrap; + + .is-menu-open & { + // Quesiton: why is this conditionally applied? + box-sizing: border-box; + } +} + + +// ******************************************************** +// TOGGLE BUTTONS +// Alias: +// - .wp-block-navigation__responsive-container-open, +// - .wp-block-navigation__responsive-container-close +// ******************************************************** + +.wp-overlay-component__toggle { + vertical-align: middle; + cursor: pointer; + color: currentColor; + background: transparent; + border: none; + margin: 0; + padding: 0; + text-transform: inherit; + + svg { + fill: currentColor; + pointer-events: none; + display: block; + width: $navigation-icon-size; + height: $navigation-icon-size; + } +} + + +// ******************************************************** +// OPEN BUTTON +// Alias: wp-block-navigation__responsive-container-open +// ******************************************************** + +.wp-overlay-component__open { + display: flex; + + &:not(.always-shown) { + @include break-small { + display: none; + } + } +} + +// ******************************************************** +// CLOSE BUTTON +// Alias: wp-block-navigation__responsive-container-close +// ******************************************************** + +.wp-overlay-component__close { + position: absolute; + top: 0; + right: 0; + z-index: 2; // Needs to be above the modal z index itself. + + .is-menu-open & { + box-sizing: border-box; + } +} + + +// ******************************************************** +// MAYBE REDUNDANT +// Alias: wp-block-navigation__responsive-close +// ******************************************************** +.wp-overlay-component__maybe-redundant { + width: 100%; + + .has-modal-open & { + // Try to inherit wide-width when defined, so the X can align to a top-right aligned menu. + max-width: var(--wp--style--global--wide-size, 100%); + margin-left: auto; + margin-right: auto; + } + + // This element is not keyboard accessible, and is focusable only using the mouse. + // It is part of the MicroModal library that adds a scrim outside of a modal dialog that is not fullscreen, + // where clicking that scrim closes the overlay just like the close button. + // It should not have a visible focus rectangle. + &:focus { + outline: none; + } +} diff --git a/packages/block-library/src/navigation/style.scss b/packages/block-library/src/navigation/style.scss index ddd4f1d0bb88a9..f7d074535b68ed 100644 --- a/packages/block-library/src/navigation/style.scss +++ b/packages/block-library/src/navigation/style.scss @@ -457,33 +457,11 @@ button.wp-block-navigation-item__content { * Mobile menu. */ -@keyframes overlay-menu__fade-in-animation { - from { - opacity: 0; - transform: translateY(0.5em); - } - to { - opacity: 1; - transform: translateY(0); - } -} - .wp-block-navigation__responsive-container { - display: none; - position: fixed; - top: 0; - left: 0; - right: 0; - bottom: 0; + @include break-small() { &:not(.hidden-by-default):not(.is-menu-open) { - display: block; - width: 100%; - position: relative; - z-index: auto; - background-color: inherit; - .wp-block-navigation__responsive-container-close { display: none; } @@ -518,26 +496,6 @@ button.wp-block-navigation-item__content { // In a future version, we can explore more customizability. .wp-block-navigation__responsive-container.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; - animation-fill-mode: forwards; - @include reduce-motion("animation"); - - // Try to inherit any root paddings set, so the X can align to a top-right aligned menu. - padding-top: clamp(1rem, var(--wp--style--root--padding-top), 20rem); - padding-right: clamp(1rem, var(--wp--style--root--padding-right), 20rem); - padding-bottom: clamp(1rem, var(--wp--style--root--padding-bottom), 20rem); - padding-left: clamp(1rem, var(--wp--style--root--padding-left), 20em); - - // Allow modal to scroll. - overflow: auto; - - // Give it a z-index just higher than the adminbar. - z-index: 100000; @include break-small() { &.is-menu-open { @@ -549,24 +507,12 @@ button.wp-block-navigation-item__content { } .wp-block-navigation__responsive-container-content { - // Add padding above to accommodate close button. - padding-top: calc(2rem + #{ $navigation-icon-size }); - - // Don't crop the focus style. - overflow: visible; - // Override the container flex layout settings - // because we want overlay menu to always display - // as a column. - display: flex; - flex-direction: column; - flex-wrap: nowrap; // Inherit alignment settings from container. align-items: var(--navigation-layout-justification-setting, inherit); // Always align the contents of the menu to the top. - &, .wp-block-page-list, .wp-block-navigation__container { justify-content: flex-start; @@ -657,30 +603,10 @@ button.wp-block-navigation-item__content { font-weight: bold; } -// Menu and close buttons. -.wp-block-navigation__responsive-container-open, -.wp-block-navigation__responsive-container-close { - vertical-align: middle; - cursor: pointer; - color: currentColor; - background: transparent; - border: none; - margin: 0; - padding: 0; - text-transform: inherit; - - svg { - fill: currentColor; - pointer-events: none; - display: block; - width: $navigation-icon-size; - height: $navigation-icon-size; - } -} // Button to open the menu. .wp-block-navigation__responsive-container-open { - display: flex; + // When set to collapse into a text button, it should inherit the parent font. // This needs specificity to override inherited properties by the button element and component. @@ -690,20 +616,11 @@ button.wp-block-navigation-item__content { font-size: inherit; } - &:not(.always-shown) { - @include break-small { - display: none; - } - } + } // Button to close the menus. .wp-block-navigation__responsive-container-close { - position: absolute; - top: 0; - right: 0; - z-index: 2; // Needs to be above the modal z index itself. - // When set to collapse into a text button, it should inherit the parent font. // This needs specificity to override inherited properties by the button element and component. &.wp-block-navigation__responsive-container-close.wp-block-navigation__responsive-container-close { @@ -713,35 +630,6 @@ button.wp-block-navigation-item__content { } } -// The menu adds wrapping containers. -.wp-block-navigation__responsive-close { - width: 100%; - - .has-modal-open & { - // Try to inherit wide-width when defined, so the X can align to a top-right aligned menu. - max-width: var(--wp--style--global--wide-size, 100%); - margin-left: auto; - margin-right: auto; - } - - // This element is not keyboard accessible, and is focusable only using the mouse. - // It is part of the MicroModal library that adds a scrim outside of a modal dialog that is not fullscreen, - // where clicking that scrim closes the overlay just like the close button. - // It should not have a visible focus rectangle. - &:focus { - outline: none; - } -} - -.is-menu-open .wp-block-navigation__responsive-close, -.is-menu-open .wp-block-navigation__responsive-dialog, -.is-menu-open .wp-block-navigation__responsive-container-content { - box-sizing: border-box; -} - -.wp-block-navigation__responsive-dialog { - position: relative; -} // Adjust open dialog top margin when admin-bar is visible. // Needs to be scoped to .is-menu-open, or it will shift the position of any other navigations that may be present. diff --git a/packages/block-library/src/style.scss b/packages/block-library/src/style.scss index 790e09535f4b69..8c6f5fcddc8110 100644 --- a/packages/block-library/src/style.scss +++ b/packages/block-library/src/style.scss @@ -24,6 +24,7 @@ @import "./list/style.scss"; @import "./media-text/style.scss"; @import "./navigation/style.scss"; +@import "./navigation/overlay.scss"; @import "./navigation-link/style.scss"; @import "./page-list/style.scss"; @import "./paragraph/style.scss"; From b976040fa9249bab5ef695bd2af309b37e28e600 Mon Sep 17 00:00:00 2001 From: Dave Smith Date: Fri, 10 Nov 2023 12:57:18 +0000 Subject: [PATCH 3/6] Add more comments --- packages/block-library/src/navigation/overlay.scss | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/packages/block-library/src/navigation/overlay.scss b/packages/block-library/src/navigation/overlay.scss index 3a04d0a0d68d41..32630575d114b1 100644 --- a/packages/block-library/src/navigation/overlay.scss +++ b/packages/block-library/src/navigation/overlay.scss @@ -37,6 +37,8 @@ } } + // STATE: overlay is open. + // ******************************************************** &.is-menu-open { display: flex; // Needs to be set to override "none". flex-direction: column; @@ -69,6 +71,8 @@ .wp-overlay-component__dialog { position: relative; + // STATE: overlay is open. + // ******************************************************** .is-menu-open & { // Quesiton: why is this conditionally applied? box-sizing: border-box; @@ -98,6 +102,8 @@ flex-direction: column; flex-wrap: nowrap; + // STATE: overlay is open. + // ******************************************************** .is-menu-open & { // Quesiton: why is this conditionally applied? box-sizing: border-box; @@ -140,6 +146,8 @@ .wp-overlay-component__open { display: flex; + // When the overlay is always "on" then do not + // hide the open button on smaller viewports. &:not(.always-shown) { @include break-small { display: none; @@ -158,6 +166,8 @@ right: 0; z-index: 2; // Needs to be above the modal z index itself. + // STATE: overlay is open. + // ******************************************************** .is-menu-open & { box-sizing: border-box; } @@ -171,6 +181,8 @@ .wp-overlay-component__maybe-redundant { width: 100%; + // STATE: overlay is open. + // ******************************************************** .has-modal-open & { // Try to inherit wide-width when defined, so the X can align to a top-right aligned menu. max-width: var(--wp--style--global--wide-size, 100%); From 90576adaddcc2ed530820e1278332191a0ae3f1a Mon Sep 17 00:00:00 2001 From: Dave Smith Date: Fri, 10 Nov 2023 12:59:53 +0000 Subject: [PATCH 4/6] Use overlay specific terminology for states --- .../src/navigation/edit/responsive-wrapper.js | 1 + packages/block-library/src/navigation/overlay.scss | 10 +++++----- 2 files changed, 6 insertions(+), 5 deletions(-) diff --git a/packages/block-library/src/navigation/edit/responsive-wrapper.js b/packages/block-library/src/navigation/edit/responsive-wrapper.js index 322c70232894f9..bb665c9e8dff79 100644 --- a/packages/block-library/src/navigation/edit/responsive-wrapper.js +++ b/packages/block-library/src/navigation/edit/responsive-wrapper.js @@ -48,6 +48,7 @@ export default function ResponsiveWrapper( { overlayBackgroundColor?.slug ) ]: !! overlayBackgroundColor?.slug, 'is-menu-open': isOpen, + 'is-overlay-open': isOpen, // alias for new overlay specific style 'hidden-by-default': isHiddenByDefault, } ); diff --git a/packages/block-library/src/navigation/overlay.scss b/packages/block-library/src/navigation/overlay.scss index 32630575d114b1..f009bf5ed7e0a7 100644 --- a/packages/block-library/src/navigation/overlay.scss +++ b/packages/block-library/src/navigation/overlay.scss @@ -28,7 +28,7 @@ bottom: 0; @include break-small() { - &:not(.hidden-by-default):not(.is-menu-open) { + &:not(.hidden-by-default):not(.is-overlay-open) { display: block; width: 100%; position: relative; @@ -39,7 +39,7 @@ // STATE: overlay is open. // ******************************************************** - &.is-menu-open { + &.is-overlay-open { display: flex; // Needs to be set to override "none". flex-direction: column; background-color: inherit; @@ -73,7 +73,7 @@ // STATE: overlay is open. // ******************************************************** - .is-menu-open & { + .is-overlay-open & { // Quesiton: why is this conditionally applied? box-sizing: border-box; } @@ -104,7 +104,7 @@ // STATE: overlay is open. // ******************************************************** - .is-menu-open & { + .is-overlay-open & { // Quesiton: why is this conditionally applied? box-sizing: border-box; } @@ -168,7 +168,7 @@ // STATE: overlay is open. // ******************************************************** - .is-menu-open & { + .is-overlay-open & { box-sizing: border-box; } } From 217c4eb483a390b8ea9a859342a9be2b43df392c Mon Sep 17 00:00:00 2001 From: Dave Smith Date: Fri, 10 Nov 2023 13:02:31 +0000 Subject: [PATCH 5/6] Conditionalise application of overlay specific styles to contents --- .../block-library/src/navigation/overlay.scss | 31 ++++++++++--------- 1 file changed, 16 insertions(+), 15 deletions(-) diff --git a/packages/block-library/src/navigation/overlay.scss b/packages/block-library/src/navigation/overlay.scss index f009bf5ed7e0a7..b1061a669c69c3 100644 --- a/packages/block-library/src/navigation/overlay.scss +++ b/packages/block-library/src/navigation/overlay.scss @@ -85,26 +85,27 @@ // Alias: wp-block-navigation__responsive-container-content // ******************************************************** .wp-overlay-component__content { - // Always align the contents of the menu to the top. - justify-content: flex-start; + // STATE: overlay is open. + // ******************************************************** + .is-overlay-open & { - // Add padding above to accommodate close button. - padding-top: calc(2rem + #{ $navigation-icon-size }); + // Always align the contents of the menu to the top. + justify-content: flex-start; - // Don't crop the focus style. - overflow: visible; + // Add padding above to accommodate close button. + padding-top: calc(2rem + #{ $navigation-icon-size }); - // Override the container flex layout settings - // because we want overlay menu to always display - // as a column. - display: flex; - flex-direction: column; - flex-wrap: nowrap; + // Don't crop the focus style. + overflow: visible; + + // Override the container flex layout settings + // because we want overlay menu to always display + // as a column. + display: flex; + flex-direction: column; + flex-wrap: nowrap; - // STATE: overlay is open. - // ******************************************************** - .is-overlay-open & { // Quesiton: why is this conditionally applied? box-sizing: border-box; } From 2b5f478e93ccec6bf788482478418e7978840bc7 Mon Sep 17 00:00:00 2001 From: Dave Smith Date: Fri, 10 Nov 2023 15:25:16 +0000 Subject: [PATCH 6/6] Refactor show/hide of close button --- .../src/navigation/edit/responsive-wrapper.js | 7 ++++- .../block-library/src/navigation/overlay.scss | 28 +++++++++++++++++-- .../block-library/src/navigation/style.scss | 8 ------ 3 files changed, 31 insertions(+), 12 deletions(-) diff --git a/packages/block-library/src/navigation/edit/responsive-wrapper.js b/packages/block-library/src/navigation/edit/responsive-wrapper.js index bb665c9e8dff79..41f7bbd2dd0157 100644 --- a/packages/block-library/src/navigation/edit/responsive-wrapper.js +++ b/packages/block-library/src/navigation/edit/responsive-wrapper.js @@ -105,7 +105,12 @@ export default function ResponsiveWrapper( { >