Interactive States for Blocks: Usability Feedback #80756

I did some usability testing of this feature (see #77817) and was asked to create a new issue for collecting feedback.

Interactive states styling
A standardized way to style interactive states is taking shape. Support for pseudo-state styling such as hover, focus, and active has landed for both Global Styles and individual block instances, building on the broader “states” effort. Further work, including custom states like styling the current menu item, continues beyond 7.1. All of this work means you can begin to style how blocks respond to interaction, like buttons changing color on hover, all without writing a line of CSS.
Follow this tracking issue for more details.

Testing Conditions

Playground, with WP nightly and Gutenberg trunk, via: https://playground.wordpress.net/?wp=nightly&gutenberg-branch=trunk
Browser: Safari 26.5.2 (21624.2.5.11.8)

Testing hover state for button

When I select the hover state for a button, then click into the button to edit the text, the state in the sidebar switches back to default instead of staying on hover, even with the “show state on canvas” toggle selected. I didn’t expect this. Though, it does make sense to switch back to default when you click off of the block (select another block or click the canvas). Suggestion: consider keeping the selected state visible until the user clicks off of the block.

I find it weird that when I turn off “show state on canvas”, the state will still be shown while hovering the button in the canvas. Maybe some rewording here will make it better. Is it intentional that the hover state appears in the editor by actually hovering over the button?

Right now there is nothing tying the state toggle and the badge together in the UI. There is no explanation of what these are or how they are related. Like the responsive viewport badge, a badge that says “Hover” and nothing else, with no indication that I have a state selected, is confusing. Suggestion: combine the toggle and the state badge together in some way visually. Add a tooltip to the state badge.

Before

Suggestion

Ideas for helpful actions

• Preview state (already there)
• Reset all styles back to inherited (might need a confirm dialog)
• Go back to viewing the default state

Styled as a notice, the X button would let the user go back to the default state:

A way to reset all styles back to inherited: