Support custom sources (like acf/field) in the Attributes Panel UI

[benniledl]

The new Attributes Panel introduced in WordPress 6.7 is great for visually binding block attributes to data sources like custom fields.

But currently, it only works with the default core/post-meta source (via register_post_meta()), and does not support custom sources like acf/field.

What’s the issue?
Even though acf/field bindings work perfectly via the code editor, they are not available in the UI. The panel doesn’t show up for those fields.

Example working code:

<!-- wp:paragraph {"metadata":{"bindings":{"content":{"source":"acf/field","args":{"key":"field_67ab390672809"}}}}} -->
<p></p>
<!-- /wp:paragraph -->

Request:
Please make the Attributes Panel support all valid sources registered via the Block Bindings API – not just core/post-meta. For example:

• Detect acf/field source
• Let users pick ACF fields in the panel UI

[benniledl]

Custom sources can already be registered using the register_block_bindings_source function.
The Attributes Panel, however, does not currently utilize this information — it should allow users to select fields from these already registered sources.

[beckej13820]

Coming in here to say +1. Having a GUI like Advanced Custom Fields or Secure Custom Fields to register post meta will be important for code free block bindings or users in a multisite environments that can't use the register_post_meta workflow.

[cbravobernal]

There is some work done in that regard.
WordPress/secure-custom-fields#176

[jasalt]

Editor Javascript context (in attributes panel) has access to registered binding sources via wp.blocks.getBlockBindingsSources();. That can be utilized for custom block's UI e.g.

var getBindingSources = function() {
    try {
        if (wp.blocks && wp.blocks.getBlockBindingsSources) {
            var bindingSources = wp.blocks.getBlockBindingsSources();
            return Object.keys(bindingSources).map(function(sourceKey) {
                var source = bindingSources[sourceKey];
                var label = source.label || sourceKey;
                return {
                    value: sourceKey,
                    label: label + ' (' + sourceKey + ')'
                };
            });
        }
    } catch (e) {
        console.warn('Could not access block bindings sources:', e);
    }
    return [];
};

Show them in ComboboxControl:

el(ComboboxControl, {
    label: 'Binding Source',
    value: binding.source || '',
    options: bindingSources,
    maxSuggestions: 10,
    onChange: function(value) {
        // ... do something ...
    }
}),

Resulting UI:

With additional binding arguments control it achieves the same as setting up bindings manually with code editor. Very handy for various custom blocks and binding needs. I use this in "twig-templating-block" which passes block bindings as context variables for Twig/Timber template written in block editor.