Block Bindings: Polish the current UX when block attributes are bound

[SantosGuillamot]

I'm opening this issue to gather and discuss some ideas of quick-wins that could be included to clarify when a block and its attributes are connected to a custom field.

Thanks to @SaxonF feedback and mockups, these are some improvements (with no order) I believe could be addressed during beta phase. I think we don't have to work on all of them at the same time and we can include fixes progressively.

Let me know what you think or if you think I'm missing anything. I can link to the relevant PRs if we start working on any of these points.

1. Improve noticing that a block is connected

• Add a "bound" icon in the block toolbar.
• Add a "bound" icon to the block list.
• Add a different border to highlight that a block is connected.

2. Improve noticing that a specific attribute is connected.

So far, these are the attributes supported:

• Paragraph content: I believe the existing locking and the improvements suggested in the first point should be enough.
• Heading content: I believe the existing locking and the improvements suggested in the first point should be enough.
• Button text: I believe the existing locking and the improvements suggested in the first point should be enough.

For these three use cases, when the rich text is locked, we are hiding the formatting controls. We could explore the possibility of disabling them instead with a descriptive help text:

• Button URL: Right now, the controls are hidden when the button URL is connected. We could disable it instead with a help:

• Button link target and rel: If I am not mistaken, those are not handled yet because they were recently added for pattern/overrides. We should probably do something similar.

• Image URL: As a first step, we could disable the replace and link buttons instead of hiding them:

It could be improved later as explained in point 3.

• Image alt and title: Right now, we are disabling the input and adding a message. We could use the same "bound" icon used in point 1.

3. Instead of disabling the buttons, we could disable more granular controls and show the values of the meta fields.

This one could get trickier and that's why I treat it as a different point. In the case of the image or the button for example, we could keep the controls and show something like this:

However, we have to keep in mind that users shouldn't be able to edit it and value will change depending on the source, and sometimes we will need to show a placeholder.

4. Change the default "Connected to custom fields" message.

Right now, independently of the source, we are showing that message. I believe we should go with a more generic message like "Connected to a dynamic data source" that could be overwritten by sources registration in the editor: link. Maybe we can create a new parameter there.

This was also reported in this other discussion.

[michalczaplinski]

• Is it a custom icon? I don't see it in @wordpress/icons.
• What is the HEX value used here for the icon and the border?

cc @SaxonF

[SantosGuillamot]

Is it a custom icon? I don't see it in @wordpress/icons.

I believe it is not part of @wordpress/icons. I guess it will need to be included. The SVG should be something like this:

<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
    <g stroke="#000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
        <path d="m9 23 3-3"/>
        <path d="M13.3 21.3a2.4 2.4 0 0 0 3.4 0L19 19l-6-6-2.3 2.3a2.402 2.402 0 0 0 0 3.4l2.6 2.6Z" fill="#fff"/>
        <path d="M14.5 14.5 17 12m.5 5.5L20 15"/>
        <path d="m20 12 3-3"/>
        <path d="m13 13 6 6 2.3-2.3a2.4 2.4 0 0 0 0-3.4l-2.6-2.6a2.402 2.402 0 0 0-3.4 0L13 13Z" fill="#fff"/>
    </g>
</svg>

What is the HEX value used here for the icon and the border?

If I am not mistaken, the HEX value is #911BEE.

[jasmussen]

For these three use cases, when the rich text is locked, we are hiding the formatting controls. We could explore the possibility of disabling them instead with a descriptive help text:

We should probably hide them. Can potentially explore replacing that entire section with a new dropdown, similar to the "Replace" dropdown for the Image block, that says "Connected". That would allow you to show relevant controls in this menu, as suggested in 3. CC: @SaxonF

[SantosGuillamot]

I've started this pull request to manage point 4: "Change the default "Connected to custom fields" message."

[SantosGuillamot]

If it is okay for everyone, I plan to close this issue as the mentioned problems have been solved or have a separate discussion:

1. Improve noticing that a block is connected: The current UI in trunk notifies the block is connected through the purple color, both in the icon and the border, and with a new panel in the inspector controls. If something else is needed, we can create a new issue.
2. Improve noticing that a specific attribute is connected: There is a separate issue to discuss only this topic.
3. Instead of disabling the buttons, we could disable more granular controls and show the values of the meta fields: It is related to the previous point, and there is another issue to provide more granularity to the block controls.
4. Change the default "Connected to custom fields" message: This has already been changed.