Adjust the icons and text of the binding connected blocks #61560
Conversation
This file contains 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
kevin940726
added
[Type] Enhancement
|
Size Change: +65 B (0%) Total Size: 1.74 MB
ℹ️ View Unchanged
|
kevin940726
commented
May 13, 2024
| { ( toggleProps ) => ( | ||
| <DropdownMenu | ||
| className="block-editor-block-bindings-toolbar-indicator" | ||
| label={ firstBlockTitle } |
There was a problem hiding this comment.
The aria-label here doesn't match the visual label below. This is using the block title's name, but the visual is using the block's metadata.name. Not sure about the accessibility concern here and how we should fix it. @richtabor Any idea?
|
The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the Unlinked AccountsThe following contributors have not linked their GitHub and WordPress.org accounts: @jarekmorawski. Contributors, please read how to link your accounts to ensure your work is properly credited in WordPress releases. If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message. To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook. |
20 tasks
|
I don't think we should use the override/connection name in the toolbar. It's enough to surface the details in the popover. |
|
I also think the copy in the proposed issue is a bit clearer and informative (with lower case block name as well). |
Agree with this, especially as the name could be long. However, by removing the label we'd see the same icon consecutively when editing the source which is a bit odd: 
Maybe that isn't supposed to be there though. The 'help text' is useful, but shouldn't live in a
|
|
I wonder if the connection's status message should be shown as a tooltip instead. Currently, it's a button that doesn't trigger any action, which can confuse users (including those using a screen reader). 
If we wanted to keep it as a popover, could we let users unlink or change the connection? On that note, can we make the messages more specific? It'd be helpful to mention what the block is connected to. 
When multiple blocks are selected, we could list all connections. Clicking one would take the user to a specific 
|
|
@richtabor @jameskoster @jarekmorawski Is there a conclusion about the design direction we want to go in? Wanted to flag as well that the 6.6 beta is rapidly approaching (a week on Friday for Gutenberg), so might be good to think about it in terms of what's achievable within that timescale, and what we can iterate on for 6.7. |
|
Thanks for the ping. I just discussed with @artemiomorales what we might have in time for next Friday, and IMO our opportunity here is to ship block bindings with some of the base UI that we know we need, and then learn not only from beta feedback, but from what people do in the 6.6 phase, to build out any additionally needed affordances for 6.7. Especially some of the pieces that have been proposed for the block toolbar itself have received various bits of critique both across design and accessibility, which to me suggests that could be a piece to refine for the next release. Things like the use of purple, the dot indicator, and more. So what could a V1 look like? The block inspector is the most prominent piece, footprint wise, and the main interface for block connections: 
It's unclear whether folks who use block bindings would close the inspector, given it's a slightly more advanced than usual flow, but if they did, the pre-publish flow would surface if they had edited bound blocks, and give an option to uncheck that: 
It would benefit the flow to surface connections in more states. When a URL is connected, show it as such in the URL popover. When an image URL is connected, show that in the image dropdown, and so on. It's less clear how far we can get with those in time for beta 1, but a minimal version could be this: 
That mockup intentionally omits colors and other affordances added already in trunk. That's not necessarily a suggestion to pull those out, I'd keep those at least for beta 1, but then in that period, learn, and refine, and then decide whether to keep those pieces, or refine them in 6.7. What do you think? |
|
Is the I wonder if the Connections panel could include the 🔌 icon somewhere, to conceptually connect (pun intended) that panel with the locations in which the icon appears. Perhaps in the title, or per-row like color swatches and other similar UIs? In the save panel there's a 'Block bindings' item. Could this be 'Connections' to align with the panel (or vice versa)? |
Had the same thought. Also, the unblock icon. |
Agreed. Could something like this work? But with the correct icon, of course. 
|
|
Yes, that could work. Feel free to tinker in the Figma. |
|
I sketched a few more options, including one where the connection icon could be used as both a status indicator and a control. When clicked, it would detach the block (if allowed/enabled). This logically aligns with the 
|
|
Icon on the left is an option, to be consistent with similar lists: 
|
15 tasks
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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?
Close #61515 and #61547.
Adjust the icons and the text descriptions of the binding connected blocks (pattern overrides, connected post meta, etc.)
Why?
The generic connection icon is not that helpful and the block type names should be helpful.
How?
Adjust
<BlockBindingsToolbarIndicator>.Testing Instructions
You can paste the markup here to create an empty post-meta connected paragraph.
Screenshots or screencast
A pattern overrides block
Multiple pattern overrides blocks
A post-meta connected block
Multiple post-meta connected blocks
