WordPress · noisysocks · Oct 26, 2021 · Oct 6, 2021 · Oct 6, 2021 · Sep 27, 2021
@@ -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';
@@ -119,15 +120,21 @@ function LinkControl( {
 	noURLSuggestion = false,
 	createSuggestionButtonText,
 	hasRichPreviews = false,
+	hasTextControl = false,
 } ) {
 	if ( withCreateSuggestion === undefined && createSuggestion ) {
 		withCreateSuggestion = true;
 	}
 
 	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 +156,45 @@ 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 ] );
 
+	/**
+	 * If the value's `text` property changes then sync this
+	 * back up with state.
+	 */
+	useEffect( () => {
+		if ( value?.title && value.title !== internalTextValue ) {
+			setInternalTextValue( value.title );
+		}
+	}, [ 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 +212,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 && hasTextControl;
+
 	return (
 		<div
 			tabIndex={ -1 }
@@ -212,10 +267,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 +301,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"

@@ -14,6 +14,7 @@ import {
 } from '@wordpress/components';
 import { filterURLForDisplay, safeDecodeURI } from '@wordpress/url';
 import { Icon, globe, info, linkOff, edit } from '@wordpress/icons';
+import { __unstableStripHTML as stripHTML } from '@wordpress/dom';
 
 /**
  * Internal dependencies
@@ -41,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;
@@ -84,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 && (

@@ -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' ) }

@@ -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);
 }