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

Further simplify overrides flow #60760

Closed
richtabor opened this issue Apr 15, 2024 · 4 comments · Fixed by #60769
Closed

Further simplify overrides flow #60760

richtabor opened this issue Apr 15, 2024 · 4 comments · Fixed by #60769
Assignees
Labels
[Feature] Synced Patterns Related to synced patterns (formerly reusable blocks) Needs Dev Ready for, and needs developer efforts [Status] In Progress Tracking issues with work in progress [Type] Enhancement A suggestion for improvement.

Comments

@richtabor
Copy link
Member

richtabor commented Apr 15, 2024

While #60234 got us in the right direction, we can further simplify (as I originally noted here: #60234 (comment)).

We can certainly iterate from here, but I did note that it's unexpected to have two different interactions for enabling and disabling overrides, and especially two different interactions for enabling.

Visual

CleanShot.2024-04-10.at.12.31.44.mp4

Removing the connection between metadata.name and the UI changing from a button to a toggle (removing the toggle altogether). Even if my block has a metadata.name value, I should still see the same "Allow overrides" button.

Flow

I click "Allow overrides" and a modal renders with the name field. I am required to add a name if there is not one. If one already exists, I see it in the input field already.

I select "Allow overrides" to confirm my override. When I press "Allow overrides" on the modal, the binding is applied—just like when I first created a binding initially. A name is required, but a name is not the catalyst for establishing the override.

Now I see the secondary button in the Inspector, but it renders "Disable overrides".

When I select that button, I see a "Disable overrides" modal to confirm my decision. The help text should state what will happen to my existing overrides. There is no name field on this modal. When I press "Disable overrides" on the modal, the binding is removed.

cc @WordPress/gutenberg-design

@richtabor richtabor added [Type] Enhancement A suggestion for improvement. Needs Dev Ready for, and needs developer efforts [Feature] Synced Patterns Related to synced patterns (formerly reusable blocks) labels Apr 15, 2024
@richtabor
Copy link
Member Author

I'm not too concerned about the help text/modal descriptions, just that they represent allowing and disabling. We can fine-tune the copy separately.

@SaxonF
Copy link
Contributor

SaxonF commented Apr 15, 2024

The only problem with this, and why toggle was initially implemented, is you're faced with the common problem of needing to communicate both the state and action within a single button. Twitter for example attempts to solve this via showing state by default then action on hover

follow.mov

GitHub shows state for starring

image

We can also pull state out of button and into a label above so it becomes

Overrides
Enabled
[Disable overrides]

I think what you have proposed here is an improvement though and we can surface enabled state outside as a follow up if needed.

@richtabor
Copy link
Member Author

I'm not thinking the button necessarily needs to render both the state and the action. By rendering "Disable overrides" it's communicating that overrides are enabled (as well as other UI affordances being experimented with).

If anything, perhaps we can update the help text of the control to indicate the status.

@SaxonF
Copy link
Contributor

SaxonF commented Apr 15, 2024

If anything, perhaps we can update the help text of the control to indicate the status.

This sounds like a good middle ground.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Feature] Synced Patterns Related to synced patterns (formerly reusable blocks) Needs Dev Ready for, and needs developer efforts [Status] In Progress Tracking issues with work in progress [Type] Enhancement A suggestion for improvement.
Projects
Status: Done
Development

Successfully merging a pull request may close this issue.

3 participants