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..fbe66d5a2ca45 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; @@ -396,7 +396,6 @@ border: none; padding-left: 32px; padding-right: 32px; - } // Space unfolded items using gap and padding for submenus.