Navigation: Fix arrow inheritance, polish (#30287)

* Navigation: Fix arrow inheritance, polish * Add in a margin fix.
WordPress · Mar 29, 2021 · 8e6a05e · 8e6a05e
1 parent 5d0db58
commit 8e6a05e
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 11 deletions.
diff --git a/packages/block-library/src/navigation-link/editor.scss b/packages/block-library/src/navigation-link/editor.scss
@@ -12,9 +12,10 @@
  */
 
 // Show submenus above the sibling inserter.
-.has-child {
+.wp-block-navigation .has-child {
 	cursor: pointer;
 
+	.submenu-container,
 	.wp-block-navigation-link__container {
 		z-index: z-index(".has-child .wp-block-navigation-link__container");
 	}

diff --git a/packages/block-library/src/navigation-link/icons.js b/packages/block-library/src/navigation-link/icons.js
@@ -11,10 +11,6 @@ export const ItemSubmenuIcon = () => (
 		viewBox="0 0 12 12"
 		fill="none"
 	>
-		<Path
-			d="M1.50002 4L6.00002 8L10.5 4"
-			stroke="#000000"
-			strokeWidth="1.5"
-		/>
+		<Path d="M1.50002 4L6.00002 8L10.5 4" strokeWidth="1.5" />
 	</SVG>
 );
diff --git a/packages/block-library/src/navigation-link/index.php b/packages/block-library/src/navigation-link/index.php
@@ -91,7 +91,7 @@ function block_core_navigation_link_build_css_font_sizes( $context ) {
  * @return string
  */
 function block_core_navigation_link_render_submenu_icon() {
-	return '<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12" fill="none" role="img" aria-hidden="true" focusable="false"><path d="M1.50002 4L6.00002 8L10.5 4" stroke="#000000" stroke-width="1.5"></path></svg>';
+	return '<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12" fill="none" role="img" aria-hidden="true" focusable="false"><path d="M1.50002 4L6.00002 8L10.5 4" stroke-width="1.5"></path></svg>';
 }
 
 /**

diff --git a/packages/block-library/src/navigation-link/style.scss b/packages/block-library/src/navigation-link/style.scss
@@ -15,6 +15,12 @@
 		}
 	}
 
+	// Margin when justified right or space-between.
+	.wp-block-navigation__container > .wp-block-pages-list__item:last-child,
+	.wp-block-navigation__container > .wp-block-navigation-link:last-child {
+		margin-right: 0;
+	}
+
 	// Menu item link.
 	.wp-block-pages-list__item__link,
 	.wp-block-navigation-link__content {
@@ -82,7 +88,6 @@
 
 		.submenu-container,
 		.wp-block-navigation-link__container {
-			border: 1px solid rgba(0, 0, 0, 0.15);
 			background-color: inherit;
 			color: inherit;
 			position: absolute;
@@ -115,13 +120,11 @@
 			}
 
 			@include break-medium {
-				left: 1.5em;
-
 				// Nested submenus sit to the left on large breakpoints.
 				.submenu-container,
 				.wp-block-navigation-link__container {
 					left: 100%;
-					top: -$border-width;
+					top: 0;
 
 					// Prevent the menu from disappearing when the mouse is over the gap
 					&::before {
@@ -190,5 +193,11 @@
 		// several times, so care needs to be taken.
 		background-color: #fff;
 		color: #000;
+		border: 1px solid rgba(0, 0, 0, 0.15);
+
+		.submenu-container,
+		.wp-block-navigation-link__container {
+			top: -1px;
+		}
 	}
 }