Blocks: Rename patterns to variations in the Block API (#19966)

* Blocks: Rename patterns to variations in the Block API

* Fix: Remove ESLint errors and warnings related to block variations

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

@@ -15,35 +15,35 @@ function BlockTypesList( {
 	children,
 } ) {
 	const normalizedItems = items.reduce( ( result, item ) => {
-		const { patterns = [] } = item;
-		const hasDefaultPattern = patterns.some(
+		const { variations = [] } = item;
+		const hasDefaultVariation = variations.some(
 			( { isDefault } ) => isDefault
 		);
 
-		// If there is no default inserter pattern provided,
+		// If there is no default inserter variation provided,
 		// then default block type is displayed.
-		if ( ! hasDefaultPattern ) {
+		if ( ! hasDefaultVariation ) {
 			result.push( item );
 		}
 
-		if ( patterns.length ) {
+		if ( variations.length ) {
 			result = result.concat(
-				patterns.map( ( pattern ) => {
+				variations.map( ( variation ) => {
 					return {
 						...item,
-						id: `${ item.id }-${ pattern.name }`,
-						icon: pattern.icon || item.icon,
-						title: pattern.title || item.title,
-						description: pattern.description || item.description,
-						// If `example` is explicitly undefined for the pattern, the preview will not be shown.
-						example: pattern.hasOwnProperty( 'example' )
-							? pattern.example
+						id: `${ item.id }-${ variation.name }`,
+						icon: variation.icon || item.icon,
+						title: variation.title || item.title,
+						description: variation.description || item.description,
+						// If `example` is explicitly undefined for the variation, the preview will not be shown.
+						example: variation.hasOwnProperty( 'example' )
+							? variation.example
 							: item.example,
 						initialAttributes: {
 							...item.initialAttributes,
-							...pattern.attributes,
+							...variation.attributes,
 						},
-						innerBlocks: pattern.innerBlocks,
+						innerBlocks: variation.innerBlocks,
 					};
 				} )
 			);

packages/block-editor/src/components/block-pattern-picker/index.js → packages/block-editor/src/components/block-variation-picker/index.js

@@ -9,16 +9,16 @@ import classnames from 'classnames';
 import { __ } from '@wordpress/i18n';
 import { Button, Placeholder } from '@wordpress/components';
 
-function BlockPatternPicker( {
+function BlockVariationPicker( {
 	icon = 'layout',
-	label = __( 'Choose pattern' ),
-	instructions = __( 'Select a pattern to start with.' ),
-	patterns,
+	label = __( 'Choose variation' ),
+	instructions = __( 'Select a variation to start with.' ),
+	variations,
 	onSelect,
 	allowSkip,
 } ) {
-	const classes = classnames( 'block-editor-block-pattern-picker', {
-		'has-many-patterns': patterns.length > 4,
+	const classes = classnames( 'block-editor-block-variation-picker', {
+		'has-many-variations': variations.length > 4,
 	} );
 
 	return (
@@ -34,25 +34,25 @@ function BlockPatternPicker( {
 			 */
 			/* eslint-disable jsx-a11y/no-redundant-roles */ }
 			<ul
-				className="block-editor-block-pattern-picker__patterns"
+				className="block-editor-block-variation-picker__variations"
 				role="list"
 			>
-				{ patterns.map( ( pattern ) => (
-					<li key={ pattern.name }>
+				{ variations.map( ( variation ) => (
+					<li key={ variation.name }>
 						<Button
 							isSecondary
-							icon={ pattern.icon }
+							icon={ variation.icon }
 							iconSize={ 48 }
-							onClick={ () => onSelect( pattern ) }
-							className="block-editor-block-pattern-picker__pattern"
-							label={ pattern.title }
+							onClick={ () => onSelect( variation ) }
+							className="block-editor-block-variation-picker__variation"
+							label={ variation.title }
 						/>
 					</li>
 				) ) }
 			</ul>
 			{ /* eslint-enable jsx-a11y/no-redundant-roles */ }
 			{ allowSkip && (
-				<div className="block-editor-block-pattern-picker__skip">
+				<div className="block-editor-block-variation-picker__skip">
 					<Button isLink onClick={ () => onSelect() }>
 						{ __( 'Skip' ) }
 					</Button>
@@ -62,4 +62,4 @@ function BlockPatternPicker( {
 	);
 }
 
-export default BlockPatternPicker;
+export default BlockVariationPicker;

packages/block-editor/src/components/block-pattern-picker/style.scss → packages/block-editor/src/components/block-variation-picker/style.scss

@@ -1,4 +1,4 @@
-.block-editor-block-pattern-picker {
+.block-editor-block-variation-picker {
 	.components-placeholder__instructions {
 		// Defer to vertical margins applied by template picker options.
 		margin-bottom: 0;
@@ -10,14 +10,14 @@
 		flex-direction: column;
 	}
 
-	&.has-many-patterns .components-placeholder__fieldset {
+	&.has-many-variations .components-placeholder__fieldset {
 		// Allow options to occupy a greater amount of the available space if
 		// many options exist.
 		max-width: 90%;
 	}
 }
 
-.block-editor-block-pattern-picker__patterns.block-editor-block-pattern-picker__patterns {
+.block-editor-block-variation-picker__variations.block-editor-block-variation-picker__variations {
 	display: flex;
 	justify-content: flex-start;
 	flex-direction: row;
@@ -34,12 +34,12 @@
 		max-width: 100px;
 	}
 
-	.block-editor-block-pattern-picker__pattern {
+	.block-editor-block-variation-picker__variation {
 		padding: $grid-size;
 	}
 }
 
-.block-editor-block-pattern-picker__pattern {
+.block-editor-block-variation-picker__variation {
 	width: 100%;
 
 	&.components-button.has-icon {

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

@@ -15,7 +15,7 @@ export { default as BlockFormatControls } from './block-format-controls';
 export { default as BlockIcon } from './block-icon';
 export { default as BlockNavigationDropdown } from './block-navigation/dropdown';
 export { default as __experimentalBlockNavigationList } from './block-navigation/list';
-export { default as __experimentalBlockPatternPicker } from './block-pattern-picker';
+export { default as __experimentalBlockVariationPicker } from './block-variation-picker';
 export { default as BlockVerticalAlignmentToolbar } from './block-vertical-alignment-toolbar';
 export { default as ButtonBlockerAppender } from './button-block-appender';
 export { default as ColorPalette } from './color-palette';

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

@@ -158,7 +158,7 @@ export default compose( [
 			hasInserterItems,
 			__experimentalGetAllowedBlocks,
 		} = select( 'core/block-editor' );
-		const { __experimentalGetBlockPatterns: getBlockPatterns } = select(
+		const { __experimentalGetBlockVariations: getBlockVariations } = select(
 			'core/blocks'
 		);
 
@@ -169,8 +169,9 @@ export default compose( [
 
 		const hasSingleBlockType =
 			size( allowedBlocks ) === 1 &&
-			size( getBlockPatterns( allowedBlocks[ 0 ].name, 'inserter' ) ) ===
-				0;
+			size(
+				getBlockVariations( allowedBlocks[ 0 ].name, 'inserter' )
+			) === 0;
 
 		let allowedBlockType = false;
 		if ( hasSingleBlockType ) {

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

@@ -63,7 +63,7 @@ export const searchItems = ( items, categories, collections, searchTerm ) => {
 
 	return items
 		.filter(
-			( { name, title, category, keywords = [], patterns = [] } ) => {
+			( { name, title, category, keywords = [], variations = [] } ) => {
 				let unmatchedTerms = removeMatchingTerms(
 					normalizedSearchTerms,
 					title
@@ -101,35 +101,37 @@ export const searchItems = ( items, categories, collections, searchTerm ) => {
 
 				unmatchedTerms = removeMatchingTerms(
 					unmatchedTerms,
-					patterns.map( ( pattern ) => pattern.title ).join( ' ' )
+					variations
+						.map( ( variation ) => variation.title )
+						.join( ' ' )
 				);
 
 				return unmatchedTerms.length === 0;
 			}
 		)
 		.map( ( item ) => {
-			if ( isEmpty( item.patterns ) ) {
+			if ( isEmpty( item.variations ) ) {
 				return item;
 			}
 
-			const matchedPatterns = item.patterns.filter( ( pattern ) => {
+			const matchedVariations = item.variations.filter( ( variation ) => {
 				return (
 					intersectionWith(
 						normalizedSearchTerms,
-						normalizeSearchTerm( pattern.title ),
+						normalizeSearchTerm( variation.title ),
 						( termToMatch, labelTerm ) =>
 							labelTerm.includes( termToMatch )
 					).length > 0
 				);
 			} );
-			// When no partterns matched, fallback to all patterns.
-			if ( isEmpty( matchedPatterns ) ) {
+			// When no partterns matched, fallback to all variations.
+			if ( isEmpty( matchedVariations ) ) {
 				return item;
 			}
 
 			return {
 				...item,
-				patterns: matchedPatterns,
+				variations: matchedVariations,
 			};
 		} );
 };

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

@@ -24,26 +24,26 @@ export const textItem = {
 	utility: 1,
 };
 
-export const withPatternsItem = {
-	id: 'core/block-with-patterns',
-	name: 'core/block-with-patterns',
+export const withVariationsItem = {
+	id: 'core/block-with-variations',
+	name: 'core/block-with-variations',
 	initialAttributes: {},
-	title: 'With Patterns',
+	title: 'With Variations',
 	category: 'widgets',
 	isDisabled: false,
 	utility: 0,
-	patterns: [
+	variations: [
 		{
-			name: 'pattern-one',
-			title: 'Pattern One',
+			name: 'variation-one',
+			title: 'Variation One',
 		},
 		{
-			name: 'pattern-two',
-			title: 'Pattern Two',
+			name: 'variation-two',
+			title: 'Variation Two',
 		},
 		{
-			name: 'pattern-three',
-			title: 'Pattern Three',
+			name: 'variation-three',
+			title: 'Variation Three',
 		},
 	],
 };
@@ -111,7 +111,7 @@ export const reusableItem = {
 
 export default [
 	textItem,
-	withPatternsItem,
+	withVariationsItem,
 	advancedTextItem,
 	someOtherItem,
 	moreItem,

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

@@ -73,31 +73,33 @@ describe( 'searchItems', () => {
 		).toEqual( [ youtubeItem ] );
 	} );
 
-	it( 'should match words using also patterns and return all matched patterns', () => {
+	it( 'should match words using also variations and return all matched variations', () => {
 		const filteredItems = searchItems(
 			items,
 			categories,
 			collections,
-			'pattern'
+			'variation'
 		);
 
 		expect( filteredItems ).toHaveLength( 1 );
-		expect( filteredItems[ 0 ].patterns ).toHaveLength( 3 );
+		expect( filteredItems[ 0 ].variations ).toHaveLength( 3 );
 	} );
 
-	it( 'should match words using also patterns and filter out unmatched patterns', () => {
+	it( 'should match words using also variations and filter out unmatched variations', () => {
 		const filteredItems = searchItems(
 			items,
 			categories,
 			collections,
-			'patterns two three'
+			'variations two three'
 		);
 
 		expect( filteredItems ).toHaveLength( 1 );
-		expect( filteredItems[ 0 ].patterns ).toHaveLength( 2 );
-		expect( filteredItems[ 0 ].patterns[ 0 ].title ).toBe( 'Pattern Two' );
-		expect( filteredItems[ 0 ].patterns[ 1 ].title ).toBe(
-			'Pattern Three'
+		expect( filteredItems[ 0 ].variations ).toHaveLength( 2 );
+		expect( filteredItems[ 0 ].variations[ 0 ].title ).toBe(
+			'Variation Two'
+		);
+		expect( filteredItems[ 0 ].variations[ 1 ].title ).toBe(
+			'Variation Three'
 		);
 	} );
 } );

packages/block-editor/src/store/selectors.js

@@ -1299,7 +1299,7 @@ export const getInserterItems = createSelector(
 
 			const isContextual = isArray( blockType.parent );
 			const { time, count = 0 } = getInsertUsage( state, id ) || {};
-			const inserterPatterns = blockType.patterns.filter(
+			const inserterVariations = blockType.variations.filter(
 				( { scope } ) => ! scope || scope.includes( 'inserter' )
 			);
 
@@ -1312,7 +1312,7 @@ export const getInserterItems = createSelector(
 				icon: blockType.icon,
 				category: blockType.category,
 				keywords: blockType.keywords,
-				patterns: inserterPatterns,
+				variations: inserterVariations,
 				example: blockType.example,
 				isDisabled,
 				utility: calculateUtility(

packages/block-editor/src/store/test/selectors.js

@@ -2123,7 +2123,7 @@ describe( 'selectors', () => {
 				},
 				category: 'formatting',
 				keywords: [ 'testing' ],
-				patterns: [],
+				variations: [],
 				isDisabled: false,
 				utility: 0,
 				frecency: 0,

packages/block-editor/src/style.scss

@@ -8,13 +8,13 @@
 @import "./components/block-mobile-toolbar/style.scss";
 @import "./components/block-mover/style.scss";
 @import "./components/block-navigation/style.scss";
-@import "./components/block-pattern-picker/style.scss";
 @import "./components/block-preview/style.scss";
 @import "./components/block-settings-menu/style.scss";
 @import "./components/block-styles/style.scss";
 @import "./components/block-switcher/style.scss";
 @import "./components/block-toolbar/style.scss";
 @import "./components/block-types-list/style.scss";
+@import "./components/block-variation-picker/style.scss";
 @import "./components/button-block-appender/style.scss";
 @import "./components/colors-gradients/style.scss";
 @import "./components/contrast-checker/style.scss";