Skip to content
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.

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

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

Closed
SantosGuillamot opened this issue Feb 13, 2024 · 5 comments
Closed
Labels
[Feature] Block bindings [Feature] Custom Fields Anything related to the custom fields project - connecting block attributes and dynamic values [Type] Enhancement A suggestion for improvement.

Comments

@SantosGuillamot
Copy link
Contributor

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.

Screenshot 2024-02-13 at 17 00 38

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:

Screenshot 2024-02-13 at 17 18 39

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

Screenshot 2024-02-13 at 17 21 25

  • 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:

Screenshot 2024-02-13 at 17 26 11

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.

Screenshot 2024-02-13 at 17 27 49

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:

Screenshot 2024-02-13 at 17 30 20

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
Copy link
Contributor

michalczaplinski commented Feb 15, 2024

Screenshot 2024-02-15 at 17 49 31 Screenshot 2024-02-15 at 17 53 49
  • 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
Copy link
Contributor Author

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
Copy link
Contributor

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
Copy link
Contributor Author

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

@SantosGuillamot
Copy link
Contributor Author

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Feature] Block bindings [Feature] Custom Fields Anything related to the custom fields project - connecting block attributes and dynamic values [Type] Enhancement A suggestion for improvement.
Projects
None yet
Development

No branches or pull requests

4 participants