[aaronrobertshaw]

Related:

• Post Navigation Link: Add border and spacing support #83122
• Shadow: Add a PHP helper for block support classes and styles #84205
• Colour: Add a PHP helper for block support classes and styles #84206
• Border: Add a PHP helper for block support classes and styles #84207
• Background: Add a PHP helper for block support classes and styles #84209

Core backport: wordpress-develop#14094.

What?

Adds a PHP helper that turns a block's padding and margin into inline styles, like the JS getSpacingClassesAndStyles().

wp_get_spacing_classes_and_styles( $block_attributes );
// array( 'style' => 'padding-top:var(--wp--preset--spacing--40);margin-top:5px;' )

The spacing block support and three blocks now use it.

Why?

A spacing preset on a Comment Author Avatar works in the editor but not on the front end. The block builds its spacing by hand as a raw string, so the preset is never resolved:

	Front end style
Before	margin-top: 5px;padding-top: var:preset|spacing|40
After	padding-top:var(--wp--preset--spacing--40);margin-top:5px;

Icon and Post Navigation Link also build spacing by hand. A shared helper keeps them in step.

How?

The helper doesn't check block supports, so each caller passes the values it applies.

• Spacing block support: keeps its checks, then calls the helper
• Comment Author Avatar: spacing still on the outer div
• Icon: padding only
• Post Navigation Link: spacing only
• Build: added to prefixFunctions, so the plugin calls gutenberg_get_spacing_classes_and_styles()

Output changes

Only in Comment Author Avatar, now matching the spacing block support:

• Presets resolve
• Padding before margin, style engine formatting
• A bare number such as "top":10 is dropped, as the block support already does
• A shorthand such as "padding":"10px" outputs, not a PHP warning
• An empty spacing object gives no style=""

PHPStan's WordPress stubs are built from Core trunk, which won't have this helper until wordpress-develop#14094 lands. So this PR adds a temporary baseline entry for it. PHPStan will flag the entry for removal once the stubs move to a Core trunk with the helper.

Testing Instructions

Comment Author Avatar

1. Add a Comments block to a post with a comment.
2. In the code editor, give its Comment Author Avatar {"style":{"spacing":{"margin":{"top":"5px"},"padding":{"top":"var:preset|spacing|40"}}}}.
3. View the front end. The avatar wrapper has padding-top:var(--wp--preset--spacing--40);margin-top:5px;.

Markup matches trunk

1. Add an Icon with padding, and a Post Navigation Link with padding and margin.
2. The front end markup matches trunk.

Use of AI Tools

Implemented and tested by a Claude Code agent from a predefined task.

