From 801c028f5b68a19be017c36ad3f5dc17fa831dc2 Mon Sep 17 00:00:00 2001
From: jasmussen <joen@automattic.com>
Date: Tue, 2 Mar 2021 11:46:32 +0100
Subject: [PATCH] Show submenus above the sibling inserter.

---
 packages/base-styles/_z-index.scss            |  3 +++
 .../src/navigation-link/editor.scss           | 23 +++++++++++++------
 .../src/navigation-link/style.scss            |  2 +-
 .../block-library/src/navigation/editor.scss  |  3 +--
 4 files changed, 21 insertions(+), 10 deletions(-)

diff --git a/packages/base-styles/_z-index.scss b/packages/base-styles/_z-index.scss
index 69cad93229ba9b..0967b058d09974 100644
--- a/packages/base-styles/_z-index.scss
+++ b/packages/base-styles/_z-index.scss
@@ -41,6 +41,9 @@ $z-layers: (
 	".wp-block-cover__video-background": 0, // Video background inside cover block.
 	".wp-block-template-part__placeholder-preview-filter-input": 1,
 
+	// Navigation menu dropdown.
+	".has-child .wp-block-navigation-link__container": 28,
+
 	// Active pill button
 	".components-button {:focus or .is-primary}": 1,
 
diff --git a/packages/block-library/src/navigation-link/editor.scss b/packages/block-library/src/navigation-link/editor.scss
index f90eca8681debf..c3a1fd21f4bb4d 100644
--- a/packages/block-library/src/navigation-link/editor.scss
+++ b/packages/block-library/src/navigation-link/editor.scss
@@ -1,17 +1,23 @@
 // Normalize Link and edit containers, to look mostly the same.
-.wp-block-navigation-link__field .components-text-control__input.components-text-control__input,
+.wp-block-navigation-link__field .components-text-control__input.components-text-control__input, // @todo: this selector doesn't appear to target anything.
 .wp-block-navigation-link__container {
 	border-radius: 0;
+
 	// Make it the same height as the appender to prevent a jump. Maybe revisit this.
-	line-height: $button-size;
 	min-height: $button-size;
 }
 
+// Show submenus above the sibling inserter.
+.has-child .wp-block-navigation-link__container {
+	z-index: z-index(".has-child .wp-block-navigation-link__container");
+}
+
 /**
- * Adjust Navigation Item.
+ * Navigation Items.
  */
+
 .wp-block-navigation-link {
-	.block-editor-block-list__layout {
+	.wp-block-navigation-link__container {
 		display: block;
 	}
 
@@ -33,13 +39,13 @@
 	}
 }
 
-// Separator
+// Separator. @todo: this appears unused.
 .wp-block-navigation-link__separator {
 	margin: $grid-unit-10 0 $grid-unit-10;
 	border-top: $border-width solid $gray-300;
 }
 
-// Popover styles
+// Popover styles. @todo: these all appear unused.
 .components-popover.wp-block-navigation-link__dropdown-content {
 	margin-top: -1px;
 	margin-left: -4px;
@@ -55,7 +61,10 @@
 	}
 }
 
-// Menu item setup state, is shown when a menu item has no URL configured.
+/**
+ * Menu item setup state. Is shown when a menu item has no URL configured.
+ */
+
 .wp-block-navigation-link__placeholder {
 	position: relative;
 	cursor: pointer;
diff --git a/packages/block-library/src/navigation-link/style.scss b/packages/block-library/src/navigation-link/style.scss
index 3ae5c7200fd4eb..8d94551e9dff30 100644
--- a/packages/block-library/src/navigation-link/style.scss
+++ b/packages/block-library/src/navigation-link/style.scss
@@ -129,7 +129,7 @@
 	}
 }
 
-// All links
+// All links.
 .wp-block-navigation-link__content {
 	color: inherit;
 	padding: 0.5em 1em;
diff --git a/packages/block-library/src/navigation/editor.scss b/packages/block-library/src/navigation/editor.scss
index d933d8639230c1..af12015affd2d2 100644
--- a/packages/block-library/src/navigation/editor.scss
+++ b/packages/block-library/src/navigation/editor.scss
@@ -5,8 +5,7 @@
 // Undo default editor styles.
 // These need extra specificity.
 .editor-styles-wrapper .wp-block-navigation {
-	ul,
-	ol { // @todo: What does this target?
+	ul {
 		margin-bottom: 0;
 		margin-left: 0;
 		padding-left: 0;