@wordpress/block-library 9.33.2 → 9.34.0

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

@@ -11,7 +11,7 @@ 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';
@@ -72,9 +72,20 @@ 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,
@@ -84,7 +95,7 @@ export function Controls( { attributes, setAttributes, clientId } ) {
 	// Get direct store dispatch to bypass setBoundAttributes wrapper
 	const { updateBlockAttributes } = useDispatch( blockEditorStore );
 
-	const editBoundLink = () => {
+	const unsyncBoundLink = () => {
 		// Clear the binding first
 		clearBinding();
 
@@ -93,9 +104,23 @@ 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: '', id: undefined } );
+		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' ) }
@@ -135,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;
@@ -161,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 && (
@@ -180,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/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/use-entity-binding.js

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

package/src/navigation-submenu/edit.js

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

package/src/style.scss

@@ -32,6 +32,7 @@
 @use "./latest-posts/style.scss" as *;
 @use "./list/style.scss" as *;
 @use "./loginout/style.scss" as *;
+@use "./math/style.scss" as *;
 @use "./media-text/style.scss" as *;
 @use "./navigation/style.scss" as *;
 @use "./navigation-link/style.scss" as *;

package/src/video/editor.scss

@@ -41,7 +41,7 @@
 	color: $gray-700;
 	text-transform: uppercase;
 	font-size: 11px;
-	font-weight: 500;
+	font-weight: $font-weight-medium;
 	display: block;
 }