Use correct classname for nested Navigation Link container (#29380)

* Move link styles to Navigation Link Block * Rename Navigation Link container class Closes: #21444
WordPress · Feb 27, 2021 · 5d2a5ec · 5d2a5ec
1 parent 1cf9554
commit 5d2a5ec
Show file tree

Hide file tree

Showing 4 changed files with 37 additions and 38 deletions.
diff --git a/packages/block-library/src/navigation-link/edit.js b/packages/block-library/src/navigation-link/edit.js
@@ -315,7 +315,7 @@ export default function NavigationLinkEdit( {
 
 	const innerBlocksProps = useInnerBlocksProps(
 		{
-			className: classnames( 'wp-block-navigation__container', {
+			className: classnames( 'wp-block-navigation-link__container', {
 				'is-parent-of-selected-block':
 					isParentOfSelectedBlock &&
 					// Don't select as parent of selected block while dragging.

diff --git a/packages/block-library/src/navigation-link/index.php b/packages/block-library/src/navigation-link/index.php
@@ -214,9 +214,8 @@ function render_block_core_navigation_link( $attributes, $content, $block ) {
 			$inner_blocks_html .= $inner_block->render();
 		}
 
-		// TODO - classname is wrong!
 		$html .= sprintf(
-			'<ul class="wp-block-navigation__container">%s</ul>',
+			'<ul class="wp-block-navigation-link__container">%s</ul>',
 			$inner_blocks_html
 		);
 	}

diff --git a/packages/block-library/src/navigation-link/style.scss b/packages/block-library/src/navigation-link/style.scss
@@ -4,34 +4,17 @@
 	position: relative;
 	margin: 0;
 
-	.wp-block-navigation__container:empty {
+	.wp-block-navigation-link__container:empty {
 		display: none;
 	}
 }
 
-.wp-block-navigation__container {
-	// Reset the default list styles
-	list-style: none;
-	margin: 0;
-	padding-left: 0;
-
-	// Horizontal layout
-	display: flex;
-	flex-wrap: wrap;
-
-	// Vertical layout
-
-	.is-vertical & {
-		display: block;
-	}
-}
-
 // Styles for submenu flyout
 .has-child {
 	> .wp-block-navigation-link__content {
 		padding-right: 0.5em;
 	}
-	.wp-block-navigation__container {
+	.wp-block-navigation-link__container {
 		border: $border-width solid rgba(0, 0, 0, 0.15);
 		background-color: inherit;
 		color: inherit;
@@ -57,7 +40,7 @@
 			left: 1.5em;
 
 			// Nested submenus sit to the left on large breakpoints
-			.wp-block-navigation__container {
+			.wp-block-navigation-link__container {
 				left: 100%;
 				top: -1px;
 
@@ -83,7 +66,7 @@
 	&:hover {
 		cursor: pointer;
 
-		> .wp-block-navigation__container {
+		> .wp-block-navigation-link__container {
 			visibility: visible;
 			opacity: 1;
 			display: flex;
@@ -94,7 +77,7 @@
 	&:focus-within {
 		cursor: pointer;
 
-		> .wp-block-navigation__container {
+		> .wp-block-navigation-link__container {
 			visibility: visible;
 			opacity: 1;
 			display: flex;
@@ -103,9 +86,22 @@
 	}
 }
 
+// Default background and font color
+.wp-block-navigation:not(.has-background) .wp-block-navigation__container {
+	.wp-block-navigation-link__container {
+		// Set a background color for submenus so that they're not transparent.
+		// NOTE TO DEVS - if refactoring this code, please double-check that
+		// submenus have a default background color, this feature has regressed
+		// several times, so care needs to be taken.
+		background-color: $white;
+		color: $gray-900;
+	}
+}
+
+
 // Force links to inherit text decoration applied to navigation block.
 .wp-block-navigation[style*="text-decoration"] {
-	.wp-block-navigation__container,
+	.wp-block-navigation-link__container,
 	.wp-block-navigation-link {
 		text-decoration: inherit;
 	}

diff --git a/packages/block-library/src/navigation/style.scss b/packages/block-library/src/navigation/style.scss
@@ -1,15 +1,3 @@
-// Default background and font color
-.wp-block-navigation:not(.has-background) .wp-block-navigation__container {
-	.wp-block-navigation__container {
-		// Set a background color for submenus so that they're not transparent.
-		// NOTE TO DEVS - if refactoring this code, please double-check that
-		// submenus have a default background color, this feature has regressed
-		// several times, so care needs to be taken.
-		background-color: $white;
-		color: $gray-900;
-	}
-}
-
 .wp-block-navigation .wp-block-navigation__container {
 	.wp-block-navigation__container {
 		align-items: normal;
@@ -20,6 +8,22 @@
 .wp-block-navigation__container {
 	// Vertically align child blocks, like Social Links or Search.
 	align-items: center;
+
+	// Reset the default list styles
+	list-style: none;
+	margin: 0;
+	padding-left: 0;
+
+	// Horizontal layout
+	display: flex;
+	flex-wrap: wrap;
+
+	// Vertical layout
+
+	.is-vertical & {
+		display: block;
+	}
+
 }
 
 .items-justified-center > ul {