Disallow creation of empty links using Link UI directly

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

@@ -137,6 +137,8 @@ function LinkControl( {
 	);
 	const isEndingEditWithFocus = useRef( false );
 
+	const currentInputIsEmpty = ! currentInputValue?.trim()?.length;
+
 	useEffect( () => {
 		if (
 			forceIsEditingLink !== undefined &&
@@ -234,14 +236,18 @@ function LinkControl( {
 									onClick={ () => handleSubmitButton() }
 									onKeyDown={ ( event ) => {
 										const { keyCode } = event;
-										if ( keyCode === ENTER ) {
+										if (
+											keyCode === ENTER &&
+											! currentInputIsEmpty // disallow submitting empty values.
+										) {
 											event.preventDefault();
 											handleSubmitButton();
 										}
 									} }
 									label={ __( 'Submit' ) }
 									icon={ keyboardReturn }
 									className="block-editor-link-control__search-submit"
+									disabled={ currentInputIsEmpty } // disallow submitting empty values.
 								/>
 							</div>
 						</LinkControlSearchInput>

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

@@ -132,10 +132,18 @@ const LinkControlSearchInput = forwardRef(
 					__experimentalShowInitialSuggestions={
 						showInitialSuggestions
 					}
-					onSubmit={ ( suggestion ) => {
-						onSuggestionSelected(
-							suggestion || focusedSuggestion || { url: value }
-						);
+					onSubmit={ ( suggestion, event ) => {
+						const hasSuggestion = suggestion || focusedSuggestion;
+
+						// If there is no suggestion and the value (ie: any manually entered URL) is empty
+						// then don't allow submission otherwise we get empty links.
+						if ( ! hasSuggestion && ! value?.trim()?.length ) {
+							event.preventDefault();
+						} else {
+							onSuggestionSelected(
+								hasSuggestion || { url: value }
+							);
+						}
 					} }
 					ref={ ref }
 				/>

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

@@ -563,6 +563,104 @@ describe( 'Manual link entry', () => {
 		}
 	);
 
+	describe( 'Handling of empty values', () => {
+		const testTable = [
+			[ 'containing only spaces', '        ' ],
+			[ 'containing only tabs', '		' ],
+			[ 'from strings with no length', '' ],
+		];
+
+		it.each( testTable )(
+			'should not allow creation of links %s when using the keyboard',
+			async ( _desc, searchString ) => {
+				act( () => {
+					render( <LinkControl />, container );
+				} );
+
+				// Search Input UI
+				const searchInput = getURLInput();
+
+				let submitButton = queryByRole( container, 'button', {
+					name: 'Submit',
+				} );
+
+				expect( submitButton.disabled ).toBeTruthy();
+				expect( submitButton ).not.toBeNull();
+				expect( submitButton ).toBeInTheDocument();
+
+				// Simulate searching for a term
+				act( () => {
+					Simulate.change( searchInput, {
+						target: { value: searchString },
+					} );
+				} );
+
+				// fetchFauxEntitySuggestions resolves on next "tick" of event loop
+				await eventLoopTick();
+
+				// Attempt to submit the empty search value in the input.
+				act( () => {
+					Simulate.keyDown( searchInput, { keyCode: ENTER } );
+				} );
+
+				submitButton = queryByRole( container, 'button', {
+					name: 'Submit',
+				} );
+
+				// Verify the UI hasn't allowed submission.
+				expect( searchInput ).toBeInTheDocument();
+				expect( submitButton.disabled ).toBeTruthy();
+				expect( submitButton ).not.toBeNull();
+				expect( submitButton ).toBeInTheDocument();
+			}
+		);
+
+		it.each( testTable )(
+			'should not allow creation of links %s via the UI "submit" button',
+			async ( _desc, searchString ) => {
+				act( () => {
+					render( <LinkControl />, container );
+				} );
+
+				// Search Input UI
+				const searchInput = getURLInput();
+
+				let submitButton = queryByRole( container, 'button', {
+					name: 'Submit',
+				} );
+
+				expect( submitButton.disabled ).toBeTruthy();
+				expect( submitButton ).not.toBeNull();
+				expect( submitButton ).toBeInTheDocument();
+
+				// Simulate searching for a term
+				act( () => {
+					Simulate.change( searchInput, {
+						target: { value: searchString },
+					} );
+				} );
+
+				// fetchFauxEntitySuggestions resolves on next "tick" of event loop
+				await eventLoopTick();
+
+				// Attempt to submit the empty search value in the input.
+				act( () => {
+					Simulate.click( submitButton );
+				} );
+
+				submitButton = queryByRole( container, 'button', {
+					name: 'Submit',
+				} );
+
+				// Verify the UI hasn't allowed submission.
+				expect( searchInput ).toBeInTheDocument();
+				expect( submitButton.disabled ).toBeTruthy();
+				expect( submitButton ).not.toBeNull();
+				expect( submitButton ).toBeInTheDocument();
+			}
+		);
+	} );
+
 	describe( 'Alternative link protocols and formats', () => {
 		it.each( [
 			[ 'mailto:[email protected]', 'mailto' ],

packages/block-editor/src/components/url-input/index.js

@@ -134,7 +134,20 @@ class URLInput extends Component {
 			return;
 		}
 
-		const isInitialSuggestions = ! ( value && value.length );
+		// Test for whitespace only:
+		// 1. must have a length - otherwise test from #1 will be truthy for string with no characters.
+		// 2. if all whitespace is stripped must be empty.
+		const containsOnlyWhitespace = value?.length && value.trim() === '';
+
+		// Initial suggestions are those shown when no search has been made.
+		// The criteria for "no search" are:
+		// 1. No value.
+		// 2. Value must not be entirely whitespace.
+		const isInitialSuggestions =
+			! value?.length && ! containsOnlyWhitespace;
+
+		// Trim only now we've determined it's not composed of purely whitespace.
+		value = value.trim();
 
 		// Allow a suggestions request if:
 		// - there are at least 2 characters in the search input (except manual searches where
@@ -219,7 +232,7 @@ class URLInput extends Component {
 
 		this.props.onChange( inputValue );
 		if ( ! this.props.disableSuggestions ) {
-			this.updateSuggestions( inputValue.trim() );
+			this.updateSuggestions( inputValue );
 		}
 	}
 
@@ -236,7 +249,7 @@ class URLInput extends Component {
 			! ( suggestions && suggestions.length )
 		) {
 			// Ensure the suggestions are updated with the current input value
-			this.updateSuggestions( value.trim() );
+			this.updateSuggestions( value );
 		}
 	}
 
@@ -288,7 +301,7 @@ class URLInput extends Component {
 				// Submitting while loading should trigger onSubmit
 				case ENTER: {
 					if ( this.props.onSubmit ) {
-						this.props.onSubmit();
+						this.props.onSubmit( null, event );
 					}
 
 					break;
@@ -338,10 +351,10 @@ class URLInput extends Component {
 					this.selectLink( suggestion );
 
 					if ( this.props.onSubmit ) {
-						this.props.onSubmit( suggestion );
+						this.props.onSubmit( suggestion, event );
 					}
 				} else if ( this.props.onSubmit ) {
-					this.props.onSubmit();
+					this.props.onSubmit( null, event );
 				}
 
 				break;