diff --git a/packages/block-editor/src/components/link-control/index.js b/packages/block-editor/src/components/link-control/index.js index e434fa33c4c74b..6be843ea5b4b4c 100644 --- a/packages/block-editor/src/components/link-control/index.js +++ b/packages/block-editor/src/components/link-control/index.js @@ -30,12 +30,12 @@ import LinkControlSearchItem from './search-item'; import LinkControlSearchInput from './search-input'; const MODE_EDIT = 'edit'; -// const MODE_SHOW = 'show'; export function LinkControl( { value, settings, onChange = noop, + showInitialSuggestions, fetchSearchSuggestions, } ) { const instanceId = useInstanceId( LinkControl ); @@ -66,7 +66,7 @@ export function LinkControl( { // Populate input searcher whether // the current link has a title. - if ( value && value.title && mode === 'edit' ) { + if ( value && value.title && MODE_EDIT === mode ) { setInputValue( value.title ); } }; @@ -102,9 +102,11 @@ export function LinkControl( { ); }; - const handleEntitySearch = async ( val ) => { + const handleEntitySearch = async ( val, args ) => { const results = await Promise.all( [ - fetchSearchSuggestions( val ), + fetchSearchSuggestions( val, { + ...( args.isInitialSuggestions ? { perPage: 3 } : {} ), + } ), handleDirectEntry( val ), ] ); @@ -113,11 +115,11 @@ export function LinkControl( { // If it's potentially a URL search then concat on a URL search suggestion // just for good measure. That way once the actual results run out we always // have a URL option to fallback on. - return couldBeURL ? results[ 0 ].concat( results[ 1 ] ) : results[ 0 ]; + return couldBeURL && ! args.isInitialSuggestions ? results[ 0 ].concat( results[ 1 ] ) : results[ 0 ]; }; // Effects - const getSearchHandler = useCallback( ( val ) => { + const getSearchHandler = useCallback( ( val, args ) => { const protocol = getProtocol( val ) || ''; const isMailto = protocol.includes( 'mailto' ); const isInternal = startsWith( val, '#' ); @@ -125,7 +127,7 @@ export function LinkControl( { const handleManualEntry = isInternal || isMailto || isTel || isURL( val ) || ( val && val.includes( 'www.' ) ); - return ( handleManualEntry ) ? handleDirectEntry( val ) : handleEntitySearch( val ); + return ( handleManualEntry ) ? handleDirectEntry( val, args ) : handleEntitySearch( val, args ); }, [ handleDirectEntry, fetchSearchSuggestions ] ); // Render Components @@ -200,6 +202,7 @@ export function LinkControl( { renderSuggestions={ renderSearchResults } fetchSuggestions={ getSearchHandler } onReset={ resetInput } + showInitialSuggestions={ showInitialSuggestions } /> ) } diff --git a/packages/block-editor/src/components/link-control/search-input.js b/packages/block-editor/src/components/link-control/search-input.js index 9360ef00801378..0d72bc0444fad3 100644 --- a/packages/block-editor/src/components/link-control/search-input.js +++ b/packages/block-editor/src/components/link-control/search-input.js @@ -27,7 +27,13 @@ const handleLinkControlOnKeyDown = ( event ) => { }; const handleLinkControlOnKeyPress = ( event ) => { + const { keyCode } = event; + event.stopPropagation(); + + if ( keyCode === ENTER ) { + + } }; const LinkControlSearchInput = ( { @@ -37,6 +43,7 @@ const LinkControlSearchInput = ( { renderSuggestions, fetchSuggestions, onReset, + showInitialSuggestions, } ) => { const selectItemHandler = ( selection, suggestion ) => { onChange( selection ); @@ -68,6 +75,7 @@ const LinkControlSearchInput = ( { __experimentalRenderSuggestions={ renderSuggestions } __experimentalFetchLinkSuggestions={ fetchSuggestions } __experimentalHandleURLSuggestions={ true } + __experimentalShowInitialSuggestions={ showInitialSuggestions } />