@wordpress/block-editor 15.5.0 → 15.5.1-next.47f435fc9.0

package/src/components/link-control/index.js

@@ -14,14 +14,15 @@ import {
 	__experimentalHStack as HStack,
 	__experimentalInputControlSuffixWrapper as InputControlSuffixWrapper,
 } from '@wordpress/components';
-import { __ } from '@wordpress/i18n';
+import { __, sprintf } from '@wordpress/i18n';
 import { useRef, useState, useEffect } from '@wordpress/element';
+import { useInstanceId } from '@wordpress/compose';
 import { focus } from '@wordpress/dom';
 import { ENTER } from '@wordpress/keycodes';
 import { isShallowEqualObjects } from '@wordpress/is-shallow-equal';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { store as preferencesStore } from '@wordpress/preferences';
-import { keyboardReturn } from '@wordpress/icons';
+import { keyboardReturn, linkOff } from '@wordpress/icons';
 
 /**
  * Internal dependencies
@@ -108,6 +109,7 @@ import deprecated from '@wordpress/deprecated';
  * @property {boolean=}                   hasTextControl             Whether to add a text field to the UI to update the value.title.
  * @property {string|Function|undefined}  createSuggestionButtonText The text to use in the button that calls createSuggestion.
  * @property {Function}                   renderControlBottom        Optional controls to be rendered at the bottom of the component.
+ * @property {boolean=}                   handleEntities             Whether to handle entity links (links with ID). When true and a link has an ID, the input will be disabled and show an unlink button.
  */
 
 const noop = () => {};
