Enable style state-specific custom CSS

[tellthemachines]

What?

Part of #80388.

• Enables viewport and pseudo state-specific custom CSS on block instances.
• Renames the "viewport" inspector slot to "styleStates" and displays it for pseudo states too. (we might want to make the block toolbar slot consistent with this one as a follow-up)
• Ensures global state-specific custom CSS renders in the editor.
• Scopes display of inherited CSS in the global styles panels to each viewport state.

Testing Instructions

1. Set custom CSS for all states on a block (say a Heading) in global styles.
2. Open a post, add that block and check the global styles display in the editor. Save and check the front end too.
3. Now, add some custom CSS to the block instance, for each viewport state. Save and verify block instance styles display correctly and override the global styles for the same block.

Use of AI Tools

used copilot with gpt-6 luna and claude with sonnet 5.

[github-actions]

🤖 PR meta 🤖

🎉 Props

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: tellthemachines <isabel_brison@git.wordpress.org>

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

Updated as activity occurs, without notifying anyone named here. Add the props-bot label to refresh.

📦 Bundle size

Size Change: +397 B (0%)

Total Size: 8.25 MB

📦 View Changed

Filename	Size	Change
build/modules/lazy-editor/index.min.js	15.1 kB	-25 B (-0.16%)
build/scripts/block-editor/index.min.js	516 kB	+405 B (+0.08%)
build/scripts/block-library/index.min.js	366 kB	+2 B (0%)
build/scripts/edit-site/index.min.js	382 kB	-23 B (-0.01%)
build/scripts/editor/index.min.js	616 kB	-26 B (0%)
build/styles/block-editor/style-rtl.css	20.4 kB	+15 B (+0.07%)
build/styles/block-editor/style-rtl.min.css	17.3 kB	+17 B (+0.1%)
build/styles/block-editor/style.css	20.5 kB	+15 B (+0.07%)
build/styles/block-editor/style.min.css	17.2 kB	+17 B (+0.1%)

_{31bcab6 Run}

⚡ Performance

Show the results

Client side metrics exclude the server response time.

front-end-block-theme

Metric	e79250a	trunk	% Change
timeToFirstByte	55.8 ms +6.36% -2.15%	57.35 ms +12.38% -4.71%	-2.7%
largestContentfulPaint	94 ms +6.38% -6.38%	96 ms +4.17% -6.25%	-2.08%
lcpMinusTtfb	34.65 ms +15.3% -2.89%	34.35 ms +16.74% -1.89%	0.87%
wpBeforeTemplate	27.97 ms +9.37% -1.25%	28.23 ms +19.87% -2.48%	-0.92%
wpTemplate	24.27 ms +3.71% -3.58%	24.14 ms +3.77% -3.89%	0.54%
wpTotal	52.23 ms +6.39% -2.32%	53.87 ms +10.69% -5.14%	-3.04%
wpMemoryUsage	7.63 MB +0% -0%	7.59 MB +0% -0%	0.52%
wpDbQueries	17 +0% -0%	17 +0% -0%	0%

front-end-classic-theme

Metric	e79250a	trunk	% Change
timeToFirstByte	46.15 ms +9.97% -1.08%	41.4 ms +7.25% -0.6%	11.47%
largestContentfulPaint	104 ms +0% -3.85%	88 ms +2.27% -0%	18.18%
lcpMinusTtfb	54.75 ms +5.75% -1.19%	46.3 ms +1.19% -2.7%	18.25%
wpBeforeTemplate	25.87 ms +7.11% -2.09%	25.44 ms +2.52% -1.34%	1.69%
wpTemplate	17.41 ms +3.85% -0.92%	13.34 ms +4.57% -0.6%	30.51%
wpTotal	43.14 ms +9.74% -1.07%	38.73 ms +6.71% -0.88%	11.39%
wpMemoryUsage	6.25 MB +0% -0%	6.07 MB +0% -0%	2.98%
wpDbQueries	14 +0% -0%	10 +0% -0%	40%

media-processing

Metric	e79250a	trunk	% Change
mediaProcessingJpeg	398.02 ms +0.84% -0.61%	392.92 ms +1.46% -0.49%	1.3%
mediaProcessingAvif	6055.25 ms +0.04% -0.24%	6029.1 ms +0.41% -0.13%	0.43%
mediaProcessingJpegToAvif	4156.98 ms +0.38% -0.18%	4158.03 ms +0.15% -0.09%	-0.03%

media-upload

Metric	e79250a	trunk	% Change
jpegUploadProcessing	1416.95 ms +37.05% -1.54%	1408.04 ms +0.6% -0.89%	0.63%
pngUploadProcessing	174.95 ms +7.8% -2.21%	167.78 ms +26.18% -1.91%	4.27%
largeJpegUploadProcessing	1402.55 ms +0.9% -0.75%	1398.11 ms +0.38% -0.48%	0.32%
multipleImageUploadProcessing	1553.03 ms +9.53% -1.74%	1534.18 ms +0.58% -0.78%	1.23%

post-editor

