@wordpress/block-library 9.33.2-next.36001005c.0 → 9.33.3

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/navigation-link/edit.js

@@ -558,7 +558,7 @@ export default function NavigationLinkEdit( {
 								if ( isEntityLink ) {
 									createBinding( updatedAttributes );
 								} else {
-									clearBinding();
+									clearBinding( updatedAttributes );
 								}
 							} }
 						/>

package/src/navigation-link/editor.scss

@@ -110,7 +110,7 @@
 .link-control-transform__subheading {
 	font-size: 11px;
 	text-transform: uppercase;
-	font-weight: $font-weight-medium;
+	font-weight: 500;
 	color: $gray-900;
 	margin-bottom: 1.5em;
 }

package/src/navigation-link/shared/controls.js

@@ -11,7 +11,7 @@ import {
 	TextareaControl,
 } from '@wordpress/components';
 import { __, sprintf } from '@wordpress/i18n';
-import { useRef, useEffect, useState } from '@wordpress/element';
+import { useRef } from '@wordpress/element';
 import { useInstanceId } from '@wordpress/compose';
 import { safeDecodeURI } from '@wordpress/url';
 import { __unstableStripHTML as stripHTML } from '@wordpress/dom';
@@ -72,20 +72,9 @@ export function Controls( { attributes, setAttributes, clientId } ) {
 	const { label, url, description, rel, opensInNewTab } = attributes;
 	const lastURLRef = useRef( url );
 	const dropdownMenuProps = useToolsPanelDropdownMenuProps();
-	const urlInputRef = useRef();
-	const shouldFocusURLInputRef = useRef( false );
 	const inputId = useInstanceId( Controls, 'link-input' );
 	const helpTextId = `${ inputId }__help`;
 
-	// Local state to control the input value
-	const [ inputValue, setInputValue ] = useState( url );
-
-	// Sync local state when url prop changes (e.g., from undo/redo or external updates)
-	useEffect( () => {
-		setInputValue( url );
-		lastURLRef.current = url;
-	}, [ url ] );
-
 	// Use the entity binding hook internally
 	const { hasUrlBinding, clearBinding } = useEntityBinding( {
 		clientId,
@@ -95,7 +84,7 @@ export function Controls( { attributes, setAttributes, clientId } ) {
 	// Get direct store dispatch to bypass setBoundAttributes wrapper
 	const { updateBlockAttributes } = useDispatch( blockEditorStore );
 
-	const unsyncBoundLink = () => {
+	const editBoundLink = () => {
 		// Clear the binding first
 		clearBinding();
 
@@ -104,23 +93,9 @@ export function Controls( { attributes, setAttributes, clientId } ) {
 		// setAttributes is actually setBoundAttributes, a wrapper function that
 		// processes attributes through the binding system.
 		// See: packages/block-editor/src/components/block-edit/edit.js
-		updateBlockAttributes( clientId, {
-			url: lastURLRef.current, // set the lastURLRef as the new editable value so we avoid bugs from empty link states
-			id: undefined,
-		} );
+		updateBlockAttributes( clientId, { url: '', id: undefined } );
 	};
 
-	useEffect( () => {
-		// Checking for ! hasUrlBinding is a defensive check, as we would
-		// only want to focus the input if the url is not bound to an entity.
-		if ( ! hasUrlBinding && shouldFocusURLInputRef.current ) {
-			// focuses and highlights the url input value, giving the user
-			// the ability to delete the value quickly or edit it.
-			urlInputRef.current?.select();
-		}
-		shouldFocusURLInputRef.current = false;
-	}, [ hasUrlBinding ] );
-
 	return (
 		<ToolsPanel
 			label={ __( 'Settings' ) }
@@ -160,25 +135,22 @@ export function Controls( { attributes, setAttributes, clientId } ) {
 				isShownByDefault
 			>
 				<InputControl
-					ref={ urlInputRef }
 					__nextHasNoMarginBottom
 					__next40pxDefaultSize
 					id={ inputId }
 					label={ __( 'Link' ) }
-					value={ inputValue ? safeDecodeURI( inputValue ) : '' }
-					autoComplete="off"
-					type="url"
-					disabled={ hasUrlBinding }
-					onChange={ ( newValue ) => {
+					value={ url ? safeDecodeURI( url ) : '' }
+					onChange={ ( urlValue ) => {
 						if ( hasUrlBinding ) {
-							return;
+							return; // Prevent editing when URL is bound
 						}
-
-						// Defer updating the url attribute until onBlur to prevent the canvas from
-						// treating a temporary empty value as a committed value, which replaces the
-						// label with placeholder text.
-						setInputValue( newValue );
+						setAttributes( {
+							url: encodeURI( safeDecodeURI( urlValue ) ),
+						} );
 					} }
+					autoComplete="off"
+					type="url"
+					disabled={ hasUrlBinding }
 					onFocus={ () => {
 						if ( hasUrlBinding ) {
 							return;
@@ -189,19 +161,12 @@ export function Controls( { attributes, setAttributes, clientId } ) {
 						if ( hasUrlBinding ) {
 							return;
 						}
-
-						const finalValue = ! inputValue
-							? lastURLRef.current
-							: inputValue;
-
-						// Update local state immediately so input reflects the reverted value if the value was cleared
-						setInputValue( finalValue );
-
 						// Defer the updateAttributes call to ensure entity connection isn't severed by accident.
-						updateAttributes( { url: finalValue }, setAttributes, {
-							...attributes,
-							url: lastURLRef.current,
-						} );
+						updateAttributes(
+							{ url: ! url ? lastURLRef.current : url },
+							setAttributes,
+							{ ...attributes, url: lastURLRef.current }
+						);
 					} }
 					help={
 						hasUrlBinding && (
@@ -215,12 +180,7 @@ export function Controls( { attributes, setAttributes, clientId } ) {
 						hasUrlBinding && (
 							<Button
 								icon={ unlinkIcon }
-								onClick={ () => {
-									unsyncBoundLink();
-									// Focus management to send focus to the URL input
-									// on next render after disabled state is removed.
-									shouldFocusURLInputRef.current = true;
-								} }
+								onClick={ editBoundLink }
 								aria-describedby={ helpTextId }
 								showTooltip
 								label={ __( 'Unsync and edit' ) }

package/src/navigation-link/shared/test/controls.js

@@ -6,7 +6,6 @@
  * External dependencies
  */
 import { render, screen, fireEvent } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
 
 /**
  * Internal dependencies
@@ -96,22 +95,18 @@ describe( 'Controls', () => {
 		expect( urlInput.value ).toBe( 'https://example.com/test page' );
 	} );
 
-	it( 'calls updateAttributes with new URL on blur', async () => {
-		const user = userEvent.setup();
+	it( 'encodes URL values when changed', () => {
 		render( <Controls { ...defaultProps } /> );
 
 		const urlInput = screen.getByLabelText( 'Link' );
 
-		await user.click( urlInput );
-		await user.clear( urlInput );
-		await user.type( urlInput, 'https://example.com/test page' );
-		await user.tab();
+		fireEvent.change( urlInput, {
+			target: { value: 'https://example.com/test page' },
+		} );
 
-		expect( mockUpdateAttributes ).toHaveBeenCalledWith(
-			{ url: 'https://example.com/test page' },
-			defaultProps.setAttributes,
-			{ ...defaultProps.attributes, url: 'https://example.com' }
-		);
+		expect( defaultProps.setAttributes ).toHaveBeenCalledWith( {
+			url: 'https://example.com/test%20page',
+		} );
 	} );
 
 	it( 'calls updateAttributes on URL blur', () => {
@@ -148,11 +143,11 @@ describe( 'Controls', () => {
 			target: { value: 'https://new.com' },
 		} );
 
-		// Blur should call updateAttributes with the new URL value from the input
+		// Blur should call updateAttributes with the current URL (since url exists)
 		fireEvent.blur( urlInput );
 
 		expect( mockUpdateAttributes ).toHaveBeenCalledWith(
-			{ url: 'https://new.com' }, // New URL from input value
+			{ url: 'https://different.com' }, // Current URL from attributes (not input value)
 			defaultProps.setAttributes,
 			{
 				...propsWithDifferentUrl.attributes,

package/src/navigation-link/shared/use-entity-binding.js

@@ -69,7 +69,7 @@ export function useEntityBinding( { clientId, attributes } ) {
 		if ( hasUrlBinding ) {
 			updateBlockBindings( { url: undefined } );
 		}
-	}, [ updateBlockBindings, hasUrlBinding ] );
+	}, [ updateBlockBindings, hasUrlBinding, metadata, id ] );
 
 	const createBinding = useCallback(
 		( updatedAttributes ) => {

package/src/navigation-submenu/edit.js

@@ -447,7 +447,7 @@ export default function NavigationSubmenuEdit( {
 								if ( isEntityLink ) {
 									createBinding( updatedAttributes );
 								} else {
-									clearBinding();
+									clearBinding( updatedAttributes );
 								}
 							} }
 						/>

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/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();
 		}