@wordpress/block-library 6.0.1 → 6.0.5

package/src/navigation/style.scss

@@ -9,18 +9,14 @@
 .wp-block-navigation {
 	position: relative;
 
-	// Horizontal layout
-	display: flex;
-	flex-wrap: wrap;
-	align-items: center;
-
-	// Vertical layout
-	&.is-vertical {
-		flex-direction: column;
-		align-items: flex-start;
+	// Normalize list styles.
+	ul {
+		margin-top: 0;
+		margin-bottom: 0;
+		margin-left: 0;
+		padding-left: 0;
 	}
 
-	// Normalize list styles.
 	ul,
 	ul li {
 		list-style: none;
@@ -41,12 +37,14 @@
 	}
 
 	// Menu item link.
-	// By targetting the markup directly we enable greater global styles compatibility.
-	// The extra container specificity is due to global styles outputting link styles that need overriding.
-	&.wp-block-navigation a {
-		// Inherit colors set by the block color definition.
+	// By adding low specificity, we enable compatibility with link colors set in theme.json,
+	// but still allow them to be overridden by user-set colors.
+	.wp-block-navigation-item__content {
 		color: inherit;
 		display: block;
+
+		// Set the default menu item padding to zero, to allow text-only buttons.
+		padding: 0;
 	}
 
 	// Force links to inherit text decoration applied to navigation block.
@@ -121,18 +119,14 @@
 		// Don't take up space when the menu is collapsed.
 		width: 0;
 		height: 0;
-		overflow: hidden;
+		overflow: hidden; // Overflow is necessary to set, otherwise submenu items will take up space.
 
 		// Submenu items.
 		> .wp-block-navigation-item {
-			> a {
+			> .wp-block-navigation-item__content {
 				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-navigation__submenu-icon {
 					margin-right: 0;
@@ -142,12 +136,12 @@
 		}
 
 		// Spacing in all submenus.
-		a {
+		.wp-block-navigation-item__content {
 			margin: 0;
 		}
 
 		// Submenu indentation when there's no background.
-		left: -1em;
+		left: -1px; // Border width.
 		top: 100%;
 
 		// Indentation for all submenus.
@@ -181,16 +175,17 @@
 	// Show submenus on hover unless they open on click.
 	&:where(:not(.open-on-click)):hover > .wp-block-navigation__submenu-container {
 		visibility: visible;
+		overflow: visible;
 		opacity: 1;
 		width: auto;
 		height: auto;
-		overflow: initial;
 		min-width: 200px;
 	}
 
 	// Keep submenus open when focus is within.
 	&:where(:not(.open-on-click):not(.open-on-hover-click)):focus-within > .wp-block-navigation__submenu-container {
 		visibility: visible;
+		overflow: visible;
 		opacity: 1;
 		width: auto;
 		height: auto;
@@ -200,6 +195,7 @@
 	// Show submenus on click.
 	.wp-block-navigation-submenu__toggle[aria-expanded="true"] + .wp-block-navigation__submenu-container {
 		visibility: visible;
+		overflow: visible;
 		opacity: 1;
 		width: auto;
 		height: auto;
@@ -228,9 +224,11 @@
  */
 
 // Menu items with no background.
+.wp-block-navigation,
 .wp-block-navigation .wp-block-page-list,
-.wp-block-navigation__container {
-	gap: 0.5em 2em;
+.wp-block-navigation__container,
+.wp-block-navigation__responsive-container-content {
+	gap: var(--wp--style--block-gap, 2em);
 }
 
 // Menu items with background.
@@ -238,9 +236,10 @@
 // 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-navigation .wp-block-page-list,
 	.wp-block-navigation__container {
-		gap: 0 0.5em;
+		gap: var(--wp--style--block-gap, 0.5em);
 	}
 }
 
@@ -252,19 +251,14 @@
 // That way if padding is set in theme.json, it still wins.
 // https://css-tricks.com/almanac/selectors/w/where/
 
-// Set the default menu item padding to zero, to allow text-only buttons.
-.wp-block-navigation a {
-	padding: 0;
-}
-
 // When the menu has a background, items have paddings, reduce margins to compensate.
 // Treat margins and paddings differently when the block has a background.
-.wp-block-navigation:where(.has-background) a {
+.wp-block-navigation:where(.has-background) .wp-block-navigation-item__content {
 	padding: 0.5em 1em;
 }
 
 // Provide a default padding for submenus who should always have some, regardless of the top level menu items.
-.wp-block-navigation :where(.wp-block-navigation__submenu-container) a {
+.wp-block-navigation :where(.wp-block-navigation__submenu-container) .wp-block-navigation-item__content {
 	padding: 0.5em 1em;
 }
 
@@ -310,8 +304,11 @@
 
 // Navigation block inner container.
 .wp-block-navigation__container {
-	// Vertically center child blocks, like Social Links or Search.
-	align-items: center;
+	display: flex;
+	flex-wrap: var(--layout-wrap, wrap);
+	flex-direction: var(--layout-direction, initial);
+	justify-content: var(--layout-justify, initial);
+	align-items: var(--layout-align, initial);
 
 	// Reset the default list styles
 	list-style: none;
@@ -322,75 +319,8 @@
 	.is-responsive {
 		display: none;
 	}
-
-	// Horizontal layout
-	display: flex;
-	flex-wrap: wrap;
-	flex: 1;
 }
 
-// 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-page-list,
-	.wp-block-navigation__container {
-		justify-content: center;
-	}
-}
-
-.items-justified-right {
-	.wp-block-page-list,
-	.wp-block-navigation__container {
-		justify-content: flex-end;
-	}
-}
-
-.items-justified-space-between {
-	.wp-block-navigation__responsive-container-content,
-	.wp-block-navigation__container {
-		display: flex;
-		justify-content: space-between;
-		flex: 1;
-	}
-}
-
-// Vertical justification.
-// 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 {
-	align-items: flex-end;
-
-	.wp-block-navigation-item {
-		justify-content: flex-end;
-	}
-
-	.wp-block-page-list,
-	.wp-block-navigation__container {
-		align-items: flex-end;
-	}
-}
-
-
 /**
  * Mobile menu.
  */
@@ -402,9 +332,14 @@
 	left: 0;
 	right: 0;
 	bottom: 0;
-	z-index: 1;
-	align-items: flex-start;
-	justify-content: flex-start;
+
+	.wp-block-navigation__responsive-container-content {
+		display: flex;
+		flex-wrap: var(--layout-wrap, wrap);
+		flex-direction: var(--layout-direction, initial);
+		justify-content: var(--layout-justify, initial);
+		align-items: var(--layout-align, initial);
+	}
 
 	// Overlay menu.
 	// Provide an opinionated default style for menu items inside.
@@ -412,7 +347,7 @@
 	// but otherwise provide a baseline.
 	// In a future version, we can explore more customizability.
 	&.is-menu-open {
-		display: flex;
+		display: flex; // Needs to be set to override "none".
 		flex-direction: column;
 
 		// Allow modal to scroll.
@@ -426,8 +361,19 @@
 		background-color: inherit;
 
 		.wp-block-navigation__responsive-container-content {
+			// Override the container flex layout settings
+			// because we want overlay menu to always display
+			// as a column.
 			display: flex;
 			flex-direction: column;
+			// Inherit alignment settings from container.
+			align-items: var(--layout-justification-setting, inherit);
+
+			// Always align the contents of the menu to the top.
+			justify-content: flex-start;
+
+			// Allow menu to scroll.
+			overflow: auto;
 			padding: 0;
 
 			.wp-block-navigation__submenu-icon {
@@ -449,42 +395,34 @@
 				position: static;
 				border: none;
 				padding-left: 32px;
-
-				.items-justified-right & {
-					padding-left: 0;
-					padding-right: 32px;
-				}
+				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;
+				gap: var(--wp--style--block-gap, 2em);
+
+				// Apply top padding to nested submenus.
+				.wp-block-navigation__submenu-container,
+				.wp-block-navigation__container {
+					padding-top: var(--wp--style--block-gap, 2em);
+				}
 			}
 
 			// A default padding is added to submenu items. It's not appropriate inside the modal.
-			& :where(.wp-block-navigation__submenu-container) a {
+			.wp-block-navigation-item__content {
 				padding: 0;
 			}
 
-			// Default justification.
+			// Default column display for overlay menu contents.
 			.wp-block-navigation__container,
 			.wp-block-navigation-item,
 			.wp-block-page-list {
+				display: flex;
 				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;
-				}
+				// Inherit alignment settings from container.
+				align-items: var(--layout-justification-setting, initial);
 			}
 		}
 
@@ -505,16 +443,17 @@
 	}
 
 	@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 {
-				display: none;
+		&:not(.hidden-by-default) {
+			&:not(.is-menu-open) {
+				display: block;
+				width: 100%;
+				position: relative;
+				z-index: 2;
+				background-color: inherit;
+
+				.wp-block-navigation__responsive-container-close {
+					display: none;
+				}
 			}
 		}
 
@@ -558,24 +497,10 @@
 .wp-block-navigation__responsive-container-open {
 	display: flex;
 
-	@include break-small {
-		display: none;
-	}
-
-	// Justify the button.
-	.items-justified-left & {
-		margin-left: 0;
-		margin-right: auto;
-	}
-
-	.items-justified-center & {
-		margin-left: auto;
-		margin-right: auto;
-	}
-
-	.items-justified-right & {
-		margin-left: auto;
-		margin-right: 0;
+	&:not(.always-shown) {
+		@include break-small {
+			display: none;
+		}
 	}
 }
 
@@ -602,3 +527,4 @@
 html.has-modal-open {
 	overflow: hidden;
 }
+

package/src/navigation/use-navigation-menu.js

@@ -0,0 +1,60 @@
+/**
+ * WordPress dependencies
+ */
+import { store as coreStore } from '@wordpress/core-data';
+import { useSelect } from '@wordpress/data';
+
+export default function useNavigationMenu( navigationMenuId ) {
+	return useSelect(
+		( select ) => {
+			const {
+				getEditedEntityRecord,
+				getEntityRecords,
+				hasFinishedResolution,
+			} = select( coreStore );
+
+			const navigationMenuSingleArgs = [
+				'postType',
+				'wp_navigation',
+				navigationMenuId,
+			];
+			const navigationMenu = navigationMenuId
+				? getEditedEntityRecord( ...navigationMenuSingleArgs )
+				: null;
+			const hasResolvedNavigationMenu = navigationMenuId
+				? hasFinishedResolution(
+						'getEditedEntityRecord',
+						navigationMenuSingleArgs
+				  )
+				: false;
+
+			const navigationMenuMultipleArgs = [
+				'postType',
+				'wp_navigation',
+				{ per_page: -1 },
+			];
+			const navigationMenus = getEntityRecords(
+				...navigationMenuMultipleArgs
+			);
+
+			const canSwitchNavigationMenu = navigationMenuId
+				? navigationMenus?.length > 1
+				: navigationMenus?.length > 0;
+
+			return {
+				isNavigationMenuResolved: hasResolvedNavigationMenu,
+				isNavigationMenuMissing:
+					! navigationMenuId ||
+					( hasResolvedNavigationMenu && ! navigationMenu ),
+				canSwitchNavigationMenu,
+				hasResolvedNavigationMenus: hasFinishedResolution(
+					'getEntityRecords',
+					navigationMenuMultipleArgs
+				),
+				navigationMenu,
+				navigationMenus,
+			};
+		},
+		[ navigationMenuId ]
+	);
+}

package/src/navigation/use-template-part-area-label.js

@@ -0,0 +1,78 @@
+/**
+ * WordPress dependencies
+ */
+import { store as blockEditorStore } from '@wordpress/block-editor';
+import { store as coreStore } from '@wordpress/core-data';
+import { useSelect } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+
+// TODO: this util should perhaps be refactored somewhere like core-data.
+import { createTemplatePartId } from '../template-part/edit/utils/create-template-part-id';
+
+export default function useTemplatePartAreaLabel( clientId ) {
+	return useSelect(
+		( select ) => {
+			// Use the lack of a clientId as an opportunity to bypass the rest
+			// of this hook.
+			if ( ! clientId ) {
+				return;
+			}
+
+			const { getBlock, getBlockParentsByBlockName } = select(
+				blockEditorStore
+			);
+
+			const withAscendingResults = true;
+			const parentTemplatePartClientIds = getBlockParentsByBlockName(
+				clientId,
+				'core/template-part',
+				withAscendingResults
+			);
+
+			if ( ! parentTemplatePartClientIds?.length ) {
+				return;
+			}
+
+			// FIXME: @wordpress/block-library should not depend on @wordpress/editor.
+			// Blocks can be loaded into a *non-post* block editor.
+			// This code is lifted from this file:
+			// packages/block-library/src/template-part/edit/advanced-controls.js
+			// eslint-disable-next-line @wordpress/data-no-store-string-literals
+			const definedAreas = select(
+				'core/editor'
+			).__experimentalGetDefaultTemplatePartAreas();
+			const { getEditedEntityRecord } = select( coreStore );
+
+			for ( const templatePartClientId of parentTemplatePartClientIds ) {
+				const templatePartBlock = getBlock( templatePartClientId );
+
+				// The 'area' usually isn't stored on the block, but instead
+				// on the entity.
+				const { theme, slug } = templatePartBlock.attributes;
+				const templatePartEntityId = createTemplatePartId(
+					theme,
+					slug
+				);
+				const templatePartEntity = getEditedEntityRecord(
+					'postType',
+					'wp_template_part',
+					templatePartEntityId
+				);
+
+				// Look up the `label` for the area in the defined areas so
+				// that an internationalized label can be used.
+				if ( templatePartEntity?.area ) {
+					return definedAreas.find(
+						( definedArea ) =>
+							definedArea.area !== 'uncategorized' &&
+							definedArea.area === templatePartEntity.area
+					)?.label;
+				}
+			}
+		},
+		[ clientId ]
+	);
+}

package/src/navigation/view.js

@@ -56,42 +56,43 @@ function toggleSubmenuOnClick( event ) {
 	}
 }
 
-const submenuButtons = document.querySelectorAll(
-	'.wp-block-navigation-submenu__toggle'
-);
-
-submenuButtons.forEach( function ( button ) {
-	button.addEventListener( 'click', toggleSubmenuOnClick );
-} );
-
-// Close on click outside.
-document.addEventListener( 'click', function ( event ) {
-	const navigationBlocks = document.querySelectorAll(
-		'.wp-block-navigation'
-	);
-	navigationBlocks.forEach( function ( block ) {
-		if ( ! block.contains( event.target ) ) {
-			closeSubmenus( block );
-		}
-	} );
-} );
-// Close on focus outside.
-document.addEventListener( 'keyup', function ( event ) {
-	const submenuBlocks = document.querySelectorAll(
-		'.wp-block-navigation-item.has-child'
-	);
-	submenuBlocks.forEach( function ( block ) {
-		if ( ! block.contains( event.target ) ) {
-			closeSubmenus( block );
-		}
-	} );
-} );
-
 // Necessary for some themes such as TT1 Blocks, where
 // scripts could be loaded before the body.
-window.onload = () =>
+window.onload = () => {
 	MicroModal.init( {
 		onShow: navigationToggleModal,
 		onClose: navigationToggleModal,
 		openClass: 'is-menu-open',
 	} );
+
+	const submenuButtons = document.querySelectorAll(
+		'.wp-block-navigation-submenu__toggle'
+	);
+
+	submenuButtons.forEach( function ( button ) {
+		button.addEventListener( 'click', toggleSubmenuOnClick );
+	} );
+
+	// Close on click outside.
+	document.addEventListener( 'click', function ( event ) {
+		const navigationBlocks = document.querySelectorAll(
+			'.wp-block-navigation'
+		);
+		navigationBlocks.forEach( function ( block ) {
+			if ( ! block.contains( event.target ) ) {
+				closeSubmenus( block );
+			}
+		} );
+	} );
+	// Close on focus outside.
+	document.addEventListener( 'keyup', function ( event ) {
+		const submenuBlocks = document.querySelectorAll(
+			'.wp-block-navigation-item.has-child'
+		);
+		submenuBlocks.forEach( function ( block ) {
+			if ( ! block.contains( event.target ) ) {
+				closeSubmenus( block );
+			}
+		} );
+	} );
+};

package/src/navigation-area/block.json

@@ -0,0 +1,27 @@
+{
+	"apiVersion": 2,
+	"name": "core/navigation-area",
+	"title": "Navigation Area",
+	"category": "theme",
+	"description": "Define a navigation area for your theme. The navigation block associated with this area will be automatically displayed.",
+	"keywords": [
+		"menu",
+		"navigation",
+		"links",
+		"location"
+	],
+	"textdomain": "default",
+	"attributes": {
+		"area": {
+			"type": "string",
+			"default": "primary"
+		}
+	},
+	"providesContext": {
+		"navigationArea": "area"
+	},
+	"supports": {
+		"html": false,
+		"inserter": true
+	}
+}