Repository navigation
Interactive States for Blocks: Usability Feedback #80326
Description
I did some usability testing of this feature (see #77817) and was asked to create a new issue for collecting feedback.
Testing Conditions
Playground, with WP nightly and Gutenberg trunk, via: https://playground.wordpress.net/?wp=nightly&gutenberg-branch=trunk
Browser: Firefox 152.0.3
OS: macOS 15.7.7
Feedback
It’s confusing that the pseudo-state name is in the same place as the responsive styling target was indicated. For example, in the following screenshot, you can see that I’m in Tablet mode with the Active state open.
Yet the indicator only lists “Active” – where as that’s the spot I’d have expected to see the “Tablet” indicator.
Ideally there should be distinct indicators for pseudo-state and responsive mode.
Right now they look identical, and you can only see one at a time, in the same spot, as you can see in the below screenshot:
Activity
tellthemachines commentedon Jul 16, 2026
Did you have responsive styles enabled (checkbox in the preview dropdown) in that screenshot? I can't reproduce that in Gutenberg or WP 7.1 Beta 1; with responsive styles enabled you should always see the viewport label, and only if they're not enabled is it not present.
kathrynwp commentedon Jul 16, 2026
@tellthemachines Glad that both labels are meant to be there! Your screenshot is exactly what I'd hoped to see.
Yes, I did have responsive styles enabled – you can tell by the tablet icon in my first screenshot circled in red, which matches the tablet icon in the second screenshot. (Plus the handles on the sides of the page.)
I just did another quick test and replicated the same thing, via this Playground link: https://playground.wordpress.net/?wp=nightly&gutenberg-branch=trunk
Here's a screencast with audio narration. Let me know if I'm missing something or if you're able to replicate!
7.1-hover.mov
tellthemachines commentedon Jul 16, 2026
I was referring to the item in the preview dropdown titled "Responsive styles". That needs to be checked in order to enable responsive styling:
kathrynwp commentedon Jul 21, 2026
@tellthemachines Ah – you're totally right, I missed that, sorry!