From db3ffe6f2878c3a39d18213eba5051b063f20fb9 Mon Sep 17 00:00:00 2001 From: Grzegorz Ziolkowski Date: Thu, 30 Jan 2020 16:59:12 +0100 Subject: [PATCH] Blocks: Rename patterns to variations in the Block API --- .../src/components/block-types-list/index.js | 30 ++--- .../index.js | 30 ++--- .../style.scss | 10 +- packages/block-editor/src/components/index.js | 2 +- .../src/components/inserter/index.js | 7 +- .../src/components/inserter/search-items.js | 18 +-- .../inserter/test/fixtures/index.js | 24 ++-- .../components/inserter/test/search-items.js | 20 ++-- packages/block-editor/src/store/selectors.js | 4 +- .../block-editor/src/store/test/selectors.js | 2 +- packages/block-editor/src/style.scss | 2 +- packages/block-library/src/columns/edit.js | 31 ++--- packages/block-library/src/columns/index.js | 4 +- .../columns/{patterns.js => variations.js} | 8 +- packages/blocks/src/api/index.js | 4 +- packages/blocks/src/api/registration.js | 107 +++++++++--------- packages/blocks/src/api/test/registration.js | 6 +- packages/blocks/src/store/actions.js | 24 ++-- packages/blocks/src/store/reducer.js | 22 ++-- packages/blocks/src/store/selectors.js | 52 +++++---- packages/blocks/src/store/test/actions.js | 35 +++--- packages/blocks/src/store/test/reducer.js | 64 +++++------ packages/blocks/src/store/test/selectors.js | 72 ++++++------ 23 files changed, 300 insertions(+), 278 deletions(-) rename packages/block-editor/src/components/{block-pattern-picker => block-variation-picker}/index.js (57%) rename packages/block-editor/src/components/{block-pattern-picker => block-variation-picker}/style.scss (81%) rename packages/block-library/src/columns/{patterns.js => variations.js} (95%) diff --git a/packages/block-editor/src/components/block-types-list/index.js b/packages/block-editor/src/components/block-types-list/index.js index edcac5011ba794..b806457e71a406 100644 --- a/packages/block-editor/src/components/block-types-list/index.js +++ b/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, }; } ) ); diff --git a/packages/block-editor/src/components/block-pattern-picker/index.js b/packages/block-editor/src/components/block-variation-picker/index.js similarity index 57% rename from packages/block-editor/src/components/block-pattern-picker/index.js rename to packages/block-editor/src/components/block-variation-picker/index.js index 160bc280a06667..6bf2646f83349b 100644 --- a/packages/block-editor/src/components/block-pattern-picker/index.js +++ b/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 */ } { /* eslint-enable jsx-a11y/no-redundant-roles */ } { allowSkip && ( -
+
@@ -62,4 +62,4 @@ function BlockPatternPicker( { ); } -export default BlockPatternPicker; +export default BlockVariationPicker; diff --git a/packages/block-editor/src/components/block-pattern-picker/style.scss b/packages/block-editor/src/components/block-variation-picker/style.scss similarity index 81% rename from packages/block-editor/src/components/block-pattern-picker/style.scss rename to packages/block-editor/src/components/block-variation-picker/style.scss index feaca246095fb3..63460d6fcfe981 100644 --- a/packages/block-editor/src/components/block-pattern-picker/style.scss +++ b/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 { diff --git a/packages/block-editor/src/components/index.js b/packages/block-editor/src/components/index.js index 48e8559d7990b9..b5039d38b46496 100644 --- a/packages/block-editor/src/components/index.js +++ b/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'; diff --git a/packages/block-editor/src/components/inserter/index.js b/packages/block-editor/src/components/inserter/index.js index dcef449c56e810..34a430a04545f5 100644 --- a/packages/block-editor/src/components/inserter/index.js +++ b/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 ) { diff --git a/packages/block-editor/src/components/inserter/search-items.js b/packages/block-editor/src/components/inserter/search-items.js index 18e5179380421b..23bae5d9b3860d 100644 --- a/packages/block-editor/src/components/inserter/search-items.js +++ b/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, }; } ); }; diff --git a/packages/block-editor/src/components/inserter/test/fixtures/index.js b/packages/block-editor/src/components/inserter/test/fixtures/index.js index e9df0a3dbc75ed..d3b46654736c93 100644 --- a/packages/block-editor/src/components/inserter/test/fixtures/index.js +++ b/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, diff --git a/packages/block-editor/src/components/inserter/test/search-items.js b/packages/block-editor/src/components/inserter/test/search-items.js index e53a524ea90b6b..01c0bace323283 100644 --- a/packages/block-editor/src/components/inserter/test/search-items.js +++ b/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' ); } ); } ); diff --git a/packages/block-editor/src/store/selectors.js b/packages/block-editor/src/store/selectors.js index 5b64c3955f7b85..f6c1f3052530ab 100644 --- a/packages/block-editor/src/store/selectors.js +++ b/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( diff --git a/packages/block-editor/src/store/test/selectors.js b/packages/block-editor/src/store/test/selectors.js index 782cacd7d24f75..d6f4cfaac20e17 100644 --- a/packages/block-editor/src/store/test/selectors.js +++ b/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, diff --git a/packages/block-editor/src/style.scss b/packages/block-editor/src/style.scss index b1e2406d94cc00..d170399ed8af61 100644 --- a/packages/block-editor/src/style.scss +++ b/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"; diff --git a/packages/block-library/src/columns/edit.js b/packages/block-library/src/columns/edit.js index afa97ec3210ded..98c4aac327c6c4 100644 --- a/packages/block-library/src/columns/edit.js +++ b/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'; @@ -210,24 +210,29 @@ 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( + defaultVariation: __experimentalGetDefaultBlockVariation( name, 'block' ), hasInnerBlocks: select( 'core/block-editor' ).getBlocks( clientId ).length > 0, - patterns: __experimentalGetBlockPatterns( name, 'block' ), + variations: __experimentalGetBlockVariations( name, 'block' ), }; }, [ clientId, name ] @@ -240,19 +245,19 @@ 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 + nextVariation.innerBlocks ) ); } diff --git a/packages/block-library/src/columns/index.js b/packages/block-library/src/columns/index.js index 7c7251c2e190e3..ff932b86e9846f 100644 --- a/packages/block-library/src/columns/index.js +++ b/packages/block-library/src/columns/index.js @@ -10,8 +10,8 @@ import { columns as icon } from '@wordpress/icons'; import deprecated from './deprecated'; import edit from './edit'; import metadata from './block.json'; -import patterns from './patterns'; import save from './save'; +import variations from './variations'; const { name } = metadata; @@ -27,7 +27,7 @@ export const settings = { align: [ 'wide', 'full' ], html: false, }, - patterns, + variations, example: { innerBlocks: [ { diff --git a/packages/block-library/src/columns/patterns.js b/packages/block-library/src/columns/variations.js similarity index 95% rename from packages/block-library/src/columns/patterns.js rename to packages/block-library/src/columns/variations.js index 4a432de31d4100..93e83796d137cc 100644 --- a/packages/block-library/src/columns/patterns.js +++ b/packages/block-library/src/columns/variations.js @@ -4,12 +4,14 @@ import { Path, SVG } from '@wordpress/components'; import { __ } from '@wordpress/i18n'; +/** @typedef {import('@wordpress/blocks').WPBlockVariation} WPBlockVariation */ + /** * Template option choices for predefined columns layouts. * - * @type {WPBlockPattern[]} + * @type {WPBlockVariation[]} */ -const patterns = [ +const variations = [ { name: 'two-columns-equal', title: __( 'Two columns; equal split' ), @@ -125,4 +127,4 @@ const patterns = [ }, ]; -export default patterns; +export default variations; diff --git a/packages/blocks/src/api/index.js b/packages/blocks/src/api/index.js index 4a6edbcc425e8c..131175c89568e4 100644 --- a/packages/blocks/src/api/index.js +++ b/packages/blocks/src/api/index.js @@ -50,8 +50,8 @@ export { unstable__bootstrapServerSideBlockDefinitions, // eslint-disable-line camelcase registerBlockStyle, unregisterBlockStyle, - __experimentalRegisterBlockPattern, - __experimentalUnregisterBlockPattern, + __experimentalRegisterBlockVariation, + __experimentalUnregisterBlockVariation, } from './registration'; export { isUnmodifiedDefaultBlock, diff --git a/packages/blocks/src/api/registration.js b/packages/blocks/src/api/registration.js index 97ad2244555027..eed76a144c459a 100644 --- a/packages/blocks/src/api/registration.js +++ b/packages/blocks/src/api/registration.js @@ -58,31 +58,31 @@ import { DEPRECATED_ENTRY_KEYS } from './constants'; */ /** - * Named block pattern scopes. + * Named block variation scopes. * - * @typedef {'block'|'inserter'} WPBlockPatternScope + * @typedef {'block'|'inserter'} WPBlockVariationScope */ /** - * An object describing a pattern defined for the block type. + * An object describing a variation defined for the block type. * - * @typedef {Object} WPBlockPattern + * @typedef {Object} WPBlockVariation * - * @property {string} name The unique and machine-readable name. - * @property {string} title A human-readable pattern title. - * @property {string} description A detailed pattern description. - * @property {WPIcon} [icon] An icon helping to visualize the pattern. - * @property {boolean} [isDefault] Indicates whether the current pattern is - * the default one. Defaults to `false`. - * @property {Object} [attributes] Values which override block attributes. - * @property {Array[]} [innerBlocks] Initial configuration of nested blocks. - * @property {Object} [example] Example provides structured data for - * the block preview. You can set to - * `undefined` to disable the preview shown - * for the block type. - * @property {WPBlockPatternScope[]} [scope] The list of scopes where the pattern - * is applicable. When not provided, it - * assumes all available scopes. + * @property {string} name The unique and machine-readable name. + * @property {string} title A human-readable variation title. + * @property {string} description A detailed variation description. + * @property {WPIcon} [icon] An icon helping to visualize the variation. + * @property {boolean} [isDefault] Indicates whether the current variation is + * the default one. Defaults to `false`. + * @property {Object} [attributes] Values which override block attributes. + * @property {Array[]} [innerBlocks] Initial configuration of nested blocks. + * @property {Object} [example] Example provides structured data for + * the block preview. You can set to + * `undefined` to disable the preview shown + * for the block type. + * @property {WPBlockVariationScope[]} [scope] The list of scopes where the variation + * is applicable. When not provided, it + * assumes all available scopes. */ /** @@ -90,26 +90,26 @@ import { DEPRECATED_ENTRY_KEYS } from './constants'; * * @typedef {Object} WPBlock * - * @property {string} name Block type's namespaced name. - * @property {string} title Human-readable block type label. - * @property {string} description A detailed block type description. - * @property {string} category Block type category classification, - * used in search interfaces to arrange - * block types by category. - * @property {WPBlockTypeIcon} [icon] Block type icon. - * @property {string[]} [keywords] Additional keywords to produce block - * type as result in search interfaces. - * @property {Object} [attributes] Block type attributes. - * @property {WPComponent} [save] Optional component describing - * serialized markup structure of a - * block type. - * @property {WPComponent} edit Component rendering an element to - * manipulate the attributes of a block - * in the context of an editor. - * @property {WPBlockPattern[]} [patterns] The list of block patterns. - * @property {Object} [example] Example provides structured data for - * the block preview. When not defined - * then no preview is shown. + * @property {string} name Block type's namespaced name. + * @property {string} title Human-readable block type label. + * @property {string} description A detailed block type description. + * @property {string} category Block type category classification, + * used in search interfaces to arrange + * block types by category. + * @property {WPBlockTypeIcon} [icon] Block type icon. + * @property {string[]} [keywords] Additional keywords to produce block + * type as result in search interfaces. + * @property {Object} [attributes] Block type attributes. + * @property {WPComponent} [save] Optional component describing + * serialized markup structure of a + * block type. + * @property {WPComponent} edit Component rendering an element to + * manipulate the attributes of a block + * in the context of an editor. + * @property {WPBlockVariation[]} [variations] The list of block variations. + * @property {Object} [example] Example provides structured data for + * the block preview. When not defined + * then no preview is shown. */ /** @@ -491,30 +491,33 @@ export const unregisterBlockStyle = ( blockName, styleVariationName ) => { }; /** - * Registers a new block pattern for the given block. + * Registers a new block variation for the given block. * - * @param {string} blockName Name of the block (example: “core/columns”). - * @param {WPBlockPattern} pattern Object describing a block pattern. + * @param {string} blockName Name of the block (example: “core/columns”). + * @param {WPBlockVariation} variation Object describing a block variation. */ -export const __experimentalRegisterBlockPattern = ( blockName, pattern ) => { - dispatch( 'core/blocks' ).__experimentalAddBlockPatterns( +export const __experimentalRegisterBlockVariation = ( + blockName, + variation +) => { + dispatch( 'core/blocks' ).__experimentalAddBlockVariations( blockName, - pattern + variation ); }; /** - * Unregisters a block pattern defined for the given block. + * Unregisters a block variation defined for the given block. * - * @param {string} blockName Name of the block (example: “core/columns”). - * @param {string} patternName Name of the pattern defined for the block. + * @param {string} blockName Name of the block (example: “core/columns”). + * @param {string} variationName Name of the variation defined for the block. */ -export const __experimentalUnregisterBlockPattern = ( +export const __experimentalUnregisterBlockVariation = ( blockName, - patternName + variationName ) => { - dispatch( 'core/blocks' ).__experimentalRemoveBlockPatterns( + dispatch( 'core/blocks' ).__experimentalRemoveBlockVariations( blockName, - patternName + variationName ); }; diff --git a/packages/blocks/src/api/test/registration.js b/packages/blocks/src/api/test/registration.js index 92073bc8b5cf27..45419fb9b36d4a 100644 --- a/packages/blocks/src/api/test/registration.js +++ b/packages/blocks/src/api/test/registration.js @@ -678,7 +678,7 @@ describe( 'blocks', () => { }, attributes: {}, keywords: [], - patterns: [], + variations: [], }, ] ); const oldBlock = unregisterBlockType( 'core/test-block' ); @@ -820,7 +820,7 @@ describe( 'blocks', () => { }, attributes: {}, keywords: [], - patterns: [], + variations: [], }, { name: 'core/test-block-with-settings', @@ -833,7 +833,7 @@ describe( 'blocks', () => { }, attributes: {}, keywords: [], - patterns: [], + variations: [], }, ] ); } ); diff --git a/packages/blocks/src/store/actions.js b/packages/blocks/src/store/actions.js index 6d8521f5f8eee6..212745b8918553 100644 --- a/packages/blocks/src/store/actions.js +++ b/packages/blocks/src/store/actions.js @@ -64,33 +64,33 @@ export function removeBlockStyles( blockName, styleNames ) { } /** - * Returns an action object used in signalling that new block patterns have been added. + * Returns an action object used in signalling that new block variations have been added. * - * @param {string} blockName Block name. - * @param {WPBlockPattern|WPBlockPattern[]} patterns Block patterns. + * @param {string} blockName Block name. + * @param {WPBlockVariation|WPBlockVariation[]} variations Block variations. * * @return {Object} Action object. */ -export function __experimentalAddBlockPatterns( blockName, patterns ) { +export function __experimentalAddBlockVariations( blockName, variations ) { return { - type: 'ADD_BLOCK_PATTERNS', - patterns: castArray( patterns ), + type: 'ADD_BLOCK_VARIATIONS', + variations: castArray( variations ), blockName, }; } /** - * Returns an action object used in signalling that block patterns have been removed. + * Returns an action object used in signalling that block variations have been removed. * - * @param {string} blockName Block name. - * @param {string|string[]} patternNames Block pattern names. + * @param {string} blockName Block name. + * @param {string|string[]} variationNames Block variation names. * * @return {Object} Action object. */ -export function __experimentalRemoveBlockPatterns( blockName, patternNames ) { +export function __experimentalRemoveBlockVariations( blockName, variationNames ) { return { - type: 'REMOVE_BLOCK_PATTERNS', - patternNames: castArray( patternNames ), + type: 'REMOVE_BLOCK_VARIATIONS', + variationNames: castArray( variationNames ), blockName, }; } diff --git a/packages/blocks/src/store/reducer.js b/packages/blocks/src/store/reducer.js index a677bdeeffd091..e746eb80b5949a 100644 --- a/packages/blocks/src/store/reducer.js +++ b/packages/blocks/src/store/reducer.js @@ -109,14 +109,14 @@ export function blockStyles( state = {}, action ) { } /** - * Reducer managing the block patterns. + * Reducer managing the block variations. * * @param {Object} state Current state. * @param {Object} action Dispatched action. * * @return {Object} Updated state. */ -export function blockPatterns( state = {}, action ) { +export function blockVariations( state = {}, action ) { switch ( action.type ) { case 'ADD_BLOCK_TYPES': return { @@ -126,32 +126,32 @@ export function blockPatterns( state = {}, action ) { ( blockType ) => { return uniqBy( [ - ...get( blockType, [ 'patterns' ], [] ), + ...get( blockType, [ 'variations' ], [] ), ...get( state, [ blockType.name ], [] ), ], - ( pattern ) => pattern.name + ( variation ) => variation.name ); } ), }; - case 'ADD_BLOCK_PATTERNS': + case 'ADD_BLOCK_VARIATIONS': return { ...state, [ action.blockName ]: uniqBy( [ ...get( state, [ action.blockName ], [] ), - ...action.patterns, + ...action.variations, ], - ( pattern ) => pattern.name + ( variation ) => variation.name ), }; - case 'REMOVE_BLOCK_PATTERNS': + case 'REMOVE_BLOCK_VARIATIONS': return { ...state, [ action.blockName ]: filter( get( state, [ action.blockName ], [] ), - ( pattern ) => - action.patternNames.indexOf( pattern.name ) === -1 + ( variation ) => + action.variationNames.indexOf( variation.name ) === -1 ), }; } @@ -248,7 +248,7 @@ export function collections( state = {}, action ) { export default combineReducers( { blockTypes, blockStyles, - blockPatterns, + blockVariations, defaultBlockName, freeformFallbackBlockName, unregisteredFallbackBlockName, diff --git a/packages/blocks/src/store/selectors.js b/packages/blocks/src/store/selectors.js index 8e8e612665865b..c1679724a0e26b 100644 --- a/packages/blocks/src/store/selectors.js +++ b/packages/blocks/src/store/selectors.js @@ -14,7 +14,7 @@ import { some, } from 'lodash'; -/** @typedef {import('../api/registration').WPBlockPatternScope} WPBlockPatternScope */ +/** @typedef {import('../api/registration').WPBlockVariationScope} WPBlockVariationScope */ /** * Given a block name or block type object, returns the corresponding @@ -42,14 +42,14 @@ export const getBlockTypes = createSelector( return Object.values( state.blockTypes ).map( ( blockType ) => { return { ...blockType, - patterns: __experimentalGetBlockPatterns( + variations: __experimentalGetBlockVariations( state, blockType.name ), }; } ); }, - ( state ) => [ state.blockTypes, state.blockPatterns ] + ( state ) => [ state.blockTypes, state.blockVariations ] ); /** @@ -77,44 +77,48 @@ export function getBlockStyles( state, name ) { } /** - * Returns block patterns by block name. + * Returns block variations by block name. * - * @param {Object} state Data state. - * @param {string} blockName Block type name. - * @param {WPBlockPatternScope} [scope] Block pattern scope name. + * @param {Object} state Data state. + * @param {string} blockName Block type name. + * @param {WPBlockVariationScope} [scope] Block variation scope name. * - * @return {(WPBlockPattern[]|void)} Block patterns. + * @return {(WPBlockVariation[]|void)} Block variations. */ -export function __experimentalGetBlockPatterns( state, blockName, scope ) { - const patterns = state.blockPatterns[ blockName ]; - if ( ! patterns || ! scope ) { - return patterns; +export function __experimentalGetBlockVariations( state, blockName, scope ) { + const variations = state.blockVariations[ blockName ]; + if ( ! variations || ! scope ) { + return variations; } - return patterns.filter( ( pattern ) => { - return ! pattern.scope || pattern.scope.includes( scope ); + return variations.filter( ( variation ) => { + return ! variation.scope || variation.scope.includes( scope ); } ); } /** - * Returns the default block pattern for the given block type. - * When there are multiple patterns annotated as the default one, + * Returns the default block variation for the given block type. + * When there are multiple variations annotated as the default one, * the last added item is picked. This simplifies registering overrides. - * When there is no default pattern set, it returns the first item. + * When there is no default variation set, it returns the first item. * - * @param {Object} state Data state. - * @param {string} blockName Block type name. - * @param {WPBlockPatternScope} [scope] Block pattern scope name. + * @param {Object} state Data state. + * @param {string} blockName Block type name. + * @param {WPBlockVariationScope} [scope] Block variation scope name. * - * @return {?WPBlockPattern} The default block pattern. + * @return {?WPBlockVariation} The default block variation. */ -export function __experimentalGetDefaultBlockPattern( +export function __experimentalGetDefaultBlockVariation( state, blockName, scope ) { - const patterns = __experimentalGetBlockPatterns( state, blockName, scope ); + const variations = __experimentalGetBlockVariations( + state, + blockName, + scope + ); - return findLast( patterns, 'isDefault' ) || first( patterns ); + return findLast( variations, 'isDefault' ) || first( variations ); } /** diff --git a/packages/blocks/src/store/test/actions.js b/packages/blocks/src/store/test/actions.js index b1badf882b2544..c439fa98272381 100644 --- a/packages/blocks/src/store/test/actions.js +++ b/packages/blocks/src/store/test/actions.js @@ -2,39 +2,42 @@ * Internal dependencies */ import { - __experimentalAddBlockPatterns, - __experimentalRemoveBlockPatterns, + __experimentalAddBlockVariations, + __experimentalRemoveBlockVariations, } from '../actions'; describe( 'actions', () => { - describe( 'addBlockPatterns', () => { + describe( 'addBlockVariations', () => { const blockName = 'block/name'; - const patternName = 'my-pattern'; + const variationName = 'my-variation'; - it( 'should return the ADD_BLOCK_PATTERNS action', () => { - const pattern = { - name: patternName, - title: 'My Pattern', + it( 'should return the ADD_BLOCK_VARIATIONS action', () => { + const variation = { + name: variationName, + title: 'My Variation', attributes: { example: 'foo', }, }; - const result = __experimentalAddBlockPatterns( blockName, pattern ); + const result = __experimentalAddBlockVariations( + blockName, + variation + ); expect( result ).toEqual( { - type: 'ADD_BLOCK_PATTERNS', - patterns: [ pattern ], + type: 'ADD_BLOCK_VARIATIONS', + variations: [ variation ], blockName, } ); } ); - it( 'should return the REMOVE_BLOCK_PATTERNS action', () => { - const result = __experimentalRemoveBlockPatterns( + it( 'should return the REMOVE_BLOCK_VARIATIONS action', () => { + const result = __experimentalRemoveBlockVariations( blockName, - patternName + variationName ); expect( result ).toEqual( { - type: 'REMOVE_BLOCK_PATTERNS', - patternNames: [ patternName ], + type: 'REMOVE_BLOCK_VARIATIONS', + variationNames: [ variationName ], blockName, } ); } ); diff --git a/packages/blocks/src/store/test/reducer.js b/packages/blocks/src/store/test/reducer.js index 1c5489783907d9..3316964743812e 100644 --- a/packages/blocks/src/store/test/reducer.js +++ b/packages/blocks/src/store/test/reducer.js @@ -7,12 +7,12 @@ import deepFreeze from 'deep-freeze'; * Internal dependencies */ import { - __experimentalAddBlockPatterns, + __experimentalAddBlockVariations, addBlockTypes, - __experimentalRemoveBlockPatterns, + __experimentalRemoveBlockVariations, } from '../actions'; import { - blockPatterns, + blockVariations, blockStyles, blockTypes, categories, @@ -127,85 +127,85 @@ describe( 'blockStyles', () => { } ); } ); -describe( 'blockPatterns', () => { +describe( 'blockVariations', () => { const blockName = 'block/name'; - const blockPatternName = 'pattern-name'; - const blockPattern = { - name: blockPatternName, - label: 'My pattern', + const blockVariationName = 'variation-name'; + const blockVariation = { + name: blockVariationName, + label: 'My variation', }; - const secondBlockPatternName = 'second-pattern-name'; - const secondBlockPattern = { - name: secondBlockPatternName, - label: 'My Second Pattern', + const secondBlockVariationName = 'second-variation-name'; + const secondBlockVariation = { + name: secondBlockVariationName, + label: 'My Second Variation', }; it( 'should return an empty object as default state', () => { - const state = blockPatterns( undefined, {} ); + const state = blockVariations( undefined, {} ); expect( state ).toEqual( {} ); } ); - it( 'should add a new block pattern when no pattern register', () => { + it( 'should add a new block variation when no variation register', () => { const initialState = deepFreeze( {} ); - const state = blockPatterns( + const state = blockVariations( initialState, - __experimentalAddBlockPatterns( blockName, blockPattern ) + __experimentalAddBlockVariations( blockName, blockVariation ) ); expect( state ).toEqual( { - [ blockName ]: [ blockPattern ], + [ blockName ]: [ blockVariation ], } ); } ); - it( 'should add another pattern when a block pattern already present for the block', () => { + it( 'should add another variation when a block variation already present for the block', () => { const initialState = deepFreeze( { - [ blockName ]: [ blockPattern ], + [ blockName ]: [ blockVariation ], } ); - const state = blockPatterns( + const state = blockVariations( initialState, - __experimentalAddBlockPatterns( blockName, secondBlockPattern ) + __experimentalAddBlockVariations( blockName, secondBlockVariation ) ); expect( state ).toEqual( { - [ blockName ]: [ blockPattern, secondBlockPattern ], + [ blockName ]: [ blockVariation, secondBlockVariation ], } ); } ); - it( 'should prepend block patterns added when adding a block', () => { + it( 'should prepend block variations added when adding a block', () => { const initialState = deepFreeze( { - [ blockName ]: [ secondBlockPattern ], + [ blockName ]: [ secondBlockVariation ], } ); - const state = blockPatterns( + const state = blockVariations( initialState, addBlockTypes( { name: blockName, - patterns: [ blockPattern ], + variations: [ blockVariation ], } ) ); expect( state ).toEqual( { - [ blockName ]: [ blockPattern, secondBlockPattern ], + [ blockName ]: [ blockVariation, secondBlockVariation ], } ); } ); - it( 'should remove a block pattern', () => { + it( 'should remove a block variation', () => { const initialState = deepFreeze( { - [ blockName ]: [ blockPattern, secondBlockPattern ], + [ blockName ]: [ blockVariation, secondBlockVariation ], } ); - const state = blockPatterns( + const state = blockVariations( initialState, - __experimentalRemoveBlockPatterns( blockName, blockPatternName ) + __experimentalRemoveBlockVariations( blockName, blockVariationName ) ); expect( state ).toEqual( { - [ blockName ]: [ secondBlockPattern ], + [ blockName ]: [ secondBlockVariation ], } ); } ); } ); diff --git a/packages/blocks/src/store/test/selectors.js b/packages/blocks/src/store/test/selectors.js index 8a59c22afed7f1..72bcf0c9ecd7e0 100644 --- a/packages/blocks/src/store/test/selectors.js +++ b/packages/blocks/src/store/test/selectors.js @@ -8,7 +8,7 @@ import deepFreeze from 'deep-freeze'; */ import { getChildBlockNames, - __experimentalGetDefaultBlockPattern, + __experimentalGetDefaultBlockVariation, getGroupingBlockName, isMatchingSearchTerm, } from '../selectors'; @@ -156,82 +156,82 @@ describe( 'selectors', () => { } ); } ); - describe( '__experimentalGetDefaultBlockPattern', () => { + describe( '__experimentalGetDefaultBlockVariation', () => { const blockName = 'block/name'; - const createBlockPatternsState = ( patterns ) => { + const createBlockVariationsState = ( variations ) => { return deepFreeze( { - blockPatterns: { - [ blockName ]: patterns, + blockVariations: { + [ blockName ]: variations, }, } ); }; - const firstBlockPattern = { - name: 'first-block-pattern', + const firstBlockVariation = { + name: 'first-block-variation', }; - const secondBlockPattern = { - name: 'second-block-pattern', + const secondBlockVariation = { + name: 'second-block-variation', }; - const thirdBlockPattern = { - name: 'third-block-pattern', + const thirdBlockVariation = { + name: 'third-block-variation', }; - it( 'should return the default pattern when set', () => { - const defaultBlockPattern = { - ...secondBlockPattern, + it( 'should return the default variation when set', () => { + const defaultBlockVariation = { + ...secondBlockVariation, isDefault: true, }; - const state = createBlockPatternsState( [ - firstBlockPattern, - defaultBlockPattern, - thirdBlockPattern, + const state = createBlockVariationsState( [ + firstBlockVariation, + defaultBlockVariation, + thirdBlockVariation, ] ); - const result = __experimentalGetDefaultBlockPattern( + const result = __experimentalGetDefaultBlockVariation( state, blockName ); - expect( result ).toEqual( defaultBlockPattern ); + expect( result ).toEqual( defaultBlockVariation ); } ); - it( 'should return the last pattern when multiple default patterns added', () => { - const defaultBlockPattern = { - ...thirdBlockPattern, + it( 'should return the last variation when multiple default variations added', () => { + const defaultBlockVariation = { + ...thirdBlockVariation, isDefault: true, }; - const state = createBlockPatternsState( [ + const state = createBlockVariationsState( [ { - ...firstBlockPattern, + ...firstBlockVariation, isDefault: true, }, { - ...secondBlockPattern, + ...secondBlockVariation, isDefault: true, }, - defaultBlockPattern, + defaultBlockVariation, ] ); - const result = __experimentalGetDefaultBlockPattern( + const result = __experimentalGetDefaultBlockVariation( state, blockName ); - expect( result ).toEqual( defaultBlockPattern ); + expect( result ).toEqual( defaultBlockVariation ); } ); - it( 'should return the first pattern when no default pattern set', () => { - const state = createBlockPatternsState( [ - firstBlockPattern, - secondBlockPattern, - thirdBlockPattern, + it( 'should return the first variation when no default variation set', () => { + const state = createBlockVariationsState( [ + firstBlockVariation, + secondBlockVariation, + thirdBlockVariation, ] ); - const result = __experimentalGetDefaultBlockPattern( + const result = __experimentalGetDefaultBlockVariation( state, blockName ); - expect( result ).toEqual( firstBlockPattern ); + expect( result ).toEqual( firstBlockVariation ); } ); } );