[tellthemachines]

What?

Follow-up from https://github.com/WordPress/gutenberg/pull/83539/changes#r4191415234

Testing Instructions

Test by adding the Icon style variation suggested in the linked comment:

add_action( 'init', function () {
	register_block_style( 'core/icon', array( 'name' => 'framed', 'label' => 'Framed', 'style_data' => array( 'css' => 'outline: 4px dashed red;' ) ) );
} );

Then add an Icon block to a post, set it to the "Framed" variation, and check that the border is added to the outer block container on both the editor and front end:

There should be no changes to the base styles of the block.

Use of AI Tools

Used copilot with claude sonnet 5.5. Reviewed by me.

[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>
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.

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

⚡ Performance

Show the results

Client side metrics exclude the server response time.

front-end-block-theme

Metric	478ecaa	trunk	% Change
timeToFirstByte	41.4 ms +12.2% -3.14%	41.15 ms +14.34% -2.55%	0.61%
largestContentfulPaint	76 ms +0% -10.53%	70 ms +14.29% -2.86%	8.57%
lcpMinusTtfb	30.95 ms +13.89% -11.15%	27.95 ms +23.79% -4.83%	10.73%
wpBeforeTemplate	21.49 ms +20.24% -1.16%	21.46 ms +15.56% -1.3%	0.14%
wpTemplate	16.22 ms +3.51% -6.1%	16.23 ms +3.82% -3.27%	-0.06%
wpTotal	38.12 ms +13.2% -3.62%	38.03 ms +13.36% -3%	0.24%
wpMemoryUsage	7.61 MB +0% -0%	7.58 MB +0% -0%	0.45%
wpDbQueries	17 +0% -0%	17 +0% -0%	0%

front-end-classic-theme

Metric	478ecaa	trunk	% Change
timeToFirstByte	34.25 ms +4.82% -0.88%	33.8 ms +5.18% -1.33%	1.33%
largestContentfulPaint	80 ms +2.5% -5%	76 ms +5.26% -0%	5.26%
lcpMinusTtfb	45.45 ms +0.88% -6.82%	42.65 ms +1.99% -0.7%	6.57%
wpBeforeTemplate	18.98 ms +0.84% -0.79%	18.81 ms +1.86% -1.44%	0.9%
wpTemplate	12.61 ms +2.54% -2.14%	12.39 ms +2.82% -2.34%	1.78%
wpTotal	31.54 ms +5.36% -0.86%	31.32 ms +4.44% -1.95%	0.7%
wpMemoryUsage	6.25 MB +0% -0%	6.20 MB +0% -0%	0.7%
wpDbQueries	14 +0% -0%	14 +0% -0%	0%

media-processing

Metric	478ecaa	trunk	% Change
mediaProcessingJpeg	328.15 ms +0.17% -1.79%	324.07 ms +0.44% -0.97%	1.26%
mediaProcessingAvif	4828.39 ms +0.15% -0.25%	4793.65 ms +0.27% -0.1%	0.72%
mediaProcessingJpegToAvif	3369.34 ms +0.78% -0.1%	3346.67 ms +0.39% -0.24%	0.68%

media-upload

Metric	478ecaa	trunk	% Change
jpegUploadProcessing	1415.5 ms +0.57% -0.93%	1413.94 ms +0.68% -0.8%	0.11%
pngUploadProcessing	198.35 ms +30.72% -6.67%	182.83 ms +2.25% -3.87%	8.49%
largeJpegUploadProcessing	1409.93 ms +1.2% -0.66%	1400.79 ms +1.42% -0.83%	0.65%
multipleImageUploadProcessing	1473.66 ms +0.62% -1.32%	1471.08 ms +1.61% -1.81%	0.18%

post-editor

Metric	478ecaa	trunk	% Change
serverResponse	326.43 ms +5.45% -7.11%	317.22 ms +5.54% -7.98%	2.9%
firstPaint	227.46 ms +12.16% -27.97%	217.42 ms +7.41% -19.73%	4.62%
domContentLoaded	909.63 ms +0.93% -2.23%	864.91 ms +0.26% -3.79%	5.17%
loaded	910.71 ms +0.94% -2.24%	865.85 ms +0.27% -3.78%	5.18%
firstContentfulPaint	399.75 ms +0.99% -4.15%	364.41 ms +2.99% -0.53%	9.7%
firstBlock	2580.16 ms +0.94% -0.49%	2511.59 ms +0.39% -0.47%	2.73%
type	15.38 ms +5.2% -2.28%	15.74 ms +1.65% -4.64%	-2.29%
typeWithoutInspector	15.42 ms +2.66% -2.46%	15.39 ms +2.66% -0.32%	0.19%
typeWithTopToolbar	19.76 ms +7.84% -3.54%	19.2 ms +2.71% -6.04%	2.92%
typeContainer	7.11 ms +2.11% -7.59%	7.68 ms +2.08% -5.99%	-7.42%
focus	88.53 ms +1.6% -2.72%	87.5 ms +2.26% -4.69%	1.18%
firstFocus	183.57 ms +0% -0%	172.32 ms +0% -0%	6.53%
selectAll	443.13 ms +3.92% -2.02%	443.53 ms +7.62% -0.01%	-0.09%
listViewOpen	56.82 ms +8.66% -2.2%	58.04 ms +3.81% -3.45%	-2.1%
inserterOpen	31.04 ms +8.57% -3.7%	33.42 ms +1.83% -2.84%	-7.12%
inserterHover	10.03 ms +4.29% -9.47%	9.67 ms +9.62% -5.89%	3.72%
inserterSearch	7.5 ms +3.47% -2.53%	7.2 ms +7.08% -8.89%	4.17%
loadPatterns	509.3 ms +2.36% -4.35%	517.03 ms +7.15% -3.25%	-1.5%
wpTotal	316.79 ms +5.53% -7.52%	307.72 ms +5.66% -8.26%	2.95%
wpMemoryUsage	13.33 MB +0% -0%	13.30 MB +0% -0%	0.28%
wpDbQueries	54 +0% -0%	54 +0% -1.85%	0%

site-editor

Metric	478ecaa	trunk	% Change
serverResponse	519.24 ms +3.07% -4%	504.16 ms +5.91% -3.12%	2.99%
firstPaint	296.08 ms +12.09% -6.73%	243.47 ms +12.71% -11.34%	21.61%
domContentLoaded	1263.9 ms +0.71% -2.4%	1241.65 ms +1.64% -1.06%	1.79%
loaded	1265.38 ms +0.7% -2.41%	1242.95 ms +1.64% -1.05%	1.8%
firstContentfulPaint	504.75 ms +0.82% -2.78%	502.15 ms +2.47% -0.77%	0.52%
firstBlock	4663.96 ms +1.37% -1.19%	4694.48 ms +0.52% -0.6%	-0.65%
type	18.83 ms +3.29% -5.52%	20.41 ms +1.76% -9.85%	-7.74%
navigate	121.82 ms +6.12% -11.71%	131.03 ms +9.73% -8.2%	-7.03%
loadPatterns	1334.02 ms +5.58% -5.82%	1330.64 ms +4.67% -2.68%	0.25%
loadPages	1014.53 ms +0.45% -0.62%	1023.13 ms +1.2% -1.81%	-0.84%
wpTotal	508.33 ms +3.08% -4.18%	493.33 ms +5.95% -3.3%	3.04%
wpMemoryUsage	12.38 MB +0% -0%	12.34 MB +0% -0%	0.3%
wpDbQueries	43 +2.33% -0%	43 +2.33% -0%	0%

_{014abce Run}

[andrewserong]

Testing well for me!

Also works nicely with responsive styles editing mode, e.g. setting other custom CSS at tablet/mobile:

Is it worth adding a PHP test to cover it, since it's not a common path that we'd usually be manually testing?

Otherwise, LGTM!

[andrewserong]

Does this need to be set each time in the loop over style variations? Bit of a nit-picky comment, but if not, then setting $variation_css_selector could move somewhere further up, i.e. before the foreach.

[tellthemachines]

It does because the selector will be slightly different for each variation, but the bit that fetches the feature selector from block metadata can be extracted. I've just pushed a change to do so!