Update JS block style registration to accept multiple block types

WordPress · Apr 29, 2024 · ba8c647 · ba8c647
1 parent b8a7c8a
commit ba8c647
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 17 deletions.
diff --git a/packages/blocks/README.md b/packages/blocks/README.md
@@ -507,7 +507,7 @@ _Parameters_
 
 ### registerBlockStyle
 
-Registers a new block style for the given block.
+Registers a new block style for the given block types.
 
 For more information on connecting the styles with CSS [the official documentation](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-styles/#styles).
 
@@ -536,7 +536,7 @@ const ExampleComponent = () => {
 
 _Parameters_
 
--   _blockName_ `string`: Name of block (example: “core/latest-posts”).
+-   _blockNames_ `string|Array`: Name of blocks e.g. “core/latest-posts” or `["core/group", "core/columns"]`.
 -   _styleVariation_ `Object`: Object containing `name` which is the class name applied to the block and `label` which identifies the variation to the user.
 
 ### registerBlockType

diff --git a/packages/blocks/src/api/registration.js b/packages/blocks/src/api/registration.js
@@ -611,13 +611,13 @@ export const hasChildBlocksWithInserterSupport = ( blockName ) => {
 };
 
 /**
- * Registers a new block style for the given block.
+ * Registers a new block style for the given block types.
  *
  * For more information on connecting the styles with CSS
  * [the official documentation](https://developer.wordpress.org/block-editor/reference-guides/block-api/block-styles/#styles).
  *
- * @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.
+ * @param {string|Array} blockNames     Name of blocks e.g. “core/latest-posts” or `["core/group", "core/columns"]`.
+ * @param {Object}       styleVariation Object containing `name` which is the class name applied to the block and `label` which identifies the variation to the user.
  *
  * @example
  * ```js
@@ -642,8 +642,8 @@ export const hasChildBlocksWithInserterSupport = ( blockName ) => {
  * };
  * ```
  */
-export const registerBlockStyle = ( blockName, styleVariation ) => {
-	dispatch( blocksStore ).addBlockStyles( blockName, styleVariation );
+export const registerBlockStyle = ( blockNames, styleVariation ) => {
+	dispatch( blocksStore ).addBlockStyles( blockNames, styleVariation );
 };
 
 /**

diff --git a/packages/blocks/src/store/actions.js b/packages/blocks/src/store/actions.js
@@ -98,18 +98,18 @@ export function removeBlockTypes( names ) {
  * Returns an action object used in signalling that new block styles have been added.
  * Ignored from documentation as the recommended usage for this action through registerBlockStyle from @wordpress/blocks.
  *
- * @param {string}       blockName Block name.
- * @param {Array|Object} styles    Block style object or array of block style objects.
+ * @param {string|Array} blockNames Block names to register new styles for.
+ * @param {Array|Object} styles     Block style object or array of block style objects.
  *
  * @ignore
  *
  * @return {Object} Action object.
  */
-export function addBlockStyles( blockName, styles ) {
+export function addBlockStyles( blockNames, styles ) {
 	return {
 		type: 'ADD_BLOCK_STYLES',
 		styles: Array.isArray( styles ) ? styles : [ styles ],
-		blockName,
+		blockNames: Array.isArray( blockNames ) ? blockNames : [ blockNames ],
 	};
 }
 

diff --git a/packages/blocks/src/store/reducer.js b/packages/blocks/src/store/reducer.js
@@ -201,13 +201,14 @@ export function blockStyles( state = {}, action ) {
 				),
 			};
 		case 'ADD_BLOCK_STYLES':
-			return {
-				...state,
-				[ action.blockName ]: getUniqueItemsByName( [
-					...( state[ action.blockName ] ?? [] ),
+			const updatedStyles = {};
+			action.blockNames.forEach( ( blockName ) => {
+				updatedStyles[ blockName ] = getUniqueItemsByName( [
+					...( state[ blockName ] ?? [] ),
 					...action.styles,
-				] ),
-			};
+				] );
+			} );
+			return { ...state, ...updatedStyles };
 		case 'REMOVE_BLOCK_STYLES':
 			return {
 				...state,