tweak

packages/block-editor/src/components/block-binding-support/with-block-binding-support.js

@@ -17,52 +17,46 @@ import { useSelect } from '@wordpress/data';
  * Conponent to bind an attribute to a prop.
  *
  * @param {Object}   props                   - The component props.
- * @param {any}      props.propValue         - The prop value.
- * @param {Function} props.onAttributeChange - The function to call when the attribute changes.
  * @param {any}      props.attrValue         - The attribute value.
+ * @param {Function} props.onAttributeChange - The function to call when the attribute changes.
+ * @param {any}      props.propValue         - The prop value.
  * @param {Function} props.onPropValueChange - The function to call when the prop value changes.
  * @return {null} The component.
  */
 const BlockBindingConnector = ( {
 	propValue,
-	onAttributeChange,
+	onPropValueChange = () => {},
 
 	attrValue,
-	onPropValueChange = () => {},
+	onAttributeChange,
 } ) => {
 	const lastPropValue = useRef();
 	const lastAttrValue = useRef();
 
 	useEffect( () => {
-		/*
-		 * When the prop value changes, update the attribute value.
-		 */
 		if ( propValue === lastPropValue.current ) {
 			return;
 		}
 
 		lastPropValue.current = propValue;
-		onAttributeChange( propValue );
-	}, [ onAttributeChange, propValue ] );
+		onPropValueChange( propValue );
+	}, [ onPropValueChange, propValue ] );
 
 	useEffect( () => {
-		/*
-		 * When the attribute value changes, update the prop value.
-		 */
 		if ( attrValue === lastAttrValue.current ) {
 			return;
 		}
 
 		lastAttrValue.current = attrValue;
-		onPropValueChange( attrValue );
-	}, [ onPropValueChange, attrValue ] );
+		onAttributeChange( attrValue );
+	}, [ onAttributeChange, attrValue ] );
 
 	return null;
 };
 
 const withBlockBindingSupport = createHigherOrderComponent(
 	( BlockEdit ) => ( props ) => {
-		const { attributes, setAttributes } = props;
+		const { attributes, name } = props;
 
 		const { getBlockBindingsSource } = useSelect( blockEditorStore );
 
@@ -89,25 +83,22 @@ const withBlockBindingSupport = createHigherOrderComponent(
 					useSource( props, settings.args );
 
 				// Create a unique key for the connector instance
-				const key = `${ settings.source.replace(
-					/\//gi,
-					'-'
-				) }-${ attrName }-${ i }`;
+				const key = `${ settings.source }-${ name }-${ attrName }-${ i }`;
 
 				BindingConnectorInstances.push(
 					<BlockBindingConnector
 						key={ key }
-						attrValue={ attrValue }
-						onAttributeChange={ useCallback(
+						propValue={ propValue }
+						onPropValueChange={ useCallback(
 							( newAttrValue ) => {
-								setAttributes( {
+								props.setAttributes( {
 									[ attrName ]: newAttrValue,
 								} );
 							},
 							[ attrName ]
 						) }
-						propValue={ propValue }
-						onPropValueChange={ useCallback(
+						attrValue={ attrValue }
+						onAttributeChange={ useCallback(
 							( newPropValue ) => {
 								setPropValue?.( newPropValue );
 							},