Further simplify overrides flow

[richtabor]

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]

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]

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

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]

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]

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

This sounds like a good middle ground.