Add block variations' keywords search support

docs/designers-developers/developers/block-api/block-registration.md

@@ -236,6 +236,7 @@ variations: [
 		title: __( 'Twitter' ),
 		icon: TwitterIcon,
 		attributes: { service: 'twitter' },
+		keywords: [ __('tweet') ],
 	},
 ],
 ```
@@ -245,12 +246,13 @@ An object describing a variation defined for the block type can contain the foll
 - `name` (type `string`) – The unique and machine-readable name.
 - `title` (type `string`) – A human-readable variation title.
 - `description` (optional, type `string`) – A detailed variation description.
-- `icon` (optional, type `String` | `Object`) – An icon helping to visualize the variation. It can have the same shape as the block type.
+- `icon` (optional, type `string` | `Object`) – An icon helping to visualize the variation. It can have the same shape as the block type.
 - `isDefault` (optional, type `boolean`) – Indicates whether the current variation is the default one. Defaults to `false`.
 - `attributes` (optional, type `Object`) – Values that override block attributes.
 - `innerBlocks` (optional, type `Array[]`) – Initial configuration of nested blocks.
 - `example` (optional, type `Object`) – Example provides structured data for the block preview. You can set to `undefined` to disable the preview shown for the block type.
-- `scope` (optional, type `String[]`) - the list of scopes where the variation is applicable. When not provided, it assumes all available scopes. Available options: `block`, `inserter`.
+- `scope` (optional, type `string[]`) - the list of scopes where the variation is applicable. When not provided, it assumes all available scopes. Available options: `block`, `inserter`.
+- `keywords` (optional, type `string[]`) - An array of terms (which can be translated) that help users discover the variation while searching.
 
 It's also possible to override the default block style variation using the `className` attribute when defining block variations.
 

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

@@ -54,28 +54,42 @@ export const searchBlockItems = (
 		return items;
 	}
 
-	return searchItems( items, searchTerm, {
+	const config = {
 		getCategory: ( item ) =>
 			find( categories, { slug: item.category } )?.title,
 		getCollection: ( item ) =>
 			collections[ item.name.split( '/' )[ 0 ] ]?.title,
-		getVariations: ( item ) =>
-			( item.variations || [] ).map( ( variation ) => variation.title ),
-	} ).map( ( item ) => {
+		getVariations: ( { variations = [] } ) =>
+			Array.from(
+				variations.reduce(
+					( accumulator, { title, keywords = [] } ) => {
+						accumulator.add( title );
+						keywords.forEach( ( keyword ) =>
+							accumulator.add( keyword )
+						);
+						return accumulator;
+					},
+					new Set()
+				)
+			),
+	};
+	return searchItems( items, searchTerm, config ).map( ( item ) => {
 		if ( isEmpty( item.variations ) ) {
 			return item;
 		}
 
-		const matchedVariations = item.variations.filter( ( variation ) => {
-			return (
-				intersectionWith(
-					normalizedSearchTerms,
-					normalizeSearchTerm( variation.title ),
-					( termToMatch, labelTerm ) =>
-						labelTerm.includes( termToMatch )
-				).length > 0
-			);
-		} );
+		const matchedVariations = item.variations.filter(
+			( { title, keywords = [] } ) => {
+				return (
+					intersectionWith(
+						normalizedSearchTerms,
+						normalizeSearchTerm( title ).concat( keywords ),
+						( termToMatch, labelTerm ) =>
+							labelTerm.includes( termToMatch )
+					).length > 0
+				);
+			}
+		);
 		// When no variations matched, fallback to all variations.
 		if ( isEmpty( matchedVariations ) ) {
 			return item;

packages/block-editor/src/components/inserter/test/fixtures/index.js

@@ -22,6 +22,7 @@ export const paragraphItem = {
 	category: 'text',
 	isDisabled: false,
 	utility: 1,
+	keywords: [ 'random' ],
 };
 
 export const withVariationsItem = {
@@ -44,6 +45,7 @@ export const withVariationsItem = {
 		{
 			name: 'variation-three',
 			title: 'Variation Three',
+			keywords: [ 'music', 'random' ],
 		},
 	],
 };

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

@@ -111,4 +111,45 @@ describe( 'searchBlockItems', () => {
 			'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',
+							] ),
+						},
+					],
+				} ),
+			] )
+		);
+	} );
 } );