@wordpress/block-editor 7.0.4 → 8.0.3

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

@@ -2,11 +2,12 @@
  * External dependencies
  */
 import { noop } from 'lodash';
+import classnames from 'classnames';
 
 /**
  * WordPress dependencies
  */
-import { Button, Spinner, Notice } from '@wordpress/components';
+import { Button, Spinner, Notice, TextControl } from '@wordpress/components';
 import { keyboardReturn } from '@wordpress/icons';
 import { __ } from '@wordpress/i18n';
 import { useRef, useState, useEffect } from '@wordpress/element';
@@ -93,6 +94,7 @@ import { DEFAULT_LINK_SETTINGS } from './constants';
  * @property {Object=}                    suggestionsQuery           Query parameters to pass along to wp.blockEditor.__experimentalFetchLinkSuggestions.
  * @property {boolean=}                   noURLSuggestion            Whether to add a fallback suggestion which treats the search query as a URL.
  * @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.
  */
 
 /**
@@ -119,6 +121,8 @@ function LinkControl( {
 	noURLSuggestion = false,
 	createSuggestionButtonText,
 	hasRichPreviews = false,
+	hasTextControl = false,
+	renderControlBottom = null,
 } ) {
 	if ( withCreateSuggestion === undefined && createSuggestion ) {
 		withCreateSuggestion = true;
@@ -126,8 +130,13 @@ function LinkControl( {
 
 	const isMounting = useRef( true );
 	const wrapperNode = useRef();
+	const textInputRef = useRef();
+
 	const [ internalInputValue, setInternalInputValue ] = useState(
-		( value && value.url ) || ''
+		value?.url || ''
+	);
+	const [ internalTextValue, setInternalTextValue ] = useState(
+		value?.title || ''
 	);
 	const currentInputValue = propInputValue || internalInputValue;
 	const [ isEditingLink, setIsEditingLink ] = useState(
@@ -149,22 +158,53 @@ function LinkControl( {
 	}, [ forceIsEditingLink ] );
 
 	useEffect( () => {
+		// We don't auto focus into the Link UI on mount
+		// because otherwise using the keyboard to select text
+		// *within* the link format is not possible.
 		if ( isMounting.current ) {
 			isMounting.current = false;
 			return;
 		}
+		// Unless we are mounting, we always want to focus either:
+		// - the URL input
+		// - the first focusable element in the Link UI.
+		// But in editing mode if there is a text input present then
+		// the URL input is at index 1. If not then it is at index 0.
+		const whichFocusTargetIndex = textInputRef?.current ? 1 : 0;
 
-		// When switching between editable and non editable LinkControl
-		// move focus to the first element to avoid focus loss.
+		// Scenario - when:
+		// - switching between editable and non editable LinkControl
+		// - clicking on a link
+		// ...then move focus to the *first* element to avoid focus loss
+		// and to ensure focus is *within* the Link UI.
 		const nextFocusTarget =
-			focus.focusable.find( wrapperNode.current )[ 0 ] ||
-			wrapperNode.current;
+			focus.focusable.find( wrapperNode.current )[
+				whichFocusTargetIndex
+			] || wrapperNode.current;
 
 		nextFocusTarget.focus();
 
 		isEndingEditWithFocus.current = false;
 	}, [ isEditingLink ] );
 
+	useEffect( () => {
+		/**
+		 * If the value's `text` property changes then sync this
+		 * back up with state.
+		 */
+		if ( value?.title && value.title !== internalTextValue ) {
+			setInternalTextValue( value.title );
+		}
+
+		/**
+		 * Update the state value internalInputValue if the url value changes
+		 * for example when clicking on another anchor
+		 */
+		if ( value?.url ) {
+			setInternalInputValue( value.url );
+		}
+	}, [ value ] );
+
 	/**
 	 * Cancels editing state and marks that focus may need to be restored after
 	 * the next render, if focus was within the wrapper when editing finished.
@@ -182,22 +222,47 @@ function LinkControl( {
 	);
 
 	const handleSelectSuggestion = ( updatedValue ) => {
-		onChange( updatedValue );
+		onChange( {
+			...updatedValue,
+			title: internalTextValue || updatedValue?.title,
+		} );
 		stopEditing();
 	};
 
-	const handleSubmitButton = () => {
-		if ( currentInputValue !== value?.url ) {
-			onChange( { url: currentInputValue } );
+	const handleSubmit = () => {
+		if (
+			currentInputValue !== value?.url ||
+			internalTextValue !== value?.title
+		) {
+			onChange( {
+				url: currentInputValue,
+				title: internalTextValue,
+			} );
 		}
 		stopEditing();
 	};
 
+	const handleSubmitWithEnter = ( event ) => {
+		const { keyCode } = event;
+		if (
+			keyCode === ENTER &&
+			! currentInputIsEmpty // disallow submitting empty values.
+		) {
+			event.preventDefault();
+			handleSubmit();
+		}
+	};
+
 	const shownUnlinkControl =
 		onRemove && value && ! isEditingLink && ! isCreatingPage;
 
 	const showSettingsDrawer = !! settings?.length;
 
+	// Only show text control once a URL value has been committed
+	// and it isn't just empty whitespace.
+	// See https://github.com/WordPress/gutenberg/pull/33849/#issuecomment-932194927.
+	const showTextControl = value?.url?.trim()?.length > 0 && hasTextControl;
+
 	return (
 		<div
 			tabIndex={ -1 }
@@ -212,10 +277,26 @@ function LinkControl( {
 
 			{ ( isEditingLink || ! value ) && ! isCreatingPage && (
 				<>
-					<div className="block-editor-link-control__search-input-wrapper">
+					<div
+						className={ classnames( {
+							'block-editor-link-control__search-input-wrapper': true,
+							'has-text-control': showTextControl,
+						} ) }
+					>
+						{ showTextControl && (
+							<TextControl
+								ref={ textInputRef }
+								className="block-editor-link-control__field block-editor-link-control__text-content"
+								label="Text"
+								value={ internalTextValue }
+								onChange={ setInternalTextValue }
+								onKeyDown={ handleSubmitWithEnter }
+							/>
+						) }
+
 						<LinkControlSearchInput
 							currentLink={ value }
-							className="block-editor-link-control__search-input"
+							className="block-editor-link-control__field block-editor-link-control__search-input"
 							placeholder={ searchInputPlaceholder }
 							value={ currentInputValue }
 							withCreateSuggestion={ withCreateSuggestion }
@@ -230,20 +311,11 @@ function LinkControl( {
 							createSuggestionButtonText={
 								createSuggestionButtonText
 							}
+							useLabel={ showTextControl }
 						>
 							<div className="block-editor-link-control__search-actions">
 								<Button
-									onClick={ () => handleSubmitButton() }
-									onKeyDown={ ( event ) => {
-										const { keyCode } = event;
-										if (
-											keyCode === ENTER &&
-											! currentInputIsEmpty // disallow submitting empty values.
-										) {
-											event.preventDefault();
-											handleSubmitButton();
-										}
-									} }
+									onClick={ handleSubmit }
 									label={ __( 'Submit' ) }
 									icon={ keyboardReturn }
 									className="block-editor-link-control__search-submit"
@@ -270,28 +342,21 @@ function LinkControl( {
 					value={ value }
 					onEditClick={ () => setIsEditingLink( true ) }
 					hasRichPreviews={ hasRichPreviews }
+					hasUnlinkControl={ shownUnlinkControl }
+					onRemove={ onRemove }
 				/>
 			) }
 
-			{ ( showSettingsDrawer || shownUnlinkControl ) && (
+			{ showSettingsDrawer && (
 				<div className="block-editor-link-control__tools">
 					<LinkControlSettingsDrawer
 						value={ value }
 						settings={ settings }
 						onChange={ onChange }
 					/>
-					{ shownUnlinkControl && (
-						<Button
-							className="block-editor-link-control__unlink"
-							isDestructive
-							variant="link"
-							onClick={ onRemove }
-						>
-							{ __( 'Unlink' ) }
-						</Button>
-					) }
 				</div>
 			) }
+			{ renderControlBottom && renderControlBottom() }
 		</div>
 	);
 }

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

@@ -13,7 +13,8 @@ import {
 	__experimentalText as Text,
 } from '@wordpress/components';
 import { filterURLForDisplay, safeDecodeURI } from '@wordpress/url';
-import { Icon, globe, info } from '@wordpress/icons';
+import { Icon, globe, info, linkOff, edit } from '@wordpress/icons';
+import { __unstableStripHTML as stripHTML } from '@wordpress/dom';
 
 /**
  * Internal dependencies
@@ -26,6 +27,8 @@ export default function LinkPreview( {
 	value,
 	onEditClick,
 	hasRichPreviews = false,
+	hasUnlinkControl = false,
+	onRemove,
 } ) {
 	// Avoid fetching if rich previews are not desired.
 	const showRichPreviews = hasRichPreviews ? value?.url : null;
@@ -39,6 +42,8 @@ export default function LinkPreview( {
 		( value && filterURLForDisplay( safeDecodeURI( value.url ), 16 ) ) ||
 		'';
 
+	const displayTitle = richData?.title || value?.title || displayURL;
+
 	const isEmptyURL = ! value.url.length;
 
 	let icon;
@@ -82,9 +87,7 @@ export default function LinkPreview( {
 									className="block-editor-link-control__search-item-title"
 									href={ value.url }
 								>
-									{ richData?.title ||
-										value?.title ||
-										displayURL }
+									{ stripHTML( displayTitle ) }
 								</ExternalLink>
 
 								{ value?.url && (
@@ -102,12 +105,21 @@ export default function LinkPreview( {
 				</span>
 
 				<Button
-					variant="secondary"
-					onClick={ () => onEditClick() }
+					icon={ edit }
+					label={ __( 'Edit' ) }
 					className="block-editor-link-control__search-item-action"
-				>
-					{ __( 'Edit' ) }
-				</Button>
+					onClick={ onEditClick }
+					iconSize={ 24 }
+				/>
+				{ hasUnlinkControl && (
+					<Button
+						icon={ linkOff }
+						label={ __( 'Unlink' ) }
+						className="block-editor-link-control__search-item-action block-editor-link-control__unlink"
+						onClick={ onRemove }
+						iconSize={ 24 }
+					/>
+				) }
 				<ViewerSlot fillProps={ value } />
 			</div>
 

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

@@ -2,7 +2,7 @@
  * External dependencies
  */
 import { noop, omit } from 'lodash';
