From 51e5a2c262241a421b9c5d1df0b25bd06b868f9f Mon Sep 17 00:00:00 2001
From: Riad Benguella <benguella@gmail.com>
Date: Wed, 9 Sep 2020 10:41:00 +0100
Subject: [PATCH] Limit the block slash inserter to 9 items and show most used
 by default (#25113)

Co-authored-by: Miguel Fonseca <miguelcsf@gmail.com>
---
 .../block-editor/src/autocompleters/block.js  | 63 +++++++++++--------
 1 file changed, 36 insertions(+), 27 deletions(-)

diff --git a/packages/block-editor/src/autocompleters/block.js b/packages/block-editor/src/autocompleters/block.js
index b0afe27ac4f94..d7573543284fa 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: (
-									<>
-										<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 ]
 			);