Block Bindings experiment: Alternative to unifying the editor APIs to get and update values

packages/block-editor/src/hooks/use-bindings-attributes.js

@@ -121,33 +121,77 @@ export const withBlockBindingSupport = createHigherOrderComponent(
 
 			const attributes = {};
 
-			for ( const [ attributeName, boundAttribute ] of Object.entries(
+			const bindingsBySource = new Map();
+
+			for ( const [ attributeName, binding ] of Object.entries(
 				bindings
 			) ) {
-				const source = sources[ boundAttribute.source ];
+				const { source: sourceName, args: sourceArgs } = binding;
+				const source = sources[ sourceName ];
 				if (
-					! source?.getValue ||
+					( ! source?.getValue && ! source?.getValuesInBatch ) ||
 					! canBindAttribute( name, attributeName )
 				) {
 					continue;
 				}
 
-				const args = {
-					registry,
-					context,
-					clientId,
-					attributeName,
-					args: boundAttribute.args,
-				};
-
-				attributes[ attributeName ] = source.getValue( args );
+				bindingsBySource.set( source, {
+					...bindingsBySource.get( source ),
+					[ attributeName ]: {
+						args: sourceArgs,
+					},
+				} );
+			}
 
-				if ( attributes[ attributeName ] === undefined ) {
-					if ( attributeName === 'url' ) {
-						attributes[ attributeName ] = null;
+			if ( bindingsBySource.size ) {
+				for ( const [ source, sourceBindings ] of bindingsBySource ) {
+					// Get values in batch if the source supports it.
+					if ( source.getValuesInBatch ) {
+						const values = source.getValuesInBatch( {
+							registry,
+							context,
+							clientId,
+							sourceBindings,
+						} );
+						for ( const [ attributeName, value ] of Object.entries(
+							values
+						) ) {
+							attributes[ attributeName ] = value;
+						}
 					} else {
-						attributes[ attributeName ] =
-							source.getPlaceholder?.( args );
+						for ( const [
+							attributeName,
+							{ args },
+						] of Object.entries( sourceBindings ) ) {
+							attributes[ attributeName ] = source.getValue( {
+								registry,
+								context,
+								clientId,
+								attributeName,
+								args,
+							} );
+						}
+					}
+
+					// Add placeholders when value is undefined.
+					// TODO: Revisit this part.
+					for ( const [ attributeName, { args } ] of Object.entries(
+						sourceBindings
+					) ) {
+						if ( attributes[ attributeName ] === undefined ) {
+							if ( attributeName === 'url' ) {
+								attributes[ attributeName ] = null;
+							} else {
+								attributes[ attributeName ] =
+									source.getPlaceholder?.( {
+										registry,
+										context,
+										clientId,
+										attributeName,
+										args,
+									} );
+							}
+						}
 					}
 				}
 			}
@@ -166,7 +210,7 @@ export const withBlockBindingSupport = createHigherOrderComponent(
 					}
 
 					const keptAttributes = { ...nextAttributes };
-					const updatesBySource = new Map();
+					const bindingsBySource = new Map();
 
 					// Loop only over the updated attributes to avoid modifying the bound ones that haven't changed.
 					for ( const [ attributeName, newValue ] of Object.entries(
@@ -181,40 +225,46 @@ export const withBlockBindingSupport = createHigherOrderComponent(
 
 						const binding = bindings[ attributeName ];
 						const source = sources[ binding?.source ];
-						if ( ! source?.setValue && ! source?.setValues ) {
+						if (
+							! source?.setValue &&
+							! source?.setValuesInBatch
+						) {
 							continue;
 						}
-						updatesBySource.set( source, {
-							...updatesBySource.get( source ),
-							[ attributeName ]: newValue,
+						bindingsBySource.set( source, {
+							...bindingsBySource.get( source ),
+							[ attributeName ]: {
+								args: binding.args,
+								newValue,
+							},
 						} );
 						delete keptAttributes[ attributeName ];
 					}
 
-					if ( updatesBySource.size ) {
+					if ( bindingsBySource.size ) {
 						for ( const [
 							source,
-							attributes,
-						] of updatesBySource ) {
-							if ( source.setValues ) {
-								source.setValues( {
+							sourceBindings,
+						] of bindingsBySource ) {
+							// Set values in batch if the source supports it.
+							if ( source.setValuesInBatch ) {
+								source.setValuesInBatch( {
 									registry,
 									context,
 									clientId,
-									attributes,
+									sourceBindings,
 								} );
 							} else {
 								for ( const [
 									attributeName,
-									value,
-								] of Object.entries( attributes ) ) {
-									const binding = bindings[ attributeName ];
+									{ args, newValue: value },
+								] of Object.entries( sourceBindings ) ) {
 									source.setValue( {
 										registry,
 										context,
 										clientId,
 										attributeName,
-										args: binding.args,
+										args,
 										value,
 									} );
 								}

packages/blocks/src/store/private-actions.js

@@ -52,8 +52,9 @@ export function registerBlockBindingsSource( source ) {
 		sourceName: source.name,
 		sourceLabel: source.label,
 		getValue: source.getValue,
+		getValuesInBatch: source.getValuesInBatch,
 		setValue: source.setValue,
-		setValues: source.setValues,
+		setValuesInBatch: source.setValuesInBatch,
 		getPlaceholder: source.getPlaceholder,
 		canUserEditValue: source.canUserEditValue,
 	};

packages/blocks/src/store/reducer.js

@@ -378,8 +378,9 @@ export function blockBindingsSources( state = {}, action ) {
 			[ action.sourceName ]: {
 				label: action.sourceLabel,
 				getValue: action.getValue,
+				getValuesInBatch: action.getValuesInBatch,
 				setValue: action.setValue,
-				setValues: action.setValues,
+				setValuesInBatch: action.setValuesInBatch,
 				getPlaceholder: action.getPlaceholder,
 				canUserEditValue: action.canUserEditValue || ( () => false ),
 			},

packages/editor/src/bindings/pattern-overrides.js

@@ -30,7 +30,29 @@ export default {
 
 		return overridableValue === '' ? undefined : overridableValue;
 	},
-	setValues( { registry, clientId, attributes } ) {
+	// When `getValuesInBatch` is defined, this is not running.
+	// Keeping it here to show the different possibilities.
+	getValuesInBatch( { registry, clientId, context, sourceBindings } ) {
+		const patternOverridesContent = context[ 'pattern/overrides' ];
+		if ( ! patternOverridesContent ) {
+			return {};
+		}
+
+		const { getBlockAttributes } = registry.select( blockEditorStore );
+		const currentBlockAttributes = getBlockAttributes( clientId );
+
+		const overridesValues = {};
+		for ( const attributeName of Object.keys( sourceBindings ) ) {
+			const overridableValue =
+				patternOverridesContent?.[
+					currentBlockAttributes?.metadata?.name
+				]?.[ attributeName ];
+			overridesValues[ attributeName ] =
+				overridableValue === '' ? undefined : overridableValue;
+		}
+		return overridesValues;
+	},
+	setValuesInBatch( { registry, clientId, sourceBindings } ) {
 		const { getBlockAttributes, getBlockParentsByBlockName, getBlocks } =
 			registry.select( blockEditorStore );
 		const currentBlockAttributes = getBlockAttributes( clientId );
@@ -45,6 +67,15 @@ export default {
 			true
 		);
 
+		// Extract the updated attributes from the source bindings.
+		const attributes = Object.entries( sourceBindings ).reduce(
+			( attrs, [ key, { newValue } ] ) => {
+				attrs[ key ] = newValue;
+				return attrs;
+			},
+			{}
+		);
+
 		// If there is no pattern client ID, sync blocks with the same name and same attributes.
 		if ( ! patternClientId ) {
 			const syncBlocksWithSameName = ( blocks ) => {

packages/editor/src/bindings/post-meta.js

@@ -15,6 +15,8 @@ export default {
 	getPlaceholder( { args } ) {
 		return args.key;
 	},
+	// When `getValuesInBatch` is defined, this is not running.
+	// Keeping it here to show the different possibilities.
 	getValue( { registry, context, args } ) {
 		return registry
 			.select( coreDataStore )
@@ -24,6 +26,24 @@ export default {
 				context?.postId
 			).meta?.[ args.key ];
 	},
+	getValuesInBatch( { registry, context, sourceBindings } ) {
+		const meta = registry
+			.select( coreDataStore )
+			.getEditedEntityRecord(
+				'postType',
+				context?.postType,
+				context?.postId
+			)?.meta;
+		const newValues = {};
+		for ( const [ attributeName, source ] of Object.entries(
+			sourceBindings
+		) ) {
+			newValues[ attributeName ] = meta?.[ source.args.key ];
+		}
+		return newValues;
+	},
+	// When `setValuesInBatch` is defined, this is not running.
+	// Keeping it here to show the different possibilities.
 	setValue( { registry, context, args, value } ) {
 		registry
 			.dispatch( coreDataStore )
@@ -33,6 +53,17 @@ export default {
 				},
 			} );
 	},
+	setValuesInBatch( { registry, context, sourceBindings } ) {
+		const newMeta = {};
+		Object.values( sourceBindings ).forEach( ( { args, newValue } ) => {
+			newMeta[ args.key ] = newValue;
+		} );
+		registry
+			.dispatch( coreDataStore )
+			.editEntityRecord( 'postType', context?.postType, context?.postId, {
+				meta: newMeta,
+			} );
+	},
 	canUserEditValue( { select, context, args } ) {
 		const postType =
 			context?.postType || select( editorStore ).getCurrentPostType();