@@ -142,6 +144,7 @@ function LinkControl( {
 	hasRichPreviews = false,
 	hasTextControl = false,
 	renderControlBottom = null,
+	handleEntities = false,
 } ) {
 	if ( withCreateSuggestion === undefined && createSuggestion ) {
 		withCreateSuggestion = true;
@@ -185,6 +188,7 @@ function LinkControl( {
 	const isMountingRef = useRef( true );
 	const wrapperNode = useRef();
 	const textInputRef = useRef();
+	const searchInputRef = useRef();
 	const isEndingEditWithFocusRef = useRef( false );
 
 	const settingsKeys = settings.map( ( { id } ) => id );
@@ -197,6 +201,13 @@ function LinkControl( {
 		createSetInternalSettingValueHandler,
 	] = useInternalValue( value );
 
+	// Compute isEntity internally based on handleEntities prop and presence of ID
+	const isEntity = handleEntities && !! internalControlValue?.id;
+
+	// Generate help text ID for accessibility association
+	const baseId = useInstanceId( LinkControl, 'link-control' );
+	const helpTextId = isEntity ? `${ baseId }__help` : null;
+
 	const valueHasChanges =
 		value && ! isShallowEqualObjects( internalControlValue, value );
 
@@ -336,6 +347,38 @@ function LinkControl( {
 		onCancel?.();
 	};
 
+	const [ shouldFocusSearchInput, setShouldFocusSearchInput ] =
+		useState( false );
+
+	const handleUnlink = () => {
+		// Clear the internal state to remove the ID and re-enable the field
+		// Explicitly set id, kind, and type to undefined so they override
+		// the original values when spread in handleSubmit. This ensures that
+		// when the user types a custom URL and submits, the entity link is
+		// properly severed (not just when selecting a different entity from suggestions).
+		const { id, kind, type, ...restValue } = internalControlValue;
+		setInternalControlValue( {
+			...restValue,
+			id: undefined,
+			kind: undefined,
+			type: undefined,
+			url: undefined,
+		} );
+
+		// Request focus after the component re-renders with the cleared state
+		// We can't focus immediately because the input might still be disabled
+		setShouldFocusSearchInput( true );
+	};
+
+	// Focus the search input when requested, once the component has re-rendered
+	// This ensures the input is enabled and ready to receive focus
+	useEffect( () => {
+		if ( shouldFocusSearchInput ) {
+			searchInputRef.current?.focus();
+			setShouldFocusSearchInput( false );
+		}
+	}, [ shouldFocusSearchInput ] );
+
 	const currentUrlInputValue =
 		propInputValue || internalControlValue?.url || '';
 
@@ -389,6 +432,7 @@ function LinkControl( {
 							/>
 						) }
 						<LinkControlSearchInput
+							ref={ searchInputRef }
 							currentLink={ value }
 							className="block-editor-link-control__field block-editor-link-control__search-input"
 							placeholder={ searchInputPlaceholder }
@@ -406,23 +450,30 @@ function LinkControl( {
 								createSuggestionButtonText
 							}
 							hideLabelFromVision={ ! showTextControl }
+							isEntity={ isEntity }
 							suffix={
-								showActions ? undefined : (
-									<InputControlSuffixWrapper variant="control">
-										<Button
-											onClick={
-												isDisabled ? noop : handleSubmit
-											}
-											label={ __( 'Submit' ) }
-											icon={ keyboardReturn }
-											className="block-editor-link-control__search-submit"
-											aria-disabled={ isDisabled }
-											size="small"
-										/>
-									</InputControlSuffixWrapper>
-								)
+								<SearchSuffixControl
+									isEntity={ isEntity }
+									showActions={ showActions }
+									isDisabled={ isDisabled }
+									onUnlink={ handleUnlink }
+									onSubmit={ handleSubmit }
+									helpTextId={ helpTextId }
+								/>
 							}
 						/>
+						{ isEntity && helpTextId && (
+							<p
+								id={ helpTextId }
+								className="block-editor-link-control__help"
+							>
+								{ sprintf(
+									/* translators: %s: entity type (e.g., page, post) */
+									__( 'Synced with the selected %s.' ),
+									internalControlValue?.type || 'item'
+								) }
+							</p>
+						) }
 					</div>
 					{ errorMessage && (
 						<Notice
@@ -498,6 +549,57 @@ function LinkControl( {
 	);
 }
 
+/**
+ * Suffix control component for LinkControl search input.
+ * Handles the display of unlink button for entities and submit button for regular links.
+ *
+ * @param {Object}   props             - Component props
+ * @param {boolean}  props.isEntity    - Whether the link is bound to an entity
+ * @param {boolean}  props.showActions - Whether to show action buttons
+ * @param {boolean}  props.isDisabled  - Whether the submit button should be disabled
+ * @param {Function} props.onUnlink    - Callback when unlink button is clicked
+ * @param {Function} props.onSubmit    - Callback when submit button is clicked
+ * @param {string}   props.helpTextId  - ID of the help text element for accessibility
+ */
+function SearchSuffixControl( {
+	isEntity,
+	showActions,
+	isDisabled,
+	onUnlink,
+	onSubmit,
+	helpTextId,
+} ) {
+	if ( isEntity ) {
+		return (
+			<Button
+				icon={ linkOff }
+				onClick={ onUnlink }
+				aria-describedby={ helpTextId }
+				showTooltip
+				label={ __( 'Unsync and edit' ) }
+				__next40pxDefaultSize
+			/>
+		);
+	}
+
+	if ( showActions ) {
+		return undefined;
+	}
+
+	return (
+		<InputControlSuffixWrapper variant="control">
+			<Button
+				onClick={ isDisabled ? noop : onSubmit }
+				label={ __( 'Submit' ) }
+				icon={ keyboardReturn }
+				className="block-editor-link-control__search-submit"
+				aria-disabled={ isDisabled }
+				size="small"
+			/>
+		</InputControlSuffixWrapper>
+	);
+}
+
 LinkControl.ViewerFill = ViewerFill;
 LinkControl.DEFAULT_LINK_SETTINGS = DEFAULT_LINK_SETTINGS;
 

package/src/components/link-control/link-preview.js

@@ -14,7 +14,14 @@ import {
 } from '@wordpress/components';
 import { useCopyToClipboard } from '@wordpress/compose';
 import { filterURLForDisplay, safeDecodeURI } from '@wordpress/url';
-import { Icon, globe, info, linkOff, edit, copySmall } from '@wordpress/icons';
+import {
+	Icon,
+	globe,
+	info,
+	linkOff,
+	pencil,
+	copySmall,
+} from '@wordpress/icons';
 import { __unstableStripHTML as stripHTML } from '@wordpress/dom';
 import { useDispatch, useSelect } from '@wordpress/data';
 import { store as noticesStore } from '@wordpress/notices';
@@ -153,7 +160,7 @@ export default function LinkPreview( {
 					</span>
 				</span>
 				<Button
-					icon={ edit }
+					icon={ pencil }
 					label={ __( 'Edit link' ) }
 					onClick={ onEditClick }
 					size="compact"

package/src/components/link-control/search-input.js

@@ -44,6 +44,7 @@ const LinkControlSearchInput = forwardRef(
 			createSuggestionButtonText,
 			hideLabelFromVision = false,
 			suffix,
+			isEntity = false,
 		},
 		ref
 	) => {
@@ -152,8 +153,9 @@ const LinkControlSearchInput = forwardRef(
 							);
 						}
 					} }
-					ref={ ref }
+					inputRef={ ref }
 					suffix={ suffix }
+					disabled={ isEntity }
 				/>
 				{ children }
 			</div>

package/src/components/link-control/settings.js

@@ -18,17 +18,44 @@ const LinkControlSettings = ( { value, onChange = noop, settings } ) => {
 		} );
 	};
 
-	const theSettings = settings.map( ( setting ) => (
-		<CheckboxControl
-			__nextHasNoMarginBottom
-			className="block-editor-link-control__setting"
-			key={ setting.id }
-			label={ setting.title }
-			onChange={ handleSettingChange( setting ) }
-			checked={ value ? !! value[ setting.id ] : false }
-			help={ setting?.help }
-		/>
-	) );
+	const theSettings = settings
+		.map( ( setting ) => {
+			// If render property is provided
+			if ( 'render' in setting ) {
+				// If it's a valid function, use it
+				if ( typeof setting.render === 'function' ) {
+					const renderedContent = setting.render(
+						setting,
+						value,
+						onChange
+					);
+					return (
+						<div
+							key={ setting.id }
+							className="block-editor-link-control__setting"
+						>
+							{ renderedContent }
+						</div>
+					);
+				}
+				// If render is provided but invalid, return null
+				return null;
+			}
+
+			// If render property is not provided, use CheckboxControl
+			return (
+				<CheckboxControl
+					__nextHasNoMarginBottom
+					className="block-editor-link-control__setting"
+					key={ setting.id }
+					label={ setting.title }
+					onChange={ handleSettingChange( setting ) }
+					checked={ value ? !! value[ setting.id ] : false }
+					help={ setting?.help }
+				/>
+			);
+		} )
+		.filter( Boolean ); // Remove null entries
 
 	return (
 		<fieldset className="block-editor-link-control__settings">

package/src/components/link-control/style.scss

@@ -1,3 +1,7 @@
+@use "@wordpress/base-styles/mixins" as *;
+@use "@wordpress/base-styles/variables" as *;
+@use "@wordpress/base-styles/colors" as *;
+
 $block-editor-link-control-number-of-actions: 1;
 
 @keyframes loadingpulse {
@@ -59,6 +63,15 @@ $block-editor-link-control-number-of-actions: 1;
 	position: relative;
 }
 
+.block-editor-link-control__help {
+	padding: 0 $grid-unit-20;
+	margin-top: -$grid-unit-10;
+	margin-bottom: 0;
+	font-size: $helptext-font-size;
+	font-style: normal;
+	color: $gray-700;
+}
+
 // Provides positioning context for search actions
 .block-editor-link-control__search-input-container,
 .block-editor-link-control__search-input-wrapper {
@@ -354,11 +367,15 @@ $block-editor-link-control-number-of-actions: 1;
 .block-editor-link-control__setting {
 	margin-bottom: 0;
 	flex: 1;
-	padding: $grid-unit-10 0 $grid-unit-10 $grid-unit-30;
+	padding: $grid-unit-10 $grid-unit-30;
 
-	.components-base-control__field {
-		display: flex; // don't allow label to wrap under checkbox.
+	.components-base-control:not(.components-input-control) {
+		.components-base-control__field {
+			display: flex; // don't allow label to wrap under checkbox.
+		}
+	}
 
+	.components-base-control__field {
 		.components-checkbox-control__label {
 			color: $gray-900;
 		}