Skip to content

Shadow: Add a PHP helper for block support classes and styles - #84205

Open
aaronrobertshaw wants to merge 5 commits into
trunkfrom
update/shadow-classes-and-styles-php-helper
Open

Shadow: Add a PHP helper for block support classes and styles#84205
aaronrobertshaw wants to merge 5 commits into
trunkfrom
update/shadow-classes-and-styles-php-helper

Conversation

@aaronrobertshaw

@aaronrobertshaw aaronrobertshaw commented Oct 8, 2026 •
edited
Loading

Copy link
Copy Markdown
Contributor

Follows up on #83122.
Core backport: wordpress-develop#14094.

Related:

What?

Adds a PHP helper that turns a block's shadow into inline styles, like the JS getShadowClassesAndStyles().

wp_get_shadow_classes_and_styles( $block_attributes );
// array( 'style' => 'box-shadow:var(--wp--preset--shadow--natural);' )

The shadow block support and six blocks now use it.

Why?

Blocks that skip shadow serialization apply the shadow to an inner element, so they build the styles by hand. Six do, each with its own style engine call. A shared helper gives them one place to change.

How?

The helper only builds output. It doesn't check what a block supports. Each caller decides where the output goes.

  • Shadow block support: keeps its checks, then calls the helper
  • Avatar, Post Featured Image: shadow on the image
  • Navigation Submenu: shadow on the dropdown, not the menu item
  • Search: shadow on the same elements as the border
  • Post Navigation Link: splits its style engine call around the helper, keeping the same order
  • Icon: same split as Post Navigation Link
  • Build: added to prefixFunctions, so the plugin calls gutenberg_get_shadow_classes_and_styles()

No output changes.

Testing Instructions

  1. Add an Avatar, a Post Featured Image with an overlay, and a Post Navigation Link.
  2. Add a Navigation block with a submenu, a Search block and an Icon block.
  3. Give each a shadow. Give Avatar, Post Featured Image and Post Navigation Link a border too.
  4. Compare the front end markup with trunk. It should match.
  5. Open the submenu. The shadow is on the dropdown, not on the menu item.

Use of AI Tools

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

@aaronrobertshaw aaronrobertshaw added [Feature] Design Tools Tools that impact the appearance of blocks both to expand the number of tools and improve the experi [Type] Enhancement A suggestion for improvement. [Package] Block library /packages/block-library Global Styles Anything related to the broader Global Styles efforts, including Styles Engine and theme.json labels Oct 8, 2026
@aaronrobertshaw aaronrobertshaw self-assigned this Oct 8, 2026
@github-actions

github-actions Bot commented Oct 8, 2026 •
edited
Loading

Copy link
Copy Markdown

🤖 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>

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: 0 B

Total Size: 9.05 MB

9258290 Run

⚡ Performance

Show the results

Client side metrics exclude the server response time.

front-end-block-theme

Metric a3a7cf5 trunk % Change
timeToFirstByte 42.75 ms +5.96% -2.81% 54.05 ms +7.77% -12.21% -20.91%
largestContentfulPaint 76 ms +7.89% -5.26% 88 ms +9.09% -9.09% -13.64%
lcpMinusTtfb 34.05 ms +5.29% -14.68% 34.95 ms +10.44% -18.17% -2.58%
wpBeforeTemplate 22.3 ms +12.42% -1.3% 26.68 ms +17.5% -7.08% -16.42%
wpTemplate 16.68 ms +7.25% -3.18% 21.23 ms +3.63% -8.01% -21.43%
wpTotal 39.31 ms +6.33% -2.82% 50.13 ms +7.26% -12.41% -21.58%
wpMemoryUsage 7.65 MB +0% -0% 7.61 MB +0% -0% 0.46%
wpDbQueries 16 +0% -0% 16 +0% -0% 0%

front-end-classic-theme

