@wordpress/block-library 9.33.1 → 9.33.2

package/src/navigation/index.php

@@ -497,7 +497,7 @@ class WP_Navigation_Block_Renderer {
 		$close_button_directives         = '';
 		if ( $is_interactive ) {
 			$open_button_directives                  = '
-				data-wp-on-async--click="actions.openMenuOnClick"
+				data-wp-on--click="actions.openMenuOnClick"
 				data-wp-on--keydown="actions.handleMenuKeydown"
 			';
 			$responsive_container_directives         = '
@@ -505,7 +505,7 @@ class WP_Navigation_Block_Renderer {
 				data-wp-class--is-menu-open="state.isMenuOpen"
 				data-wp-watch="callbacks.initMenu"
 				data-wp-on--keydown="actions.handleMenuKeydown"
-				data-wp-on-async--focusout="actions.handleMenuFocusout"
+				data-wp-on--focusout="actions.handleMenuFocusout"
 				tabindex="-1"
 			';
 			$responsive_dialog_directives            = '
@@ -514,7 +514,7 @@ class WP_Navigation_Block_Renderer {
 				data-wp-bind--role="state.roleAttribute"
 			';
 			$close_button_directives                 = '
-				data-wp-on-async--click="actions.closeMenuOnClick"
+				data-wp-on--click="actions.closeMenuOnClick"
 			';
 			$responsive_container_content_directives = '
 				data-wp-watch="callbacks.focusFirstElement"
@@ -830,8 +830,8 @@ function block_core_navigation_add_directives_to_submenu( $tags, $block_attribut
 		$tags->set_attribute( 'tabindex', '-1' );
 
 		if ( ! isset( $block_attributes['openSubmenusOnClick'] ) || false === $block_attributes['openSubmenusOnClick'] ) {
-			$tags->set_attribute( 'data-wp-on-async--mouseenter', 'actions.openMenuOnHover' );
-			$tags->set_attribute( 'data-wp-on-async--mouseleave', 'actions.closeMenuOnHover' );
+			$tags->set_attribute( 'data-wp-on--mouseenter', 'actions.openMenuOnHover' );
+			$tags->set_attribute( 'data-wp-on--mouseleave', 'actions.closeMenuOnHover' );
 		}
 
 		// Add directives to the toggle submenu button.
@@ -841,7 +841,7 @@ function block_core_navigation_add_directives_to_submenu( $tags, $block_attribut
 				'class_name' => 'wp-block-navigation-submenu__toggle',
 			)
 		) ) {
-			$tags->set_attribute( 'data-wp-on-async--click', 'actions.toggleMenuOnClick' );
+			$tags->set_attribute( 'data-wp-on--click', 'actions.toggleMenuOnClick' );
 			$tags->set_attribute( 'data-wp-bind--aria-expanded', 'state.isMenuOpen' );
 			// The `aria-expanded` attribute for SSR is already added in the submenu block.
 		}
@@ -852,7 +852,7 @@ function block_core_navigation_add_directives_to_submenu( $tags, $block_attribut
 				'class_name' => 'wp-block-navigation__submenu-container',
 			)
 		) ) {
-			$tags->set_attribute( 'data-wp-on-async--focus', 'actions.openMenuOnFocus' );
+			$tags->set_attribute( 'data-wp-on--focus', 'actions.openMenuOnFocus' );
 		}
 
 		// Iterate through subitems if exist.

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

@@ -4,6 +4,11 @@
 import { createBlock, parse } from '@wordpress/blocks';
 import { applyFilters } from '@wordpress/hooks';
 
+/**
+ * Internal dependencies
+ */
+import { buildNavigationLinkEntityBinding } from '../navigation-link/shared/use-entity-binding';
+
 /**
  * Convert a flat menu item structure to a nested blocks structure.
  *
@@ -145,12 +150,14 @@ function menuItemToBlockAttributes(
 		object = 'tag';
 	}
 
+	const inferredKind = menuItemTypeField?.replace( '_', '-' ) || 'custom';
+
 	return {
 		label: menuItemTitleField?.rendered || '',
 		...( object?.length && {
 			type: object,
 		} ),
-		kind: menuItemTypeField?.replace( '_', '-' ) || 'custom',
+		kind: inferredKind,
 		url: url || '',
 		...( xfn?.length &&
 			xfn.join( ' ' ).trim() && {
@@ -165,8 +172,11 @@ function menuItemToBlockAttributes(
 			title: attr_title,
 		} ),
 		...( object_id &&
-			'custom' !== object && {
+			( inferredKind === 'post-type' || inferredKind === 'taxonomy' ) && {
 				id: object_id,
+				metadata: {
+					bindings: buildNavigationLinkEntityBinding( inferredKind ),
+				},
 			} ),
 		/* eslint-enable camelcase */
 		...( description?.length && {

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

@@ -371,4 +371,148 @@ describe( 'converting menu items to blocks', () => {
 		const { innerBlocks: actual } = menuItemsToBlocks( [] );
 		expect( actual ).toEqual( [] );
 	} );
+
+	it( 'adds entity bindings for non-custom menu items', () => {
+		const { innerBlocks: actual } = menuItemsToBlocks( [
+			{
+				id: 1,
+				title: {
+					raw: 'Page Item',
+					rendered: 'Page Item',
+				},
+				url: 'http://localhost:8889/page-item/',
+				attr_title: '',
+				description: '',
+				type: 'post_type',
+				type_label: 'Page',
+				object: 'page',
+				object_id: 123,
+				parent: 0,
+				menu_order: 1,
+				target: '',
+				classes: [ '' ],
+				xfn: [ '' ],
+			},
+			{
+				id: 2,
+				title: {
+					raw: 'Category Item',
+					rendered: 'Category Item',
+				},
+				url: 'http://localhost:8889/category/category-item/',
+				attr_title: '',
+				description: '',
+				type: 'taxonomy',
+				type_label: 'Category',
+				object: 'category',
+				object_id: 456,
+				parent: 0,
+				menu_order: 2,
+				target: '',
+				classes: [ '' ],
+				xfn: [ '' ],
+			},
+			{
+				id: 3,
+				title: {
+					raw: 'Custom Item',
+					rendered: 'Custom Item',
+				},
+				url: 'http://localhost:8889/custom-link/',
+				attr_title: '',
+				description: '',
+				type: 'custom',
+				type_label: 'Custom Link',
+				object: 'custom',
+				parent: 0,
+				menu_order: 3,
+				target: '',
+				classes: [ '' ],
+				xfn: [ '' ],
+			},
+		] );
+
+		expect( actual ).toEqual( [
+			expect.objectContaining( {
+				name: 'core/navigation-link',
+				attributes: expect.objectContaining( {
+					label: 'Page Item',
+					id: 123,
+					metadata: {
+						bindings: {
+							url: {
+								source: 'core/post-data',
+								args: {
+									field: 'link',
+								},
+							},
+						},
+					},
+				} ),
+				innerBlocks: [],
+			} ),
+			expect.objectContaining( {
+				name: 'core/navigation-link',
+				attributes: expect.objectContaining( {
+					label: 'Category Item',
+					id: 456,
+					metadata: {
+						bindings: {
+							url: {
+								source: 'core/term-data',
+								args: {
+									field: 'link',
+								},
+							},
+						},
+					},
+				} ),
+				innerBlocks: [],
+			} ),
+			expect.objectContaining( {
+				name: 'core/navigation-link',
+				attributes: expect.objectContaining( {
+					label: 'Custom Item',
+					// Custom items should NOT have id, metadata, or bindings
+				} ),
+				innerBlocks: [],
+			} ),
+		] );
+
+		// Verify custom item does NOT have bindings
+		expect( actual[ 2 ].attributes ).not.toHaveProperty( 'id' );
+		expect( actual[ 2 ].attributes ).not.toHaveProperty( 'metadata' );
+	} );
+
+	it( 'does not add bindings for invalid kinds even when object_id is present', () => {
+		const { innerBlocks: actual } = menuItemsToBlocks( [
+			{
+				id: 10,
+				title: {
+					raw: 'Invalid Kind Item',
+					rendered: 'Invalid Kind Item',
+				},
+				url: 'http://localhost:8889/invalid-kind-item/',
+				attr_title: '',
+				description: '',
+				type: 'invalid', // becomes inferred kind 'invalid'
+				type_label: 'Invalid',
+				object: 'page',
+				object_id: 999,
+				parent: 0,
+				menu_order: 1,
+				target: '',
+				classes: [ '' ],
+				xfn: [ '' ],
+			},
+		] );
+
+		expect( actual ).toHaveLength( 1 );
+		expect( actual[ 0 ].name ).toBe( 'core/navigation-link' );
+		// Should not set id or metadata when kind is not supported
+		expect( actual[ 0 ].attributes ).not.toHaveProperty( 'id' );
+		expect( actual[ 0 ].attributes ).not.toHaveProperty( 'metadata' );
+		// Label should still be set correctly
+		expect( actual[ 0 ].attributes.label ).toBe( 'Invalid Kind Item' );
+	} );
 } );

package/src/navigation/view.js

@@ -144,7 +144,7 @@ const { state, actions } = store(
 					}
 				}
 			} ),
