From eecaf69762b6f65645e7a2f0bb9f7367f3da24de Mon Sep 17 00:00:00 2001
From: Joen A <1204802+jasmussen@users.noreply.github.com>
Date: Fri, 12 Mar 2021 10:14:44 +0100
Subject: [PATCH] Keep submenus open onselect in the editor. (#29713)

---
 .../src/navigation-link/editor.scss           | 23 ++++++++++--
 .../src/navigation-link/style.scss            | 36 ++++++++-----------
 .../block-library/src/navigation/style.scss   |  8 -----
 3 files changed, 36 insertions(+), 31 deletions(-)

diff --git a/packages/block-library/src/navigation-link/editor.scss b/packages/block-library/src/navigation-link/editor.scss
index 9c5a5082a82ad..f707565704c3b 100644
--- 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
index 8d94551e9dff3..400755b4930c9 100644
--- 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
index 79aa4bea2197d..e183ef7542eda 100644
--- 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 {