@wordpress/block-library 6.0.2 → 6.0.6

package/src/navigation/index.php

@@ -85,103 +85,6 @@ function block_core_navigation_build_css_font_sizes( $attributes ) {
 	return $font_sizes;
 }
 
-/**
- * Returns the menu items for a WordPress menu location.
- *
- * @param string $location The menu location.
- * @return array Menu items for the location.
- */
-function gutenberg_get_menu_items_at_location( $location ) {
-	if ( empty( $location ) ) {
-		return;
-	}
-
-	// Build menu data. The following approximates the code in
-	// `wp_nav_menu()` and `gutenberg_output_block_nav_menu`.
-
-	// Find the location in the list of locations, returning early if the
-	// location can't be found.
-	$locations = get_nav_menu_locations();
-	if ( ! isset( $locations[ $location ] ) ) {
-		return;
-	}
-
-	// Get the menu from the location, returning early if there is no
-	// menu or there was an error.
-	$menu = wp_get_nav_menu_object( $locations[ $location ] );
-	if ( ! $menu || is_wp_error( $menu ) ) {
-		return;
-	}
-
-	$menu_items = wp_get_nav_menu_items( $menu->term_id, array( 'update_post_term_cache' => false ) );
-	_wp_menu_item_classes_by_context( $menu_items );
-
-	return $menu_items;
-}
-
-/**
- * Sorts a standard array of menu items into a nested structure keyed by the
- * id of the parent menu.
- *
- * @param array $menu_items Menu items to sort.
- * @return array An array keyed by the id of the parent menu where each element
- *               is an array of menu items that belong to that parent.
- */
-function gutenberg_sort_menu_items_by_parent_id( $menu_items ) {
-	$sorted_menu_items = array();
-	foreach ( (array) $menu_items as $menu_item ) {
-		$sorted_menu_items[ $menu_item->menu_order ] = $menu_item;
-	}
-	unset( $menu_items, $menu_item );
-
-	$menu_items_by_parent_id = array();
-	foreach ( $sorted_menu_items as $menu_item ) {
-		$menu_items_by_parent_id[ $menu_item->menu_item_parent ][] = $menu_item;
-	}
-
-	return $menu_items_by_parent_id;
-}
-
-/**
- * Turns menu item data into a nested array of parsed blocks
- *
- * @param array $menu_items               An array of menu items that represent
- *                                        an individual level of a menu.
- * @param array $menu_items_by_parent_id  An array keyed by the id of the
- *                                        parent menu where each element is an
- *                                        array of menu items that belong to
- *                                        that parent.
- * @return array An array of parsed block data.
- */
-function gutenberg_parse_blocks_from_menu_items( $menu_items, $menu_items_by_parent_id ) {
-	if ( empty( $menu_items ) ) {
-		return array();
-	}
-
-	$blocks = array();
-
-	foreach ( $menu_items as $menu_item ) {
-		$block = array(
-			'blockName' => 'core/navigation-link',
-			'attrs'     => array(
-				'label' => $menu_item->title,
-				'url'   => $menu_item->url,
-			),
-		);
-
-		$block['innerBlocks'] = gutenberg_parse_blocks_from_menu_items(
-			isset( $menu_items_by_parent_id[ $menu_item->ID ] )
-					? $menu_items_by_parent_id[ $menu_item->ID ]
-					: array(),
-			$menu_items_by_parent_id
-		);
-
-		$blocks[] = $block;
-	}
-
-	return $blocks;
-}
-
 /**
  * Returns the top-level submenu SVG chevron icon.
  *
@@ -230,6 +133,7 @@ function render_block_core_navigation( $attributes, $content, $block ) {
 
 	$inner_blocks = $block->inner_blocks;
 
+	// If `__unstableLocation` is defined, create inner blocks from the classic menu assigned to that location.
 	if ( empty( $inner_blocks ) && array_key_exists( '__unstableLocation', $attributes ) ) {
 		$menu_items = gutenberg_get_menu_items_at_location( $attributes['__unstableLocation'] );
 		if ( empty( $menu_items ) ) {
@@ -238,24 +142,61 @@ function render_block_core_navigation( $attributes, $content, $block ) {
 
 		$menu_items_by_parent_id = gutenberg_sort_menu_items_by_parent_id( $menu_items );
 		$parsed_blocks           = gutenberg_parse_blocks_from_menu_items( $menu_items_by_parent_id[0], $menu_items_by_parent_id );
+		$inner_blocks            = new WP_Block_List( $parsed_blocks, $attributes );
+	}
+
+	if ( ! empty( $block->context['navigationArea'] ) ) {
+		$area    = $block->context['navigationArea'];
+		$mapping = get_option( 'wp_navigation_areas', array() );
+		if ( ! empty( $mapping[ $area ] ) ) {
+			$attributes['navigationMenuId'] = $mapping[ $area ];
+		}
+	}
+
+	// Load inner blocks from the navigation post.
+	if ( array_key_exists( 'navigationMenuId', $attributes ) ) {
+		$navigation_post = get_post( $attributes['navigationMenuId'] );
+		if ( ! isset( $navigation_post ) ) {
+			return '';
+		}
+
+		$parsed_blocks = parse_blocks( $navigation_post->post_content );
+
+		// 'parse_blocks' includes a null block with '\n\n' as the content when
+		// it encounters whitespace. This code strips it.
+		$compacted_blocks = array_filter(
+			$parsed_blocks,
+			function( $block ) {
+				return isset( $block['blockName'] );
+			}
+		);
 
 		// TODO - this uses the full navigation block attributes for the
 		// context which could be refined.
-		$inner_blocks = new WP_Block_List( $parsed_blocks, $attributes );
+		$inner_blocks = new WP_Block_List( $compacted_blocks, $attributes );
 	}
 
 	if ( empty( $inner_blocks ) ) {
 		return '';
 	}
 
+	// Restore legacy classnames for submenu positioning.
+	$layout_class = '';
+	if ( isset( $attributes['layout']['justifyContent'] ) ) {
+		if ( 'right' === $attributes['layout']['justifyContent'] ) {
+			$layout_class .= 'items-justified-right';
+		} elseif ( 'space-between' === $attributes['layout']['justifyContent'] ) {
+			$layout_class .= 'items-justified-space-between';
+		}
+	}
+
 	$colors     = block_core_navigation_build_css_colors( $attributes );
 	$font_sizes = block_core_navigation_build_css_font_sizes( $attributes );
 	$classes    = array_merge(
 		$colors['css_classes'],
 		$font_sizes['css_classes'],
-		( isset( $attributes['orientation'] ) && 'vertical' === $attributes['orientation'] ) ? array( 'is-vertical' ) : array(),
-		isset( $attributes['itemsJustification'] ) ? array( 'items-justified-' . $attributes['itemsJustification'] ) : array(),
-		$is_responsive_menu ? array( 'is-responsive' ) : array()
+		$is_responsive_menu ? array( 'is-responsive' ) : array(),
+		$layout_class ? array( $layout_class ) : array()
 	);
 
 	$inner_blocks_html = '';
@@ -314,7 +255,7 @@ function render_block_core_navigation( $attributes, $content, $block ) {
 
 	$responsive_container_markup = sprintf(
 		'<button aria-expanded="false" aria-haspopup="true" aria-label="%3$s" class="%6$s" data-micromodal-trigger="modal-%1$s"><svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" role="img" aria-hidden="true" focusable="false"><rect x="4" y="7.5" width="16" height="1.5" /><rect x="4" y="15" width="16" height="1.5" /></svg></button>
-			<div class="%5$s" id="modal-%1$s" aria-hidden="true">
+			<div class="%5$s" id="modal-%1$s">
 				<div class="wp-block-navigation__responsive-close" tabindex="-1" data-micromodal-close>
 					<div class="wp-block-navigation__responsive-dialog" role="dialog" aria-modal="true" aria-labelledby="modal-%1$s-title" >
 							<button aria-label="%4$s" data-micromodal-close class="wp-block-navigation__responsive-container-close"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" role="img" aria-hidden="true" focusable="false"><path d="M13 11.8l6.1-6.3-1-1-6.1 6.2-6.1-6.2-1 1 6.1 6.3-6.5 6.7 1 1 6.5-6.6 6.5 6.6 1-1z"></path></svg></button>

package/src/navigation/save.js

@@ -3,6 +3,12 @@
  */
 import { InnerBlocks } from '@wordpress/block-editor';
 
