Limit the block slash inserter to 9 items and show most used by defau…

…lt (#25113) Co-authored-by: Miguel Fonseca <[email protected]>
WordPress · Sep 9, 2020 · 51e5a2c · 51e5a2c
1 parent 2172f0f
commit 51e5a2c
Showing 1 changed file with 36 additions and 27 deletions.
diff --git 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: (
-									<>
-										<BlockIcon
-											key="icon"
-											icon={ icon }
-											showColors
-										/>
-										{ title }
-									</>
-								),
-								isDisabled,
-							};
-						}
-					),
+					includeVariationsInInserterItems(
+						filteredItems,
+						SHOWN_BLOCK_TYPES
+					).map( ( blockItem ) => {
+						const { title, icon, isDisabled } = blockItem;
+						return {
+							key: `block-${ blockItem.id }`,
+							value: blockItem,
+							label: (
+								<>
+									<BlockIcon
+										key="icon"
+										icon={ icon }
+										showColors
+									/>
+									{ title }
+								</>
+							),
+							isDisabled,
+						};
+					} ),
 				[ filteredItems ]
 			);