Metric a3a7cf5 trunk % Change
timeToFirstByte 36.2 ms +5.11% -1.93% 37.45 ms +4.14% -3.6% -3.34%
largestContentfulPaint 80 ms +5% -0% 80 ms +0% -0% 0%
lcpMinusTtfb 44.5 ms +2.13% -1.69% 41.8 ms +5.02% -2.51% 6.46%
wpBeforeTemplate 19.67 ms +3.15% -1.83% 22.39 ms +1.21% -4.2% -12.15%
wpTemplate 13.59 ms +7.36% -3.53% 11.81 ms +6.94% -2.46% 15.07%
wpTotal 33.32 ms +5.04% -2.16% 34.36 ms +4.95% -3.29% -3.03%
wpMemoryUsage 6.34 MB +0% -0% 6.19 MB +0% -0% 2.38%
wpDbQueries 13 +0% -0% 9 +0% -0% 44.44%

media-processing

Metric a3a7cf5 trunk % Change
mediaProcessingJpeg 330.06 ms +2.93% -2.23% 341.33 ms +0.98% -1.52% -3.3%
mediaProcessingAvif 4894.36 ms +0.43% -0.22% 4930.27 ms +0.16% -0.37% -0.73%
mediaProcessingJpegToAvif 3396.68 ms +0.67% -0.15% 3435.24 ms +0.52% -0.19% -1.12%

media-upload

Metric a3a7cf5 trunk % Change
jpegUploadProcessing 1458.09 ms +33.68% -1.5% 1459.64 ms +1.04% -0.95% -0.11%
pngUploadProcessing 206.3 ms +20.18% -4.29% 242.3 ms +26.65% -8.46% -14.86%
largeJpegUploadProcessing 1425.6 ms +2.41% -0.89% 1442.83 ms +1.98% -1.46% -1.19%
multipleImageUploadProcessing 1557.41 ms +8.96% -0.97% 1582.9 ms +25.71% -0.34% -1.61%

post-editor

Metric a3a7cf5 trunk % Change
serverResponse 520.68 ms +3.88% -5.37% 534.09 ms +1.03% -7.91% -2.51%
firstPaint 514.8 ms +5.65% -42.28% 264.93 ms +28.86% -10.5% 94.32%
domContentLoaded 1256.48 ms +5.38% -3% 1254.98 ms +1.75% -1.47% 0.12%
loaded 1257.68 ms +5.38% -2.98% 1256.31 ms +1.75% -1.5% 0.11%
firstContentfulPaint 537.4 ms +4.3% -6.5% 532.47 ms +2.42% -1.63% 0.93%
firstBlock 3692.06 ms +5.27% -0.36% 3797.05 ms +2.07% -3.21% -2.77%
type 19.25 ms +8.16% -2.86% 19.77 ms +8.9% -6.37% -2.63%
typeWithoutInspector 19.82 ms +7.32% -8.63% 20.18 ms +2.78% -4.01% -1.78%
typeWithTopToolbar 27.03 ms +4.96% -10.95% 24.87 ms +3.58% -3.3% 8.69%
typeContainer 9.15 ms +11.15% -8.31% 8.92 ms +7.4% -4.82% 2.58%
focus 138.79 ms +3.25% -6.43% 129.35 ms +20.85% -0.79% 7.3%
firstFocus 286.28 ms +0% -0% 266.3 ms +0% -0% 7.5%
selectAll 617.71 ms +0.4% -2.14% 620.53 ms +1.16% -2.92% -0.45%
listViewOpen 78.98 ms +7.36% -1.85% 83.51 ms +6.26% -7.78% -5.42%
inserterOpen 44.72 ms +14.47% -4.27% 44.79 ms +10.98% -6.03% -0.16%
inserterHover 12.38 ms +11.71% -5.49% 13.33 ms +5.55% -12.15% -7.13%
inserterSearch 8.65 ms +11.91% -8.55% 8.9 ms +23.37% -6.74% -2.81%
loadPatterns 685.58 ms +4.36% -3.42% 697.81 ms +4.54% -2.09% -1.75%
wpTotal 510.75 ms +3.95% -5.48% 523.67 ms +1.15% -7.96% -2.47%
wpMemoryUsage 14.69 MB +0% -0% 14.65 MB +0% -0% 0.26%
wpDbQueries 55 +0% -1.82% 55 +0% -1.82% 0%

site-editor

