Perf: batch block list settings in single action

packages/block-editor/src/components/inner-blocks/use-nested-settings-update.js

@@ -2,7 +2,7 @@
  * WordPress dependencies
  */
 import { useLayoutEffect, useMemo, useState } from '@wordpress/element';
-import { useDispatch, useRegistry } from '@wordpress/data';
+import { useRegistry } from '@wordpress/data';
 import deprecated from '@wordpress/deprecated';
 import isShallowEqual from '@wordpress/is-shallow-equal';
 
@@ -11,6 +11,7 @@ import isShallowEqual from '@wordpress/is-shallow-equal';
  */
 import { store as blockEditorStore } from '../../store';
 import { getLayoutType } from '../../layouts';
+import { unlock } from '../../lock-unlock';
 
 /** @typedef {import('../../selectors').WPDirectInsertBlock } WPDirectInsertBlock */
 
@@ -69,7 +70,6 @@ export default function useNestedSettingsUpdate(
 	// Instead of adding a useSelect mapping here, please add to the useSelect
 	// mapping in InnerBlocks! Every subscription impacts performance.
 
-	const { updateBlockListSettings } = useDispatch( blockEditorStore );
 	const registry = useRegistry();
 
 	// Implementors often pass a new array on every render,
@@ -155,21 +155,18 @@ export default function useNestedSettingsUpdate(
 		// we batch all the updatedBlockListSettings in a single "data" batch
 		// which results in a single re-render.
 		if ( ! pendingSettingsUpdates.get( registry ) ) {
-			pendingSettingsUpdates.set( registry, [] );
+			pendingSettingsUpdates.set( registry, new Map() );
 		}
-		pendingSettingsUpdates
-			.get( registry )
-			.push( [ clientId, newSettings ] );
+		pendingSettingsUpdates.get( registry ).set( clientId, newSettings );
 		window.queueMicrotask( () => {
-			if ( pendingSettingsUpdates.get( registry )?.length ) {
-				registry.batch( () => {
-					pendingSettingsUpdates
-						.get( registry )
-						.forEach( ( args ) => {
-							updateBlockListSettings( ...args );
-						} );
-					pendingSettingsUpdates.set( registry, [] );
-				} );
+			if ( pendingSettingsUpdates.get( registry ).size ) {
+				const { batchUpdateBlockListSettings } = unlock(
+					registry.dispatch( blockEditorStore )
+				);
+				batchUpdateBlockListSettings(
+					pendingSettingsUpdates.get( registry )
+				);
+				pendingSettingsUpdates.set( registry, new Map() );
 			}
 		} );
 	}, [
@@ -183,7 +180,6 @@ export default function useNestedSettingsUpdate(
 		__experimentalDirectInsert,
 		captureToolbars,
 		orientation,
-		updateBlockListSettings,
 		layout,
 		registry,
 	] );

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

@@ -26,6 +26,20 @@ const privateSettings = [
 	'blockInspectorAnimation',
 ];
 
+/**
+ * Action that changes the nested settings of a given block.
+ *
+ * @param {Map} settingsByClientId A map of block client IDs to their settings.
+ *
+ * @return {Object} Action object
+ */
+export function batchUpdateBlockListSettings( settingsByClientId ) {
+	return {
+		type: 'BATCH_UPDATE_BLOCK_LIST_SETTINGS',
+		settingsByClientId,
+	};
+}
+
 /**
  * Action that updates the block editor settings and
  * conditionally preserves the experimental ones.

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

@@ -1769,6 +1769,19 @@ export const blockListSettings = ( state = {}, action ) => {
 				[ clientId ]: action.settings,
 			};
 		}
+
+		case 'BATCH_UPDATE_BLOCK_LIST_SETTINGS': {
+			const { settingsByClientId } = action;
+			const updates = {};
+			for ( const [ clientId, _settings ] of settingsByClientId ) {
+				if ( ! fastDeepEqual( state[ clientId ], _settings ) ) {
+					updates[ clientId ] = _settings;
+				}
+			}
+			return Object.keys( updates ).length
+				? { ...state, ...updates }
+				: state;
+		}
 	}
 	return state;
 };