Block Bindings: Support for editing in block bindings

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

@@ -1,9 +1,9 @@
 /**
  * WordPress dependencies
  */
-import { getBlockType, store as blocksStore } from '@wordpress/blocks';
+import { store as blocksStore } from '@wordpress/blocks';
 import { createHigherOrderComponent } from '@wordpress/compose';
-import { useSelect } from '@wordpress/data';
+import { useRegistry, useSelect } from '@wordpress/data';
 import { useLayoutEffect, useCallback, useState } from '@wordpress/element';
 import { addFilter } from '@wordpress/hooks';
 import { RichTextData } from '@wordpress/rich-text';
@@ -75,15 +75,16 @@ const BindingConnector = ( {
 	source,
 	onPropValueChange,
 } ) => {
-	const { placeholder, value: propValue } = source.useSource(
-		blockProps,
-		args
-	);
+	const {
+		placeholder,
+		value: propValue,
+		updateValue: updateValueFunction,
+	} = source.useSource( blockProps, args, attrName );
 
 	const { name: blockName } = blockProps;
 	const attrValue = blockProps.attributes[ attrName ];
 
-	const updateBoundAttibute = useCallback(
+	const updateBoundAttribute = useCallback(
 		( newAttrValue, prevAttrValue ) => {
 			/*
 			 * If the attribute is a RichTextData instance,
@@ -110,40 +111,20 @@ const BindingConnector = ( {
 				return;
 			}
 
-			onPropValueChange( { [ attrName ]: newAttrValue } );
+			onPropValueChange( {
+				[ attrName ]: { newAttrValue, updateValueFunction },
+			} );
 		},
-		[ attrName, onPropValueChange ]
+		[ attrName, onPropValueChange, updateValueFunction ]
 	);
 
 	useLayoutEffect( () => {
 		if ( typeof propValue !== 'undefined' ) {
-			updateBoundAttibute( propValue, attrValue );
+			updateBoundAttribute( propValue, attrValue );
 		} else if ( placeholder ) {
-			/*
-			 * Placeholder fallback.
-			 * If the attribute is `src` or `href`,
-			 * a placeholder can't be used because it is not a valid url.
-			 * Adding this workaround until
-			 * attributes and metadata fields types are improved and include `url`.
-			 */
-			const htmlAttribute =
-				getBlockType( blockName ).attributes[ attrName ].attribute;
-
-			if ( htmlAttribute === 'src' || htmlAttribute === 'href' ) {
-				updateBoundAttibute( null );
-				return;
-			}
-
-			updateBoundAttibute( placeholder );
+			updateBoundAttribute( placeholder );
 		}
-	}, [
-		updateBoundAttibute,
-		propValue,
-		attrValue,
-		placeholder,
-		blockName,
-		attrName,
-	] );
+	}, [ propValue, attrValue, placeholder, blockName, attrName ] );
 
 	return null;
 };
@@ -194,20 +175,47 @@ function BlockBindingBridge( { blockProps, bindings, onPropValueChange } ) {
 
 const withBlockBindingSupport = createHigherOrderComponent(
 	( BlockEdit ) => ( props ) => {
+		const { setAttributes } = props;
 		/*
 		 * Collect and update the bound attributes
 		 * in a separate state.
 		 */
 		const [ boundAttributes, setBoundAttributes ] = useState( {} );
-		const updateBoundAttributes = useCallback(
-			( newAttributes ) =>
+		const [ updateFunctions, setUpdateFunctions ] = useState( {} );
+		const updateBoundAttributes = useCallback( ( newAttributes ) => {
+			for ( const [ attributeName, object ] of Object.entries(
+				newAttributes
+			) ) {
+				const { newAttrValue, updateValueFunction } = object;
 				setBoundAttributes( ( prev ) => ( {
 					...prev,
-					...newAttributes,
-				} ) ),
-			[]
+					[ attributeName ]: newAttrValue,
+				} ) );
+				if ( updateValueFunction )
+					setUpdateFunctions( ( prev ) => ( {
+						...prev,
+						[ attributeName ]: updateValueFunction,
+					} ) );
+			}
+		}, [] );
+
+		const updatedSetAttributes = useCallback(
+			( nextAttributes ) => {
+				for ( const [ attribute, value ] of Object.entries(
+					nextAttributes
+				) ) {
+					if ( attribute in updateFunctions ) {
+						updateFunctions[ attribute ]( value, nextAttributes );
+					} else {
+						setAttributes( nextAttributes );
+					}
+				}
+			},
+			[ updateFunctions ]
 		);
 
+		const registry = useRegistry();
+
 		/*
 		 * Create binding object filtering
 		 * only the attributes that can be bound.
@@ -231,6 +239,11 @@ const withBlockBindingSupport = createHigherOrderComponent(
 				<BlockEdit
 					{ ...props }
 					attributes={ { ...props.attributes, ...boundAttributes } }
+					setAttributes={ ( newAttributes ) => {
+						registry.batch( () => {
+							updatedSetAttributes( newAttributes );
+						} );
+					} }
 				/>
 			</>
 		);

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

@@ -12,7 +12,7 @@ import { store as editorStore } from '../store';
 export default {
 	name: 'core/post-meta',
 	label: _x( 'Post Meta', 'block bindings source' ),
-	useSource( props, sourceAttributes ) {
+	useSource( props, sourceAttributes, attributeName ) {
 		const { getCurrentPostType } = useSelect( editorStore );
 		const { context } = props;
 		const { key: metaKey } = sourceAttributes;
@@ -27,18 +27,29 @@ export default {
 			context.postId
 		);
 
+		let placeholder = metaKey;
+		/*
+		 * Placeholder fallback.
+		 * If the attribute is `url`,
+		 * a meta key placeholder can't be used because it is not a valid url.
+		 */
+		if ( attributeName === 'url' ) {
+			placeholder = null;
+		}
+
 		if ( postType === 'wp_template' ) {
-			return { placeholder: metaKey };
+			return { placeholder };
 		}
 		const metaValue = meta[ metaKey ];
 		const updateMetaValue = ( newValue ) => {
 			setMeta( { ...meta, [ metaKey ]: newValue } );
 		};
 
 		return {
-			placeholder: metaKey,
+			placeholder,
 			value: metaValue,
 			updateValue: updateMetaValue,
 		};
 	},
+	lockAttributesEditing: false,
 };