-export default function save() {
+export default function save( { attributes } ) {
+	if ( attributes.navigationMenuId ) {
+		// Avoid rendering inner blocks when a navigationMenuId is defined.
+		// When this id is defined the inner blocks are loaded from the
+		// `wp_navigation` entity rather than the hard-coded block html.
+		return;
+	}
 	return <InnerBlocks.Content />;
 }

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;
@@ -123,6 +119,7 @@
 		// Don't take up space when the menu is collapsed.
 		width: 0;
 		height: 0;
+		overflow: hidden; // Overflow is necessary to set, otherwise submenu items will take up space.
 
 		// Submenu items.
 		> .wp-block-navigation-item {
@@ -130,10 +127,6 @@
 				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;
@@ -182,6 +175,7 @@
 	// 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;
@@ -191,6 +185,7 @@
 	// 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;
@@ -230,7 +226,8 @@
 // Menu items with no background.
 .wp-block-navigation,
 .wp-block-navigation .wp-block-page-list,
-.wp-block-navigation__container {
+.wp-block-navigation__container,
+.wp-block-navigation__responsive-container-content {
 	gap: var(--wp--style--block-gap, 2em);
 }
 
@@ -272,18 +269,22 @@
 // When justified space-between, open submenus leftward for last menu item.
 // When justified right, open all submenus leftwards.
 // This needs high specificity.
-// 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: 0;
+.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: 0;
 
-			// Nested submenus.
+		// Nested submenus.
+		// On smaller breakpoints, nested menus open downwards.
+		.wp-block-navigation__submenu-container {
+			left: -1px; // Border width.
+			right: -1px;
+		}
+		@include break-medium {
 			.wp-block-navigation__submenu-container {
 				left: auto;
 				right: 100%;
@@ -307,8 +308,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;
@@ -319,78 +323,8 @@
 	.is-responsive {
 		display: none;
 	}
-
-	// Horizontal layout
-	display: flex;
-	flex-wrap: wrap;
-
-	.items-justified-space-between & {
-		flex-grow: 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 +336,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 +351,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 +365,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 +399,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.
-			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);
 			}
 		}
 
@@ -507,11 +449,10 @@
 	@include break-small() {
 		&:not(.hidden-by-default) {
 			&:not(.is-menu-open) {
-				display: flex;
-				flex-direction: row;
+				display: block;
 				width: 100%;
 				position: relative;
-				z-index: 2;
+				z-index: auto;
 				background-color: inherit;
 
 				.wp-block-navigation__responsive-container-close {
@@ -565,22 +506,6 @@
 			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;
-	}
 }
 
 // Button to close the menus.
@@ -606,3 +531,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 ]
+	);
+}