Fix navigation block classname issues (#34344)

* Fix missing class renames. * Add readme notes. * Fix flex issue.
WordPress · Aug 27, 2021 · 662dabc · 662dabc
1 parent f42fa3a
commit 662dabc
Show file tree

Hide file tree

Showing 5 changed files with 21 additions and 11 deletions.
diff --git a/packages/block-library/src/navigation-link/editor.scss b/packages/block-library/src/navigation-link/editor.scss
@@ -41,7 +41,7 @@
  * Navigation Items.
  */
 
-.wp-block-navigation-link {
+.wp-block-navigation-item {
 	.wp-block-navigation__submenu-container {
 		display: block;
 	}

diff --git a/packages/block-library/src/navigation/editor.scss b/packages/block-library/src/navigation/editor.scss
@@ -31,7 +31,7 @@
 
 // Low specificity default to ensure background color applies to submenus.
 .wp-block-navigation__container,
-.wp-block-navigation-link {
+.wp-block-navigation-item {
 	background-color: inherit;
 }
 
@@ -215,7 +215,7 @@ $color-control-label-height: 20px;
 
 	// Style skeleton elements to mostly match the metrics of actual menu items.
 	// Needs specificity.
-	.wp-block-navigation-link.wp-block-navigation-link {
+	.wp-block-navigation-item.wp-block-navigation-item {
 		position: relative;
 		min-width: 72px;
 
@@ -237,7 +237,7 @@ $color-control-label-height: 20px;
 	}
 
 
-	.wp-block-navigation-link.wp-block-navigation-link,
+	.wp-block-navigation-item.wp-block-navigation-item,
 	.wp-block-navigation-placeholder__preview-search-icon {
 		opacity: 0.3;
 	}
@@ -250,6 +250,7 @@ $color-control-label-height: 20px;
 		width: 0;
 		overflow: hidden;
 		flex-wrap: nowrap;
+		flex: 0;
 	}
 
 	// Hide entirely when vertical.

diff --git a/packages/block-library/src/navigation/placeholder-preview.js b/packages/block-library/src/navigation/placeholder-preview.js
@@ -6,9 +6,9 @@ import { Icon, search } from '@wordpress/icons';
 const PlaceholderPreview = () => {
 	return (
 		<ul className="wp-block-navigation-placeholder__preview wp-block-navigation__container">
-			<li className="wp-block-navigation-link">&#8203;</li>
-			<li className="wp-block-navigation-link">&#8203;</li>
-			<li className="wp-block-navigation-link">&#8203;</li>
+			<li className="wp-block-navigation-item">&#8203;</li>
+			<li className="wp-block-navigation-item">&#8203;</li>
+			<li className="wp-block-navigation-item">&#8203;</li>
 			<li className="wp-block-navigation-placeholder__preview-search-icon">
 				<Icon icon={ search } />
 			</li>

diff --git a/packages/components/src/navigation/README.md b/packages/components/src/navigation/README.md
@@ -44,6 +44,15 @@ const MyNavigation = () => (
 	</Navigation>
 );
 ```
+## CSS Classes leveraged
+
+The structural CSS for the navigation block targets generic classnames across menu items of multiple types including those automatically generated by the Page List block. Here are some of the notable classnames and what they are used for:
+
+- `.wp-block-navigation__submenu-container` is applied to submenus to main menu items.
+- `.wp-block-navigation-item` is applied to every menu item.
+- `.wp-block-navigation-item__content` is applied to the link inside a menu item.
+- `.wp-block-navigation-link__label` is applied to the innermost container around the menu item text label.
+- `.wp-block-navigation__submenu-icon` is applied to the submenu indicator (chevron).
 
 ## Navigation Props
 

diff --git a/packages/edit-navigation/src/components/editor/style.scss b/packages/edit-navigation/src/components/editor/style.scss
@@ -30,7 +30,7 @@
 		font-family: $default-font;
 
 		// Increase specificity.
-		.wp-block-navigation-link {
+		.wp-block-navigation-item {
 			display: block;
 
 			// Show submenus on click.
@@ -55,7 +55,7 @@
 
 			// Menu items.
 			// This needs high specificity to override inherited values.
-			&.wp-block-navigation-link.wp-block-navigation-link {
+			&.wp-block-navigation-item.wp-block-navigation-item {
 				margin-right: 0;
 			}
 
@@ -124,7 +124,7 @@
 		}
 
 		// Override inherited values to optimize menu items for the screen context.
-		.wp-block-navigation-link.has-child {
+		.wp-block-navigation-item.has-child {
 			cursor: default;
 			border-radius: $radius-block-ui;
 		}
@@ -137,7 +137,7 @@
 
 		// When editing a link with children, highlight the parent
 		// and adjust the spacing and submenu icon.
-		.wp-block-navigation-link.has-child.is-editing {
+		.wp-block-navigation-item.has-child.is-editing {
 			> .wp-block-navigation__container,
 			> .wp-block-navigation__submenu-container {
 				opacity: 1;