Remove default toggle UI and implement Popover close

The LinkControl will be mostly where another element triggers the UI to appear. As a result we don’t want to force a toggle element on the developer. Rather we will expose an API to allow the consuming component to toggle the visibility of the LinkControl

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

@@ -17,7 +17,6 @@ import {
 	useCallback,
 	useState,
 	useRef,
-	Fragment,
 } from '@wordpress/element';
 
 import {
@@ -46,10 +45,6 @@ function LinkControl( { defaultOpen = false, fetchSearchSuggestions, renderAddit
 	const autocompleteRef = useRef( null );
 
 	// Effects
-	const openLinkUI = useCallback( () => {
-		setIsOpen( true );
-	} );
-
 	const getSearchFetcher = useCallback( ( value ) => {
 		return ( /^https?:/.test( value ) ) ? handleURLSearch : fetchSearchSuggestions;
 	} );
@@ -59,6 +54,11 @@ function LinkControl( { defaultOpen = false, fetchSearchSuggestions, renderAddit
 		setInputValue( value );
 	};
 
+	const closeLinkUI = () => {
+		setInputValue( '' );
+		setIsOpen( false );
+	};
+
 	const handleURLSearch = async ( value ) => {
 		return [ {
 			id: 1,
@@ -123,54 +123,47 @@ function LinkControl( { defaultOpen = false, fetchSearchSuggestions, renderAddit
 		</div>
 	);
 
+	if ( ! isOpen ) {
+		return null;
+	}
+
 	return (
-		<Fragment>
-			<IconButton
-				icon="insert"
-				className="components-toolbar__control"
-				label={ __( 'Insert link' ) }
-				onClick={ openLinkUI }
-			/>
-
-			{ isOpen && (
-
-				<URLPopover>
-					<div className="block-editor-link-control__popover-inner">
-						<div className="block-editor-link-control__search">
-
-							<form
-								onSubmit={ onSubmitLinkChange }
-							>
-								<URLInput
-									className="block-editor-link-control__search-input"
-									value={ inputValue }
-									onChange={ onInputChange }
-									autocompleteRef={ autocompleteRef }
-									onKeyDown={ stopPropagationRelevantKeys }
-									onKeyPress={ stopPropagation }
-									placeholder={ __( 'Search or type url' ) }
-									renderSuggestions={ renderSearchResults }
-									fetchLinkSuggestions={ getSearchFetcher( inputValue ) }
-									handleURLSuggestions={ true }
-								/>
-
-								{ inputValue && (
-									<IconButton
-										type="reset"
-										label={ __( 'Reset' ) }
-										icon="no-alt"
-										className="block-editor-link-control__search-reset"
-										onClick={ () => onInputChange( undefined ) }
-									/>
-								) }
-								{ inputValue && <LinkControlAdditionalSettings /> }
-							</form>
-						</div>
-					</div>
-				</URLPopover>
-
-			) }
-		</Fragment>
+		<URLPopover
+			onClose={ closeLinkUI }
+		>
+			<div className="block-editor-link-control__popover-inner">
+				<div className="block-editor-link-control__search">
+
+					<form
+						onSubmit={ onSubmitLinkChange }
+					>
+						<URLInput
+							className="block-editor-link-control__search-input"
+							value={ inputValue }
+							onChange={ onInputChange }
+							autocompleteRef={ autocompleteRef }
+							onKeyDown={ stopPropagationRelevantKeys }
+							onKeyPress={ stopPropagation }
+							placeholder={ __( 'Search or type url' ) }
+							renderSuggestions={ renderSearchResults }
+							fetchLinkSuggestions={ getSearchFetcher( inputValue ) }
+							handleURLSuggestions={ true }
+						/>
+
+						{ inputValue && (
+							<IconButton
+								type="reset"
+								label={ __( 'Reset' ) }
+								icon="no-alt"
+								className="block-editor-link-control__search-reset"
+								onClick={ () => onInputChange( undefined ) }
+							/>
+						) }
+						{ inputValue && <LinkControlAdditionalSettings /> }
+					</form>
+				</div>
+			</div>
+		</URLPopover>
 	);
 }