Include the block variations on the inserter selector (#25182)

Co-authored-by: Miguel Fonseca <miguelcsf@gmail.com>

docs/designers-developers/developers/data/data-core-block-editor.md

@@ -440,7 +440,7 @@ _Properties_
 -   _category_ `string`: Block category that the item is associated with.
 -   _keywords_ `Array<string>`: Keywords that can be searched to find this item.
 -   _isDisabled_ `boolean`: Whether or not the user should be prevented from inserting this item.
--   _frecency_ `number`: Hueristic that combines frequency and recency.
+-   _frecency_ `number`: Heuristic that combines frequency and recency.
 
 <a name="getLastMultiSelectedBlockClientId" href="#getLastMultiSelectedBlockClientId">#</a> **getLastMultiSelectedBlockClientId**
 

packages/block-editor/src/autocompleters/block.js

@@ -15,7 +15,6 @@ import { useMemo } from '@wordpress/element';
  */
 import { searchBlockItems } from '../components/inserter/search-items';
 import useBlockTypesState from '../components/inserter/hooks/use-block-types-state';
-import { includeVariationsInInserterItems } from '../components/inserter/utils';
 import BlockIcon from '../components/block-icon';
 
 const SHOWN_BLOCK_TYPES = 9;
@@ -98,10 +97,7 @@ function createBlockCompleter() {
 
 			const options = useMemo(
 				() =>
-					includeVariationsInInserterItems(
-						filteredItems,
-						SHOWN_BLOCK_TYPES
-					).map( ( blockItem ) => {
+					filteredItems.map( ( blockItem ) => {
 						const { title, icon, isDisabled } = blockItem;
 						return {
 							key: `block-${ blockItem.id }`,

packages/block-editor/src/components/block-types-list/index.js

@@ -13,22 +13,16 @@ import { useEffect } from '@wordpress/element';
  * Internal dependencies
  */
 import InserterListItem from '../inserter-list-item';
-import { includeVariationsInInserterItems } from '../inserter/utils';
 
 function BlockTypesList( {
 	items = [],
 	onSelect,
 	onHover = () => {},
 	children,
 	label,
-	limit,
 } ) {
 	const composite = useCompositeState();
-	const normalizedItems = includeVariationsInInserterItems( items, limit );
-	const orderId = normalizedItems.reduce(
-		( acc, item ) => acc + '--' + item.id,
-		''
-	);
+	const orderId = items.reduce( ( acc, item ) => acc + '--' + item.id, '' );
 
 	// This ensures the composite state refreshes when the list order changes.
 	useEffect( () => {
@@ -47,7 +41,7 @@ function BlockTypesList( {
 			className="block-editor-block-types-list"
 			aria-label={ label }
 		>
-			{ normalizedItems.map( ( item ) => {
+			{ items.map( ( item ) => {
 				return (
 					<InserterListItem
 						key={ item.id }

packages/block-editor/src/components/inserter/block-types-tab.js

@@ -147,7 +147,6 @@ export function BlockTypesTab( {
 							onSelect={ onSelectItem }
 							onHover={ onHover }
 							label={ _x( 'Most used', 'blocks' ) }
-							limit={ MAX_SUGGESTED_ITEMS }
 						/>
 					</InserterPanel>
 				) }

packages/block-editor/src/components/inserter/quick-inserter.js

@@ -80,7 +80,6 @@ function QuickInserterList( {
 						onSelect={ onSelectBlockType }
 						onHover={ onHover }
 						label={ __( 'Blocks' ) }
-						limit={ SHOWN_BLOCK_TYPES }
 					/>
 				</InserterPanel>
 			) }

packages/block-editor/src/components/inserter/search-items.js

@@ -1,22 +1,14 @@
 /**
  * External dependencies
  */
-import {
-	deburr,
-	differenceWith,
-	find,
-	intersectionWith,
-	isEmpty,
-	words,
-} from 'lodash';
+import { deburr, differenceWith, find, words } from 'lodash';
 
 // Default search helpers
 const defaultGetName = ( item ) => item.name || '';
 const defaultGetTitle = ( item ) => item.title;
 const defaultGetKeywords = ( item ) => item.keywords || [];
 const defaultGetCategory = ( item ) => item.category;
 const defaultGetCollection = () => null;
-const defaultGetVariations = () => [];
 
 /**
  * Sanitizes the search input string.
@@ -92,33 +84,8 @@ export const searchBlockItems = (
 				)
 			),
 	};
-	return searchItems( items, searchInput, config ).map( ( item ) => {
-		if ( isEmpty( item.variations ) ) {
-			return item;
-		}
 
-		const matchedVariations = item.variations.filter(
-			( { title, keywords = [] } ) => {
-				return (
-					intersectionWith(
-						normalizedSearchTerms,
-						getNormalizedSearchTerms( title ).concat( keywords ),
-						( termToMatch, labelTerm ) =>
-							labelTerm.includes( termToMatch )
-					).length > 0
-				);
-			}
-		);
-		// When no variations matched, fallback to all variations.
-		if ( isEmpty( matchedVariations ) ) {
-			return item;
-		}
-
-		return {
-			...item,
-			variations: matchedVariations,
-		};
-	} );
+	return searchItems( items, searchInput, config );
 };
 
 /**
@@ -162,15 +129,13 @@ export function getItemSearchRank( item, searchTerm, config = {} ) {
 		getKeywords = defaultGetKeywords,
 		getCategory = defaultGetCategory,
 		getCollection = defaultGetCollection,
-		getVariations = defaultGetVariations,
 	} = config;
 
 	const name = getName( item );
 	const title = getTitle( item );
 	const keywords = getKeywords( item );
 	const category = getCategory( item );
 	const collection = getCollection( item );
-	const variations = getVariations( item );
 
 	const normalizedSearchInput = normalizeSearchInput( searchTerm );
 	const normalizedTitle = normalizeSearchInput( title );
@@ -185,14 +150,9 @@ export function getItemSearchRank( item, searchTerm, config = {} ) {
 	} else if ( normalizedTitle.startsWith( normalizedSearchInput ) ) {
 		rank += 20;
 	} else {
-		const terms = [
-			name,
-			title,
-			...keywords,
-			category,
-			collection,
-			...variations,
-		].join( ' ' );
+		const terms = [ name, title, ...keywords, category, collection ].join(
+			' '
+		);
 		const normalizedSearchTerms = words( normalizedSearchInput );
 		const unmatchedTerms = removeMatchingTerms(
 			normalizedSearchTerms,

packages/block-editor/src/components/inserter/test/search-items.js

@@ -131,75 +131,4 @@ describe( 'searchBlockItems', () => {
 			)
 		).toEqual( [ youtubeItem ] );
 	} );
-
-	it( 'should match words using also variations and return all matched variations', () => {
-		const filteredItems = searchBlockItems(
-			items,
-			categories,
-			collections,
-			'variation'
-		);
-
-		expect( filteredItems ).toHaveLength( 1 );
-		expect( filteredItems[ 0 ].variations ).toHaveLength( 3 );
-	} );
-
-	it( 'should match words using also variations and filter out unmatched variations', () => {
-		const filteredItems = searchBlockItems(
-			items,
-			categories,
-			collections,
-			'variations two three'
-		);
-
-		expect( filteredItems ).toHaveLength( 1 );
-		expect( filteredItems[ 0 ].variations ).toHaveLength( 2 );
-		expect( filteredItems[ 0 ].variations[ 0 ].title ).toBe(
-			'Variation Two'
-		);
-		expect( filteredItems[ 0 ].variations[ 1 ].title ).toBe(
-			'Variation Three'
-		);
-	} );
-
-	it( 'should search in variation keywords if exist', () => {
-		const filteredItems = searchBlockItems(
-			items,
-			categories,
-			collections,
-			'music'
-		);
-		expect( filteredItems ).toHaveLength( 1 );
-		const [ { title, variations } ] = filteredItems;
-		expect( title ).toBe( 'With Variations' );
-		expect( variations[ 0 ].title ).toBe( 'Variation Three' );
-	} );
-
-	it( 'should search in both blocks/variation keywords if exist', () => {
-		const filteredItems = searchBlockItems(
-			items,
-			categories,
-			collections,
-			'random'
-		);
-		expect( filteredItems ).toHaveLength( 2 );
-		expect( filteredItems ).toEqual(
-			expect.arrayContaining( [
-				expect.objectContaining( { title: 'Paragraph' } ),
-				expect.objectContaining( {
-					title: 'With Variations',
-					variations: [
-						{
-							name: 'variation-three',
-							title: 'Variation Three',
-							keywords: expect.arrayContaining( [
-								'music',
-								'random',
-							] ),
-						},
-					],
-				} ),
-			] )
-		);
-	} );
 } );