LinkControl: Prepend https:// to URLs on direct entry

packages/block-editor/src/components/link-control/README.md

@@ -50,7 +50,16 @@ Consumers who which to take advantage of this functionality should ensure that t
 When creating links the `LinkControl` component will handle two kinds of input from users:
 
 1. Entity searches - the user may input free-text based search queries for entities retrieved from remote data sources (in the context of WordPress these are post-type entities). For example, a user might search for a `Page` they have just created by name (eg: About) and the UI will return a matching result if found.
-2. Direct entry - the user may also enter any arbitrary URL-like text. This includes full URLs (https://), URL fragments (eg: `#myinternallink`), `tel` protocol links (eg: `tel: 0800 1234`) and `mailto` protocol links (eg: `mailto: hello@wordpress.org`).
+2. Direct entry - the user may also enter any arbitrary URL-like text. This includes:
+    - Full URLs (https://)
+    - Domain names without protocol (example.com) - automatically prepended with https://
+    - URLs with www prefix (www.example.com) - automatically prepended with https://
+    - URL fragments (eg: `#myinternallink`)
+    - `tel` protocol links (eg: `tel: 0800 1234`)
+    - `mailto` protocol links (eg: `mailto: hello@wordpress.org`)
+    - Relative paths (`/page`, `./page`, `../page`)
+
+When a URL without a valid protocol is submitted (either by pressing Enter or clicking Apply), the component automatically prepends `https://` to ensure valid links. Special protocols (mailto:, tel:), hash links, and relative paths are preserved as-is.
 
 In addition, `<LinkControl>` also allows for on the fly creation of links based on the **current content of the `<input>` element**. When enabled, a default "Create new" search suggestion is appended to all non-URL-like search results.
 
@@ -350,6 +359,8 @@ See the [createSuggestion](#createSuggestion) section of this file to learn more
 
 Suggestion selection handler, called when the user chooses one of the suggested items with `selectedValues` as the argument.
 
+**Note:** URLs are automatically normalized before being passed to this handler. Domain names without protocols (e.g., `wordpress.org`) are prepended with `https://`, while special protocols (`mailto:`, `tel:`), hash links, and relative paths are preserved as-is.
+
 ### placeholder
 
 -   Type: `string`

packages/block-editor/src/components/link-control/search-input.js

@@ -12,6 +12,7 @@ import { URLInput } from '../';
 import LinkControlSearchResults from './search-results';
 import { CREATE_TYPE } from './constants';
 import useSearchHandler from './use-search-handler';
+import { normalizeDirectEntryURL } from './use-search-handler';
 
 // Must be a function as otherwise URLInput will default
 // to the fetchLinkSuggestions passed in block editor settings
@@ -163,7 +164,9 @@ const LinkControlSearchInput = forwardRef(
 							event.preventDefault();
 						} else {
 							onSuggestionSelected(
-								hasSuggestion || { url: value }
+								hasSuggestion || {
+									url: normalizeDirectEntryURL( value ),
+								}
 							);
 						}
 					} }

packages/block-editor/src/components/link-control/test/index.js

@@ -2981,6 +2981,190 @@ describe( 'Entity handling', () => {
 		);
 	} );
 
