Keep submenus open onselect in the editor. (#29713)

WordPress · Mar 12, 2021 · eecaf69 · eecaf69
1 parent b8e4d7b
commit eecaf69
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 31 deletions.
diff --git a/packages/block-library/src/navigation-link/editor.scss b/packages/block-library/src/navigation-link/editor.scss
@@ -6,11 +6,30 @@
 	min-height: $button-size;
 }
 
+
+/**
+ * Submenus.
+ */
+
 // Show submenus above the sibling inserter.
-.has-child .wp-block-navigation-link__container {
-	z-index: z-index(".has-child .wp-block-navigation-link__container");
+.has-child {
+	cursor: pointer;
+
+	.wp-block-navigation-link__container {
+		z-index: z-index(".has-child .wp-block-navigation-link__container");
+	}
+
+	// Show on editor selected, even if on frontend it only stays open on focus-within.
+	&.is-selected,
+	&.has-child-selected {
+		> .wp-block-navigation-link__container {
+			visibility: visible;
+			opacity: 1;
+		}
+	}
 }
 
+
 /**
  * Navigation Items.
  */

diff --git a/packages/block-library/src/navigation-link/style.scss b/packages/block-library/src/navigation-link/style.scss
@@ -16,14 +16,19 @@
 	}
 
 	.wp-block-navigation-link__container {
-		border: $border-width solid rgba(0, 0, 0, 0.15);
+		border: 1px solid rgba(0, 0, 0, 0.15);
 		background-color: inherit;
 		color: inherit;
 		position: absolute;
 		left: 0;
 		top: 100%;
-		width: fit-content;
 		z-index: 2;
+		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;
@@ -63,30 +68,19 @@
 		}
 	}
 
-	// Show submenus on hover.
 	// Separating out hover and focus-within so hover works again on IE: https://davidwalsh.name/css-focus-within#comment-513401
 	// We will need to replace focus-within with a JS solution for IE keyboard support.
-	&:hover {
-		cursor: pointer;
-
-		> .wp-block-navigation-link__container {
-			visibility: visible;
-			opacity: 1;
-			display: flex;
-			flex-direction: column;
-		}
+
+	// Show submenus on hover.
+	&:hover > .wp-block-navigation-link__container {
+		visibility: visible;
+		opacity: 1;
 	}
 
 	// Keep submenus open when focus is within.
-	&:focus-within {
-		cursor: pointer;
-
-		> .wp-block-navigation-link__container {
-			visibility: visible;
-			opacity: 1;
-			display: flex;
-			flex-direction: column;
-		}
+	&:focus-within > .wp-block-navigation-link__container {
+		visibility: visible;
+		opacity: 1;
 	}
 }
 

diff --git a/packages/block-library/src/navigation/style.scss b/packages/block-library/src/navigation/style.scss
@@ -8,14 +8,6 @@
 		margin: 0;
 		padding: 0;
 	}
-
-	// Submenus.
-	.wp-block-navigation__container {
-		.wp-block-navigation__container {
-			align-items: normal;
-			min-width: 200px;
-		}
-	}
 }
 
 .wp-block-navigation__container {