diff --git a/packages/block-editor/src/hooks/block-bindings.js b/packages/block-editor/src/hooks/block-bindings.js index 87ab4e36321028..ed3f0b68186980 100644 --- a/packages/block-editor/src/hooks/block-bindings.js +++ b/packages/block-editor/src/hooks/block-bindings.js @@ -29,7 +29,6 @@ import { useBlockBindingsUtils } from '../utils/block-bindings'; import { unlock } from '../lock-unlock'; import InspectorControls from '../components/inspector-controls'; import BlockContext from '../components/block-context'; -import { useBlockEditContext } from '../components/block-edit'; import { store as blockEditorStore } from '../store'; const { Menu } = unlock( componentsPrivateApis ); @@ -55,34 +54,19 @@ function BlockBindingsPanelMenuContent( { sources, onOpenModal, } ) { - const { clientId } = useBlockEditContext(); const { updateBlockBindings } = useBlockBindingsUtils(); const isMobile = useViewportMatch( 'medium', '<' ); const blockContext = useContext( BlockContext ); - const { attributeType, select } = useSelect( - ( _select ) => { - const { name: blockName } = - _select( blockEditorStore ).getBlock( clientId ); - const _attributeType = - getBlockType( blockName ).attributes?.[ attribute ]?.type; - return { - attributeType: - _attributeType === 'rich-text' ? 'string' : _attributeType, - select: _select, - }; - }, - [ clientId, attribute ] - ); + const { select } = useSelect( ( _select ) => { + return { + select: _select, + }; + }, [] ); return ( { Object.entries( sources ).map( ( [ sourceKey, source ] ) => { - // Only show sources that have compatible data for this specific attribute. - const sourceDataItems = source.data?.filter( - ( item ) => item?.type === attributeType - ); - const noItemsAvailable = - ! sourceDataItems || sourceDataItems.length === 0; + ! source.data || source.data?.length === 0; if ( source.mode === 'dropdown' ) { return ( @@ -105,7 +89,7 @@ function BlockBindingsPanelMenuContent( { { ! noItemsAvailable && ( - { sourceDataItems.map( ( item ) => { + { source.data.map( ( item ) => { const itemBindings = { source: sourceKey, args: item?.args || { @@ -319,51 +303,47 @@ export const BlockBindingsPanel = ( { name: blockName, metadata } ) => { sourceName, { editorUI, getFieldsList, usesContext, label, getValues }, ] ) => { - if ( editorUI ) { - // Populate context. - const context = {}; - if ( usesContext?.length ) { - for ( const key of usesContext ) { - context[ key ] = blockContext[ key ]; - } + const allowedAttributeTypes = _bindableAttributes.map( + ( attribute ) => { + const attributeType = + getBlockType( blockName ).attributes?.[ + attribute + ]?.type; + return attributeType === 'rich-text' + ? 'string' + : attributeType; + } + ); + + // Populate context. + const context = {}; + if ( usesContext?.length ) { + for ( const key of usesContext ) { + context[ key ] = blockContext[ key ]; } + } + if ( editorUI ) { const editorUIResult = editorUI( { select, context, } ); - const hasCompatibleData = _bindableAttributes.some( - ( attribute ) => { - const _attributeType = - getBlockType( blockName ).attributes?.[ - attribute - ]?.type; - const attributeType = - _attributeType === 'rich-text' - ? 'string' - : _attributeType; - - return editorUIResult.data?.some( - ( item ) => item?.type === attributeType - ); - } + + const compatibleData = editorUIResult?.data?.filter( + ( item ) => + allowedAttributeTypes.includes( item?.type ) ); - if ( hasCompatibleData ) { + if ( compatibleData?.length > 0 ) { _sources[ sourceName ] = { ...editorUIResult, + data: compatibleData, label, getValues, }; } } else if ( getFieldsList ) { // Backward compatibility: Convert getFieldsList to editorUI format - const context = {}; - if ( usesContext?.length ) { - for ( const key of usesContext ) { - context[ key ] = blockContext[ key ]; - } - } const fieldsListResult = getFieldsList( { select, @@ -380,27 +360,14 @@ export const BlockBindingsPanel = ( { name: blockName, metadata } ) => { } ) ); - const hasCompatibleData = _bindableAttributes.some( - ( attribute ) => { - const _attributeType = - getBlockType( blockName ).attributes?.[ - attribute - ]?.type; - const attributeType = - _attributeType === 'rich-text' - ? 'string' - : _attributeType; - - return data.some( - ( item ) => item?.type === attributeType - ); - } + const compatibleData = data?.filter( ( item ) => + allowedAttributeTypes.includes( item?.type ) ); - if ( hasCompatibleData ) { + if ( compatibleData?.length > 0 ) { _sources[ sourceName ] = { mode: 'dropdown', // Default mode for backward compatibility - data, + data: compatibleData, label, getValues, };