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 ]
);