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

package/src/navigation-link/index.php

@@ -202,20 +202,6 @@ function render_block_core_navigation_link( $attributes, $content, $block ) {
 		return '';
 	}
 
-	// Resolve URL binding if present
-	$url = $attributes['url'] ?? '';
-	if ( isset( $attributes['metadata']['bindings']['url']['source'] ) ) {
-		$binding = $attributes['metadata']['bindings']['url'];
-		$source  = get_block_bindings_source( $binding['source'] );
-		if ( $source ) {
-			$source_args  = $binding['args'] ?? array();
-			$resolved_url = $source->get_value( $source_args, $block, 'url' );
-			if ( $resolved_url ) {
-				$url = $resolved_url;
-			}
-		}
-	}
-
 	$font_sizes      = block_core_navigation_link_build_css_font_sizes( $block->context );
 	$classes         = array_merge(
 		$font_sizes['css_classes']
@@ -227,9 +213,9 @@ function render_block_core_navigation_link( $attributes, $content, $block ) {
 	$kind        = empty( $attributes['kind'] ) ? 'post_type' : str_replace( '-', '_', $attributes['kind'] );
 	$is_active   = ! empty( $attributes['id'] ) && get_queried_object_id() === (int) $attributes['id'] && ! empty( get_queried_object()->$kind );
 
-	if ( is_post_type_archive() && ! empty( $url ) ) {
+	if ( is_post_type_archive() && ! empty( $attributes['url'] ) ) {
 		$queried_archive_link = get_post_type_archive_link( get_queried_object()->name );
-		if ( $url === $queried_archive_link ) {
+		if ( $attributes['url'] === $queried_archive_link ) {
 			$is_active = true;
 		}
 	}
@@ -245,8 +231,8 @@ function render_block_core_navigation_link( $attributes, $content, $block ) {
 		'<a class="wp-block-navigation-item__content" ';
 
 	// Start appending HTML attributes to anchor tag.
-	if ( ! empty( $url ) ) {
-		$html .= ' href="' . esc_url( block_core_navigation_link_maybe_urldecode( $url ) ) . '"';
+	if ( isset( $attributes['url'] ) ) {
+		$html .= ' href="' . esc_url( block_core_navigation_link_maybe_urldecode( $attributes['url'] ) ) . '"';
 	}
 
 	if ( $is_active ) {

package/src/navigation-link/link-ui/index.js

@@ -78,10 +78,12 @@ function UnforwardedLinkUI( props, ref ) {
 		name: postType,
 	} );
 
-	// Check if there's a URL binding with the core/entity source
+	// Check if there's a URL binding with the new binding sources
 	// Only enable handleEntities when there's actually a binding present
 	const hasUrlBinding =
-		metadata?.bindings?.url?.source === 'core/entity' && !! id;
+		( metadata?.bindings?.url?.source === 'core/post-data' ||
+			metadata?.bindings?.url?.source === 'core/term-data' ) &&
+		!! id;
 
 	// Memoize link value to avoid overriding the LinkControl's internal state.
 	// This is a temporary fix. See https://github.com/WordPress/gutenberg/issues/50976#issuecomment-1568226407.

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

@@ -11,11 +11,13 @@ import {
 	TextareaControl,
 } from '@wordpress/components';
 import { __, sprintf } from '@wordpress/i18n';
-import { useRef } from '@wordpress/element';
+import { useRef, useEffect, useState } from '@wordpress/element';
 import { useInstanceId } from '@wordpress/compose';
 import { safeDecodeURI } from '@wordpress/url';
 import { __unstableStripHTML as stripHTML } from '@wordpress/dom';
 import { linkOff as unlinkIcon } from '@wordpress/icons';
+import { useDispatch } from '@wordpress/data';
+import { store as blockEditorStore } from '@wordpress/block-editor';
 
 /**
  * Internal dependencies
@@ -70,23 +72,55 @@ 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,
 		attributes,
 	} );
 
-	const editBoundLink = () => {
-		// Remove the binding
+	// Get direct store dispatch to bypass setBoundAttributes wrapper
+	const { updateBlockAttributes } = useDispatch( blockEditorStore );
+
+	const unsyncBoundLink = () => {
+		// Clear the binding first
 		clearBinding();
 
-		// Clear url and id to allow picking a new entity (keep type and kind)
-		setAttributes( { url: undefined, id: undefined } );
+		// Use direct store dispatch to bypass block bindings safeguards
+		// which prevent updates to bound attributes when calling setAttributes.
+		// 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,
+		} );
 	};
 
+	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' ) }
@@ -126,22 +160,25 @@ export function Controls( { attributes, setAttributes, clientId } ) {
 				isShownByDefault
 			>
 				<InputControl
+					ref={ urlInputRef }
 					__nextHasNoMarginBottom
 					__next40pxDefaultSize
 					id={ inputId }
 					label={ __( 'Link' ) }
-					value={ url ? safeDecodeURI( url ) : '' }
-					onChange={ ( urlValue ) => {
-						if ( hasUrlBinding ) {
-							return; // Prevent editing when URL is bound
-						}
-						setAttributes( {
-							url: encodeURI( safeDecodeURI( urlValue ) ),
-						} );
-					} }
+					value={ inputValue ? safeDecodeURI( inputValue ) : '' }
 					autoComplete="off"
 					type="url"
 					disabled={ hasUrlBinding }
+					onChange={ ( newValue ) => {
+						if ( hasUrlBinding ) {
+							return;
+						}
+
+						// 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 );
+					} }
 					onFocus={ () => {
 						if ( hasUrlBinding ) {
 							return;
@@ -152,12 +189,19 @@ 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: ! url ? lastURLRef.current : url },
-							setAttributes,
-							{ ...attributes, url: lastURLRef.current }
-						);
+						updateAttributes( { url: finalValue }, setAttributes, {
+							...attributes,
+							url: lastURLRef.current,
+						} );
 					} }
 					help={
 						hasUrlBinding && (
@@ -171,7 +215,12 @@ export function Controls( { attributes, setAttributes, clientId } ) {
 						hasUrlBinding && (
 							<Button
 								icon={ unlinkIcon }
-								onClick={ editBoundLink }
+								onClick={ () => {
+									unsyncBoundLink();
+									// Focus management to send focus to the URL input
+									// on next render after disabled state is removed.
+									shouldFocusURLInputRef.current = true;
+								} }
 								aria-describedby={ helpTextId }
 								showTooltip
 								label={ __( 'Unsync and edit' ) }

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

@@ -7,5 +7,8 @@
 
 export { Controls } from './controls';
 export { updateAttributes } from './update-attributes';
-export { useEntityBinding } from './use-entity-binding';
+export {
+	useEntityBinding,
+	buildNavigationLinkEntityBinding,
+} from './use-entity-binding';
 export { LinkUI } from '../link-ui';

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

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

package/src/navigation-link/shared/test/update-attributes.test.js

@@ -1153,6 +1153,7 @@ describe( 'updateAttributes', () => {
 
 				expect( result ).toEqual( {
 					isEntityLink: true,
+					attributes: expect.any( Object ),
 				} );
 			} );
 
@@ -1173,6 +1174,7 @@ describe( 'updateAttributes', () => {
 
 				expect( result ).toEqual( {
 					isEntityLink: false,
+					attributes: expect.any( Object ),
 				} );
 			} );
 
@@ -1190,6 +1192,7 @@ describe( 'updateAttributes', () => {
 
 				expect( result ).toEqual( {
 					isEntityLink: false,
+					attributes: expect.any( Object ),
 				} );
 			} );
 
@@ -1215,6 +1218,7 @@ describe( 'updateAttributes', () => {
 				// Should return false because the link was severed and converted to custom
 				expect( result ).toEqual( {
 					isEntityLink: false,
+					attributes: expect.any( Object ),
 				} );
 			} );
 
@@ -1240,6 +1244,7 @@ describe( 'updateAttributes', () => {
 				// Should return true because entity link is preserved
 				expect( result ).toEqual( {
 					isEntityLink: true,
+					attributes: expect.any( Object ),
 				} );
 			} );
 
@@ -1260,6 +1265,7 @@ describe( 'updateAttributes', () => {
 				// mailto links have kind: 'custom', so isEntityLink should be false
 				expect( result ).toEqual( {
 					isEntityLink: false,
+					attributes: expect.any( Object ),
 				} );
 			} );
 
@@ -1280,6 +1286,7 @@ describe( 'updateAttributes', () => {
 				// tel links have kind: 'custom', so isEntityLink should be false
 				expect( result ).toEqual( {
 					isEntityLink: false,
+					attributes: expect.any( Object ),
 				} );
 			} );
 
@@ -1300,6 +1307,7 @@ describe( 'updateAttributes', () => {
 
 				expect( result ).toEqual( {
 					isEntityLink: true,
+					attributes: expect.any( Object ),
 				} );
 			} );
 		} );

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

@@ -10,7 +10,10 @@ import { renderHook, act } from '@testing-library/react';
 /**
  * Internal dependencies
  */
-import { useEntityBinding } from '../use-entity-binding';
+import {
+	useEntityBinding,
+	buildNavigationLinkEntityBinding,
+} from '../use-entity-binding';
 
 // Mock the entire @wordpress/block-editor module
 jest.mock( '@wordpress/block-editor', () => ( {
@@ -49,17 +52,18 @@ describe( 'useEntityBinding', () => {
 			expect( result.current.hasUrlBinding ).toBe( false );
 		} );
 
-		it( 'should return true when core/entity binding exists with id', () => {
+		it( 'should return true when core/post-data binding exists with id for post-type', () => {
 			const attributes = {
 				metadata: {
 					bindings: {
 						url: {
-							source: 'core/entity',
-							args: { key: 'url' },
+							source: 'core/post-data',
+							args: { field: 'link' },
 						},
 					},
 				},
 				id: 123,
+				kind: 'post-type',
 			};
 
 			const { result } = renderHook( () =>
@@ -72,17 +76,42 @@ describe( 'useEntityBinding', () => {
 			expect( result.current.hasUrlBinding ).toBe( true );
 		} );
 
-		it( 'should return false when source is not core/entity', () => {
+		it( 'should return true when core/term-data binding exists with id for taxonomy', () => {
+			const attributes = {
+				metadata: {
+					bindings: {
+						url: {
+							source: 'core/term-data',
+							args: { field: 'link' },
+						},
+					},
+				},
+				id: 123,
+				kind: 'taxonomy',
+			};
+
+			const { result } = renderHook( () =>
+				useEntityBinding( {
+					clientId: 'test-client-id',
+					attributes,
+				} )
+			);
+
+			expect( result.current.hasUrlBinding ).toBe( true );
+		} );
+
+		it( 'should return false when source is not core/post-data or core/term-data', () => {
 			const attributes = {
 				metadata: {
 					bindings: {
 						url: {
 							source: 'some-other-source',
-							args: { key: 'url' },
+							args: { field: 'url' },
 						},
 					},
 				},
 				id: 123,
+				kind: 'post-type',
 			};
 
 			const { result } = renderHook( () =>
@@ -95,17 +124,18 @@ describe( 'useEntityBinding', () => {
 			expect( result.current.hasUrlBinding ).toBe( false );
 		} );
 
-		it( 'should return false when core/entity binding exists but no id', () => {
+		it( 'should return false when core/post-data binding exists but no id', () => {
 			const attributes = {
 				metadata: {
 					bindings: {
 						url: {
-							source: 'core/entity',
-							args: { key: 'url' },
+							source: 'core/post-data',
+							args: { field: 'link' },
 						},
 					},
 				},
 				id: null,
+				kind: 'post-type',
 			};
 
 			const { result } = renderHook( () =>
@@ -147,12 +177,13 @@ describe( 'useEntityBinding', () => {
 			metadata: {
 				bindings: {
 					url: {
-						source: 'core/entity',
-						args: { key: 'url' },
+						source: 'core/post-data',
+						args: { field: 'link' },
 					},
 				},
 			},
 			id: 123,
+			kind: 'post-type',
 		};
 
 		const { result } = renderHook( () =>
@@ -171,7 +202,7 @@ describe( 'useEntityBinding', () => {
 		} );
 	} );
 
-	it( 'should NOT clear binding when clearBinding is called and no binding exists', () => {
+	it( 'should NOT call updateBlockBindings when clearBinding is called and no binding exists', () => {
 		const attributes = {
 			metadata: {},
 			id: null,
@@ -191,7 +222,7 @@ describe( 'useEntityBinding', () => {
 		expect( mockUpdateBlockBindings ).not.toHaveBeenCalled();
 	} );
 
-	it( 'should NOT clear binding when binding metadata exists but source is null', () => {
+	it( 'should call updateBlockBindings when clearBinding is called and binding exists even with null source', () => {
 		const attributes = {
 			metadata: {
 				bindings: {
@@ -215,13 +246,16 @@ describe( 'useEntityBinding', () => {
 			result.current.clearBinding();
 		} );
 
-		expect( mockUpdateBlockBindings ).not.toHaveBeenCalled();
+		expect( mockUpdateBlockBindings ).toHaveBeenCalledWith( {
+			url: undefined,
+		} );
 	} );
 
-	it( 'should create binding when createBinding is called', () => {
+	it( 'should create core/post-data binding when createBinding is called for post-type', () => {
 		const attributes = {
 			metadata: {},
 			id: null,
+			kind: 'post-type',
 		};
 
 		const { result } = renderHook( () =>
@@ -237,11 +271,92 @@ describe( 'useEntityBinding', () => {
 
 		expect( mockUpdateBlockBindings ).toHaveBeenCalledWith( {
 			url: {
-				source: 'core/entity',
+				source: 'core/post-data',
 				args: {
-					key: 'url',
+					field: 'link',
 				},
 			},
 		} );
 	} );
+
+	describe( 'buildNavigationLinkEntityBinding', () => {
+		it( 'returns correct binding for post-type', () => {
+			const binding = buildNavigationLinkEntityBinding( 'post-type' );
+			expect( binding ).toEqual( {
+				url: {
+					source: 'core/post-data',
+					args: { field: 'link' },
+				},
+			} );
+		} );
+
+		it( 'returns correct binding for taxonomy', () => {
+			const binding = buildNavigationLinkEntityBinding( 'taxonomy' );
+			expect( binding ).toEqual( {
+				url: {
+					source: 'core/term-data',
+					args: { field: 'link' },
+				},
+			} );
+		} );
+
+		it( 'throws error when called without parameter', () => {
+			expect( () => {
+				buildNavigationLinkEntityBinding();
+			} ).toThrow(
+				'buildNavigationLinkEntityBinding requires a kind parameter'
+			);
+		} );
+
+		it( 'throws error for invalid kind', () => {
+			expect( () => {
+				buildNavigationLinkEntityBinding( 'invalid-kind' );
+			} ).toThrow( 'Invalid kind "invalid-kind"' );
+		} );
+
+		it( 'throws error for null kind', () => {
+			expect( () => {
+				buildNavigationLinkEntityBinding( null );
+			} ).toThrow( 'Invalid kind "null"' );
+		} );
+
+		it( 'throws error for empty string', () => {
+			expect( () => {
+				buildNavigationLinkEntityBinding( '' );
+			} ).toThrow( 'Invalid kind ""' );
+		} );
+
+		it( 'handles invalid kind gracefully in createBinding', () => {
+			const consoleSpy = jest
+				.spyOn( console, 'warn' )
+				.mockImplementation();
+
+			const attributes = {
+				metadata: {},
+				id: null,
+				kind: 'invalid-kind',
+			};
+
+			const { result } = renderHook( () =>
+				useEntityBinding( {
+					clientId: 'test-client-id',
+					attributes,
+				} )
+			);
+
+			act( () => {
+				result.current.createBinding();
+			} );
+
+			expect( consoleSpy ).toHaveBeenCalledWith(
+				'Failed to create entity binding:',
+				expect.stringContaining( 'Invalid kind "invalid-kind"' )
+			);
+
+			// Should not call updateBlockBindings when validation fails
+			expect( mockUpdateBlockBindings ).not.toHaveBeenCalled();
+
+			consoleSpy.mockRestore();
+		} );
+	} );
 } );

package/src/navigation-link/shared/update-attributes.js

@@ -222,5 +222,6 @@ export const updateAttributes = (
 
 	return {
 		isEntityLink: !! finalId && finalKind !== 'custom',
+		attributes, // Return the computed attributes object
 	};
 };