-
+import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
@@ -45,6 +45,7 @@ const LinkControlSearchInput = forwardRef(
 			suggestionsQuery = {},
 			withURLSuggestion = true,
 			createSuggestionButtonText,
+			useLabel = false,
 		},
 		ref
 	) => {
@@ -117,10 +118,15 @@ const LinkControlSearchInput = forwardRef(
 			}
 		};
 
+		const inputClasses = classnames( className, {
+			'has-no-label': ! useLabel,
+		} );
+
 		return (
-			<div>
+			<div className="block-editor-link-control__search-input-container">
 				<URLInput
-					className={ className }
+					label={ useLabel ? 'URL' : undefined }
+					className={ inputClasses }
 					value={ value }
 					onChange={ onInputChange }
 					placeholder={ placeholder ?? __( 'Search or type url' ) }

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

@@ -30,24 +30,46 @@ $preview-image-height: 140px;
 	position: relative;
 }
 
-// LinkControl popover.
-.block-editor-link-control .block-editor-link-control__search-input {
-	// Specificity override.
-	&.block-editor-link-control__search-input input[type="text"] {
+// Provides positioning context for search actions
+.block-editor-link-control__search-input-container {
+	position: relative;
+}
+
+// If the input doesn't have a visible label then
+// we need to expand the input itself to occupy
+// the full available horizontal space.
+.block-editor-link-control__search-input.has-no-label .block-editor-url-input__input {
+	flex: 1;
+}
+
+.block-editor-link-control__field {
+	margin: $grid-unit-20; // allow margin collapse for vertical spacing.
+
+	// Element wrapping the label and input.
+	> .components-base-control__field {
+		display: flex;
+		align-items: center;
+		margin: 0;
+	}
+
+	.components-base-control__label {
+		margin-right: $grid-unit-20;
+		margin-bottom: 0;
+	}
+
+	input[type="text"],
+	// Specificity overide of URLInput defaults.
+	&.block-editor-url-input input[type="text"].block-editor-url-input__input {
 		@include input-control;
 		width: calc(100% - #{$grid-unit-20*2});
 		display: block;
 		padding: 11px $grid-unit-20;
 		padding-right: ( $button-size * $block-editor-link-control-number-of-actions ); // width of reset and submit buttons
-		margin: $grid-unit-20;
+		margin: 0;
 		position: relative;
 		border: 1px solid $gray-300;
 		border-radius: $radius-block-ui;
 	}
-
-	.components-base-control__field {
-		margin-bottom: 0;
-	}
 }
 
 .block-editor-link-control__search-error {
@@ -61,14 +83,13 @@ $preview-image-height: 140px;
 	 * when suggestions are rendered.
 	 *
 	 * Compensate for:
-	 *  - Input margin ($grid-unit-20)
 	 *  - Border (1px)
 	 *  - Vertically, for the difference in height between the input (40px) and
 	 *    the icon buttons.
 	 *  - Horizontally, pad to the minimum of: default input padding, or the
 	 *    equivalent of the vertical padding.
 	 */
-	top: $grid-unit-20 + 1px + ( ( 40px - $button-size ) * 0.5 );
+	top: 1px + ( ( 40px - $button-size ) * 0.5 );
 	right: $grid-unit-20 + 1px + min($grid-unit-10, ( 40px - $button-size ) * 0.5);
 }
 
@@ -171,7 +192,6 @@ $preview-image-height: 140px;
 		flex-direction: row;
 		align-items: flex-start;
 		margin-right: $grid-unit-10;
-		overflow: hidden;
 
 		// Force text to wrap to improve UX when encountering long lines
 		// of text, particular those with no spaces.
@@ -189,10 +209,6 @@ $preview-image-height: 140px;
 		align-items: center;
 	}
 
-	.block-editor-link-control__search-item-details {
-		overflow: hidden; // clip to force text ellipsis.
-	}
-
 	.block-editor-link-control__search-item-icon {
 		position: relative;
 		top: 0.2em;

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

@@ -202,9 +202,9 @@ describe( 'Basic rendering', () => {
 			} );
 
 			// Click the "Edit" button to trigger into the editing mode.
-			const editButton = Array.from(
-				container.querySelectorAll( 'button' )
-			).find( ( button ) => button.innerHTML.includes( 'Edit' ) );
+			const editButton = queryByRole( container, 'button', {
+				name: 'Edit',
+			} );
 
 			act( () => {
 				Simulate.click( editButton );
@@ -1653,7 +1653,7 @@ describe( 'Selecting links', () => {
 					);
 				}
 
-				// Commit the selected item as the current link
+				// Submit the selected item as the current link
 				act( () => {
 					Simulate.keyDown( searchInput, { keyCode: ENTER } );
 				} );
@@ -2274,3 +2274,178 @@ describe( 'Rich link previews', () => {
 		mockFetchRichUrlData = undefined;
 	} );
 } );
+
+describe( 'Controlling link title text', () => {
+	const selectedLink = first( fauxEntitySuggestions );
+
+	it( 'should not show a means to alter the link title text by default', async () => {
+		act( () => {
+			render(
+				<LinkControl value={ selectedLink } forceIsEditingLink />,
+				container
+			);
+		} );
+
+		expect(
+			queryByRole( container, 'textbox', { name: 'Text' } )
+		).toBeFalsy();
+	} );
+
+	it.each( [ null, undefined, '   ' ] )(
+		'should not show the link title text input when the URL is `%s`',
+		async ( urlValue ) => {
+			const selectedLinkWithoutURL = {
+				...first( fauxEntitySuggestions ),
+				url: urlValue,
+			};
+
+			act( () => {
+				render(
+					<LinkControl
+						value={ selectedLinkWithoutURL }
+						forceIsEditingLink
+						hasTextControl
+					/>,
+					container
+				);
+			} );
+
+			expect(
+				queryByRole( container, 'textbox', { name: 'Text' } )
+			).toBeFalsy();
+		}
+	);
+
+	it( 'should show a text input to alter the link title text when hasTextControl prop is truthy', async () => {
+		act( () => {
+			render(
+				<LinkControl
+					value={ selectedLink }
+					forceIsEditingLink
+					hasTextControl
+				/>,
+				container
+			);
+		} );
+
+		expect(
+			queryByRole( container, 'textbox', { name: 'Text' } )
+		).toBeTruthy();
+	} );
+
+	it.each( [
+		[ '', 'Testing' ],
+		[ '(with leading and traling whitespace)', '    Testing    ' ],
+		[
+			// Note: link control should always preserve the original value.
+			// The consumer is responsible for filtering or otherwise handling the value.
+			'(when containing HTML)',
+			'<strong>Yes this</strong> <em>is</em> expected behaviour',
+		],
+	] )(
+		"should ensure text input reflects the current link value's `title` property %s",
+		async ( _unused, titleValue ) => {
+			const linkWithTitle = { ...selectedLink, title: titleValue };
+			act( () => {
+				render(
+					<LinkControl
+						value={ linkWithTitle }
+						forceIsEditingLink
+						hasTextControl
+					/>,
+					container
+				);
+			} );
+
+			const textInput = queryByRole( container, 'textbox', {
+				name: 'Text',
+			} );
+
+			expect( textInput.value ).toEqual( titleValue );
+		}
+	);
+
+	it( "should ensure title value matching the text input's current value is included in onChange handler value on submit", async () => {
+		const mockOnChange = jest.fn();
+		const textValue = 'My new text value';
+
+		act( () => {
+			render(
+				<LinkControl
+					value={ selectedLink }
+					forceIsEditingLink
+					hasTextControl
+					onChange={ mockOnChange }
+				/>,
+				container
+			);
+		} );
+
+		let textInput = queryByRole( container, 'textbox', { name: 'Text' } );
+
+		act( () => {
+			Simulate.change( textInput, {
+				target: { value: textValue },
+			} );
+		} );
+
+		textInput = queryByRole( container, 'textbox', { name: 'Text' } );
+
+		expect( textInput.value ).toEqual( textValue );
+
+		const submitButton = queryByRole( container, 'button', {
+			name: 'Submit',
+		} );
+
+		act( () => {
+			Simulate.click( submitButton );
+		} );
+
+		expect( mockOnChange ).toHaveBeenCalledWith(
+			expect.objectContaining( {
+				title: textValue,
+			} )
+		);
+	} );
+
+	it( 'should allow `ENTER` keypress within the text field to trigger submission of value', async () => {
+		const textValue = 'My new text value';
+		const mockOnChange = jest.fn();
+		act( () => {
+			render(
+				<LinkControl
+					value={ selectedLink }
+					forceIsEditingLink
+					hasTextControl
+					onChange={ mockOnChange }
+				/>,
+				container
+			);
+		} );
+
+		const textInput = queryByRole( container, 'textbox', { name: 'Text' } );
+
+		expect( textInput ).toBeTruthy();
+
+		act( () => {
+			Simulate.change( textInput, {
+				target: { value: textValue },
+			} );
+		} );
+
+		// Attempt to submit the empty search value in the input.
+		act( () => {
+			Simulate.keyDown( textInput, { keyCode: ENTER } );
+		} );
+
+		expect( mockOnChange ).toHaveBeenCalledWith( {
+			title: textValue,
+			url: selectedLink.url,
+		} );
+
+		// The text input should not be showing as the form is submitted.
+		expect(
+			queryByRole( container, 'textbox', { name: 'Text' } )
+		).toBeFalsy();
+	} );
+} );