Show submenus above the sibling inserter.

WordPress · Mar 8, 2021 · e8d1ab3 · e8d1ab3
1 parent 63f4c72
commit e8d1ab3
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 10 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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;