diff --git a/packages/block-editor/src/hooks/use-bindings-attributes.js b/packages/block-editor/src/hooks/use-bindings-attributes.js index 5c41714b778759..49a39e53c912d4 100644 --- a/packages/block-editor/src/hooks/use-bindings-attributes.js +++ b/packages/block-editor/src/hooks/use-bindings-attributes.js @@ -13,7 +13,6 @@ import { RichTextData } from '@wordpress/rich-text'; */ import { store as blockEditorStore } from '../store'; import { unlock } from '../lock-unlock'; -import { useBlockEditContext } from '../components/block-edit/context'; /** @typedef {import('@wordpress/compose').WPHigherOrderComponent} WPHigherOrderComponent */ /** @typedef {import('@wordpress/blocks').WPBlockSettings} WPBlockSettings */ @@ -64,27 +63,19 @@ export function canBindAttribute( blockName, attributeName ) { * * @param {Object} props - The component props. * @param {string} props.attrName - The attribute name. - * @param {any} props.attrValue - The attribute value. - * @param {string} props.blockName - The block name. * @param {Object} props.blockProps - The block props with bound attribute. * @param {Object} props.source - Source handler. * @param {Object} props.args - The arguments to pass to the source. * @return {null} This is a data-handling component. Render nothing. */ -const BindingConnector = ( { - args, - attrName, - attrValue, - blockName, - blockProps, - source, -} ) => { +const BindingConnector = ( { args, attrName, blockProps, source } ) => { const { placeholder, value: propValue } = source.useSource( blockProps, args ); - const setAttributes = blockProps.setAttributes; + const { setAttributes, name } = blockProps; + const attrValue = blockProps.attributes[ attrName ]; const { syncDerivedUpdates } = unlock( useDispatch( blockEditorStore ) ); @@ -136,7 +127,7 @@ const BindingConnector = ( { * attributes and metadata fields types are improved and include `url`. */ const htmlAttribute = - getBlockType( blockName ).attributes[ attrName ].attribute; + getBlockType( name ).attributes[ attrName ].attribute; if ( htmlAttribute === 'src' || htmlAttribute === 'href' ) { updateBoundAttibute( null ); @@ -150,7 +141,7 @@ const BindingConnector = ( { propValue, attrValue, placeholder, - blockName, + name, attrName, ] ); @@ -164,13 +155,11 @@ const BindingConnector = ( { * For this, it creates a BindingConnector for each bound attribute. * * @param {Object} props - The component props. - * @param {string} props.blockName - The block name. * @param {Object} props.blockProps - The BlockEdit props object. * @param {Object} props.bindings - The block bindings settings. - * @param {Object} props.attributes - The block attributes. * @return {null} This is a data-handling component. Render nothing. */ -function BlockBindingBridge( { blockName, blockProps, bindings, attributes } ) { +function BlockBindingBridge( { blockProps, bindings } ) { const blockBindingsSources = unlock( useSelect( blocksStore ) ).getAllBlockBindingsSources(); @@ -189,9 +178,7 @@ function BlockBindingBridge( { blockName, blockProps, bindings, attributes } ) { return ( ( props ) => { - const { clientId, name: blockName } = useBlockEditContext(); - const { getBlockAttributes } = useSelect( blockEditorStore ); - /* * Create binding object filtering * only the attributes that can be bound. */ - const attributes = getBlockAttributes( clientId ); const bindings = Object.fromEntries( - Object.entries( attributes.metadata?.bindings || {} ).filter( + Object.entries( props.attributes.metadata?.bindings || {} ).filter( ( [ attrName ] ) => canBindAttribute( props.name, attrName ) ) ); @@ -224,9 +207,7 @@ const withBlockBindingSupport = createHigherOrderComponent( { Object.keys( bindings ).length > 0 && ( ) }