Blocks: Rename patterns to variations in the Block API

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

@@ -10,31 +10,31 @@ import InserterListItem from '../inserter-list-item';
 
 function BlockTypesList( { items = [], onSelect, onHover = () => {}, children } ) {
 	const normalizedItems = items.reduce( ( result, item ) => {
-		const { patterns = [] } = item;
-		const hasDefaultPattern = patterns.some( ( { isDefault } ) => isDefault );
+		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 : item.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 (
@@ -28,23 +28,23 @@ function BlockPatternPicker( {
 			 * Safari+VoiceOver won't announce the list otherwise.
 			 */
 			/* eslint-disable jsx-a11y/no-redundant-roles */ }
-			<ul className="block-editor-block-pattern-picker__patterns" role="list">
-				{ patterns.map( ( pattern ) => (
-					<li key={ pattern.name }>
+			<ul className="block-editor-block-variation-picker__variations" role="list">
+				{ 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>
@@ -54,4 +54,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

@@ -137,15 +137,15 @@ export default compose( [
 		const { getBlockRootClientId, hasInserterItems, __experimentalGetAllowedBlocks } = select(
 			'core/block-editor'
 		);
-		const { __experimentalGetBlockPatterns: getBlockPatterns } = select( 'core/blocks' );
+		const { __experimentalGetBlockVariations: getBlockVariations } = select( 'core/blocks' );
 
 		rootClientId = rootClientId || getBlockRootClientId( clientId ) || undefined;
 
 		const allowedBlocks = __experimentalGetAllowedBlocks( rootClientId );
 
 		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

@@ -53,7 +53,7 @@ export const searchItems = ( items, categories, collections, searchTerm ) => {
 	}
 
 	return items
-		.filter( ( { name, title, category, keywords = [], patterns = [] } ) => {
+		.filter( ( { name, title, category, keywords = [], variations = [] } ) => {
 			let unmatchedTerms = removeMatchingTerms( normalizedSearchTerms, title );
 
 			if ( unmatchedTerms.length === 0 ) {
@@ -82,33 +82,33 @@ 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

@@ -71,19 +71,19 @@ describe( 'searchItems', () => {
 		] );
 	} );
 
-	it( 'should match words using also patterns and return all matched patterns', () => {
-		const filteredItems = searchItems( items, categories, collections, 'pattern' );
+	it( 'should match words using also variations and return all matched variations', () => {
+		const filteredItems = searchItems( items, categories, collections, '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', () => {
-		const filteredItems = searchItems( items, categories, collections, 'patterns two three' );
+	it( 'should match words using also variations and filter out unmatched variations', () => {
+		const filteredItems = searchItems( items, categories, collections, '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

@@ -1227,7 +1227,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' )
 			);
 
@@ -1240,7 +1240,7 @@ export const getInserterItems = createSelector(
 				icon: blockType.icon,
 				category: blockType.category,
 				keywords: blockType.keywords,
-				patterns: inserterPatterns,
+				variations: inserterVariations,
 				example: blockType.example,
 				isDisabled,
 				utility: calculateUtility( blockType.category, count, isContextual ),

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

@@ -2015,7 +2015,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";

packages/block-library/src/columns/edit.js

@@ -14,7 +14,7 @@ import {
 	InnerBlocks,
 	BlockControls,
 	BlockVerticalAlignmentToolbar,
-	__experimentalBlockPatternPicker,
+	__experimentalBlockVariationPicker,
 	__experimentalUseColors,
 } from '@wordpress/block-editor';
 import { withDispatch, useDispatch, useSelect } from '@wordpress/data';
@@ -184,19 +184,19 @@ const createBlocksFromInnerBlocksTemplate = ( innerBlocksTemplate ) => {
 
 const ColumnsEdit = ( props ) => {
 	const { clientId, name } = props;
-	const { blockType, defaultPattern, hasInnerBlocks, patterns } = useSelect(
+	const { blockType, defaultVariation, hasInnerBlocks, variations } = useSelect(
 		( select ) => {
 			const {
-				__experimentalGetBlockPatterns,
+				__experimentalGetBlockVariations,
 				getBlockType,
-				__experimentalGetDefaultBlockPattern,
+				__experimentalGetDefaultBlockVariation,
 			} = select( 'core/blocks' );
 
 			return {
 				blockType: getBlockType( name ),
-				defaultPattern: __experimentalGetDefaultBlockPattern( name, 'block' ),
+				defaultVariation: __experimentalGetDefaultBlockVariation( name, 'block' ),
 				hasInnerBlocks: select( 'core/block-editor' ).getBlocks( clientId ).length > 0,
-				patterns: __experimentalGetBlockPatterns( name, 'block' ),
+				variations: __experimentalGetBlockVariations( name, 'block' ),
 			};
 		},
 		[ clientId, name ]
@@ -209,18 +209,18 @@ const ColumnsEdit = ( props ) => {
 	}
 
 	return (
-		<__experimentalBlockPatternPicker
+		<__experimentalBlockVariationPicker
 			icon={ get( blockType, [ 'icon', 'src' ] ) }
 			label={ get( blockType, [ 'title' ] ) }
-			patterns={ patterns }
-			onSelect={ ( nextPattern = defaultPattern ) => {
-				if ( nextPattern.attributes ) {
-					props.setAttributes( nextPattern.attributes );
+			variations={ variations }
+			onSelect={ ( nextVariation = defaultVariation ) => {
+				if ( nextVariation.attributes ) {
+					props.setAttributes( nextVariation.attributes );
 				}
-				if ( nextPattern.innerBlocks ) {
+				if ( nextVariation.innerBlocks ) {
 					replaceInnerBlocks(
 						props.clientId,
-						createBlocksFromInnerBlocksTemplate( nextPattern.innerBlocks )
+						createBlocksFromInnerBlocksTemplate( nextVariation.innerBlocks )
 					);
 				}
 			} }