Add a function to register a block style variation (#7997)

* Add a function to register a block style variation * Improve JSDocs for registerBlockStyle * Rename registerBlockStyleVariation to registerBlockStyle and export it * Use template strings
WordPress · Jul 26, 2018 · d5f2d79 · d5f2d79
1 parent aac31cb
commit d5f2d79
Show file tree

Hide file tree

Showing 3 changed files with 58 additions and 3 deletions.
diff --git a/packages/blocks/src/api/index.js b/packages/blocks/src/api/index.js
@@ -41,6 +41,7 @@ export {
 	getChildBlockNames,
 	hasChildBlocks,
 	unstable__bootstrapServerSideBlockDefinitions, // eslint-disable-line camelcase
+	registerBlockStyle,
 } from './registration';
 export {
 	isUnmodifiedDefaultBlock,

diff --git a/packages/blocks/src/api/registration.js b/packages/blocks/src/api/registration.js
@@ -8,7 +8,7 @@ import { get, isFunction, some } from 'lodash';
 /**
  * WordPress dependencies
  */
-import { applyFilters } from '@wordpress/hooks';
+import { applyFilters, addFilter } from '@wordpress/hooks';
 import { select, dispatch } from '@wordpress/data';
 
 /**
@@ -312,7 +312,7 @@ export function isSharedBlock( blockOrType ) {
 /**
  * Returns an array with the child blocks of a given block.
  *
- * @param {string} blockName Block type name.
+ * @param {string} blockName Name of block (example: “latest-posts”).
  *
  * @return {Array} Array of child block names.
  */
@@ -323,10 +323,32 @@ export const getChildBlockNames = ( blockName ) => {
 /**
  * Returns a boolean indicating if a block has child blocks or not.
  *
- * @param {string} blockName Block type name.
+ * @param {string} blockName Name of block (example: “latest-posts”).
  *
  * @return {boolean} True if a block contains child blocks and false otherwise.
  */
 export const hasChildBlocks = ( blockName ) => {
 	return select( 'core/blocks' ).hasChildBlocks( blockName );
 };
+
+/**
+ * Registers a new block style variation for the given block.
+ *
+ * @param {string} blockName      Name of block (example: “core/latest-posts”).
+ * @param {Object} styleVariation Object containing `name` which is the class name applied to the block and `label` which identifies the variation to the user.
+ */
+export const registerBlockStyle = ( blockName, styleVariation ) => {
+	addFilter( 'blocks.registerBlockType', `${ blockName }/${ styleVariation.name }`, ( settings, name ) => {
+		if ( blockName !== name ) {
+			return settings;
+		}
+
+		return {
+			...settings,
+			styles: [
+				...get( settings, [ 'styles' ], [] ),
+				styleVariation,
+			],
+		};
+	} );
+};
diff --git a/packages/blocks/src/api/test/registration.js b/packages/blocks/src/api/test/registration.js
@@ -24,6 +24,7 @@ import {
 	hasBlockSupport,
 	isSharedBlock,
 	unstable__bootstrapServerSideBlockDefinitions, // eslint-disable-line camelcase
+	registerBlockStyle,
 } from '../registration';
 
 describe( 'blocks', () => {
@@ -595,4 +596,35 @@ describe( 'blocks', () => {
 			expect( isSharedBlock( block ) ).toBe( false );
 		} );
 	} );
+
+	describe( 'registerBlockStyle', () => {
+		afterEach( () => {
+			removeFilter( 'blocks.registerBlockType', 'my-plugin/block-without-styles/big' );
+			removeFilter( 'blocks.registerBlockType', 'my-plugin/block-without-styles/small' );
+		} );
+
+		it( 'should add styles', () => {
+			registerBlockStyle( 'my-plugin/block-without-styles', { name: 'big', label: 'Big style' } );
+			const settings = registerBlockType( 'my-plugin/block-without-styles', defaultBlockSettings );
+
+			expect( settings.styles ).toEqual( [
+				{ name: 'big', label: 'Big style' },
+			] );
+		} );
+
+		it( 'should accumulate styles', () => {
+			registerBlockStyle( 'my-plugin/block-without-styles', { name: 'small', label: 'Small style' } );
+			registerBlockStyle( 'my-plugin/block-without-styles', { name: 'big', label: 'Big style' } );
+			const settings = registerBlockType( 'my-plugin/block-without-styles', {
+				...defaultBlockSettings,
+				styles: [ { name: 'normal', label: 'Normal style' } ],
+			} );
+
+			expect( settings.styles ).toEqual( [
+				{ name: 'normal', label: 'Normal style' },
+				{ name: 'small', label: 'Small style' },
+				{ name: 'big', label: 'Big style' },
+			] );
+		} );
+	} );
 } );