Metric a3a7cf5 trunk % Change
serverResponse 525.87 ms +3.02% -6.16% 493.99 ms +6.82% -3.56% 6.45%
firstPaint 279.95 ms +6.37% -6.7% 260.9 ms +11.55% -4.61% 7.3%
domContentLoaded 1299.7 ms +2.17% -2.22% 1290.9 ms +1.48% -2.45% 0.68%
loaded 1300.82 ms +2.19% -2.21% 1291.87 ms +1.48% -2.42% 0.69%
firstContentfulPaint 531.2 ms +2.01% -3.45% 508 ms +7.76% -13.05% 4.57%
firstBlock 4875.89 ms +0.92% -1.03% 4770.03 ms +1.74% -1.21% 2.22%
type 19.51 ms +5.74% -3.18% 20.89 ms +9.72% -4.26% -6.61%
navigate 139.24 ms +6.88% -4.95% 137.21 ms +14.12% -6% 1.48%
loadPatterns 1367.26 ms +8.41% -4.8% 1353.58 ms +10.79% -3.21% 1.01%
loadPages 1032.37 ms +5.13% -1.52% 1051.58 ms +0.67% -1.82% -1.83%
wpTotal 516.46 ms +3.15% -6.27% 484.69 ms +6.93% -3.71% 6.55%
wpMemoryUsage 12.70 MB +0% -0% 12.67 MB +0% -0% 0.29%
wpDbQueries 44 +2.27% -0% 44 +2.27% -0% 0%

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

Regression: updating a specific option will only change its value and will not corrupt others in /test/e2e/specs/editor/various/core-settings.spec.js, passed after 1 failed attempt. 
Error: expect(received).toStrictEqual(expected) // deep equality

- Expected  - 1
+ Received  + 1

  Array [
    "rewrite_rules",
-   "SERIALIZED DATA",
+   "",
  ]
    at forEach (/home/runner/work/gutenberg/gutenberg/test/e2e/specs/editor/various/core-settings.spec.js:46:26)
    at /home/runner/work/gutenberg/gutenberg/test/e2e/specs/editor/various/core-settings.spec.js:43:35
refuses the drop and uploads nothing in /test/e2e/specs/editor/various/single-file-placeholder-drop.spec.js, passed after 1 failed attempt. 
Error: expect(received).toHaveLength(expected)

