@wordpress/block-library 5.0.1 → 6.0.1

package/src/navigation/style.scss

@@ -1,8 +1,11 @@
 // 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 +30,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 +52,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,25 +79,32 @@
 	}
 
 	// Submenu indicator.
-	.wp-block-page-list__submenu-icon,
-	.wp-block-navigation-link__submenu-icon {
+	.wp-block-navigation__submenu-icon {
+		align-self: center;
 		height: inherit;
+		line-height: 0;
 		margin-left: 6px;
 
+		// Affect the button as well.
+		padding: 0;
+		background-color: inherit;
+		color: currentColor;
+		border: none;
+
 		svg {
+			display: inline-block;
 			stroke: currentColor;
 		}
 	}
 }
 
-
 // Styles for submenu flyout.
 // These are separated out with reduced specificity to allow better inheritance from Global Styles.
 .wp-block-navigation .has-child {
 	// 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;
@@ -104,23 +112,29 @@
 		display: flex;
 		flex-direction: column;
 		align-items: normal;
-		min-width: 200px;
 
 		// Hide until hover or focus within.
 		opacity: 0;
 		transition: opacity 0.1s linear;
 		visibility: hidden;
 
+		// Don't take up space when the menu is collapsed.
+		width: 0;
+		height: 0;
+		overflow: hidden;
+
 		// Submenu items.
-		> .wp-block-pages-list__item,
-		> .wp-block-navigation-link {
+		> .wp-block-navigation-item {
 			> a {
 				display: flex;
 				flex-grow: 1;
 
+				// Without this, the changing to zero on hover-out can cause wrapping and
+				// result in an invinite hover/hover-out loop.
+				white-space: nowrap;
+
 				// 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 +154,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,82 +171,66 @@
 			}
 
 			// 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);
 			}
 		}
 	}
 
-
-	// Separating out hover and focus-within so hover works again on IE: https://davidwalsh.name/css-focus-within#comment-513401
-	// We will need to replace focus-within with a JS solution for IE keyboard support.
-
 	// Custom menu items.
-	// Show submenus on hover.
-	&:hover > .wp-block-navigation-link__container {
+	// Show submenus on hover unless they open on click.
+	&:where(:not(.open-on-click)):hover > .wp-block-navigation__submenu-container {
 		visibility: visible;
 		opacity: 1;
+		width: auto;
+		height: auto;
+		overflow: initial;
+		min-width: 200px;
 	}
 
 	// Keep submenus open when focus is within.
-	&:focus-within > .wp-block-navigation-link__container {
+	&:where(:not(.open-on-click):not(.open-on-hover-click)):focus-within > .wp-block-navigation__submenu-container {
 		visibility: visible;
 		opacity: 1;
+		width: auto;
+		height: auto;
+		min-width: 200px;
 	}
 
-	// Page list menu items.
-	&:hover {
-		cursor: pointer;
-
-		> .submenu-container {
-			visibility: visible;
-			opacity: 1;
-		}
-	}
-
-	&:focus-within {
-		cursor: pointer;
-
-		> .submenu-container {
-			visibility: visible;
-			opacity: 1;
-		}
+	// Show submenus on click.
+	.wp-block-navigation-submenu__toggle[aria-expanded="true"] + .wp-block-navigation__submenu-container {
+		visibility: visible;
+		opacity: 1;
+		width: auto;
+		height: auto;
+		min-width: 200px;
 	}
 }
 
 // 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;
 		}
 	}
 }
 
-
 /**
  * Margins
- * @todo: refactor this to use gap.
  */
 
 // 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 {
-	margin: 0 2em 0 0;
-
-	// Margin of right-most margin should be zero, for right aligned or justified items.
-	&:last-child {
-		margin-right: 0;
-	}
+.wp-block-navigation .wp-block-page-list,
+.wp-block-navigation__container {
+	gap: 0.5em 2em;
 }
 
 // Menu items with background.
@@ -241,19 +238,12 @@
 // That way if padding is set in theme.json, it still wins.
 // 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 {
-		margin: 0 0.5em 0 0;
-
-		// Don't show right margin on the last child.
-		&:last-child {
-			margin: 0;
-		}
+	.wp-block-navigation .wp-block-page-list,
+	.wp-block-navigation__container {
+		gap: 0 0.5em;
 	}
 }
 
-
 /**
  * Paddings
  */
@@ -274,11 +264,10 @@
 }
 
 // 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;
 }
 
-
 /**
  * Justifications.
  */
@@ -286,30 +275,29 @@
 // When justified space-between, open submenus leftward for last menu item.
 // When justified right, open all submenus leftwards.
 // This needs high specificity.
