Extend updateBlockAttributes to provide for different attribute changes for each block in the clientIds array

docs/designers-developers/developers/data/data-core-block-editor.md

@@ -1535,7 +1535,8 @@ attributes with the specified client IDs have been updated.
 _Parameters_
 
 -   _clientIds_ `string|string[]`: Block client IDs.
--   _attributes_ `Object`: Block attributes to be merged.
+-   _attributes_ `Object`: Block attributes to be merged. Should be keyed by clientIds if uniqueByBlock is true.
+-   _uniqueByBlock_ `boolean`: true if each block in clientIds array has a unique set of attributes
 
 _Returns_
 

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

@@ -154,15 +154,21 @@ export function receiveBlocks( blocks ) {
  * attributes with the specified client IDs have been updated.
  *
  * @param {string|string[]} clientIds  Block client IDs.
- * @param {Object}          attributes Block attributes to be merged.
- *
+ * @param {Object}          attributes Block attributes to be merged. Should be keyed by clientIds if
+ * uniqueByBlock is true.
+ * @param {boolean}          uniqueByBlock true if each block in clientIds array has a unique set of attributes
  * @return {Object} Action object.
  */
-export function updateBlockAttributes( clientIds, attributes ) {
+export function updateBlockAttributes(
+	clientIds,
+	attributes,
+	uniqueByBlock = false
+) {
 	return {
 		type: 'UPDATE_BLOCK_ATTRIBUTES',
 		clientIds: castArray( clientIds ),
 		attributes,
+		uniqueByBlock,
 	};
 }
 

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

@@ -822,7 +822,9 @@ export const blocks = flow(
 					( accumulator, id ) => ( {
 						...accumulator,
 						[ id ]: reduce(
-							action.attributes,
+							action.uniqueByBlock
+								? action.attributes[ id ]
+								: action.attributes,
 							( result, value, key ) => {
 								// Consider as updates only changed values.
 								if ( value !== result[ key ] ) {
@@ -1650,7 +1652,9 @@ export function lastBlockAttributesChange( state, action ) {
 			return action.clientIds.reduce(
 				( accumulator, id ) => ( {
 					...accumulator,
-					[ id ]: action.attributes,
+					[ id ]: action.uniqueByBlock
+						? action.attributes[ id ]
+						: action.attributes,
 				} ),
 				{}
 			);

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

@@ -90,6 +90,7 @@ describe( 'actions', () => {
 				type: 'UPDATE_BLOCK_ATTRIBUTES',
 				clientIds: [ clientId ],
 				attributes,
+				uniqueByBlock: false,
 			} );
 		} );
 
@@ -101,6 +102,7 @@ describe( 'actions', () => {
 				type: 'UPDATE_BLOCK_ATTRIBUTES',
 				clientIds,
 				attributes,
+				uniqueByBlock: false,
 			} );
 		} );
 	} );

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

@@ -1775,6 +1775,31 @@ describe( 'state', () => {
 					expect( state.attributes.kumquat.updated ).toBe( true );
 				} );
 
+				it( 'should return with attribute block updates when attributes are unique by block', () => {
+					const original = deepFreeze(
+						blocks( undefined, {
+							type: 'RESET_BLOCKS',
+							blocks: [
+								{
+									clientId: 'kumquat',
+									attributes: {},
+									innerBlocks: [],
+								},
+							],
+						} )
+					);
+					const state = blocks( original, {
+						type: 'UPDATE_BLOCK_ATTRIBUTES',
+						clientIds: [ 'kumquat' ],
+						attributes: {
+							kumquat: { updated: true },
+						},
+						uniqueByBlock: true,
+					} );
+
+					expect( state.attributes.kumquat.updated ).toBe( true );
+				} );
+
 				it( 'should accumulate attribute block updates', () => {
 					const original = deepFreeze(
 						blocks( undefined, {
@@ -2890,6 +2915,23 @@ describe( 'state', () => {
 			} );
 		} );
 
+		it( 'returns updated value when explicit block attributes update are unique by block id', () => {
+			const original = null;
+
+			const state = lastBlockAttributesChange( original, {
+				type: 'UPDATE_BLOCK_ATTRIBUTES',
+				clientIds: [ 'afd1cb17-2c08-4e7a-91be-007ba7ddc3a1' ],
+				attributes: {
+					'afd1cb17-2c08-4e7a-91be-007ba7ddc3a1': { food: 'banana' },
+				},
+				uniqueByBlock: true,
+			} );
+
+			expect( state ).toEqual( {
+				'afd1cb17-2c08-4e7a-91be-007ba7ddc3a1': { food: 'banana' },
+			} );
+		} );
+
 		it( 'returns null on anything other than block attributes update', () => {
 			const original = deepFreeze( {
 				'afd1cb17-2c08-4e7a-91be-007ba7ddc3a1': { food: 'banana' },