Try: Fix so submenus only take up space when visible. (#34382)

WordPress · Aug 30, 2021 · 9b5a401 · 9b5a401
1 parent 476d89c
commit 9b5a401
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 1 deletion.
diff --git a/packages/block-library/src/navigation-link/editor.scss b/packages/block-library/src/navigation-link/editor.scss
@@ -32,6 +32,9 @@
 			// We use important here because if the parent block is selected and submenus are present, they should always be visible.
 			visibility: visible !important;
 			opacity: 1 !important;
+			min-width: 200px !important;
+			height: auto !important;
+			width: auto !important;
 		}
 	}
 }

diff --git a/packages/block-library/src/navigation/style.scss b/packages/block-library/src/navigation/style.scss
@@ -107,13 +107,16 @@
 		display: flex;
 		flex-direction: column;
 		align-items: normal;
-		min-width: 200px;
 
 		// Hide until hover or focus within.
 		opacity: 0;
 		transition: opacity 0.1s linear;
 		visibility: hidden;
 
+		// Don't take up space when the menu is collapsed.
+		width: 0;
+		height: 0;
+
 		// Submenu items.
 		> .wp-block-navigation-item {
 			> a {
@@ -173,12 +176,18 @@
 	&:hover > .wp-block-navigation__submenu-container {
 		visibility: visible;
 		opacity: 1;
+		width: auto;
+		height: auto;
+		min-width: 200px;
 	}
 
 	// Keep submenus open when focus is within.
 	&:focus-within > .wp-block-navigation__submenu-container {
 		visibility: visible;
 		opacity: 1;
+		width: auto;
+		height: auto;
+		min-width: 200px;
 	}
 }