[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: aaronrobertshaw <aaronrobertshaw@git.wordpress.org>
Co-authored-by: westonruter <westonruter@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.

---

Props Bot commands

You can trigger Props Bot actions by commenting on this PR:

• @propsbot add <username> to give props to a GitHub user. Requires write access.
• @propsbot remove <username> to leave a user out of the props. Requires write access.
• @propsbot refresh to refresh this list. Adding the props-bot label works too.

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

📦 Bundle size

Size Change: 0 B

Total Size: 8.61 MB

_{330dd22 Run}

⚡ Performance

Show the results

Client side metrics exclude the server response time.

front-end-block-theme

Metric	73d40ff	trunk	% Change
timeToFirstByte	44.5 ms +15.73% -2.81%	42.85 ms +10.74% -2.8%	3.85%
largestContentfulPaint	76 ms +5.26% -5.26%	76 ms +2.63% -7.89%	0%
lcpMinusTtfb	28.55 ms +21.19% -5.08%	28.5 ms +19.82% -5.26%	0.18%
wpBeforeTemplate	22.99 ms +18.14% -3.13%	22.45 ms +7.66% -2.05%	2.41%
wpTemplate	17.84 ms +3.2% -4.04%	16.96 ms +6.84% -3.77%	5.19%
wpTotal	41.02 ms +16.63% -3.05%	39.51 ms +11.31% -2.94%	3.82%
wpMemoryUsage	7.72 MB +0% -0%	7.68 MB +0% -0%	0.42%
wpDbQueries	16 +0% -0%	16 +0% -0%	0%

front-end-classic-theme

Metric	73d40ff	trunk	% Change
timeToFirstByte	35.75 ms +4.9% -1.12%	36.4 ms +7.42% -1.65%	-1.79%
largestContentfulPaint	80 ms +2.5% -0%	80 ms +5% -0%	0%
lcpMinusTtfb	44.05 ms +2.16% -3.52%	43.85 ms +2.96% -2.05%	0.46%
wpBeforeTemplate	19.42 ms +7.57% -2.21%	19.66 ms +8.8% -2.19%	-1.22%
wpTemplate	13.53 ms +1.85% -5.62%	13.74 ms +5.24% -3.28%	-1.53%
wpTotal	33 ms +5.18% -0.94%	33.55 ms +7.27% -2.24%	-1.64%
wpMemoryUsage	6.41 MB +0% -0%	6.37 MB +0% -0%	0.52%
wpDbQueries	13 +0% -0%	13 +0% -0%	0%

media-processing

Metric	73d40ff	trunk	% Change
mediaProcessingJpeg	332.62 ms +4.04% -1.48%	331.08 ms +1.15% -1.38%	0.47%
mediaProcessingAvif	4856.55 ms +0.67% -0.25%	4878.04 ms +0.22% -0.56%	-0.44%
mediaProcessingJpegToAvif	3394.16 ms +0.13% -0.51%	3390.41 ms +0.25% -0.12%	0.11%

media-upload

Metric	73d40ff	trunk	% Change
jpegUploadProcessing	1429.28 ms +1.92% -0.54%	1435.51 ms +1% -1.17%	-0.43%
pngUploadProcessing	217.3 ms +9.06% -5.2%	217.44 ms +4.72% -1.56%	-0.06%
largeJpegUploadProcessing	1418.03 ms +0.65% -0.66%	1408.88 ms +1.26% -0.53%	0.65%
multipleImageUploadProcessing	1468.19 ms +3.53% -0.22%	1492.46 ms +2.94% -0.35%	-1.63%

post-editor

Metric	73d40ff	trunk	% Change
serverResponse	414.88 ms +3.51% -9.27%	371.82 ms +11.65% -1.26%	11.58%
firstPaint	422.33 ms +14.5% -16.98%	341.99 ms +46.95% -14.5%	23.49%
domContentLoaded	878.19 ms +2.34% -2.3%	863.37 ms +1.55% -0.47%	1.72%
loaded	879.32 ms +2.32% -2.29%	864.59 ms +1.51% -0.48%	1.7%
firstContentfulPaint	527.65 ms +4.21% -7.64%	506.17 ms +2.61% -0.71%	4.24%
firstBlock	2159.92 ms +0.48% -0.36%	2163.8 ms +0.32% -0.88%	-0.18%
type	19.07 ms +11.54% -10.91%	17.89 ms +7.66% -6.09%	6.6%
typeWithoutInspector	17.94 ms +8.97% -6.91%	17.37 ms +3.28% -7.14%	3.28%
typeWithTopToolbar	24.95 ms +6.69% -11.22%	23.98 ms +1.42% -6.88%	4.05%
typeContainer	8.36 ms +9.69% -4.78%	8.43 ms +4.63% -8.07%	-0.83%
focus	120.82 ms +2.02% -1.35%	123.27 ms +17.62% -10.94%	-1.99%
firstFocus	264.83 ms +0% -0%	239.23 ms +0% -0%	10.7%
selectAll	399.43 ms +5.93% -3.02%	406.7 ms +1.31% -2.96%	-1.79%
undo	31.33 ms +5.94% -7.25%	31.05 ms +2.61% -7.41%	0.9%
listViewOpen	79.53 ms +6.16% -3.99%	73.39 ms +12.24% -5.98%	8.37%
inserterOpen	44.74 ms +4.65% -7.49%	42.77 ms +0.58% -6.22%	4.61%
inserterHover	11.39 ms +9.22% -10.27%	11.57 ms +8.73% -9.08%	-1.56%
inserterSearch	8.55 ms +14.04% -3.16%	8.95 ms +2.35% -2.12%	-4.47%
loadPatterns	656.54 ms +4.49% -5.15%	645.07 ms +4.71% -1.76%	1.78%
wpTotal	403.72 ms +3.55% -9.48%	360.66 ms +12.11% -1.2%	11.94%
wpMemoryUsage	14.76 MB +0% -0%	14.73 MB +0% -0%	0.24%
wpDbQueries	55 +0% -0%	55 +0% -0%	0%

site-editor

Metric	73d40ff	trunk	% Change
serverResponse	241.41 ms +3.98% -6.74%	237.12 ms +4.83% -6.63%	1.81%
firstPaint	223.76 ms +2.02% -13.97%	234.39 ms +8.74% -3.92%	-4.54%
domContentLoaded	539.42 ms +3.73% -1.27%	545.73 ms +1.46% -1.59%	-1.16%
loaded	540.13 ms +3.73% -1.26%	546.4 ms +1.45% -1.6%	-1.15%
firstContentfulPaint	313.79 ms +1.81% -0.99%	316.83 ms +1.58% -1.2%	-0.96%
firstBlock	1605.27 ms +1.57% -1.33%	1602.36 ms +1.26% -1.57%	0.18%
type	12.83 ms +7.79% -11.07%	12.51 ms +9.35% -5.2%	2.56%
navigate	81.81 ms +1.72% -9.46%	78.17 ms +8.6% -11.24%	4.66%
loadPatterns	793.86 ms +9.69% -5.16%	886.5 ms +4.32% -5.48%	-10.45%
loadPages	935.15 ms +2.69% -1.05%	929.94 ms +1.51% -2.2%	0.56%
wpTotal	235.32 ms +4.03% -6.92%	230.88 ms +4.94% -6.88%	1.92%
wpMemoryUsage	12.78 MB +0% -0%	12.74 MB +0% -0%	0.27%
wpDbQueries	45 +0% -0%	45 +0% -0%	0%

_{330dd22 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.

Undo restores the post selection when another synced entity is loaded (RTC WebSocket) in /test/e2e/specs/editor/collaboration/collaboration-undo-redo.spec.ts, passed after 1 failed attempt.

Error: expect(received).toMatchObject(expected)

- Expected  - 2
+ Received  + 2

  Object {
    "attributeKey": "content",
    "blockIndex": 0,
    "content": "abcdef",
-   "endOffset": 3,
-   "offset": 3,
+   "endOffset": 1,
+   "offset": 1,
  }

Call Log:
- Timeout 5000ms exceeded while waiting on the predicate
    at /home/runner/work/gutenberg/gutenberg/test/e2e/specs/editor/collaboration/collaboration-undo-redo.spec.ts:363:5

does not select blocks in the canvas preview when editing from the sidebar (Site Editor v2) in /test/e2e/specs/site-editor/navigation-sidebar-list-view.spec.js, passed after 1 failed attempt.

Error: expect(locator).toBeVisible() failed

Locator: getByRole('listbox', { name: 'Search results' })
Expected: visible
Timeout: 5000ms
Error: element(s) not found

Call log:
  - Expect "toBeVisible" getByRole('listbox', { name: 'Search results' }) with timeout 5000ms
  - waiting for getByRole('listbox', { name: 'Search results' })

    at LinkControl.useLinkControlSearch (/home/runner/work/gutenberg/gutenberg/test/e2e/specs/site-editor/navigation-sidebar-list-view.spec.js:423:33)
    at /home/runner/work/gutenberg/gutenberg/test/e2e/specs/site-editor/navigation-sidebar-list-view.spec.js:179:3

inserts a block should show a blue line indicator in /test/e2e/specs/editor/various/inserting-blocks.spec.js, passed after 1 failed attempt.

Error: expect(locator).toBeVisible() failed

Locator: locator('data-testid=block-list-insertion-point-indicator')
Expected: visible
Timeout: 5000ms
Error: element(s) not found

Call log:
  - Expect "toBeVisible" locator('data-testid=block-list-insertion-point-indicator') with timeout 5000ms
  - waiting for locator('data-testid=block-list-insertion-point-indicator')

    at /home/runner/work/gutenberg/gutenberg/test/e2e/specs/editor/various/inserting-blocks.spec.js:674:50

should keep correct selection when dragging outside block (-firefox) in /test/e2e/specs/editor/various/multi-block-selection.spec.js, passed after 1 failed attempt.

Error: expect(received).toMatchObject(expected)

- Expected  - 1
+ Received  + 1

  Array [
    Object {
      "attributes": Object {
-       "content": "1",
+       "content": "13",
      },
      "name": "core/paragraph",
    },
  ]

Call Log:
- Timeout 5000ms exceeded while waiting on the predicate
    at /home/runner/work/gutenberg/gutenberg/test/e2e/specs/editor/various/multi-block-selection.spec.js:787:41

_{330dd22 Run}

[andrewserong]

Comment Author Avatar, Icon, and Post Navigation Link blocks are all smoke testing nicely for me 👍

This set of API changes across these block supports PRs sounds really good to me, I was just bumping into this problem on a hacky server-rendered block I'm playing around with and adding these in will make for much better ergonomics 🎉

A couple of tiny questions:

• I imagine this is slated for 7.3 now instead of 7.2, so shall we change the changelog directory and since tags?
• Once all these PRs are in, would it make sense to have a wrapper function that can call all the block supports internally rather than needing to call them each one after the other for each block? Don't worry if this comment doesn't make sense (or if I've gotten it wrong), I suspect this will become clearer once they're all in

LGTM! 🚀

[aaronrobertshaw]

Thanks for testing these @andrewserong, and glad they're already proving useful 🙂

I imagine this is slated for 7.3?

Yep, I've updated those references.

A wrapper function?

I like the idea. Most server-rendered blocks will end up calling a few of these in a row. I'd rather do it as a follow-up once all five helpers have landed, so it builds on a settled API.

I've also added the same early return for non-array attributes that the other helpers have, and rebased on trunk.

PHPStan landed on trunk this week and doesn't know the new helper yet, since it isn't in Core until WordPress/wordpress-develop#14094. So I've added a temporary baseline entry for it.