@wordpress/block-editor 15.12.0 → 15.12.2-next.v.0

package/src/components/inspector-controls/last-item.js

@@ -0,0 +1,29 @@
+/**
+ * WordPress dependencies
+ */
+import { createSlotFill } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import {
+	useBlockEditContext,
+	mayDisplayControlsKey,
+} from '../block-edit/context';
+
+const { Fill, Slot } = createSlotFill( Symbol( 'InspectorControlsLastItem' ) );
+
+const InspectorControlsLastItem = ( props ) => {
+	const context = useBlockEditContext();
+	if ( ! context[ mayDisplayControlsKey ] ) {
+		return null;
+	}
+	return <Fill { ...props } />;
+};
+InspectorControlsLastItem.Slot = function InspectorControlsLastItemSlot(
+	props
+) {
+	return <Slot { ...props } />;
+};
+
+export default InspectorControlsLastItem;

package/src/components/inspector-controls-tabs/styles-tab.js

@@ -23,14 +23,14 @@ function SectionBlockColorControls( {
 	const settings = useBlockSettings( blockName );
 	const { updateBlockAttributes } = useDispatch( blockEditorStore );
 
-	const { hasButton, hasHeading } = useSelect(
+	const { hasButtons, hasHeading } = useSelect(
 		( select ) => {
 			const blockNames =
 				select( blockEditorStore ).getBlockNamesByClientId(
 					contentClientIds
 				);
 			return {
-				hasButton: blockNames.includes( 'core/button' ),
+				hasButtons: blockNames.includes( 'core/buttons' ),
 				hasHeading: blockNames.includes( 'core/heading' ),
 			};
 		},
@@ -52,7 +52,7 @@ function SectionBlockColorControls( {
 			defaultControls={ {
 				text: true,
 				background: true,
-				button: hasButton,
+				button: hasButtons,
 				heading: hasHeading,
 			} }
 		/>

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

@@ -24,6 +24,7 @@ import { useSelect, useDispatch } from '@wordpress/data';
 import { store as preferencesStore } from '@wordpress/preferences';
 import { keyboardReturn, linkOff } from '@wordpress/icons';
 import deprecated from '@wordpress/deprecated';
+import { isURL, prependHTTPS } from '@wordpress/url';
 
 /**
  * Internal dependencies
@@ -35,7 +36,8 @@ import LinkSettings from './settings';
 import useCreatePage from './use-create-page';
 import useInternalValue from './use-internal-value';
 import { ViewerFill } from './viewer-slot';
-import { DEFAULT_LINK_SETTINGS } from './constants';
+import { DEFAULT_LINK_SETTINGS, LINK_ENTRY_TYPES } from './constants';
+import isURLLike, { isHashLink, isRelativePath } from './is-url-like';
 
 /**
  * Default properties associated with a link control value.
@@ -149,6 +151,10 @@ function LinkControl( {
 	}
 
 	const [ settingsOpen, setSettingsOpen ] = useState( false );
+	// Sets if the URL value is valid when submitted. The value could be set to
+	// { type: 'invalid', message: 'Please enter a valid URL.' } or { type: 'valid' }.
+	// When it is undefined, the URL value has not been validated.
+	const [ customValidity, setCustomValidity ] = useState( undefined );
 
 	const { advancedSettingsPreference } = useSelect( ( select ) => {
 		const prefsStore = select( preferencesStore );
@@ -264,6 +270,21 @@ function LinkControl( {
 		};
 	}, [] );
 
+	// Trigger validation display when customValidity becomes invalid.
+	// This effect runs after React has applied the customValidity state update
+	// and ControlWithError's useEffect has set the native validity on the input.
+	useEffect( () => {
+		if ( customValidity?.type === 'invalid' ) {
+			const inputElement = searchInputRef.current;
+			if (
+				inputElement &&
+				typeof inputElement.reportValidity === 'function'
+			) {
+				inputElement.reportValidity();
+			}
+		}
+	}, [ customValidity ] );
+
 	const hasLinkValue = value?.url?.trim()?.length > 0;
 
 	/**
@@ -273,7 +294,77 @@ function LinkControl( {
 		setIsEditingLink( false );
 	};
 
+	/**
+	 * Validates a URL string using a multi-stage validation process.
+	 * This helper consolidates URL validation logic used throughout the component.
+	 *
+	 * @param {string} urlToValidate - The URL string to validate
+	 * @return {Object} Validation result with isValid boolean and optional errorMessage
+	 */
+	const validateUrl = ( urlToValidate ) => {
+		const invalidResult = {
+			type: 'invalid',
+			message: __( 'Please enter a valid URL.' ),
+		};
+
+		const validResult = {
+			type: 'valid',
+		};
+
+		const trimmedValue = urlToValidate?.trim();
+
+		// If empty or not URL-like, return invalid
+		if ( ! trimmedValue?.length || ! isURLLike( trimmedValue ) ) {
+			return invalidResult;
+		}
+
+		// Hash links (internal anchor links) and relative paths (/, ./, ../) are
+		// valid href values but cannot be validated by the native URL constructor
+		// (which requires absolute URLs). These are already validated by isURLLike.
+		// Skip URL constructor validation for these cases.
+		if ( isHashLink( trimmedValue ) || isRelativePath( trimmedValue ) ) {
+			return validResult;
+		}
+
+		// Perform URL validation using the native URL constructor as the authoritative source.
+		// The native URL constructor is the standard for URL validity - if it accepts a URL,
+		// we should allow it. For URLs without a protocol (e.g., "www.wordpress.org"),
+		// prepend "http://" before validating, as the URL constructor requires a protocol.
+		//
+		// Note: Protocol URLs (mailto:, tel:, etc.) are also validated by the native
+		// URL constructor, so we don't need special handling for them.
+		//
+		// Note: We rely on the native URL constructor rather than implementing custom TLD
+		// validation to avoid blocking valid URLs. If a URL passes the native constructor,
+		// it's technically valid according to web standards.
+		const urlToCheck = prependHTTPS( trimmedValue );
+		return isURL( urlToCheck ) ? validResult : invalidResult;
+	};
+
 	const handleSelectSuggestion = ( updatedValue ) => {
+		// Validate URL suggestions (link, mailto, tel, internal) or manually entered URLs.
+		// Entity suggestions (post, page, category, etc.) don't need validation as they come from the database.
+		// However, URL suggestions (created from user input with types like 'link', 'mailto', etc.)
+		// still need validation as they may contain invalid URLs like "www.wordp".
+		const isEntitySuggestion =
+			updatedValue &&
+			updatedValue.id &&
+			updatedValue.type &&
+			! LINK_ENTRY_TYPES.includes( updatedValue.type );
+
+		if ( ! isEntitySuggestion ) {
+			// URL suggestion (link, mailto, tel, internal) or manually entered URL - validate before submitting
+			// Use the URL from the suggestion, or fall back to currentUrlInputValue
+			const urlToValidate = updatedValue?.url || currentUrlInputValue;
+
+			// Validate the URL using the shared validation helper
+			const validation = validateUrl( urlToValidate );
+			if ( validation.type === 'invalid' ) {
+				setCustomValidity( validation );
+				return;
+			}
+		}
+
 		// Preserve the URL for taxonomy entities before binding overrides it
 		if ( updatedValue?.kind === 'taxonomy' && updatedValue?.url ) {
 			entityUrlFallbackRef.current = updatedValue.url;
@@ -301,10 +392,52 @@ function LinkControl( {
 			title: internalControlValue?.title || updatedValue?.title,
 		} );
 
+		// Reset validation state when a suggestion is selected
+		setCustomValidity( undefined );
+
 		stopEditing();
 	};
 
-	const handleSubmit = () => {
+	// Centralized validation function
+	const validateAndSetValidity = () => {
+		if ( currentInputIsEmpty ) {
+			return false;
+		}
+
+		const trimmedValue = currentUrlInputValue.trim();
+
+		// If the current value is an entity link (has id and type not in LINK_ENTRY_TYPES)
+		// and the URL hasn't changed from the original value, skip validation.
+		// This allows entity links with permalink formats like "?p=2" to work without
+		// requiring URL validation when only settings are being changed.
+		const isEntityLink =
+			internalControlValue &&
+			internalControlValue.id &&
+			internalControlValue.type &&
+			! LINK_ENTRY_TYPES.includes( internalControlValue.type );
+		const urlUnchanged = value?.url === trimmedValue;
+
+		if ( isEntityLink && urlUnchanged ) {
+			// Entity link with unchanged URL - skip validation
+			setCustomValidity( undefined );
+			return true;
+		}
+
+		// Validate the URL using the shared validation helper
+		const validation = validateUrl( currentUrlInputValue );
+
+		if ( validation.type === 'invalid' ) {
+			setCustomValidity( validation );
+			return false;
+		}
+
+		// Valid URL
+		setCustomValidity( undefined );
+		return true;
+	};
+
+	// Centralized submission function
+	const submitUrlValue = () => {
 		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.
@@ -315,6 +448,17 @@ function LinkControl( {
 			} );
 		}
 		stopEditing();
+		setCustomValidity( undefined );
+	};
+
+	const handleSubmit = () => {
+		// Validate URL before submitting
+		if ( ! validateAndSetValidity() ) {
+			return;
+		}
+
+		// Validation passed - proceed with submission
+		submitUrlValue();
 	};
 
 	const handleSubmitWithEnter = ( event ) => {
@@ -340,6 +484,9 @@ function LinkControl( {
 		// Ensure that any unsubmitted input changes are reset.
 		resetInternalValues();
 
+		// Reset validation state
+		setCustomValidity( undefined );
+
 		if ( hasLinkValue ) {
 			// If there is a link then exist editing mode and show preview.
 			stopEditing();
@@ -388,6 +535,12 @@ function LinkControl( {
 
 	const currentInputIsEmpty = ! currentUrlInputValue?.trim()?.length;
 
+	// Reset validation state when the URL value changes
+	useEffect( () => {
+		setCustomValidity( undefined );
+	}, [ currentUrlInputValue ] );
+
+	const isUrlValid = ! customValidity;
 	const shownUnlinkControl =
 		onRemove && value && ! isEditingLink && ! isCreatingPage;
 
@@ -399,7 +552,10 @@ function LinkControl( {
 	const showTextControl = hasLinkValue && hasTextControl;
 
 	const isEditing = ( isEditingLink || ! value ) && ! isCreatingPage;
-	const isDisabled = ! valueHasChanges || currentInputIsEmpty;
+	// When creating a new link (no existing value), allow submission if input is not empty and URL is valid
+	// When editing an existing link, also require that the value has changed
+	const isDisabled =
+		currentInputIsEmpty || ! isUrlValid || ( value && ! valueHasChanges );
 	const showSettings = !! settings?.length && isEditingLink && hasLinkValue;
 
 	const previewValue = useMemo( () => {
@@ -472,6 +628,7 @@ function LinkControl( {
 							}
 							hideLabelFromVision={ ! showTextControl }
 							isEntity={ isEntity }
+							customValidity={ customValidity }
 							suffix={
 								<SearchSuffixControl
 									isEntity={ isEntity }

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

@@ -4,11 +4,42 @@
 import { getProtocol, isValidProtocol, isValidFragment } from '@wordpress/url';
 
 /**
- * Determines whether a given value could be a URL. Note this does not
- * guarantee the value is a URL only that it looks like it might be one. For
- * example, just because a string has `www.` in it doesn't make it a URL,
- * but it does make it highly likely that it will be so in the context of
- * creating a link it makes sense to treat it like one.
+ * Checks if a value is a hash/anchor link (e.g., #section).
+ *
+ * @param {string} val The value to check.
+ * @return {boolean} True if the value is a valid hash link.
+ */
+export function isHashLink( val ) {
+	return val?.startsWith( '#' ) && isValidFragment( val );
+}
+
+/**
+ * Checks if a value is a relative path (e.g., /page, ./page, ../page).
+ *
+ * @param {string} val The value to check.
+ * @return {boolean} True if the value is a relative path.
+ */
+export function isRelativePath( val ) {
+	return (
+		val?.startsWith( '/' ) ||
+		val?.startsWith( './' ) ||
+		val?.startsWith( '../' )
+	);
+}
+
+/**
+ * Determines whether a given value could be a URL or valid href value (like
+ * relative paths or hash links). Note this does not guarantee the value is a
+ * URL only that it looks like something that should be treated as direct entry
+ * rather than a search term. For example, just because a string has `www.` in
+ * it doesn't make it a URL, but it does make it highly likely that it will be
+ * so in the context of creating a link it makes sense to treat it like one.
+ *
+ * Examples of "URL-like" values:
+ * - URLs with protocols: `https://wordpress.org`, `mailto:test@example.com`
+ * - Domain-like strings: `www.wordpress.org`, `wordpress.org`
+ * - Relative paths: `/handbook`, `./page`, `../parent`
+ * - Hash links: `#section`
  *
  * @param {string} val the candidate for being URL-like (or not).
  *
@@ -28,9 +59,13 @@ export default function isURLLike( val ) {
 
 	const isWWW = val?.startsWith( 'www.' );
 
-	const isInternal = val?.startsWith( '#' ) && isValidFragment( val );
-
-	return protocolIsValid || isWWW || isInternal || mayBeTLD;
+	return (
+		protocolIsValid ||
+		isWWW ||
+		isHashLink( val ) ||
+		mayBeTLD ||
+		isRelativePath( val )
+	);
 }
 
 /**

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

@@ -45,6 +45,7 @@ const LinkControlSearchInput = forwardRef(
 			hideLabelFromVision = false,
 			suffix,
 			isEntity = false,
+			customValidity: customValidityProp,
 		},
 		ref
 	) => {
@@ -146,6 +147,12 @@ const LinkControlSearchInput = forwardRef(
 					__experimentalShowInitialSuggestions={
 						showInitialSuggestions
 					}
+					customValidity={ customValidityProp }
+					// Suppress the "(Required)" indicator that appears when validation
+					// is triggered. The field is still required for validation purposes,
+					// but we don't want to show the indicator as it looks cluttered
+					// in the link control UI.
+					markWhenOptional
 					onSubmit={ ( suggestion, event ) => {
 						const hasSuggestion = suggestion || focusedSuggestion;
 

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

@@ -1061,6 +1061,31 @@ describe( 'Link submission', () => {
 
 		expect( editSubmitButton ).toHaveAttribute( 'aria-disabled', 'false' );
 	} );
+
+	it( 'should disable Apply button when URL is cleared', async () => {
+		const user = userEvent.setup();
+		const mockOnChange = jest.fn();
+
+		const existingLink = { url: 'https://example.com', title: 'Example' };
+		render(
+			<LinkControl
+				value={ existingLink }
+				forceIsEditingLink
+				onChange={ mockOnChange }
+			/>
+		);
+
+		const searchInput = screen.getByRole( 'combobox' );
+		// Clear the input
+		await user.clear( searchInput );
+
+		// Apply button should be disabled when input is empty
+		const submitButton = screen.getByRole( 'button', { name: 'Apply' } );
+		expect( submitButton ).toHaveAttribute( 'aria-disabled', 'true' );
+
+		// onChange should not be called
+		expect( mockOnChange ).not.toHaveBeenCalled();
+	} );
 } );
 
 describe( 'Default search suggestions', () => {
@@ -3238,6 +3263,241 @@ describe( 'Custom settings rendering', () => {
 	} );
 } );
 
+describe( 'URL validation', () => {
+	const user = userEvent.setup();
+	const mockOnChange = jest.fn();
+
+	beforeEach( () => {
+		mockOnChange.mockClear();
+	} );
+
+	it( 'should prevent submission for invalid URLs', async () => {
+		render(
+			<LinkControl
+				value={ { url: '' } }
+				forceIsEditingLink
+				onChange={ mockOnChange }
+			/>
+		);
+
+		const searchInput = screen.getByRole( 'combobox' );
+		// Use a string that is not a valid URL
+		await user.type( searchInput, 'not a url' );
+
+		// Press Enter - this should trigger validation
+		// Since the value doesn't pass isURLLike, it won't create a suggestion,
+		// but if it did, validation would prevent submission
+		triggerEnter( searchInput );
+
+		// For URLs that don't pass isURLLike, no suggestion is created,
+		// so onChange won't be called (which is the expected behavior)
+		expect( mockOnChange ).not.toHaveBeenCalled();
+	} );
+
+	it.each( [
+		{
+			description: 'valid URLs with protocol',
+			url: 'https://wordpress.org',
+			searchPattern: /https:\/\/wordpress\.org/,
+		},
+		{
+			description: 'valid URLs without protocol (without http://)',
+			url: 'www.wordpress.org',
+			searchPattern: /www\.wordpress\.org/,
+		},
+		{
+			description: 'hash links (internal anchor links)',
+			url: '#section',
+			searchPattern: /#section/,
+		},
+		{
+			description: 'relative paths (URLs starting with /)',
+			url: '/handbook',
+			searchPattern: /\/handbook/,
+		},
+	] )( 'should accept $description', async ( { url, searchPattern } ) => {
+		render(
+			<LinkControl
+				value={ { url: '' } }
+				forceIsEditingLink
+				onChange={ mockOnChange }
+			/>
+		);
+
+		const searchInput = screen.getByRole( 'combobox' );
+		await user.type( searchInput, url );
+
+		// Wait for suggestion to appear and become stable
+		await screen.findByRole( 'option', {
+			name: searchPattern,
+		} );
+
+		triggerEnter( searchInput );
+
+		// No validation error - should succeed
+		await waitFor( () => {
+			expect( mockOnChange ).toHaveBeenCalled();
+		} );
+
+		expect( mockOnChange ).toHaveBeenCalledWith(
+			expect.objectContaining( {
+				url,
+			} )
+		);
+	} );
+
+	it( 'should skip validation for entity suggestions (posts, pages, categories)', async () => {
+		const entityLink = {
+			id: 1,
+			title: 'Hello Page',
+			type: 'page',
+			url: '?p=1',
+		};
+
+		render(
+			<LinkControl
+				value={ entityLink }
+				forceIsEditingLink
+				onChange={ mockOnChange }
+				hasTextControl
+			/>
+		);
+
+		// Make a change by toggling the "Open in new tab" setting
+		// Entity links with unchanged URLs skip validation
+		const advancedButton = screen.getByRole( 'button', {
+			name: 'Advanced',
+		} );
+		await user.click( advancedButton );
+
+		const newTabToggle = screen.getByRole( 'checkbox', {
+			name: 'Open in new tab',
+		} );
+		await user.click( newTabToggle );
+
+		const submitButton = screen.getByRole( 'button', { name: 'Apply' } );
+		await user.click( submitButton );
+
+		// Should succeed without validation error
+		await waitFor( () => {
+			expect( mockOnChange ).toHaveBeenCalled();
+		} );
+		expect(
+			screen.queryByText( 'Please enter a valid URL.' )
+		).not.toBeInTheDocument();
+	} );
+
+	it( 'should show validation error when clicking Apply button with invalid URL', async () => {
+		// When editing an existing link, use Apply button
+		const existingLink = { url: 'https://example.com', title: 'Example' };
+		render(
+			<LinkControl
+				value={ existingLink }
+				forceIsEditingLink
+				onChange={ mockOnChange }
+			/>
+		);
+
+		const searchInput = screen.getByRole( 'combobox' );
+		await user.clear( searchInput );
+		await user.type( searchInput, 'invalid url' );
+
+		const submitButton = screen.getByRole( 'button', { name: 'Apply' } );
+
+		// Click the button - validation will run and prevent submission
+		await user.click( submitButton );
+
+		// Wait for the next frame where validation error appears
+		await waitFor(
+			() => {
+				expect(
+					screen.getByText( 'Please enter a valid URL.' )
+				).toBeVisible();
+			},
+			{ timeout: 100 }
+		);
+
+		// onChange should not be called because validation prevented submission
+		expect( mockOnChange ).not.toHaveBeenCalled();
+	} );
+
+	it( 'should show validation error when pressing Enter to submit with an invalid URL', async () => {
+		// When editing an existing link, use Apply button
+		const existingLink = { url: 'https://example.com', title: 'Example' };
+		render(
+			<LinkControl
+				value={ existingLink }
+				forceIsEditingLink
+				onChange={ mockOnChange }
+			/>
+		);
+
+		const searchInput = screen.getByRole( 'combobox' );
+		await user.clear( searchInput );
+		await user.type( searchInput, 'invalid url' );
+
+		// Click without blur - use fireEvent for synchronous click
+		triggerEnter( searchInput );
+
+		// Wait for the next frame where validation error appears
+		await waitFor(
+			() => {
+				expect(
+					screen.getByText( 'Please enter a valid URL.' )
+				).toBeVisible();
+			},
+			{ timeout: 100 }
+		);
+
+		// onChange should not be called because validation prevented submission
+		expect( mockOnChange ).not.toHaveBeenCalled();
+	} );
+
+	it( 'should allow URLs that pass native URL constructor validation', async () => {
+		render(
+			<LinkControl
+				value={ { url: '' } }
+				forceIsEditingLink
+				onChange={ mockOnChange }
+			/>
+		);
+
+		const searchInput = screen.getByRole( 'combobox' );
+		// This URL may seem invalid but passes native URL constructor
+		await user.type( searchInput, 'www.wordpress' );
+
+		// Wait for suggestion to appear and become stable
+		await screen.findByRole( 'option', {
+			name: /www\.wordpress/,
+		} );
+
+		triggerEnter( searchInput );
+
+		// Should be accepted (validation philosophy: native URL constructor is authoritative)
+		await waitFor( () => {
+			expect( mockOnChange ).toHaveBeenCalled();
+		} );
+
+		// This URL passes native URL constructor validation, so we allow it.
+		// While "www.wordpress" (without a TLD like .com or .org) is technically
+		// valid and could resolve (e.g., on an intranet), it's unlikely to be
+		// a useful URL in practice. However, our validation philosophy is to
+		// trust the native URL constructor as the authoritative source - if the
+		// browser accepts it, we accept it.
+		expect( mockOnChange ).toHaveBeenCalledWith(
+			expect.objectContaining( {
+				url: 'www.wordpress',
+			} )
+		);
+	} );
+
+	// Note: mailto: and tel: protocol URLs are handled by the validation logic
+	// (they skip URL constructor validation if they have a valid protocol),
+	// but testing them in the jsdom environment is problematic as the native
+	// URL constructor behavior may differ. These URLs are covered by the
+	// isURLLike validation which checks for valid protocols.
+} );
+
 function getSettingsDrawerToggle() {
 	return screen.queryByRole( 'button', {
 		name: 'Advanced',