From 17857cd5cdb72407eaedb98578b61381acb8436d Mon Sep 17 00:00:00 2001 From: Ella Date: Thu, 21 Dec 2023 13:06:22 +0200 Subject: [PATCH] Move back creation result --- .../link-control/use-search-handler.js | 52 +++++++++++++++---- packages/core-data/src/fetch/index.js | 45 ++-------------- 2 files changed, 47 insertions(+), 50 deletions(-) diff --git a/packages/block-editor/src/components/link-control/use-search-handler.js b/packages/block-editor/src/components/link-control/use-search-handler.js index ea4f0472d62c9a..80cef60f6329b4 100644 --- a/packages/block-editor/src/components/link-control/use-search-handler.js +++ b/packages/block-editor/src/components/link-control/use-search-handler.js @@ -9,7 +9,13 @@ import { useSelect } from '@wordpress/data'; * Internal dependencies */ import isURLLike from './is-url-like'; -import { TEL_TYPE, MAILTO_TYPE, INTERNAL_TYPE, URL_TYPE } from './constants'; +import { + CREATE_TYPE, + TEL_TYPE, + MAILTO_TYPE, + INTERNAL_TYPE, + URL_TYPE, +} from './constants'; import { store as blockEditorStore } from '../../store'; import { default as settingsKeys } from '../../private-settings-keys'; @@ -59,14 +65,42 @@ export default function useSearchHandler( const handleEntitySearch = useHandleEntitySearch?.() || handleNoop; return useCallback( - ( val, { isInitialSuggestions } ) => { - return isURLLike( val ) - ? directEntryHandler( val, { isInitialSuggestions } ) - : handleEntitySearch( - val, - { ...suggestionsQuery, isInitialSuggestions }, - withCreateSuggestion - ); + async ( val, { isInitialSuggestions } ) => { + if ( isURLLike( val ) ) { + return directEntryHandler( val, { isInitialSuggestions } ); + } + + const results = await handleEntitySearch( val, suggestionsQuery ); + + // If displaying initial suggestions just return plain results. + if ( isInitialSuggestions ) { + return results; + } + + // Here we append a faux suggestion to represent a "CREATE" option. This + // is detected in the rendering of the search results and handled as a + // special case. This is currently necessary because the suggestions + // dropdown will only appear if there are valid suggestions and + // therefore unless the create option is a suggestion it will not + // display in scenarios where there are no results returned from the + // API. In addition promoting CREATE to a first class suggestion affords + // the a11y benefits afforded by `URLInput` to all suggestions (eg: + // keyboard handling, ARIA roles...etc). + // + // Note also that the value of the `title` and `url` properties must correspond + // to the text value of the ``. This is because `title` is used + // when creating the suggestion. Similarly `url` is used when using keyboard to select + // the suggestion (the
`onSubmit` handler falls-back to `url`). + return ! withCreateSuggestion + ? results + : results.concat( { + // the `id` prop is intentionally ommitted here because it + // is never exposed as part of the component's public API. + // see: https://github.com/WordPress/gutenberg/pull/19775#discussion_r378931316. + title: val, // Must match the existing ``s text value. + url: val, // Must match the existing ``s text value. + type: CREATE_TYPE, + } ); }, [ directEntryHandler, diff --git a/packages/core-data/src/fetch/index.js b/packages/core-data/src/fetch/index.js index 74a7aded43a952..af75a9f5fbaf19 100644 --- a/packages/core-data/src/fetch/index.js +++ b/packages/core-data/src/fetch/index.js @@ -36,17 +36,10 @@ export function __experimentalUseLinkControlEntitySearch() { }, [] ); return useCallback( - async ( val, suggestionsQuery, withCreateSuggestion ) => { - const { isInitialSuggestions } = suggestionsQuery; - - const results = await fetchLinkSuggestions( - val, - suggestionsQuery, - settings - ); - - // Identify front page and update type to match. - results.map( ( result ) => { + async ( val, suggestionsQuery ) => { + return ( + await fetchLinkSuggestions( val, suggestionsQuery, settings ) + ).map( ( result ) => { if ( Number( result.id ) === pageOnFront ) { result.isFrontPage = true; return result; @@ -57,36 +50,6 @@ export function __experimentalUseLinkControlEntitySearch() { return result; } ); - - // If displaying initial suggestions just return plain results. - if ( isInitialSuggestions ) { - return results; - } - - // Here we append a faux suggestion to represent a "CREATE" option. This - // is detected in the rendering of the search results and handled as a - // special case. This is currently necessary because the suggestions - // dropdown will only appear if there are valid suggestions and - // therefore unless the create option is a suggestion it will not - // display in scenarios where there are no results returned from the - // API. In addition promoting CREATE to a first class suggestion affords - // the a11y benefits afforded by `URLInput` to all suggestions (eg: - // keyboard handling, ARIA roles...etc). - // - // Note also that the value of the `title` and `url` properties must correspond - // to the text value of the ``. This is because `title` is used - // when creating the suggestion. Similarly `url` is used when using keyboard to select - // the suggestion (the `onSubmit` handler falls-back to `url`). - return ! withCreateSuggestion - ? results - : results.concat( { - // the `id` prop is intentionally ommitted here because it - // is never exposed as part of the component's public API. - // see: https://github.com/WordPress/gutenberg/pull/19775#discussion_r378931316. - title: val, // Must match the existing ``s text value. - url: val, // Must match the existing ``s text value. - type: '__CREATE__', - } ); }, [ pageOnFront, pageForPosts, settings ] );