-			handleMenuFocusout( event ) {
+			handleMenuFocusout: withSyncEvent( ( event ) => {
 				const { modal, type } = getContext();
 				// If focus is outside modal, and in the document, close menu
 				// event.target === The element losing focus
@@ -162,7 +162,7 @@ const { state, actions } = store(
 					actions.closeMenu( 'click' );
 					actions.closeMenu( 'focus' );
 				}
-			},
+			} ),
 
 			openMenu( menuOpenedOn = 'click' ) {
 				const { type } = getContext();

package/src/post-date/block.json

@@ -4,7 +4,7 @@
 	"name": "core/post-date",
 	"title": "Date",
 	"category": "theme",
-	"description": "Display the publish date for an entry such as a post or page.",
+	"description": "Display a custom date.",
 	"textdomain": "default",
 	"attributes": {
 		"datetime": {

package/src/post-date/deprecated.js

@@ -102,7 +102,11 @@ const v3 = {
 		};
 	},
 	isEligible( attributes ) {
-		return !! attributes?.metadata?.bindings?.datetime?.args?.key;
+		return (
+			attributes?.metadata?.bindings?.datetime?.source ===
+				'core/post-data' &&
+			!! attributes?.metadata?.bindings?.datetime?.args?.key
+		);
 	},
 };
 

package/src/post-date/edit.js

@@ -35,6 +35,7 @@ import { __, _x, sprintf } from '@wordpress/i18n';
 import { pencil } from '@wordpress/icons';
 import { DOWN } from '@wordpress/keycodes';
 import { useSelect, useDispatch } from '@wordpress/data';
+import { store as blocksStore } from '@wordpress/blocks';
 
 /**
  * Internal dependencies
@@ -42,14 +43,12 @@ import { useSelect, useDispatch } from '@wordpress/data';
 import { useToolsPanelDropdownMenuProps } from '../utils/hooks';
 
 export default function PostDateEdit( {
-	attributes: { datetime, textAlign, format, isLink, metadata },
+	attributes,
 	context: { postType: postTypeSlug, queryId },
 	setAttributes,
+	name,
 } ) {
-	const displayType =
-		metadata?.bindings?.datetime?.source === 'core/post-data' &&
-		metadata?.bindings?.datetime?.args?.field;
-
+	const { datetime, textAlign, format, isLink } = attributes;
 	const blockProps = useBlockProps( {
 		className: clsx( {
 			[ `has-text-align-${ textAlign }` ]: textAlign,
@@ -90,7 +89,6 @@ export default function PostDateEdit( {
 		( select ) => {
 			const { getPostType, getEntityRecord } = select( coreStore );
 			const siteSettings = getEntityRecord( 'root', 'site' );
-
 			return {
 				siteFormat: siteSettings?.date_format,
 				siteTimeFormat: siteSettings?.time_format,
@@ -99,6 +97,12 @@ export default function PostDateEdit( {
 		},
 		[ postTypeSlug ]
 	);
+	const activeBlockVariationName = useSelect(
+		( select ) =>
+			select( blocksStore ).getActiveBlockVariation( name, attributes )
+				?.name,
+		[ name, attributes ]
+	);
 
 	const blockEditingMode = useBlockEditingMode();
 
@@ -120,7 +124,6 @@ export default function PostDateEdit( {
 			</a>
 		);
 	}
-
 	return (
 		<>
 			{ ( blockEditingMode === 'default' ||
@@ -133,15 +136,17 @@ export default function PostDateEdit( {
 						} }
 					/>
 
-					{ displayType !== 'modified' &&
-						! isDescendentOfQueryLoop && (
+					{ activeBlockVariationName !== 'post-date-modified' &&
+						( ! isDescendentOfQueryLoop ||
+							! activeBlockVariationName ) && (
 							<ToolbarGroup>
 								<Dropdown
 									popoverProps={ popoverProps }
 									renderContent={ ( { onClose } ) => (
 										<PublishDateTimePicker
 											title={
-												displayType === 'date'
+												activeBlockVariationName ===
+												'post-date'
 													? __( 'Publish Date' )
 													: __( 'Date' )
 											}

package/src/post-date/variations.js

@@ -2,7 +2,6 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { postDate } from '@wordpress/icons';
 
 const variations = [
 	{
@@ -19,13 +18,12 @@ const variations = [
 				},
 			},
 		},
-		scope: [ 'block', 'inserter', 'transform' ],
+		scope: [ 'inserter', 'transform' ],
 		isActive: ( blockAttributes ) =>
 			blockAttributes?.metadata?.bindings?.datetime?.source ===
 				'core/post-data' &&
 			blockAttributes?.metadata?.bindings?.datetime?.args?.field ===
 				'date',
-		icon: postDate,
 	},
 	{
 		name: 'post-date-modified',
@@ -42,13 +40,12 @@ const variations = [
 			},
 			className: 'wp-block-post-date__modified-date',
 		},
-		scope: [ 'block', 'inserter', 'transform' ],
+		scope: [ 'inserter', 'transform' ],
 		isActive: ( blockAttributes ) =>
 			blockAttributes?.metadata?.bindings?.datetime?.source ===
 				'core/post-data' &&
 			blockAttributes?.metadata?.bindings?.datetime?.args?.field ===
 				'modified',
-		icon: postDate,
 	},
 ];
 

package/src/post-template/edit.js

@@ -23,7 +23,19 @@ import { list, grid } from '@wordpress/icons';
 
 const TEMPLATE = [
 	[ 'core/post-title' ],
-	[ 'core/post-date' ],
+	[
+		'core/post-date',
+		{
+			metadata: {
+				bindings: {
+					datetime: {
+						source: 'core/post-data',
+						args: { field: 'date' },
+					},
+				},
+			},
+		},
+	],
 	[ 'core/post-excerpt' ],
 ];
 

package/src/query/index.js

@@ -51,6 +51,16 @@ export const settings = {
 					},
 					{
 						name: 'core/post-date',
+						attributes: {
+							metadata: {
+								bindings: {
+									datetime: {
+										source: 'core/post-data',
+										args: { field: 'date' },
+									},
+								},
+							},
+						},
 					},
 					{
 						name: 'core/post-excerpt',

package/src/query/variations.js

@@ -13,6 +13,20 @@ import {
 	imageDateTitle,
 } from './icons';
 
+const postDate = [
+	'core/post-date',
+	{
+		metadata: {
+			bindings: {
+				datetime: {
+					source: 'core/post-data',
+					args: { field: 'date' },
+				},
+			},
+		},
+	},
+];
+
 const variations = [
 	{
 		name: 'title-date',
@@ -20,11 +34,7 @@ const variations = [
 		icon: titleDate,
 		attributes: {},
 		innerBlocks: [
-			[
-				'core/post-template',
-				{},
-				[ [ 'core/post-title' ], [ 'core/post-date' ] ],
-			],
+			[ 'core/post-template', {}, [ [ 'core/post-title' ], postDate ] ],
 			[ 'core/query-pagination' ],
 			[ 'core/query-no-results' ],
 		],
@@ -55,11 +65,7 @@ const variations = [
 			[
 				'core/post-template',
 				{},
-				[
-					[ 'core/post-title' ],
-					[ 'core/post-date' ],
-					[ 'core/post-excerpt' ],
-				],
+				[ [ 'core/post-title' ], postDate, [ 'core/post-excerpt' ] ],
 			],
 			[ 'core/query-pagination' ],
 			[ 'core/query-no-results' ],
@@ -77,7 +83,7 @@ const variations = [
 				{},
 				[
 					[ 'core/post-featured-image' ],
-					[ 'core/post-date' ],
+					postDate,
 					[ 'core/post-title' ],
 				],
 			],

package/src/query-pagination-next/index.php

@@ -77,7 +77,7 @@ function render_block_core_query_pagination_next( $attributes, $content, $block
 		) ) {
 			$p->set_attribute( 'data-wp-key', 'query-pagination-next' );
 			$p->set_attribute( 'data-wp-on--click', 'core/query::actions.navigate' );
-			$p->set_attribute( 'data-wp-on-async--mouseenter', 'core/query::actions.prefetch' );
+			$p->set_attribute( 'data-wp-on--mouseenter', 'core/query::actions.prefetch' );
 			$p->set_attribute( 'data-wp-watch', 'core/query::callbacks.prefetch' );
 			$content = $p->get_updated_html();
 		}

package/src/query-pagination-previous/index.php

@@ -70,7 +70,7 @@ function render_block_core_query_pagination_previous( $attributes, $content, $bl
 		) ) {
 			$p->set_attribute( 'data-wp-key', 'query-pagination-previous' );
 			$p->set_attribute( 'data-wp-on--click', 'core/query::actions.navigate' );
-			$p->set_attribute( 'data-wp-on-async--mouseenter', 'core/query::actions.prefetch' );
+			$p->set_attribute( 'data-wp-on--mouseenter', 'core/query::actions.prefetch' );
 			$p->set_attribute( 'data-wp-watch', 'core/query::callbacks.prefetch' );
 			$content = $p->get_updated_html();
 		}

package/src/search/index.php

@@ -183,8 +183,8 @@ function render_block_core_search( $attributes ) {
 		 data-wp-interactive="core/search"
 		 ' . $form_context . '
 		 data-wp-class--wp-block-search__searchfield-hidden="!context.isSearchInputVisible"
-		 data-wp-on-async--keydown="actions.handleSearchKeydown"
-		 data-wp-on-async--focusout="actions.handleSearchFocusout"
+		 data-wp-on--keydown="actions.handleSearchKeydown"
+		 data-wp-on--focusout="actions.handleSearchFocusout"
 		';
 	}
 

package/src/search/view.js

@@ -49,15 +49,15 @@ const { actions } = store(
 				const ctx = getContext();
 				ctx.isSearchInputVisible = false;
 			},
-			handleSearchKeydown( event ) {
+			handleSearchKeydown: withSyncEvent( ( event ) => {
 				const { ref } = getElement();
 				// If Escape close the menu.
 				if ( event?.key === 'Escape' ) {
 					actions.closeSearchInput();
 					ref.querySelector( 'button' ).focus();
 				}
-			},
-			handleSearchFocusout( event ) {
+			} ),
+			handleSearchFocusout: withSyncEvent( ( event ) => {
 				const { ref } = getElement();
 				// If focus is outside search form, and in the document, close menu
 				// event.target === The element losing focus
@@ -70,7 +70,7 @@ const { actions } = store(
 				) {
 					actions.closeSearchInput();
 				}
-			},
+			} ),
 		},
 	},
 	{ lock: true }

package/src/term-template/index.php

@@ -38,10 +38,16 @@ function render_block_core_term_template( $attributes, $content, $block ) {
 		// Get the current term and taxonomy from the queried object.
 		$queried_object = get_queried_object();
 
-		// For hierarchical taxonomies, show direct children of the current term.
+		// For hierarchical taxonomies, show children of the current term.
 		// For non-hierarchical taxonomies, show all terms (don't set parent).
 		if ( is_taxonomy_hierarchical( $queried_object->taxonomy ) ) {
-			$query_args['parent'] = $queried_object->term_id;
+			// If showNested is true, use child_of to include nested terms.
+			// Otherwise, use parent to show only direct children.
+			if ( ! empty( $query['showNested'] ) ) {
+				$query_args['child_of'] = $queried_object->term_id;
+			} else {
+				$query_args['parent'] = $queried_object->term_id;
+			}
 		}
 		$query_args['taxonomy'] = $queried_object->taxonomy;
 	} else {

package/src/terms-query/edit/inspector-controls/index.js

@@ -55,8 +55,8 @@ export default function TermsQueryInspectorControls( {
 		templateSlug?.startsWith( 'taxonomy-' ) ||
 		templateSlug?.startsWith( 'category-' ) ||
 		templateSlug?.startsWith( 'tag-' );
-	// Only display the showNested control if the taxonomy is hierarchical and not inheriting.
-	const displayShowNestedControl = isTaxonomyHierarchical && ! inheritQuery;
+	// Display the showNested control if the taxonomy is hierarchical.
+	const displayShowNestedControl = isTaxonomyHierarchical;
 	const hasIncludeFilter = !! include?.length;
 
 	// Labels shared between ToolsPanelItem and its child control.

package/src/terms-query/edit/inspector-controls/inherit-control.js

@@ -17,14 +17,12 @@ export default function InheritControl( { value, onChange, label } ) {
 			onChange={ ( newValue ) => {
 				onChange( {
 					inherit: newValue === 'default',
-					// When enabling inherit, hierarchical is not supported.
-					...( newValue === 'default' ? { showNested: false } : {} ),
 				} );
 			} }
 			help={
 				value
 					? __(
-							'Display terms based on the current taxonomy archive. For hierarchical taxonomies, shows direct children of the current term. For non-hierarchical taxonomies, shows all terms.'
+							'Display terms based on the current taxonomy archive. For hierarchical taxonomies, shows children of the current term. For non-hierarchical taxonomies, shows all terms.'
 					  )
 					: __( 'Display terms based on specific criteria.' )
 			}

package/src/utils/get-transformed-attributes.js

@@ -27,7 +27,8 @@ export function getTransformedAttributes(
 
 	const transformedAttributes = {};
 
-	// Handle attributes derived from block support.
+	// Handle attributes derived from block support. The custom class name
+	// attribute is handled in the `core/customClassName/addTransforms` hook.
 	if (
 		hasBlockSupport( newBlockType, 'allowedBlocks' ) &&
 		attributes.allowedBlocks
@@ -43,31 +44,19 @@ export function getTransformedAttributes(
 	) {
 		transformedAttributes.ariaLabel = attributes.ariaLabel;
 	}
-	if (
-		hasBlockSupport( newBlockType, 'className' ) &&
-		attributes.className
-	) {
-		transformedAttributes.className = attributes.className;
-	}
 
 	// Handle metadata transformation.
 	if ( attributes.metadata ) {
 		// The metadata properties that should be preserved after the transform.
-		const transformedMetadata = [ 'noteId' ];
+		// The noteId, name, and blockVisibility properties are separately handled
+		// in the `core/metadata/addTransforms` hook.
+		const transformedMetadata = [];
 
 		// If there is a transform bindings callback, add the `id` and `bindings` properties.
 		if ( bindingsCallback ) {
 			transformedMetadata.push( 'id', 'bindings' );
 		}
 
-		// Handle metadata properties derived from block support.
-		if ( hasBlockSupport( newBlockType, 'renaming', true ) ) {
-			transformedMetadata.push( 'name' );
-		}
-		if ( hasBlockSupport( newBlockType, 'blockVisibility', true ) ) {
-			transformedMetadata.push( 'blockVisibility' );
-		}
-
 		// Only process metadata if there are supported properties.
 		if ( transformedMetadata.length > 0 ) {
 			const newMetadata = Object.entries( attributes.metadata ).reduce(