Metric	e79250a	trunk	% Change
serverResponse	506.33 ms +4.23% -5.28%	484.02 ms +4.43% -5.39%	4.61%
firstPaint	220.71 ms +33.54% -21.91%	226.04 ms +25.66% -9.45%	-2.36%
domContentLoaded	1081.78 ms +2.12% -2.09%	1065.84 ms +1.77% -2.64%	1.5%
loaded	1082.89 ms +2.12% -2.08%	1067.05 ms +1.77% -2.64%	1.48%
firstContentfulPaint	444.89 ms +7.11% -2.38%	434.47 ms +2.31% -4.88%	2.4%
firstBlock	3209.92 ms +1.82% -0.56%	3207.55 ms +1.25% -1%	0.07%
type	17.91 ms +4.13% -2.62%	16.82 ms +0.95% -3.63%	6.48%
typeWithoutInspector	16 ms +3.81% -5.94%	16.99 ms +6.89% -6.53%	-5.83%
typeWithTopToolbar	21.57 ms +4.36% -3.62%	21.52 ms +2.7% -2.83%	0.23%
typeContainer	7.58 ms +8.18% -6.73%	7.69 ms +4.68% -5.98%	-1.43%
focus	70.15 ms +9.08% -10.95%	68.13 ms +23.06% -4.74%	2.96%
firstFocus	194.47 ms +0% -0%	185.35 ms +0% -0%	4.92%
selectAll	525.59 ms +1.69% -1.18%	519.59 ms +1.14% -6.38%	1.15%
listViewOpen	63.35 ms +11.9% -6.38%	58.01 ms +7.03% -6.91%	9.21%
inserterOpen	23.01 ms +21.82% -9.78%	21.73 ms +22.55% -5.89%	5.89%
inserterHover	1.98 ms +12.63% -15.66%	1.89 ms +11.11% -10.05%	4.76%
inserterSearch	7.79 ms +12.45% -7.96%	7.83 ms +4.09% -6.13%	-0.51%
loadPatterns	610.74 ms +2.98% -2.89%	615.73 ms +3.89% -4.07%	-0.81%
wpTotal	496.38 ms +4.37% -5.27%	473.65 ms +4.56% -5.47%	4.8%
wpMemoryUsage	13.18 MB +0% -0%	13.13 MB +0% -0%	0.34%
wpDbQueries	54 +0% -0%	54 +0% -0%	0%

site-editor

Metric	e79250a	trunk	% Change
serverResponse	489.63 ms +6.59% -5.17%	475.07 ms +5.03% -6.05%	3.06%
firstPaint	252.34 ms +13.56% -11.5%	237.04 ms +28.87% -9.42%	6.45%
domContentLoaded	1125.96 ms +2.24% -0.66%	1123.77 ms +1.66% -0.65%	0.19%
loaded	1127.08 ms +2.24% -0.64%	1124.78 ms +1.67% -0.62%	0.2%
firstContentfulPaint	446.86 ms +1.19% -2.51%	440.04 ms +2.62% -0.27%	1.55%
firstBlock	4097.88 ms +1.23% -0.2%	4118.79 ms +0.36% -0.97%	-0.51%
type	16.9 ms +5.03% -2.13%	17.79 ms +3.15% -4.27%	-5%
navigate	114.02 ms +6.05% -11.14%	109.81 ms +4.09% -6.09%	3.83%
loadPatterns	1293.36 ms +4.04% -2.98%	1242.09 ms +2.56% -1.83%	4.13%
loadPages	1052.08 ms +2.24% -1.24%	1037.1 ms +1.88% -0.66%	1.44%
wpTotal	479.97 ms +6.73% -5.33%	465.77 ms +5.03% -6.32%	3.05%
wpMemoryUsage	12.14 MB +0% -0%	12.10 MB +0% -0%	0.37%
wpDbQueries	43 +2.33% -0%	43.5 +1.15% -1.15%	-1.15%

_{31bcab6 Run}

🏁 Flaky tests

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.

sort patterns (Site Editor v2) in /test/e2e/specs/site-editor/patterns.spec.js, passed after 1 failed attempt.

Error: apiRequestContext.fetch: socket hang up
Call log:
  - → POST http://localhost:8889/wp-json/wp/v2/blocks
    - user-agent: Playwright/1.63.0 (x64; ubuntu 24.04) node/24.18 CI/1
    - accept: */*
    - accept-encoding: gzip,deflate,br
    - X-WP-Nonce: cf5395f0af
    - content-type: application/json
    - content-length: 137
    - cookie: wordpress_test_cookie=WP%20Cookie%20check; wordpress_logged_in_23778236db82f19306f247e20a353a99=admin%7C1791094548%7CUP4psjX4YAV1lvYaf4yinpUUAS1SfqaM15GY72FdXzK%7C2563f7fffd59b13ba9825da5ab83a8e4ae05348879484797e58dfc7b4bc54f03; wp-settings-time-1=1790922044

    at RequestUtils.rest (/home/runner/work/gutenberg/gutenberg/packages/e2e-test-utils-playwright/src/request-utils/rest.ts:112:39)
    at RequestUtils.createRecord (/home/runner/work/gutenberg/gutenberg/packages/e2e-test-utils-playwright/src/request-utils/records.ts:20:14)
    at RequestUtils.createBlock (/home/runner/work/gutenberg/gutenberg/packages/e2e-test-utils-playwright/src/request-utils/blocks.ts:54:14)
    at /home/runner/work/gutenberg/gutenberg/test/e2e/specs/site-editor/patterns.spec.js:247:17

_{31bcab6 Run}