Expected length: 0
Received length: 1
Received array:  [{"_links": {"about": [{"href": "http://localhost:8889/wp-json/wp/v2/types/attachment"}], "author": [{"embeddable": true, "href": "http://localhost:8889/wp-json/wp/v2/users/1"}], "collection": [{"href": "http://localhost:8889/wp-json/wp/v2/media"}], "curies": [{"href": "https://api.w.org/{rel}", "name": "wp", "templated": true}], "replies": [{"embeddable": true, "href": "http://localhost:8889/wp-json/wp/v2/comments?post=223"}], "self": [{"href": "http://localhost:8889/wp-json/wp/v2/media/223", "targetHints": {"allow": ["GET", "POST", "PUT", "PATCH", "DELETE"]}}], "wp:attached-to": [{"embeddable": true, "href": "http://localhost:8889/wp-json/wp/v2/posts/222", "id": 222, "post_type": "post"}]}, "alt_text": "", "author": 1, "caption": {"rendered": ""}, "class_list": ["post-223", "attachment", "type-attachment", "status-inherit", "hentry", "entry"], "comment_status": "open", "date": "2026-10-21T12:56:12", "date_gmt": "2026-10-21T12:56:12", "description": {"rendered": "<p class=\"attachment\"><a href='http://localhost:8889/wp-content/uploads/2026/10/a580dd76-0ba1-4979-88bf-93d7b664d639.png'><img loading=\"lazy\" decoding=\"async\" width=\"10\" height=\"10\" src=\"http://localhost:8889/wp-content/uploads/2026/10/a580dd76-0ba1-4979-88bf-93d7b664d639.png\" class=\"attachment-medium size-medium\" alt=\"\" style=\"width:100%;height:100%;max-width:10px;\" /></a></p>
"}, "featured_media": 0, "filename": "a580dd76-0ba1-4979-88bf-93d7b664d639.png", "filesize": 80, "guid": {"rendered": "http://localhost:8889/wp-content/uploads/2026/10/a580dd76-0ba1-4979-88bf-93d7b664d639.png"}, "id": 223, "link": "http://localhost:8889/?attachment_id=223", "media_details": {"file": "2026/10/a580dd76-0ba1-4979-88bf-93d7b664d639.png", "filesize": 80, "height": 10, "image_meta": {"alt": "", "aperture": "0", "camera": "", "caption": "", "copyright": "", "created_timestamp": "0", "credit": "", "focal_length": "0", "iso": "0", "keywords": [], "orientation": "0", "shutter_speed": "0", "title": ""}, "sizes": {}, "width": 10}, "media_type": "image", "meta": [], "mime_type": "image/png", "modified": "2026-10-21T12:56:12", "modified_gmt": "2026-10-21T12:56:12", "ping_status": "closed", "post": 222, "slug": "a580dd76-0ba1-4979-88bf-93d7b664d639", "source_url": "http://localhost:8889/wp-content/uploads/2026/10/a580dd76-0ba1-4979-88bf-93d7b664d639.png", "status": "inherit", "template": "", "title": {"rendered": "a580dd76-0ba1-4979-88bf-93d7b664d639"}, "type": "attachment"}]
    at /home/runner/work/gutenberg/gutenberg/test/e2e/specs/editor/various/single-file-placeholder-drop.spec.js:71:45

9258290 Run

@aaronrobertshaw
aaronrobertshaw force-pushed the update/shadow-classes-and-styles-php-helper branch 2 times, most recently from 49710a1 to 4135ece Compare October 8, 2026 05:56
@aaronrobertshaw aaronrobertshaw added [Type] Code Quality Issues or PRs that relate to code quality and removed [Type] Enhancement A suggestion for improvement. Global Styles Anything related to the broader Global Styles efforts, including Styles Engine and theme.json labels Oct 8, 2026
@aaronrobertshaw aaronrobertshaw mentioned this pull request Oct 8, 2026
Draft
@aaronrobertshaw
aaronrobertshaw force-pushed the update/shadow-classes-and-styles-php-helper branch 2 times, most recently from 48b5f24 to ee2145e Compare October 13, 2026 04:40
@aaronrobertshaw aaronrobertshaw mentioned this pull request Oct 13, 2026
Open
28 of 77 tasks
@aaronrobertshaw
aaronrobertshaw force-pushed the update/shadow-classes-and-styles-php-helper branch 3 times, most recently from 4f78f3f to d1bd21f Compare October 20, 2026 05:19
This was referenced Oct 21, 2026
Open
Open
Open
@aaronrobertshaw
Shadow: Add a PHP helper for block support classes and styles
552ec64
@aaronrobertshaw
Address review feedback
cd76f0d
@aaronrobertshaw
Add backport changelog entry
47d7443
@aaronrobertshaw
Expect trunk's minimum width and height in the Post Navigation Link s…
d58f145 
…tyles test
@aaronrobertshaw
Migrate Search and Icon to the shadow helper and trim the tests
9258290 
Search and Icon now get their shadow from the helper, like the other
blocks in this PR, with the same output as trunk. Each gets one render
test.

The tests now cover the helper's own cases and one migration per block.
Cases that re-tested the style engine are dropped.
@aaronrobertshaw
aaronrobertshaw force-pushed the update/shadow-classes-and-styles-php-helper branch from 2babf82 to 9258290 Compare October 21, 2026 12:41
@aaronrobertshaw
aaronrobertshaw marked this pull request as ready for review October 21, 2026 13:16

This branch has not been deployed

No deployments
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@ramonjd ramonjd Awaiting requested review from ramonjd
@andrewserong andrewserong Awaiting requested review from andrewserong
@talldan talldan Awaiting requested review from talldan
@tellthemachines tellthemachines Awaiting requested review from tellthemachines
@spacedmonkey spacedmonkey Awaiting requested review from spacedmonkey spacedmonkey is a code owner
@fabiankaegy fabiankaegy Awaiting requested review from fabiankaegy fabiankaegy is a code owner

At least 1 approving review is required to merge this pull request.

Assignees

@aaronrobertshaw aaronrobertshaw

Labels

[Feature] Design Tools Tools that impact the appearance of blocks both to expand the number of tools and improve the experi [Package] Block library /packages/block-library [Type] Code Quality Issues or PRs that relate to code quality

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

1 participant

@aaronrobertshaw