From 5a3d46c5f4bc436a087b3a665082190ec5be3ea0 Mon Sep 17 00:00:00 2001 From: jasmussen Date: Mon, 8 Nov 2021 12:05:49 +0100 Subject: [PATCH 1/2] Navigation: Extract small fixes, and refine border rules. --- .../src/navigation-link/editor.scss | 1 + .../src/navigation-submenu/style.scss | 1 + .../block-library/src/navigation/editor.scss | 1 + .../block-library/src/navigation/style.scss | 37 +++++++++++-------- 4 files changed, 25 insertions(+), 15 deletions(-) diff --git a/packages/block-library/src/navigation-link/editor.scss b/packages/block-library/src/navigation-link/editor.scss index 8b5a8a7941bed..60bfe5f304480 100644 --- a/packages/block-library/src/navigation-link/editor.scss +++ b/packages/block-library/src/navigation-link/editor.scss @@ -26,6 +26,7 @@ min-width: 200px !important; height: auto !important; width: auto !important; + overflow: visible !important; } } } diff --git a/packages/block-library/src/navigation-submenu/style.scss b/packages/block-library/src/navigation-submenu/style.scss index d78ae384144eb..8578c6990a192 100644 --- a/packages/block-library/src/navigation-submenu/style.scss +++ b/packages/block-library/src/navigation-submenu/style.scss @@ -13,6 +13,7 @@ button.wp-block-navigation-item__content { color: currentColor; font-size: inherit; font-family: inherit; + line-height: inherit; // Buttons default to center alignment. This becomes visible // when a menu item label is long enough to wrap. diff --git a/packages/block-library/src/navigation/editor.scss b/packages/block-library/src/navigation/editor.scss index ed5c91fca3db5..0d1e8b61c477c 100644 --- a/packages/block-library/src/navigation/editor.scss +++ b/packages/block-library/src/navigation/editor.scss @@ -37,6 +37,7 @@ .wp-block-navigation__container.is-parent-of-selected-block { visibility: visible; opacity: 1; + overflow: visible; } // Low specificity default to ensure background color applies to submenus. diff --git a/packages/block-library/src/navigation/style.scss b/packages/block-library/src/navigation/style.scss index ca6eb0b4b702a..ae546ee11d1b6 100644 --- a/packages/block-library/src/navigation/style.scss +++ b/packages/block-library/src/navigation/style.scss @@ -119,6 +119,7 @@ // Don't take up space when the menu is collapsed. width: 0; height: 0; + overflow: hidden; // Overflow is necessary to set, otherwise submenu items will take up space. // Submenu items. > .wp-block-navigation-item { @@ -126,10 +127,6 @@ display: flex; flex-grow: 1; - // Without this, the changing to zero on hover-out can cause wrapping and - // result in an invinite hover/hover-out loop. - white-space: nowrap; - // Right-align the chevron in submenus. .wp-block-navigation__submenu-icon { margin-right: 0; @@ -178,6 +175,7 @@ // Show submenus on hover unless they open on click. &:where(:not(.open-on-click)):hover > .wp-block-navigation__submenu-container { visibility: visible; + overflow: visible; opacity: 1; width: auto; height: auto; @@ -187,6 +185,7 @@ // Keep submenus open when focus is within. &:where(:not(.open-on-click):not(.open-on-hover-click)):focus-within > .wp-block-navigation__submenu-container { visibility: visible; + overflow: visible; opacity: 1; width: auto; height: auto; @@ -196,6 +195,7 @@ // Show submenus on click. .wp-block-navigation-submenu__toggle[aria-expanded="true"] + .wp-block-navigation__submenu-container { visibility: visible; + overflow: visible; opacity: 1; width: auto; height: auto; @@ -290,18 +290,25 @@ } // Default background and font color. -.wp-block-navigation:not(.has-background) { - .wp-block-navigation__submenu-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 - // several times, so care needs to be taken. - background-color: #fff; - color: #000; - border: 1px solid rgba(0, 0, 0, 0.15); - } +.wp-block-navigation .wp-block-navigation__submenu-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 + // several times, so care needs to be taken. + background-color: #fff; + color: #000; + + // Apply a border using an inset box-shadow instead of a border. + // That way, if an explicit background color is applied, it will be hidden + // behind the background color, so you don't end up with border and background. + box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15); + + // Box-shadows are removed in Windows High Contrast mode, but a transparent + // outline will show up as an opaque border. + outline: 1px solid transparent; } + // Navigation block inner container. .wp-block-navigation__container { display: flex; @@ -396,7 +403,7 @@ border: none; padding-left: 32px; padding-right: 32px; - + box-shadow: none; } // Space unfolded items using gap and padding for submenus. From d01849ae81e44f86e23fba43e74eaa399168b0aa Mon Sep 17 00:00:00 2001 From: jasmussen Date: Wed, 10 Nov 2021 09:49:08 +0100 Subject: [PATCH 2/2] Revert the box shadow change. --- .../block-library/src/navigation/style.scss | 28 +++++++------------ 1 file changed, 10 insertions(+), 18 deletions(-) diff --git a/packages/block-library/src/navigation/style.scss b/packages/block-library/src/navigation/style.scss index ae546ee11d1b6..fbe66d5a2ca45 100644 --- a/packages/block-library/src/navigation/style.scss +++ b/packages/block-library/src/navigation/style.scss @@ -290,25 +290,18 @@ } // Default background and font color. -.wp-block-navigation .wp-block-navigation__submenu-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 - // several times, so care needs to be taken. - background-color: #fff; - color: #000; - - // Apply a border using an inset box-shadow instead of a border. - // That way, if an explicit background color is applied, it will be hidden - // behind the background color, so you don't end up with border and background. - box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15); - - // Box-shadows are removed in Windows High Contrast mode, but a transparent - // outline will show up as an opaque border. - outline: 1px solid transparent; +.wp-block-navigation:not(.has-background) { + .wp-block-navigation__submenu-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 + // several times, so care needs to be taken. + background-color: #fff; + color: #000; + border: 1px solid rgba(0, 0, 0, 0.15); + } } - // Navigation block inner container. .wp-block-navigation__container { display: flex; @@ -403,7 +396,6 @@ border: none; padding-left: 32px; padding-right: 32px; - box-shadow: none; } // Space unfolded items using gap and padding for submenus.