-.wp-block-navigation.items-justified-space-between .wp-block-page-list > .has-child:last-child,
-.wp-block-navigation.items-justified-space-between > .wp-block-navigation__container > .has-child:last-child,
-.wp-block-navigation.items-justified-right .wp-block-page-list > .has-child,
-.wp-block-navigation.items-justified-right > .wp-block-navigation__container .has-child {
-
-	// First submenu.
-	.submenu-container,
-	.wp-block-navigation-link__container {
-		left: auto;
-		right: 0;
-
-		// Nested submenus.
-		.submenu-container,
-		.wp-block-navigation-link__container {
+// On smaller breakpoints, menus open downwards.
+@include break-medium {
+	.wp-block-navigation.items-justified-space-between .wp-block-page-list > .has-child:last-child,
+	.wp-block-navigation.items-justified-space-between > .wp-block-navigation__container > .has-child:last-child,
+	.wp-block-navigation.items-justified-right .wp-block-page-list > .has-child,
+	.wp-block-navigation.items-justified-right .wp-block-navigation__container .has-child {
+		// First submenu.
+		.wp-block-navigation__submenu-container {
 			left: auto;
-			right: 100%;
+			right: 0;
+
+			// Nested submenus.
+			.wp-block-navigation__submenu-container {
+				left: auto;
+				right: 100%;
+			}
 		}
 	}
 }
 
 // Default background and font color.
 .wp-block-navigation:not(.has-background) {
-	.submenu-container, // This target items created by the Page List block.
-	.wp-block-navigation__container .wp-block-navigation-link__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
@@ -338,42 +326,68 @@
 	// Horizontal layout
 	display: flex;
 	flex-wrap: wrap;
+	flex: 1;
+}
 
-	// Vertical layout
-	.is-vertical & {
-		display: block;
-		flex-direction: column;
-		align-items: flex-start;
-	}
+// Vertical layout
+.is-vertical .wp-block-page-list, // Page list.
+.is-vertical .wp-block-navigation__container {
+	display: flex;
+	flex-direction: column;
+	align-items: flex-start;
 }
 
 // Justification.
 // These target the named container class to work even with the additional mobile menu containers.
-.items-justified-center .wp-block-navigation__container {
-	justify-content: center;
+.items-justified-center {
+	.wp-block-page-list,
+	.wp-block-navigation__container {
+		justify-content: center;
+	}
 }
 
-.items-justified-right .wp-block-navigation__container {
-	justify-content: flex-end;
+.items-justified-right {
+	.wp-block-page-list,
+	.wp-block-navigation__container {
+		justify-content: flex-end;
+	}
 }
 
-.items-justified-space-between .wp-block-navigation__container {
-	justify-content: space-between;
+.items-justified-space-between {
+	.wp-block-navigation__responsive-container-content,
+	.wp-block-navigation__container {
+		display: flex;
+		justify-content: space-between;
+		flex: 1;
+	}
 }
 
 // Vertical justification.
-.is-vertical.items-justified-center > ul {
+// The vertical variant does not support space-between.
+.is-vertical.items-justified-center {
 	align-items: center;
+
+	.wp-block-navigation-item {
+		justify-content: center;
+	}
+
+	.wp-block-page-list,
+	.wp-block-navigation__container {
+		align-items: center;
+	}
 }
 
-.is-vertical.items-justified-right > ul {
+.is-vertical.items-justified-right {
 	align-items: flex-end;
 
-	.wp-block-navigation-link,
-	.wp-block-pages-list__item {
-		margin-right: 0;
+	.wp-block-navigation-item {
 		justify-content: flex-end;
 	}
+
+	.wp-block-page-list,
+	.wp-block-navigation__container {
+		align-items: flex-end;
+	}
 }
 
 
@@ -407,40 +421,96 @@
 		// Give it a z-index just higher than the adminbar.
 		z-index: 100000;
 
-		padding: 24px;
+		// Add extra top padding so items don't conflict with close button.
+		padding: 72px 24px 24px 24px;
 		background-color: inherit;
 
-		.wp-block-navigation__container {
+		.wp-block-navigation__responsive-container-content {
 			display: flex;
 			flex-direction: column;
-			margin-left: auto;
-			margin-right: auto;
-			align-items: flex-start;
-			line-height: 48px;
 			padding: 0;
 
+			.wp-block-navigation__submenu-icon {
+				display: none;
+			}
+
+			// Always expand/unfold submenus inside the modal.
+			.has-child .submenu-container,
+			.has-child .wp-block-navigation__submenu-container {
+				// Unset CSS that hides dropdown menus.
+				opacity: 1;
+				visibility: visible;
+				height: auto;
+				width: auto;
+				overflow: initial;
+				min-width: 200px;
+
+				// Position and style.
+				position: static;
+				border: none;
+				padding-left: 32px;
+
+				.items-justified-right & {
+					padding-left: 0;
+					padding-right: 32px;
+				}
+			}
+
+			// Space unfolded items using gap and padding for submenus.
+			.wp-block-navigation__submenu-container,
+			.wp-block-navigation__container {
+				gap: 2rem;
+				padding-top: 2rem;
+				padding-bottom: 2rem;
+			}
+
+			// A default padding is added to submenu items. It's not appropriate inside the modal.
+			& :where(.wp-block-navigation__submenu-container) a {
+				padding: 0;
+			}
+
+			// Default justification.
+			.wp-block-navigation__container,
+			.wp-block-navigation-item,
 			.wp-block-page-list {
 				flex-direction: column;
+				justify-content: flex-start;
+				align-items: flex-start;
+
+				// Inherit parent justifications inside the menu.
+				.items-justified-right & {
+					align-items: flex-end;
+				}
+
+				.items-justified-center & {
+					align-items: center;
+				}
 			}
 		}
 
 		// 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;
 		}
+
+		// Override justification dropdown menu positioning rules.
+		.wp-block-navigation__submenu-container.wp-block-navigation__submenu-container.wp-block-navigation__submenu-container.wp-block-navigation__submenu-container {
+			right: auto;
+			left: auto;
+		}
 	}
 
 	@include break-small() {
 		&:not(.is-menu-open) {
 			display: flex;
 			flex-direction: row;
+			width: 100%;
 			position: relative;
+			z-index: 2;
 			background-color: inherit;
 
 			.wp-block-navigation__responsive-container-close {
@@ -450,8 +520,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;
 			}
 		}
@@ -459,7 +528,8 @@
 }
 
 // Default menu background and font color.
-.wp-block-navigation:not(.has-background) .wp-block-navigation__responsive-container.is-menu-open {
+.wp-block-navigation:not(.has-background)
+.wp-block-navigation__responsive-container.is-menu-open {
 	background-color: #fff;
 	color: #000;
 }
@@ -529,30 +599,6 @@
 	height: 100%;
 }
 
-// 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 {
-		display: none;
-	}
-
-	.has-child .submenu-container,
-	.has-child .wp-block-navigation-link__container {
-		position: relative;
-		opacity: 1;
-		visibility: visible;
-
-		padding: 0 0 0 32px;
-		border: none;
-	}
-
-	.wp-block-navigation-link,
-	.wp-block-pages-list__item {
-		flex-direction: column;
-		align-items: flex-start;
-	}
-}
-
 html.has-modal-open {
 	overflow: hidden;
 }

package/src/navigation/test/menu-items-to-blocks.js

@@ -84,7 +84,7 @@ describe( 'converting menu items to blocks', () => {
 				attr_title: '',
 				description: '',
 				type: 'custom',
-				type_label: 'Custom Link',
+				type_label: 'Submenu',
 				object: 'custom',
 				parent: 0,
 				menu_order: 1,
@@ -120,7 +120,7 @@ describe( 'converting menu items to blocks', () => {
 				attr_title: '',
 				description: '',
 				type: 'custom',
-				type_label: 'Custom Link',
+				type_label: 'Submenu',
 				object: 'custom',
 				parent: 1,
 				menu_order: 2,
@@ -138,7 +138,7 @@ describe( 'converting menu items to blocks', () => {
 				attr_title: '',
 				description: '',
 				type: 'custom',
-				type_label: 'Custom Link',
+				type_label: 'Submenu',
 				object: 'custom',
 				parent: 3,
 				menu_order: 1,
@@ -186,7 +186,7 @@ describe( 'converting menu items to blocks', () => {
 
 		expect( actual ).toEqual( [
 			expect.objectContaining( {
-				name: 'core/navigation-link',
+				name: 'core/navigation-submenu',
 				attributes: expect.objectContaining( {
 					label: 'Top Level',
 				} ),
@@ -199,13 +199,13 @@ describe( 'converting menu items to blocks', () => {
 						innerBlocks: [],
 					} ),
 					expect.objectContaining( {
-						name: 'core/navigation-link',
+						name: 'core/navigation-submenu',
 						attributes: expect.objectContaining( {
 							label: 'Child 2',
 						} ),
 						innerBlocks: [
 							expect.objectContaining( {
-								name: 'core/navigation-link',
+								name: 'core/navigation-submenu',
 								attributes: expect.objectContaining( {
 									label: 'Sub Child',
 								} ),

package/src/navigation/use-block-navigator.js

@@ -30,6 +30,7 @@ export default function useBlockNavigator( clientId, __experimentalFeatures ) {
 			onRequestClose={ () => {
 				setIsNavigationListOpen( false );
 			} }
+			shouldCloseOnClickOutside={ false }
 		>
 			<BlockNavigationList
 				clientId={ clientId }

package/src/navigation/variations.js

@@ -6,18 +6,17 @@ import { __ } from '@wordpress/i18n';
 const variations = [
 	{
 		name: 'horizontal',
-		isDefault: true,
 		title: __( 'Navigation (horizontal)' ),
 		description: __( 'Links shown in a row.' ),
 		attributes: { orientation: 'horizontal' },
-		scope: [ 'inserter', 'transform' ],
+		scope: [ 'transform' ],
 	},
 	{
 		name: 'vertical',
 		title: __( 'Navigation (vertical)' ),
 		description: __( 'Links shown in a column.' ),
 		attributes: { orientation: 'vertical' },
-		scope: [ 'inserter', 'transform' ],
+		scope: [ 'transform' ],
 	},
 ];