Refactor navigation block to use generic classnames.

packages/base-styles/_z-index.scss

@@ -43,8 +43,8 @@ $z-layers: (
 	".wp-block-template-part__placeholder-preview-filter-input": 1,
 
 	// Navigation menu dropdown.
-	".has-child .wp-block-navigation-link__container": 28,
-	".has-child:hover .wp-block-navigation-link__container": 29,
+	".has-child .wp-block-navigation__submenu-container": 28,
+	".has-child:hover .wp-block-navigation__submenu-container": 29,
 
 	// Active pill button
 	".components-button {:focus or .is-primary}": 1,

packages/block-library/src/navigation-link/editor.scss

@@ -1,5 +1,5 @@
 // Normalize Link and edit containers, to look mostly the same.
-.wp-block-navigation-link__container {
+.wp-block-navigation__submenu-container {
 	border-radius: 0;
 
 	// Make it the same height as the appender to prevent a jump.
@@ -15,22 +15,20 @@
 .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");
+	.wp-block-navigation__submenu-container {
+		z-index: z-index(".has-child .wp-block-navigation__submenu-container");
 	}
 
 	&:hover {
-		.submenu-container,
-		.wp-block-navigation-link__container {
-			z-index: z-index(".has-child:hover .wp-block-navigation-link__container");
+		.wp-block-navigation__submenu-container {
+			z-index: z-index(".has-child:hover .wp-block-navigation__submenu-container");
 		}
 	}
 
 	// Show on editor selected, even if on frontend it only stays open on focus-within.
 	&.is-selected,
 	&.has-child-selected {
-		> .wp-block-navigation-link__container {
+		> .wp-block-navigation__submenu-container {
 			// We use important here because if the parent block is selected and submenus are present, they should always be visible.
 			visibility: visible !important;
 			opacity: 1 !important;
@@ -44,11 +42,11 @@
  */
 
 .wp-block-navigation-link {
-	.wp-block-navigation-link__container {
+	.wp-block-navigation__submenu-container {
 		display: block;
 	}
 
-	.wp-block-navigation-link__content {
+	.wp-block-navigation-item__content {
 		cursor: text;
 	}
 
@@ -96,7 +94,7 @@
 	}
 
 	// This needs extra specificity.
-	&.wp-block-navigation-link__content {
+	&.wp-block-navigation-item__content {
 		cursor: pointer;
 	}
 }

packages/block-library/src/navigation/editor.scss

@@ -37,7 +37,7 @@
 
 // Only show the flyout on hover if the parent menu item is selected.
 .wp-block-navigation:not(.is-selected):not(.has-child-selected) .has-child:hover {
-	> .wp-block-navigation-link__container {
+	> .wp-block-navigation__submenu-container {
 		opacity: 0;
 		visibility: hidden;
 	}
@@ -47,7 +47,7 @@
 .has-child {
 	&.is-selected,
 	&.has-child-selected {
-		> .wp-block-navigation-link__container {
+		> .wp-block-navigation__submenu-container {
 			display: flex;
 			opacity: 1;
 			visibility: visible;
@@ -58,7 +58,7 @@
 // Show a submenu when generally dragging (is-dragging-components-draggable) if that
 // submenu has children (has-child) and is being dragged within (is-dragging-within).
 .is-dragging-components-draggable .has-child.is-dragging-within {
-	> .wp-block-navigation-link__container {
+	> .wp-block-navigation__submenu-container {
 		opacity: 1;
 		visibility: visible;
 	}

packages/block-library/src/navigation/style.scss

@@ -1,8 +1,12 @@
 // Navigation block and menu item styles.
-// This also styles navigation links inside the Page List block,
 // as that block is meant to behave as menu items when leveraged.
-// The CSS lives here so that it is output even if you only use a
-// Page List block inside your navigation block.
+// These styles also affect the Page List block when used inside your navigation block.
+//
+// Classes:
+// - .wp-block-navigation__submenu-container targets submenu containers.
+// - .wp-block-navigation-item targets the menu item itself.
+// - .wp-block-navigation-item__content targets the link inside a menu item.
+// - .wp-block-navigation__submenu-icon targets the chevron icon indicating submenus.
 .wp-block-navigation {
 	position: relative;
 
@@ -27,13 +31,12 @@
 	}
 
 	// Menu item container.
-	.wp-block-pages-list__item,
-	.wp-block-navigation-link {
+	.wp-block-navigation-item {
 		display: flex;
 		align-items: center;
 		position: relative;
 
-		.wp-block-navigation-link__container:empty {
+		.wp-block-navigation__submenu-container:empty {
 			display: none;
 		}
 	}
@@ -50,9 +53,8 @@
 	// Force links to inherit text decoration applied to navigation block.
 	// The extra selector adds specificity to ensure it works when user-set.
 	&[style*="text-decoration"] {
-		.wp-block-pages-list__item,
-		.wp-block-navigation-link__container,
-		.wp-block-navigation-link {
+		.wp-block-navigation-item,
+		.wp-block-navigation__submenu-container {
 			text-decoration: inherit;
 		}
 
@@ -78,8 +80,7 @@
 	}
 
 	// Submenu indicator.
-	.wp-block-page-list__submenu-icon,
-	.wp-block-navigation-link__submenu-icon {
+	.wp-block-navigation__submenu-icon {
 		height: inherit;
 		margin-left: 6px;
 
@@ -96,7 +97,7 @@
 	// We use :where to keep specificity minimal, yet still scope it to only the navigation block.
 	// That way if padding is set in theme.json, it still wins.
 	// https://css-tricks.com/almanac/selectors/w/where/
-	:where(.submenu-container, .wp-block-navigation-link__container) {
+	:where(.wp-block-navigation__submenu-container) {
 		background-color: inherit;
 		color: inherit;
 		position: absolute;
@@ -112,15 +113,13 @@
 		visibility: hidden;
 
 		// Submenu items.
-		> .wp-block-pages-list__item,
-		> .wp-block-navigation-link {
+		> .wp-block-navigation-item {
 			> a {
 				display: flex;
 				flex-grow: 1;
 
 				// Right-align the chevron in submenus.
-				.wp-block-page-list__submenu-icon,
-				.wp-block-navigation-link__submenu-icon {
+				.wp-block-navigation__submenu-icon {
 					margin-right: 0;
 					margin-left: auto;
 				}
@@ -140,8 +139,7 @@
 		// Nested submenus sit to the left on large breakpoints.
 		// On smaller breakpoints, they open vertically, accordion-style.
 		@include break-medium {
-			.submenu-container,
-			.wp-block-navigation-link__container {
+			.wp-block-navigation__submenu-container {
 				left: 100%;
 				top: -1px; // Border width.
 
@@ -158,8 +156,7 @@
 			}
 
 			// Reset the submenu indicator for horizontal flyouts.
-			.wp-block-page-list__submenu-icon svg,
-			.wp-block-navigation-link__submenu-icon svg {
+			.wp-block-navigation__submenu-icon svg {
 				transform: rotate(-90deg);
 			}
 		}
@@ -171,13 +168,13 @@
 
 	// Custom menu items.
 	// Show submenus on hover.
-	&:hover > .wp-block-navigation-link__container {
+	&:hover > .wp-block-navigation__submenu-container {
 		visibility: visible;
 		opacity: 1;
 	}
 
 	// Keep submenus open when focus is within.
-	&:focus-within > .wp-block-navigation-link__container {
+	&:focus-within > .wp-block-navigation__submenu-container {
 		visibility: visible;
 		opacity: 1;
 	}
@@ -203,15 +200,13 @@
 }
 
 // Submenu indentation when there's a background.
-.wp-block-navigation.has-background .has-child .submenu-container,
-.wp-block-navigation.has-background .has-child .wp-block-navigation-link__container {
+.wp-block-navigation.has-background .has-child .wp-block-navigation__submenu-container {
 	left: 0;
 	top: 100%;
 
 	// There's no border on submenus when there are backgrounds.
 	@include break-medium {
-		.submenu-container,
-		.wp-block-navigation-link__container {
+		.wp-block-navigation__submenu-container {
 			left: 100%;
 			top: 0;
 		}
@@ -226,8 +221,8 @@
 
 // Menu items with no background.
 .wp-block-page-list,
-.wp-block-page-list > .wp-block-pages-list__item,
-.wp-block-navigation__container > .wp-block-navigation-link {
+.wp-block-page-list > .wp-block-navigation-item,
+.wp-block-navigation__container > .wp-block-navigation-item {
 	margin: 0 2em 0 0;
 
 	// Margin of right-most margin should be zero, for right aligned or justified items.
@@ -242,8 +237,8 @@
 // https://css-tricks.com/almanac/selectors/w/where/
 .wp-block-navigation:where(.has-background) {
 	.wp-block-page-list,
-	.wp-block-page-list > .wp-block-pages-list__item,
-	.wp-block-navigation__container > .wp-block-navigation-link {
+	.wp-block-page-list > .wp-block-navigation-item,
+	.wp-block-navigation__container > .wp-block-navigation-item {
 		margin: 0 0.5em 0 0;
 
 		// Don't show right margin on the last child.
@@ -274,7 +269,7 @@
 }
 
 // Provide a default padding for submenus who should always have some, regardless of the top level menu items.
-.wp-block-navigation :where(.submenu-container, .wp-block-navigation-link__container) a {
+.wp-block-navigation :where(.wp-block-navigation__submenu-container) a {
 	padding: 0.5em 1em;
 }
 
@@ -292,14 +287,12 @@
 .wp-block-navigation.items-justified-right > .wp-block-navigation__container .has-child {
 
 	// First submenu.
-	.submenu-container,
-	.wp-block-navigation-link__container {
+	.wp-block-navigation__submenu-container {
 		left: auto;
 		right: 0;
 
 		// Nested submenus.
-		.submenu-container,
-		.wp-block-navigation-link__container {
+		.wp-block-navigation__submenu-container {
 			left: auto;
 			right: 100%;
 		}
@@ -308,8 +301,9 @@
 
 // Default background and font color.
 .wp-block-navigation:not(.has-background) {
+	// @todo: check this one separately.
 	.submenu-container, // This target items created by the Page List block.
-	.wp-block-navigation__container .wp-block-navigation-link__container {
+	.wp-block-navigation__container .wp-block-navigation__submenu-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
@@ -369,8 +363,7 @@
 .is-vertical.items-justified-right > ul {
 	align-items: flex-end;
 
-	.wp-block-navigation-link,
-	.wp-block-pages-list__item {
+	.wp-block-navigation-item {
 		margin-right: 0;
 		justify-content: flex-end;
 	}
@@ -427,10 +420,8 @@
 		// Remove background colors for items inside the overlay menu.
 		// Has to be !important to override global styles.
 		// @todo: We should revisit this so that the overlay colors can be applied, instead of the background.
-		.wp-block-pages-list__item .submenu-container,
-		.wp-block-navigation-link .wp-block-navigation-link__container,
-		.wp-block-pages-list__item,
-		.wp-block-navigation-link {
+		.wp-block-navigation-item .wp-block-navigation__submenu-container,
+		.wp-block-navigation-item {
 			color: inherit !important;
 			background: transparent !important;
 		}
@@ -450,8 +441,7 @@
 
 		&.is-menu-open {
 			// Override breakpoint-inherited submenu rules.
-			.submenu-container.submenu-container.submenu-container.submenu-container,
-			.wp-block-navigation-link__container.wp-block-navigation-link__container.wp-block-navigation-link__container.wp-block-navigation-link__container {
+			.wp-block-navigation__submenu-container.wp-block-navigation__submenu-container.wp-block-navigation__submenu-container.wp-block-navigation__submenu-container {
 				left: 0;
 			}
 		}
@@ -531,13 +521,12 @@
 
 // Always show submenus fully expanded inside the modal menu.
 .wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open {
-	.wp-block-page-list__submenu-icon,
-	.wp-block-navigation-link__submenu-icon {
+	.wp-block-navigation__submenu-icon {
 		display: none;
 	}
 
 	.has-child .submenu-container,
-	.has-child .wp-block-navigation-link__container {
+	.has-child .wp-block-navigation__submenu-container {
 		position: relative;
 		opacity: 1;
 		visibility: visible;
@@ -546,8 +535,7 @@
 		border: none;
 	}
 
-	.wp-block-navigation-link,
-	.wp-block-pages-list__item {
+	.wp-block-navigation-item {
 		flex-direction: column;
 		align-items: flex-start;
 	}

packages/block-library/src/page-list/style.scss

@@ -8,7 +8,7 @@
 
 	// Menu items generated by the page list do not get `has-[x]-background-color`,
 	// and must therefore inherit from the parent.
-	.wp-block-pages-list__item {
+	.wp-block-navigation-item {
 		background-color: inherit;
 	}