diff --git a/packages/block-editor/src/autocompleters/block.js b/packages/block-editor/src/autocompleters/block.js index b0afe27ac4f94b..d7573543284fa7 100644 --- a/packages/block-editor/src/autocompleters/block.js +++ b/packages/block-editor/src/autocompleters/block.js @@ -1,7 +1,7 @@ /** * External dependencies */ -import { noop, map } from 'lodash'; +import { noop, map, orderBy } from 'lodash'; /** * WordPress dependencies @@ -18,6 +18,8 @@ import useBlockTypesState from '../components/inserter/hooks/use-block-types-sta import { includeVariationsInInserterItems } from '../components/inserter/utils'; import BlockIcon from '../components/block-icon'; +const SHOWN_BLOCK_TYPES = 9; + const createBlocksFromInnerBlocksTemplate = ( innerBlocksTemplate ) => { return map( innerBlocksTemplate, @@ -74,12 +76,18 @@ function createBlockCompleter() { ); const filteredItems = useMemo( () => { - return searchBlockItems( - items, - categories, - collections, - filterValue - ).filter( ( item ) => item.name !== selectedBlockName ); + const initialFilteredItems = !! filterValue.trim() + ? searchBlockItems( + items, + categories, + collections, + filterValue + ) + : orderBy( items, [ 'frecency' ], [ 'desc' ] ); + + return initialFilteredItems + .filter( ( item ) => item.name !== selectedBlockName ) + .slice( 0, SHOWN_BLOCK_TYPES ); }, [ filterValue, selectedBlockName, @@ -90,26 +98,27 @@ function createBlockCompleter() { const options = useMemo( () => - includeVariationsInInserterItems( filteredItems ).map( - ( blockItem ) => { - const { title, icon, isDisabled } = blockItem; - return { - key: `block-${ blockItem.id }`, - value: blockItem, - label: ( - <> - - { title } - - ), - isDisabled, - }; - } - ), + includeVariationsInInserterItems( + filteredItems, + SHOWN_BLOCK_TYPES + ).map( ( blockItem ) => { + const { title, icon, isDisabled } = blockItem; + return { + key: `block-${ blockItem.id }`, + value: blockItem, + label: ( + <> + + { title } + + ), + isDisabled, + }; + } ), [ filteredItems ] );