@wordpress/block-editor 12.2.0 → 12.3.0

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

@@ -6,11 +6,12 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import { Button, Spinner, Notice } from '@wordpress/components';
+import { Button, Spinner, Notice, TextControl } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { useRef, useState, useEffect } from '@wordpress/element';
 import { focus } from '@wordpress/dom';
 import { ENTER } from '@wordpress/keycodes';
+import { isShallowEqualObjects } from '@wordpress/is-shallow-equal';
 
 /**
  * Internal dependencies
@@ -18,8 +19,9 @@ import { ENTER } from '@wordpress/keycodes';
 import LinkControlSettingsDrawer from './settings-drawer';
 import LinkControlSearchInput from './search-input';
 import LinkPreview from './link-preview';
+import LinkSettings from './settings';
 import useCreatePage from './use-create-page';
-import useInternalInputValue from './use-internal-input-value';
+import useInternalValue from './use-internal-value';
 import { ViewerFill } from './viewer-slot';
 import { DEFAULT_LINK_SETTINGS } from './constants';
 
@@ -136,13 +138,20 @@ function LinkControl( {
 	const textInputRef = useRef();
 	const isEndingEditWithFocus = useRef( false );
 
+	const settingsKeys = settings.map( ( { id } ) => id );
+
 	const [ settingsOpen, setSettingsOpen ] = useState( false );
 
-	const [ internalUrlInputValue, setInternalUrlInputValue ] =
-		useInternalInputValue( value?.url || '' );
+	const [
+		internalControlValue,
+		setInternalControlValue,
+		setInternalURLInputValue,
+		setInternalTextInputValue,
+		createSetInternalSettingValueHandler,
+	] = useInternalValue( value );
 
-	const [ internalTextInputValue, setInternalTextInputValue ] =
-		useInternalInputValue( value?.title || '' );
+	const valueHasChanges =
+		value && ! isShallowEqualObjects( internalControlValue, value );
 
 	const [ isEditingLink, setIsEditingLink ] = useState(
 		forceIsEditingLink !== undefined
@@ -160,6 +169,8 @@ function LinkControl( {
 		) {
 			setIsEditingLink( forceIsEditingLink );
 		}
+		// Todo: bug if the missing dep is introduced. Will need a fix.
+		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [ forceIsEditingLink ] );
 
 	useEffect( () => {
@@ -208,22 +219,39 @@ function LinkControl( {
 	};
 
 	const handleSelectSuggestion = ( updatedValue ) => {
+		// Suggestions may contains "settings" values (e.g. `opensInNewTab`)
+		// which should not overide any existing settings values set by the
+		// user. This filters out any settings values from the suggestion.
+		const nonSettingsChanges = Object.keys( updatedValue ).reduce(
+			( acc, key ) => {
+				if ( ! settingsKeys.includes( key ) ) {
+					acc[ key ] = updatedValue[ key ];
+				}
+				return acc;
+			},
+			{}
+		);
+
 		onChange( {
-			...updatedValue,
-			title: internalTextInputValue || updatedValue?.title,
+			...internalControlValue,
+			...nonSettingsChanges,
+			// As title is not a setting, it must be manually applied
+			// in such a way as to preserve the users changes over
+			// any "title" value provided by the "suggestion".
+			title: internalControlValue?.title || updatedValue?.title,
 		} );
+
 		stopEditing();
 	};
 
 	const handleSubmit = () => {
-		if (
-			currentUrlInputValue !== value?.url ||
-			internalTextInputValue !== value?.title
-		) {
+		if ( valueHasChanges ) {
+			// Submit the original value with new stored values applied
+			// on top. URL is a special case as it may also be a prop.
 			onChange( {
 				...value,
+				...internalControlValue,
 				url: currentUrlInputValue,
-				title: internalTextInputValue,
 			} );
 		}
 		stopEditing();
@@ -231,6 +259,7 @@ function LinkControl( {
 
 	const handleSubmitWithEnter = ( event ) => {
 		const { keyCode } = event;
+
 		if (
 			keyCode === ENTER &&
 			! currentInputIsEmpty // Disallow submitting empty values.
@@ -241,8 +270,7 @@ function LinkControl( {
 	};
 
 	const resetInternalValues = () => {
-		setInternalUrlInputValue( value?.url );
-		setInternalTextInputValue( value?.title );
+		setInternalControlValue( value );
 	};
 
 	const handleCancel = ( event ) => {
@@ -263,7 +291,8 @@ function LinkControl( {
 		onCancel?.();
 	};
 
-	const currentUrlInputValue = propInputValue || internalUrlInputValue;
+	const currentUrlInputValue =
+		propInputValue || internalControlValue?.url || '';
 
 	const currentInputIsEmpty = ! currentUrlInputValue?.trim()?.length;
 
@@ -278,6 +307,7 @@ function LinkControl( {
 	const showTextControl = hasLinkValue && hasTextControl;
 
 	const isEditing = ( isEditingLink || ! value ) && ! isCreatingPage;
+	const isDisabled = ! valueHasChanges || currentInputIsEmpty;
 
 	return (
 		<div
@@ -306,7 +336,7 @@ function LinkControl( {
 							value={ currentUrlInputValue }
 							withCreateSuggestion={ withCreateSuggestion }
 							onCreateSuggestion={ createPage }
-							onChange={ setInternalUrlInputValue }
+							onChange={ setInternalURLInputValue }
 							onSelect={ handleSelectSuggestion }
 							showInitialSuggestions={ showInitialSuggestions }
 							allowDirectEntry={ ! noDirectEntry }
@@ -318,6 +348,17 @@ function LinkControl( {
 							}
 							useLabel={ showTextControl }
 						/>
+						{ showTextControl && (
+							<TextControl
+								__nextHasNoMarginBottom
+								ref={ textInputRef }
+								className="block-editor-link-control__field block-editor-link-control__text-content"
+								label={ __( 'Text' ) }
+								value={ internalControlValue?.title }
+								onChange={ setInternalTextInputValue }
+								onKeyDown={ handleSubmitWithEnter }
+							/>
+						) }
 					</div>
 					{ errorMessage && (
 						<Notice
@@ -344,32 +385,29 @@ function LinkControl( {
 
 			{ isEditing && (
 				<div className="block-editor-link-control__tools">
-					{ ( showSettings || showTextControl ) && (
+					{ showSettings && (
 						<LinkControlSettingsDrawer
 							settingsOpen={ settingsOpen }
 							setSettingsOpen={ setSettingsOpen }
-							showTextControl={ showTextControl }
-							showSettings={ showSettings }
-							textInputRef={ textInputRef }
-							internalTextInputValue={ internalTextInputValue }
-							setInternalTextInputValue={
-								setInternalTextInputValue
-							}
-							handleSubmitWithEnter={ handleSubmitWithEnter }
-							value={ value }
-							settings={ settings }
-							onChange={ onChange }
-						/>
+						>
+							<LinkSettings
+								value={ internalControlValue }
+								settings={ settings }
+								onChange={ createSetInternalSettingValueHandler(
+									settingsKeys
+								) }
+							/>
+						</LinkControlSettingsDrawer>
 					) }
 
 					<div className="block-editor-link-control__search-actions">
 						<Button
 							variant="primary"
-							onClick={ handleSubmit }
+							onClick={ isDisabled ? noop : handleSubmit }
 							className="block-editor-link-control__search-submit"
-							disabled={ currentInputIsEmpty } // Disallow submitting empty values.
+							aria-disabled={ isDisabled }
 						>
-							{ __( 'Apply' ) }
+							{ __( 'Save' ) }
 						</Button>
 						<Button variant="tertiary" onClick={ handleCancel }>
 							{ __( 'Cancel' ) }

package/src/components/link-control/is-url-like.js

@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { isURL } from '@wordpress/url';
+import { getProtocol, isValidProtocol, isValidFragment } from '@wordpress/url';
 
 /**
  * Determines whether a given value could be a URL. Note this does not
@@ -15,6 +15,43 @@ import { isURL } from '@wordpress/url';
  * @return {boolean} whether or not the value is potentially a URL.
  */
 export default function isURLLike( val ) {
-	const isInternal = val?.startsWith( '#' );
-	return isURL( val ) || ( val && val.includes( 'www.' ) ) || isInternal;
+	const hasSpaces = val.includes( ' ' );
+
+	if ( hasSpaces ) {
+		return false;
+	}
+
+	const protocol = getProtocol( val );
+	const protocolIsValid = isValidProtocol( protocol );
+
+	const mayBeTLD = hasPossibleTLD( val );
+
+	const isWWW = val?.startsWith( 'www.' );
+
+	const isInternal = val?.startsWith( '#' ) && isValidFragment( val );
+
+	return protocolIsValid || isWWW || isInternal || mayBeTLD;
+}
+
+/**
+ * Checks if a given URL has a valid Top-Level Domain (TLD).
+ *
+ * @param {string} url       - The URL to check.
+ * @param {number} maxLength - The maximum length of the TLD.
+ * @return {boolean} Returns true if the URL has a valid TLD, false otherwise.
+ */
+function hasPossibleTLD( url, maxLength = 6 ) {
+	// Clean the URL by removing anything after the first occurrence of "?" or "#".
+	const cleanedURL = url.split( /[?#]/ )[ 0 ];
+
+	// Regular expression explanation:
+	// - (?<=\S)                  : Positive lookbehind assertion to ensure there is at least one non-whitespace character before the TLD
+	// - \.                       : Matches a literal dot (.)
+	// - [a-zA-Z_]{2,maxLength}   : Matches 2 to maxLength letters or underscores, representing the TLD
+	// - (?:\/|$)                 : Non-capturing group that matches either a forward slash (/) or the end of the string
+	const regex = new RegExp(
+		`(?<=\\S)\\.(?:[a-zA-Z_]{2,${ maxLength }})(?:\\/|$)`
+	);
+
+	return regex.test( cleanedURL );
 }

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

@@ -8,7 +8,6 @@ import { VisuallyHidden } from '@wordpress/components';
  * External dependencies
  */
 import classnames from 'classnames';
-import { createElement, Fragment } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -53,25 +52,16 @@ export default function LinkControlSearchResults( {
 	// See: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/listbox_role
 	const searchResultsLabelId = `block-editor-link-control-search-results-label-${ instanceId }`;
 	const labelText = isInitialSuggestions
-		? __( 'Recently updated' )
+		? __( 'Suggestions' )
 		: sprintf(
 				/* translators: %s: search term. */
 				__( 'Search results for "%s"' ),
 				currentInputValue
 		  );
-
-	// VisuallyHidden rightly doesn't accept custom classNames
-	// so we conditionally render it as a wrapper to visually hide the label
-	// when that is required.
-	const searchResultsLabel = createElement(
-		isInitialSuggestions ? Fragment : VisuallyHidden,
-		{}, // Empty props.
-		<span
-			className="block-editor-link-control__search-results-label"
-			id={ searchResultsLabelId }
-		>
+	const searchResultsLabel = (
+		<VisuallyHidden id={ searchResultsLabelId }>
 			{ labelText }
-		</span>
+		</VisuallyHidden>
 	);
 
 	return (

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

@@ -3,7 +3,6 @@
  */
 import {
 	Button,
-	TextControl,
 	__unstableMotion as motion,
 	__unstableAnimatePresence as AnimatePresence,
 } from '@wordpress/components';
@@ -12,24 +11,7 @@ import { useReducedMotion, useInstanceId } from '@wordpress/compose';
 import { __ } from '@wordpress/i18n';
 import { Fragment } from '@wordpress/element';
 
-/**
- * Internal dependencies
- */
-import Settings from './settings';
-
-function LinkSettingsDrawer( {
-	settingsOpen,
-	setSettingsOpen,
-	showTextControl,
-	showSettings,
-	textInputRef,
-	internalTextInputValue,
-	setInternalTextInputValue,
-	handleSubmitWithEnter,
-	value,
-	settings,
-	onChange,
-} ) {
+function LinkSettingsDrawer( { children, settingsOpen, setSettingsOpen } ) {
 	const prefersReducedMotion = useReducedMotion();
 	const MaybeAnimatePresence = prefersReducedMotion
 		? Fragment
@@ -68,24 +50,7 @@ function LinkSettingsDrawer( {
 						} }
 					>
 						<div className="block-editor-link-control__drawer-inner">
-							{ showTextControl && (
-								<TextControl
-									__nextHasNoMarginBottom
-									ref={ textInputRef }
-									className="block-editor-link-control__setting block-editor-link-control__text-content"
-									label="Text"
-									value={ internalTextInputValue }
-									onChange={ setInternalTextInputValue }
-									onKeyDown={ handleSubmitWithEnter }
-								/>
-							) }
-							{ showSettings && (
-								<Settings
-									value={ value }
-									settings={ settings }
-									onChange={ onChange }
-								/>
-							) }
+							{ children }
 						</div>
 					</MaybeMotionDiv>
 				) }

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

@@ -2,7 +2,7 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { ToggleControl, VisuallyHidden } from '@wordpress/components';
+import { CheckboxControl, VisuallyHidden } from '@wordpress/components';
 
 const noop = () => {};
 
@@ -19,7 +19,7 @@ const LinkControlSettings = ( { value, onChange = noop, settings } ) => {
 	};
 
 	const theSettings = settings.map( ( setting ) => (
-		<ToggleControl
+		<CheckboxControl
 			__nextHasNoMarginBottom
 			className="block-editor-link-control__setting"
 			key={ setting.id }

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

@@ -125,12 +125,6 @@ $preview-image-height: 140px;
 	}
 }
 
-.block-editor-link-control__search-results-label {
-	padding: $grid-unit-20 $grid-unit-40 0;
-	display: block;
-	font-weight: 600;
-}
-
 .block-editor-link-control__search-results {
 	margin: 0;
 	padding: $grid-unit-20 * 0.5 $grid-unit-20 $grid-unit-20 * 0.5;
@@ -495,6 +489,11 @@ $preview-image-height: 140px;
 .block-editor-link-control__setting {
 	margin-bottom: $grid-unit-20;
 
+	// Cancel left margin inherited from WP Admin Forms CSS.
+	input {
+		margin-left: 0;
+	}
+
 	&.block-editor-link-control__setting:last-child {
 		margin-bottom: 0;
 	}