Block Fields: Try integrating Block Bindings#75137
Draft
Conversation
|
Size Change: +184 B (+0.01%) Total Size: 2.99 MB
ℹ️ View Unchanged
|
769ad13 to
b25ac96
Compare
Contributor
Author
|
Here's a little update with the current state of the PR.
(The screencast is using code from #74610 to expose the featured image ID and URL from the This PR is experimental; some of the code is quite hacky. In particular, it has proven hard to find a consistent way to highlight a DataForm control's border, and to include the "connected" indicator icon. (For the latter, I'm currently (ab)using the What's more solid is the code that syncs Block Fields values with bound attributes 🎉 Next stepI'll file a PR with the code that syncs Block Fields values with bound attributes, plus the e2e tests from #72096. FutureImplementing the indicators for bound state (purple border, "connected" icon) in a consistent way in Block Fields is probably too big of a goal for 7.0, so we'll likely only have that in 7.1. (We also need a designer to have a look at this 😬 👋 @jarekmorawski ) My ultimate goal would be to move the block bindings source selection menu to the "connected" button, and remove the "Attributes" panel from the "Settings" tab altogether. Something like this: 
|
Contributor
Author
3deef54 to
94d1d61
Compare
Contributor
Depending on the design, I think there'll probably need to be some input from @oandregal and others on the best way to decorate a dataform field to indicate a binding (the purple color and connected icon). It might be an interesting one, I don't know if there's been exploration around this kind of thing before for dataforms. |
Mamaduka
reviewed
Feb 6, 2026
Comment on lines
+88
to
+100
| const { getBlockBindingsSource } = unlock( select( blocksStore ) ); | ||
| return Object.entries( _attributes.metadata.bindings ).reduce( | ||
| ( acc, [ attribute, binding ] ) => { | ||
| const source = getBlockBindingsSource( binding.source ); | ||
| const values = source.getValues( { | ||
| select, | ||
| context: blockContext, | ||
| bindings: { [ attribute ]: binding }, | ||
| } ); | ||
| return { ...acc, ...values }; | ||
| }, | ||
| _attributes | ||
| ); |
Member
There was a problem hiding this comment.
Side note: We need to find a better way to bind these values. Related #74571.
Contributor
Author
There was a problem hiding this comment.
Agree. The big problem is the dependency on select and block context.
In an ideal world, we'd change Block Bindings to expose a getValue (singular) that doesn't require either and can be simply plugged into DataForms. Unfortunately, I haven't yet figured out a way to do so, as a lot of the data that Block Bindings are supposed to expose do depend on fetching information from data stores/selectors 😕
94d1d61 to
7dd7afb
Compare
7 tasks
13 tasks
oandregal
reviewed
Feb 18, 2026
| validity, | ||
| }: DataFormControlProps< Item > ) { | ||
| const { prefix, suffix } = config || {}; | ||
| const isConnected = field.id in ( data?.metadata?.bindings || {} ); |
Member
There was a problem hiding this comment.
What are the requirements for the bound attributes, from a DataForm perspective? Is it only to have a purple border color? Is it attaching a suffix (lego icon) to the field title? I can prepare a proposal with that.
We can't add bindings related code to the dataviews package :)
Member
There was a problem hiding this comment.
In DataForm, fields can have two render presentations: regular layout, or panel layout. Both need to signal boundness.
Additionally, there are contextual states related to validation (also a required/optional suffix in the field's title), and they can conflict with styles to communicate boundness:
Contributor
Author
There was a problem hiding this comment.
What are the requirements for the bound attributes, from a DataForm perspective? Is it only to have a purple border color? Is it attaching a suffix (lego icon) to the field title?
We'd need some kind of control that
- indicates if an attribute is connected or not, and
- allows the user to connect a (previously unconnected) attribute to a Block Bindings source. Once connected, that control should allow to disconnect the attribute.
In this PR, I've (ab)used the suffix, but that doesn't quite cut it. For one, it doesn't allow passing props. Also, IIRC, some block fields are using the suffix for different purposes already, so there would be a collision. Finally, complex fields (e.g. image) will probably require different treatment.
(Noting that this still needs feedback from an actual designer -- I threw this together based on my own intuition and some vague recollection of designs by Jarek that I'd seen about half a year ago.)
I can prepare a proposal with that.
That'd be amazing, thank you! LMK if the above gives you a good enough idea for starters, or if you need it a bit more refined.
Member
There was a problem hiding this comment.
@ockham I've played a bit with block bindings and connected alt&caption to a source. This is how it looks like:
Screen.Recording.2026-02-18.at.16.47.27.mov
Note how the "settings > alternative text" is not highlighted in any way, but rather the block itself (block border, block icon in toolbar) become purple. Perhaps that's enough? I don't have enough context on this conversations. Before diving into implementing a DataForm API to style fields, I'd welcome a design check to understand if that's necessary.
Contributor
Author
There was a problem hiding this comment.
Highlighting at the block level isn't granular enough -- we want the user to know which attributes are bound (could be one, could be multiple). That info is currently provided via the Attributes panel. But that's in a different tab (Settings) and somewhat duplicates the information found in the Content tab, i.e. the list of available attributes and their values.
Instead, we'd like the user to tell at a glance which attribute values are provided from a Block Bindings source. This is important in the Content panel, since editing a Block Field that contains a bound attribute will propagate that change back to the block bindings source (if supported by the source, and given sufficient permissions).
Note that not all Block Fields in the Content tab will need the added control (at least not at the start), but only the ones that support Block Bindings.
There's a bit more context and visuals to illustrate this in #75022.
Edit: Forgot to mention, my eventual goal is to remove the Attributes panel altogether -- in favor of the "decorated" Block Fields in the Content tab.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
4 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
What?
WIP. More details to come.
Closes #75022. Alternative approach to #75064.
Why?
TBD
How?
TBD
Testing Instructions
TBD
E2E coverage available in #72096.
TODO
Massage code: Try implementing agetValue()Fields API compat wrapper around Block Bindings'getValues()(plural!) rather than overriding attribute values.connectionicon next to it (to indicate connections status and select block bindings source).featuredMedia.*fields fromcore/post-datasource in Block Bindings: Add support for Cover block id and url attrs #74610 to experiment with bindings multi-attribute fields (images).Screenshots or screencast