Skip to content

Block Bindings: Deduplicate compatible data computation code #72099

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
ockham wants to merge 5 commits into from
Closed

Block Bindings: Deduplicate compatible data computation code #72099

Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
1b1d1ef
Block Bindings: Deduplicate compatible data computation code
ockham Oct 6, 2025
a203d2d
Hoist allowedAttributeTypes
ockham Oct 6, 2025
7ee8574
Reuse code for getFieldsList
ockham Oct 6, 2025
ba920c4
Deduplicate context computation
ockham Oct 6, 2025
eb516a8
Remove now-redundant source data filtering
ockham Oct 6, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
105 changes: 36 additions & 69 deletions packages/block-editor/src/hooks/block-bindings.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 );
Expand All @@ -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 (
<Menu placement={ isMobile ? 'bottom-start' : 'left-start' }>
{ 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 (
Expand All @@ -105,7 +89,7 @@ function BlockBindingsPanelMenuContent( {
{ ! noItemsAvailable && (
<Menu.Popover gutter={ 8 }>
<Menu.Group>
{ sourceDataItems.map( ( item ) => {
{ source.data.map( ( item ) => {
const itemBindings = {
source: sourceKey,
args: item?.args || {
Expand Down Expand Up @@ -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,
Expand All @@ -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,
};
Expand Down
Loading