+	describe( 'Direct entry URL normalization', () => {
+		it( 'should prepend https:// to plain domain names when pressing Enter', async () => {
+			const user = userEvent.setup();
+			const onChange = jest.fn();
+
+			render(
+				<LinkControl
+					value={ { url: '' } }
+					forceIsEditingLink
+					onChange={ onChange }
+				/>
+			);
+
+			const searchInput = screen.getByRole( 'combobox', {
+				name: 'Search or type URL',
+			} );
+
+			await user.type( searchInput, 'wordpress.org' );
+			triggerEnter( searchInput );
+
+			expect( onChange ).toHaveBeenCalledWith(
+				expect.objectContaining( {
+					url: 'https://wordpress.org',
+				} )
+			);
+		} );
+
+		it( 'should prepend https:// to domain names with www prefix when pressing Enter', async () => {
+			const user = userEvent.setup();
+			const onChange = jest.fn();
+
+			render(
+				<LinkControl
+					value={ { url: '' } }
+					forceIsEditingLink
+					onChange={ onChange }
+				/>
+			);
+
+			const searchInput = screen.getByRole( 'combobox', {
+				name: 'Search or type URL',
+			} );
+
+			await user.type( searchInput, 'www.wordpress.org' );
+			triggerEnter( searchInput );
+
+			expect( onChange ).toHaveBeenCalledWith(
+				expect.objectContaining( {
+					url: 'https://www.wordpress.org',
+				} )
+			);
+		} );
+
+		it( 'should NOT prepend https:// to mailto: links', async () => {
+			const user = userEvent.setup();
+			const onChange = jest.fn();
+
+			render(
+				<LinkControl
+					value={ { url: '' } }
+					forceIsEditingLink
+					onChange={ onChange }
+				/>
+			);
+
+			const searchInput = screen.getByRole( 'combobox', {
+				name: 'Search or type URL',
+			} );
+
+			await user.type( searchInput, 'mailto:test@example.com' );
+			triggerEnter( searchInput );
+
+			expect( onChange ).toHaveBeenCalledWith(
+				expect.objectContaining( {
+					url: 'mailto:test@example.com',
+				} )
+			);
+		} );
+
+		it( 'should NOT prepend https:// to tel: links', async () => {
+			const user = userEvent.setup();
+			const onChange = jest.fn();
+
+			render(
+				<LinkControl
+					value={ { url: '' } }
+					forceIsEditingLink
+					onChange={ onChange }
+				/>
+			);
+
+			const searchInput = screen.getByRole( 'combobox', {
+				name: 'Search or type URL',
+			} );
+
+			await user.type( searchInput, 'tel:123456789' );
+			triggerEnter( searchInput );
+
+			expect( onChange ).toHaveBeenCalledWith(
+				expect.objectContaining( {
+					url: 'tel:123456789',
+				} )
+			);
+		} );
+
+		it( 'should NOT prepend https:// to hash/anchor links', async () => {
+			const user = userEvent.setup();
+			const onChange = jest.fn();
+
+			render(
+				<LinkControl
+					value={ { url: '' } }
+					forceIsEditingLink
+					onChange={ onChange }
+				/>
+			);
+
+			const searchInput = screen.getByRole( 'combobox', {
+				name: 'Search or type URL',
+			} );
+
+			await user.type( searchInput, '#section-anchor' );
+			triggerEnter( searchInput );
+
+			expect( onChange ).toHaveBeenCalledWith(
+				expect.objectContaining( {
+					url: '#section-anchor',
+				} )
+			);
+		} );
+
+		it( 'should NOT prepend https:// to relative paths', async () => {
+			const user = userEvent.setup();
+			const onChange = jest.fn();
+
+			render(
+				<LinkControl
+					value={ { url: '' } }
+					forceIsEditingLink
+					onChange={ onChange }
+				/>
+			);
+
+			const searchInput = screen.getByRole( 'combobox', {
+				name: 'Search or type URL',
+			} );
+
+			await user.type( searchInput, '/relative/path' );
+			triggerEnter( searchInput );
+
+			expect( onChange ).toHaveBeenCalledWith(
+				expect.objectContaining( {
+					url: '/relative/path',
+				} )
+			);
+		} );
+
+		it( 'should NOT double-prepend https:// to URLs that already have protocol', async () => {
+			const user = userEvent.setup();
+			const onChange = jest.fn();
+
+			render(
+				<LinkControl
+					value={ { url: '' } }
+					forceIsEditingLink
+					onChange={ onChange }
+				/>
+			);
+
+			const searchInput = screen.getByRole( 'combobox', {
+				name: 'Search or type URL',
+			} );
+
+			await user.type( searchInput, 'https://already-has-protocol.com' );
+			triggerEnter( searchInput );
+
+			expect( onChange ).toHaveBeenCalledWith(
+				expect.objectContaining( {
+					url: 'https://already-has-protocol.com',
+				} )
+			);
+		} );
+	} );
+
 	describe( 'Accessibility association for entity links', () => {
 		it( 'should associate unlink button with help text via aria-describedby', () => {
 			const entityLink = {
@@ -3298,53 +3482,60 @@ describe( 'URL validation', () => {
 		{
 			description: 'valid URLs with protocol',
 			url: 'https://wordpress.org',
+			expectedUrl: 'https://wordpress.org',
 			searchPattern: /https:\/\/wordpress\.org/,
 		},
 		{
 			description: 'valid URLs without protocol (without http://)',
 			url: 'www.wordpress.org',
+			expectedUrl: 'https://www.wordpress.org',
 			searchPattern: /www\.wordpress\.org/,
 		},
 		{
 			description: 'hash links (internal anchor links)',
 			url: '#section',
+			expectedUrl: '#section',
 			searchPattern: /#section/,
 		},
 		{
 			description: 'relative paths (URLs starting with /)',
 			url: '/handbook',
+			expectedUrl: '/handbook',
 			searchPattern: /\/handbook/,
 		},
-	] )( 'should accept $description', async ( { url, searchPattern } ) => {
-		render(
-			<LinkControl
-				value={ { url: '' } }
-				forceIsEditingLink
-				onChange={ mockOnChange }
-			/>
-		);
+	] )(
+		'should accept $description',
+		async ( { url, expectedUrl, searchPattern } ) => {
+			render(
+				<LinkControl
+					value={ { url: '' } }
+					forceIsEditingLink
+					onChange={ mockOnChange }
+				/>
+			);
 
-		const searchInput = screen.getByRole( 'combobox' );
-		await user.type( searchInput, url );
+			const searchInput = screen.getByRole( 'combobox' );
+			await user.type( searchInput, url );
 
-		// Wait for suggestion to appear and become stable
-		await screen.findByRole( 'option', {
-			name: searchPattern,
-		} );
+			// Wait for suggestion to appear and become stable
+			await screen.findByRole( 'option', {
+				name: searchPattern,
+			} );
 
-		triggerEnter( searchInput );
+			triggerEnter( searchInput );
 
-		// No validation error - should succeed
-		await waitFor( () => {
-			expect( mockOnChange ).toHaveBeenCalled();
-		} );
+			// No validation error - should succeed
+			await waitFor( () => {
+				expect( mockOnChange ).toHaveBeenCalled();
+			} );
 
-		expect( mockOnChange ).toHaveBeenCalledWith(
-			expect.objectContaining( {
-				url,
-			} )
-		);
-	} );
+			expect( mockOnChange ).toHaveBeenCalledWith(
+				expect.objectContaining( {
+					url: expectedUrl,
+				} )
+			);
+		}
+	);
 
 	it( 'should skip validation for entity suggestions (posts, pages, categories)', async () => {
 		const entityLink = {
@@ -3484,9 +3675,10 @@ describe( 'URL validation', () => {
 		// 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.
+		// The URL is automatically prepended with https:// for consistency.
 		expect( mockOnChange ).toHaveBeenCalledWith(
 			expect.objectContaining( {
-				url: 'www.wordpress',
+				url: 'https://www.wordpress',
 			} )
 		);
 	} );

packages/block-editor/src/components/link-control/use-search-handler.js

@@ -20,6 +20,37 @@ import { store as blockEditorStore } from '../../store';
 
 export const handleNoop = () => Promise.resolve( [] );
 
+/**
+ * Normalizes a URL value by prepending https:// when appropriate.
+ * Handles special protocols (mailto, tel), hash links, and relative paths.
+ *
+ * This is the single source of truth for URL normalization across LinkControl.
+ * Used by both handleDirectEntry (suggestion flow) and direct submission (Enter key).
+ *
+ * @param {string} val The URL value to normalize
+ * @return {string} The normalized URL with protocol if needed
+ */
+export function normalizeDirectEntryURL( val ) {
+	let type = URL_TYPE;
+
+	const protocol = getProtocol( val ) || '';
+
+	if ( protocol.includes( 'mailto' ) ) {
+		type = MAILTO_TYPE;
+	}
+
+	if ( protocol.includes( 'tel' ) ) {
+		type = TEL_TYPE;
+	}
+
+	if ( val?.startsWith( '#' ) ) {
+		type = INTERNAL_TYPE;
+	}
+
+	// Only prepend https:// for standard URLs without valid protocols
+	return type === URL_TYPE ? prependHTTPS( val ) : val;
+}
+
 export const handleDirectEntry = ( val ) => {
 	let type = URL_TYPE;
 
@@ -41,7 +72,7 @@ export const handleDirectEntry = ( val ) => {
 		{
 			id: val,
 			title: val,
-			url: type === 'URL' ? prependHTTPS( val ) : val,
+			url: normalizeDirectEntryURL( val ),
 			type,
 		},
 	] );