Style states: Improve block inspector UI

[talldan]

What?

Attempts some improvements based on the discussion in #81226 and other issues.

Mostly looking for UI feedback at the moment, let me know what you think!

• Makes the edited style states 'sticky' in the block inspector, so after scrolling down that info still present (now removed from the PR, see Style states: Improve block inspector UI #82649 (comment))
• When style states are active, they replace the block description to reduce the amount of information in the inspector
• Slightly modifies the design of the badges
• Moves 'Show state on canvas' into the States dropdown and renames to 'Preview on canvas'

All are open to discussion, but I'm curious what reviews think about the changes.

Why?

As mentioned in the issue it can be easy to lose track of which states are active.

The UI around the block card is also at times very dense, so I think some simplification can help.

Testing Instructions

1. Insert a block like Buttons / Button
2. Activate Responsive Styling, select a tablet or mobile viewport
3. Activate the Hover or other pseudo state on the button block
4. See that 'Show state on canvas' is now in the dropdown (as 'Preview on canvas') and becomes active when a non-default pseudo state is selected.
5. Observe that the block description is hidden when a state is active.

Screenshots or screencast

Kapture.2026-09-09.at.16.24.44.mp4

Use of AI Tools

OpenCode / Kimi

[github-actions]

🤖 PR meta 🤖

📦 Bundle size

Size Change: +200 B (0%)

Total Size: 8.1 MB

📦 View Changed

Filename	Size	Change
build/scripts/block-editor/index.min.js	473 kB	+86 B (+0.02%)
build/styles/block-editor/style-rtl.css	20.3 kB	+28 B (+0.14%)
build/styles/block-editor/style-rtl.min.css	17.1 kB	+28 B (+0.16%)
build/styles/block-editor/style.css	20.3 kB	+30 B (+0.15%)
build/styles/block-editor/style.min.css	17.1 kB	+28 B (+0.16%)

_{eb87263 Run}

⚡ Performance

Show the results

Client side metrics exclude the server response time.

front-end-block-theme

Metric	1be1cc0	trunk	% Change
timeToFirstByte	57.75 ms +14.46% -4.24%	56.7 ms +14.46% -3.62%	1.85%
largestContentfulPaint	92 ms +8.7% -4.35%	94 ms +8.51% -6.38%	-2.13%
lcpMinusTtfb	32.9 ms +3.04% -1.06%	34.95 ms +18.88% -4.58%	-5.87%
wpBeforeTemplate	28.45 ms +14.62% -2.95%	28.06 ms +16.61% -2.57%	1.39%
wpTemplate	24.37 ms +6.32% -3.98%	24.22 ms +4.58% -4%	0.62%
wpTotal	54.25 ms +12.87% -4.76%	52.93 ms +13.53% -3.17%	2.49%
wpMemoryUsage	7.53 MB +0% -0%	7.49 MB +0% -0%	0.46%
wpDbQueries	17 +0% -0%	17 +0% -0%	0%

front-end-classic-theme

Metric	1be1cc0	trunk	% Change
timeToFirstByte	47.25 ms +4.55% -1.8%	46.45 ms +5.6% -0.75%	1.72%
largestContentfulPaint	104 ms +0% -3.85%	100 ms +2% -0%	4%
lcpMinusTtfb	56 ms +1.34% -4.55%	53.7 ms +0.93% -1.68%	4.28%
wpBeforeTemplate	26.1 ms +2.11% -1.88%	25.79 ms +5.7% -1.2%	1.2%
wpTemplate	17.98 ms +1.39% -2.11%	17.49 ms +1.6% -1.54%	2.8%
wpTotal	44.2 ms +4.8% -1.65%	43.5 ms +5.82% -1.24%	1.61%
wpMemoryUsage	6.15 MB +0% -0%	6.11 MB +0% -0%	0.58%
wpDbQueries	14 +0% -0%	14 +0% -0%	0%

media-processing

Metric	1be1cc0	trunk	% Change
mediaProcessingJpeg	396.34 ms +1.85% -0.86%	394.92 ms +0.32% -0.23%	0.36%
mediaProcessingAvif	6068.11 ms +0.25% -0.36%	6022.61 ms +0.14% -0.17%	0.76%
mediaProcessingJpegToAvif	4192.57 ms +0.22% -0.25%	4191.7 ms +0.36% -0.11%	0.02%

media-upload

Metric	1be1cc0	trunk	% Change
jpegUploadProcessing	1450.22 ms +35.98% -3.04%	1421.23 ms +0.69% -0.77%	2.04%
pngUploadProcessing	200.84 ms +7.12% -1.78%	216.37 ms +1.96% -8.13%	-7.18%
largeJpegUploadProcessing	1409.23 ms +0.74% -0.55%	1392.83 ms +0.83% -0.36%	1.18%
multipleImageUploadProcessing	1571.55 ms +0.48% -1.97%	1594.56 ms +1% -0.57%	-1.44%

post-editor

Metric	1be1cc0	trunk	% Change
serverResponse	495.4 ms +8.25% -4.03%	498.75 ms +1.86% -1.52%	-0.67%
firstPaint	227.45 ms +9.04% -9.31%	257.59 ms +21.79% -7.29%	-11.7%
domContentLoaded	1098.35 ms +1.22% -1.84%	1071.67 ms +1.56% -0.72%	2.49%
loaded	1100.01 ms +1.21% -1.86%	1072.94 ms +1.58% -0.7%	2.52%
firstContentfulPaint	450.03 ms +3.6% -3.58%	432.58 ms +2.98% -2.16%	4.03%
firstBlock	3364.16 ms +1.27% -1.25%	3356.02 ms +0.38% -1.43%	0.24%
type	22.25 ms +10.88% -6.34%	20.94 ms +4.35% -4.11%	6.26%
typeWithoutInspector	19.96 ms +5.81% -2.2%	21.26 ms +7.24% -4.66%	-6.11%
typeWithTopToolbar	26.79 ms +9.07% -4.11%	26.2 ms +1.56% -1.64%	2.25%
typeContainer	9.01 ms +6.33% -10.88%	9.65 ms +4.97% -1.87%	-6.63%
focus	70.64 ms +5.18% -4.97%	72.53 ms +5.79% -7.46%	-2.61%
firstFocus	221.77 ms +0% -0%	198.09 ms +0% -0%	11.95%
selectAll	530.91 ms +3.39% -4.45%	538.36 ms +2.05% -5.04%	-1.38%
listViewOpen	71.74 ms +14.66% -9.24%	72.01 ms +7.92% -4.9%	-0.37%
inserterOpen	24.46 ms +10.47% -12.76%	21.94 ms +13.86% -8.48%	11.49%
inserterHover	3.58 ms +8.66% -10.06%	3.51 ms +3.99% -6.55%	1.99%
inserterSearch	7.83 ms +16.09% -7.41%	7.62 ms +24.8% -7.35%	2.76%
loadPatterns	632.74 ms +2.32% -3.72%	655.13 ms +5.02% -6.28%	-3.42%
wpTotal	485.14 ms +8.45% -3.95%	488.75 ms +1.94% -1.59%	-0.74%
wpMemoryUsage	13.06 MB +0% -0%	13.03 MB +0% -0%	0.25%
wpDbQueries	54 +0% -0%	54 +0% -1.85%	0%

site-editor

Metric	1be1cc0	trunk	% Change
serverResponse	499.05 ms +1.49% -7.27%	474.36 ms +5.29% -1.65%	5.2%
firstPaint	229.81 ms +8.96% -12.44%	247.36 ms +17.99% -8.73%	-7.09%
domContentLoaded	1101.19 ms +1.74% -1.28%	1131.08 ms +0.67% -0.84%	-2.64%
loaded	1102.33 ms +1.74% -1.29%	1132.35 ms +0.66% -0.84%	-2.65%
firstContentfulPaint	429.93 ms +1.75% -1.37%	442.45 ms +1.19% -2.16%	-2.83%
firstBlock	4081.41 ms +0.72% -0.4%	4184.14 ms +0.91% -0.72%	-2.46%
type	19.05 ms +5.14% -4.57%	21.03 ms +7.37% -8.04%	-9.42%
navigate	103.29 ms +16.17% -2.58%	103.57 ms +3.61% -2.99%	-0.27%
loadPatterns	1505.19 ms +3.46% -6.42%	1520.85 ms +5.87% -13.58%	-1.03%
loadPages	1048.16 ms +2.55% -0.71%	1076.44 ms +0.53% -0.75%	-2.63%
wpTotal	489.79 ms +1.39% -7.39%	464.64 ms +5.24% -1.64%	5.41%
wpMemoryUsage	12.02 MB +0% -0%	11.98 MB +0% -0%	0.31%
wpDbQueries	43 +2.33% -0%	43 +2.33% -0%	0%

_{eb87263 Run}

🏁 Flaky tests

Show the failures

Some tests passed with failed attempts. The failures may not be related to this commit but are still reported for visibility. See the documentation for more information.

Navigates the items list via UP/DOWN arrow keys in /test/e2e/specs/site-editor/dataviews-list-layout-keyboard.spec.js, passed after 1 failed attempt.

Error: expect(locator).toBeFocused() failed

Locator:  getByLabel('Page Two')
Expected: focused
Received: inactive
Timeout:  5000ms

Call log:
  - Expect "toBeFocused" getByLabel('Page Two') with timeout 5000ms
  - waiting for getByLabel('Page Two')
    14 × locator resolved to <button type="button" tabindex="-1" aria-pressed="false" id="view-list-0-310-item-wrapper" class="dataviews-view-list__item" aria-labelledby="view-list-0-310-label" aria-describedby="view-list-0-310-description"></button>
       - unexpected value "inactive"

    at /home/runner/work/gutenberg/gutenberg/test/e2e/specs/site-editor/dataviews-list-layout-keyboard.spec.js:146:49

_{eb87263 Run}

[jasmussen]

Nice work. At a glance, this looks promising: how do you feel about it? On the badge, not at all blocking or strongly felt, but it occurs to me we could look at using the new badge.

[github-actions]

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 props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: talldan <talldanwp@git.wordpress.org>
Co-authored-by: jasmussen <joen@git.wordpress.org>
Co-authored-by: tellthemachines <isabel_brison@git.wordpress.org>
Co-authored-by: ciampo <mciampini@git.wordpress.org>
Co-authored-by: ramonjd <ramonopoly@git.wordpress.org>
Co-authored-by: andrewserong <andrewserong@git.wordpress.org>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

[talldan]

At a glance, this looks promising: how do you feel about it?

Some parts I definitely feel are better than trunk - moving the Preview on Canvas button into the menu, the way the block description is hidden when the badges are shown.

I'm not sold on the sticky behavior. There's lots of other info that can be displayed around the block card - block visibility notices, the 'Edit pattern' button, it feels a bit arbitrary that the state information is prioritized so much. 🤔

If others like it though, then it's pretty minimal, so I don't mind.

On the badge, not at all blocking or strongly felt, but it occurs to me we could look at using the new badge.

Good call, I think that will look nicer. I'll try it out!

[jasmussen]

I like the simplication of the "show state" button, it's one I'd never toggle off myself anyway, so putting it in there can maintain the feature for what powerusers might need to debug between the two. Good instinct. I like the simpler badges, hiding the description seems fine

I do appreciate the fixed position indication as one of the main pieces of feedback was that it wasn't visible enough that you were now editing a particular state. But you are right, it's novel in that that sticky behavior hasn't been done before. That doesn't invalidate it, but mostly it may be worth surfacing more clearly on 81226, because if people there are looking for something much more visible, e.g. a big visual mode shift, such as inverting colours of the canvas or adding a big inner stroke to it—same colour as badges—then the fixed position CSS won't do us any favours. On the other hand, it also might be enough, especially if you choose a variant of badge that is visible enough.

As a sidenote, and CC to @WordPress/gutenberg-components, "Low" visually appears of higher importance than "Medium" to me.

[tellthemachines]

I think we could go with this change for now; we can always make it more obvious later if users feel it's still not visible enough.

I see changes to the global styles files so assume we want to apply this there too? That part isn't working in my testing and it has introduced a regression with the dropdown not closing:

[tellthemachines]

Not sure we need such extensive commentary for these CSS changes 😅

[ramonjd]

This is looking great, thanks so much for getting it up.

Also saw the state popover not closing anymore, but the fundamentals, how it works and looks, is a great start. Cheers!

[talldan]

On the badge, not at all blocking or strongly felt, but it occurs to me we could look at using the new badge.

Slight wrinkle here in that the new badge component requires text (string) content only, and the current badge has some visually hidden text. So it can't easily be ported, and I won't tackle it here as I've seen these type of discussions run and run.

[talldan]

I've also been trying out some ways to implement the sticky behavior without using magic numbers, assumptions about other UI, passing weird options, or performing complex lookups.

It seems to be impossible.

Rather than introduce code smell and a UI I'm not confident about, I'm going to abandon that part of this PR. I'll keep the other changes.

[ramonjd]

Rather than introduce code smell and a UI I'm not confident about, I'm going to abandon that part of this PR. I'll keep the other changes.

Thanks for looking into it.

Tested again, I still think this is nice improvement. Keeps things compact with fewer distractions.

There	Here

[andrewserong]

This is looking great to me! Nice and compact without the toggle control, the menu option for previewing the state on the canvas feels good to use, and the "Editing:" label makes things clearer to me:

I also liked the sticky idea, but I think this PR is a good logical step forward for the feature 👍