diff --git a/packages/block-editor/src/components/inserter/quick-inserter.js b/packages/block-editor/src/components/inserter/quick-inserter.js index b8ae5e233416e..d0f589e87955c 100644 --- a/packages/block-editor/src/components/inserter/quick-inserter.js +++ b/packages/block-editor/src/components/inserter/quick-inserter.js @@ -23,6 +23,7 @@ import { store as blockEditorStore } from '../../store'; const SEARCH_THRESHOLD = 6; const SHOWN_BLOCK_TYPES = 6; const SHOWN_BLOCK_PATTERNS = 2; +const SHOWN_BLOCK_PATTERNS_WITH_PRIORITIZATION = 4; export default function QuickInserter( { onSelect, @@ -46,26 +47,39 @@ export default function QuickInserter( { onInsertBlocks, destinationRootClientId ); - const showPatterns = patterns.length && !! filterValue; - const showSearch = - ( showPatterns && patterns.length > SEARCH_THRESHOLD ) || - blockTypes.length > SEARCH_THRESHOLD; - const { setInserterIsOpened, insertionIndex } = useSelect( + const { + setInserterIsOpened, + insertionIndex, + prioritizePatterns, + } = useSelect( ( select ) => { const { getSettings, getBlockIndex, getBlockCount } = select( blockEditorStore ); + const settings = getSettings(); const index = getBlockIndex( clientId ); + const blockCount = getBlockCount(); + return { - setInserterIsOpened: getSettings() - .__experimentalSetIsInserterOpened, - insertionIndex: index === -1 ? getBlockCount() : index, + setInserterIsOpened: settings.__experimentalSetIsInserterOpened, + prioritizePatterns: + settings.__experimentalPreferPatternsOnRoot && + ! rootClientId && + index > 0 && + ( index < blockCount || blockCount === 0 ), + insertionIndex: index === -1 ? blockCount : index, }; }, [ clientId, rootClientId ] ); + const showPatterns = + patterns.length && ( !! filterValue || prioritizePatterns ); + const showSearch = + ( showPatterns && patterns.length > SEARCH_THRESHOLD ) || + blockTypes.length > SEARCH_THRESHOLD; + useEffect( () => { if ( setInserterIsOpened ) { setInserterIsOpened( false ); @@ -78,6 +92,13 @@ export default function QuickInserter( { setInserterIsOpened( { rootClientId, insertionIndex, filterValue } ); }; + let maxBlockPatterns = 0; + if ( showPatterns ) { + maxBlockPatterns = prioritizePatterns + ? SHOWN_BLOCK_PATTERNS_WITH_PRIORITIZATION + : SHOWN_BLOCK_PATTERNS; + } + return (
diff --git a/packages/block-editor/src/components/inserter/search-results.js b/packages/block-editor/src/components/inserter/search-results.js index cd869ae90a678..dcdaea3a58a09 100644 --- a/packages/block-editor/src/components/inserter/search-results.js +++ b/packages/block-editor/src/components/inserter/search-results.js @@ -48,6 +48,7 @@ function InserterSearchResults( { showBlockDirectory = false, isDraggable = true, shouldFocusBlock = true, + prioritizePatterns, } ) { const debouncedSpeak = useDebounce( speak, 500 ); @@ -70,7 +71,25 @@ function InserterSearchResults( { destinationRootClientId ); + const filteredBlockPatterns = useMemo( () => { + if ( maxBlockPatterns === 0 ) { + return []; + } + const results = searchItems( patterns, filterValue ); + return maxBlockPatterns !== undefined + ? results.slice( 0, maxBlockPatterns ) + : results; + }, [ filterValue, patterns, maxBlockPatterns ] ); + + let maxBlockTypesToShow = maxBlockTypes; + if ( prioritizePatterns && filteredBlockPatterns.length > 2 ) { + maxBlockTypesToShow = 0; + } + const filteredBlockTypes = useMemo( () => { + if ( maxBlockTypesToShow === 0 ) { + return []; + } const results = searchBlockItems( orderBy( blockTypes, [ 'frecency' ], [ 'desc' ] ), blockTypeCategories, @@ -78,8 +97,8 @@ function InserterSearchResults( { filterValue ); - return maxBlockTypes !== undefined - ? results.slice( 0, maxBlockTypes ) + return maxBlockTypesToShow !== undefined + ? results.slice( 0, maxBlockTypesToShow ) : results; }, [ filterValue, @@ -89,13 +108,6 @@ function InserterSearchResults( { maxBlockTypes, ] ); - const filteredBlockPatterns = useMemo( () => { - const results = searchItems( patterns, filterValue ); - return maxBlockPatterns !== undefined - ? results.slice( 0, maxBlockPatterns ) - : results; - }, [ filterValue, patterns, maxBlockPatterns ] ); - // Announce search results on change useEffect( () => { if ( ! filterValue ) { @@ -122,49 +134,49 @@ function InserterSearchResults( { const hasItems = ! isEmpty( filteredBlockTypes ) || ! isEmpty( filteredBlockPatterns ); + const blocksUI = !! filteredBlockTypes.length && ( +