Skip to content

Navigation: keep Global Styles custom CSS off inner list containers - #85366

Merged
ramonjd merged 3 commits into
trunkfrom
fix/navigation-global-styles-custom-css
Oct 22, 2026
Merged

Navigation: keep Global Styles custom CSS off inner list containers#85366
ramonjd merged 3 commits into
trunkfrom
fix/navigation-global-styles-custom-css

Conversation

@ramonjd

@ramonjd ramonjd commented Oct 22, 2026 •
edited
Loading

Copy link
Copy Markdown
Member

What?

Follow-up to #84881. Apply a Navigation block's Global Styles Additional CSS to its outer wrapper only.

Props to @andrewserong for catching it!

Why?

The inner <ul> also carries the wp-block-navigation class (#62690), so :root :where(.wp-block-navigation) matches both elements, and borders and padding appear twice on the front end. Raised in the #84881 review.

How?

Give Navigation a custom CSS selector in block.json (selectors.css, added in #75799): .wp-block-navigation:not(.wp-block-navigation__container). It uses :not() rather than nav. because a Navigation nested in an overlay renders as a <div>. Block style variation custom CSS uses the same selector.

As with #84881, Global Styles rules such as & > li no longer reach the list on the front end. They never applied in the editor.

Testing Instructions

  1. Add a Navigation block to a template.
  2. In Styles → Blocks → Navigation → Additional CSS, enter border: 1px solid pink; padding: 20px; and save.
  3. View the front end. The Navigation has one border and one layer of padding, and the inner <ul> has neither.
  4. Repeat with Overlay set to Always, and open the overlay.
Before After
Screenshot 2026-10-22 at 4 15 20 pm Screenshot 2026-10-22 at 4 16 08 pm

Use of AI Tools

Claude Code investigated the cause and wrote the change and test.

@ramonjd
fix(navigation): keep Global Styles custom CSS off inner list containers
1d5bce3 
Navigation's inner list also carries the wp-block-navigation class, so
block-level Additional CSS from Global Styles applied twice on the front
end. Give the custom CSS its own selector that excludes the list.
@ramonjd
test(navigation): cover Global Styles custom CSS leaking onto inner l…
a133e77 
…ists
@ramonjd
ramonjd requested a review from fabiankaegy as a code owner October 22, 2026 05:20
@ramonjd ramonjd added [Type] Bug An existing feature does not function as intended [Package] Block library /packages/block-library [Block] Navigation Affects the Navigation Block labels Oct 22, 2026
@github-actions

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

Copy link
Copy Markdown

🤖 PR meta 🤖

Preview in WordPress Playground

🎉 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: 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.

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 160cea3 trunk % Change
timeToFirstByte 49.3 ms +10.65% -2.54% 48.85 ms +9.62% -2.25% 0.92%
largestContentfulPaint 84 ms +7.14% -4.76% 84 ms +4.76% -4.76% 0%
lcpMinusTtfb 33.2 ms +11.3% -3.77% 32.45 ms +22.03% -3.39% 2.31%
wpBeforeTemplate 25.09 ms +6.66% -2.47% 24.62 ms +10.6% -0.81% 1.91%
wpTemplate 20.42 ms +4.31% -3.28% 20.15 ms +3.72% -3.37% 1.34%
wpTotal 45.67 ms +8.36% -2.87% 44.93 ms +10.42% -1.89% 1.65%
wpMemoryUsage 7.66 MB +0% -0% 7.63 MB +0% -0% 0.43%
wpDbQueries 16 +0% -0% 16 +0% -0% 0%

front-end-classic-theme

Metric 160cea3 trunk % Change
timeToFirstByte 40.75 ms +3.31% -1.96% 40.5 ms +2.59% -1.98% 0.62%
largestContentfulPaint 92 ms +4.35% -0% 88 ms +4.55% -0% 4.55%
lcpMinusTtfb 51.4 ms +3.21% -1.75% 49.1 ms +4.68% -3.16% 4.68%
wpBeforeTemplate 21.85 ms +0.27% -2.15% 21.42 ms +2.29% -0.98% 2.01%
wpTemplate 15.84 ms +2.34% -4.8% 15.62 ms +1.86% -3.01% 1.41%
wpTotal 37.74 ms +2.89% -2.17% 37.23 ms +3.12% -2.04% 1.37%
wpMemoryUsage 6.35 MB +0% -0% 6.32 MB +0% -0% 0.53%
wpDbQueries 13 +0% -0% 13 +0% -0% 0%

media-processing

Metric 160cea3 trunk % Change
mediaProcessingJpeg 403.26 ms +0.66% -0.4% 395.63 ms +0.69% -0.3% 1.93%
mediaProcessingAvif 5883.31 ms +0.11% -0.35% 5883.92 ms +0.11% -0.12% -0.01%
mediaProcessingJpegToAvif 4004.13 ms +0.17% -0.14% 3987.99 ms +0.24% -0.19% 0.4%

media-upload

Metric 160cea3 trunk % Change
jpegUploadProcessing 1948.04 ms +0.44% -0.62% 1942.43 ms +1.29% -0.4% 0.29%
pngUploadProcessing 220.3 ms +2.37% -3.97% 216.2 ms +4.6% -1.66% 1.9%
largeJpegUploadProcessing 1950.68 ms +1.09% -0.45% 1943.11 ms +0.92% -0.36% 0.39%
multipleImageUploadProcessing 2026.19 ms +2.54% -0.59% 2032.53 ms +0.49% -0.27% -0.31%

post-editor

Metric 160cea3 trunk % Change
serverResponse 283.44 ms +2.7% -4.66% 263.71 ms +1.53% -10.5% 7.48%
firstPaint 339.13 ms +3.16% -42.48% 307.44 ms +4.96% -43.59% 10.31%
domContentLoaded 741.7 ms +3.89% -3.64% 710.16 ms +1.91% -2.33% 4.44%
loaded 742.53 ms +3.88% -3.63% 710.89 ms +1.9% -2.3% 4.45%
firstContentfulPaint 349.98 ms +1.89% -2.88% 324.02 ms +6.45% -4.99% 8.01%
firstBlock 2181.82 ms +0.47% -1.32% 2095.8 ms +2.91% -2.75% 4.1%
type 14.05 ms +3.7% -2.42% 13.47 ms +1.41% -3.93% 4.31%
typeWithoutInspector 13.99 ms +9.01% -3.79% 13.02 ms +6.37% -3.76% 7.45%
typeWithTopToolbar 18.16 ms +6.61% -4.02% 16.9 ms +2.07% -5.21% 7.46%
typeContainer 6.39 ms +8.29% -2.66% 6.38 ms +2.35% -9.4% 0.16%
focus 76.21 ms +6.26% -1.98% 82.05 ms +0.6% -1.34% -7.12%
firstFocus 184.43 ms +0% -0% 148.61 ms +0% -0% 24.1%
selectAll 373.84 ms +1.97% -1.54% 336 ms +13.97% -4.45% 11.26%
listViewOpen 49.37 ms +6.95% -8.57% 46.68 ms +2.85% -3.6% 5.76%
inserterOpen 28.84 ms +14.6% -4.75% 27.22 ms +11.79% -6.17% 5.95%
inserterHover 8.76 ms +5.48% -5.71% 9.21 ms +5.86% -6.3% -4.89%
inserterSearch 6.94 ms +6.77% -5.19% 6.89 ms +4.5% -3.05% 0.73%
loadPatterns 430.54 ms +2.9% -5.32% 436.55 ms +1.78% -3.47% -1.38%
wpTotal 276.4 ms +2.13% -4.83% 256.6 ms +1.17% -10.79% 7.72%
wpMemoryUsage 14.70 MB +0% -0% 14.66 MB +0% -0% 0.24%
wpDbQueries 55 +0% -0% 55 +0% -0% 0%

site-editor

Metric 160cea3 trunk % Change
serverResponse 485.36 ms +3.7% -5.12% 486.75 ms +1.53% -3.37% -0.29%
firstPaint 282.02 ms +20.6% -5% 246.53 ms +6.57% -5.51% 14.4%
domContentLoaded 1241.05 ms +0.78% -0.8% 1253.55 ms +0.31% -0.87% -1%
loaded 1242.12 ms +0.76% -0.79% 1254.64 ms +0.32% -0.86% -1%
firstContentfulPaint 500.35 ms +3.6% -1.42% 492.47 ms +2.02% -16.73% 1.6%
firstBlock 4628.94 ms +0.48% -0.58% 4645.89 ms +0.62% -0.77% -0.36%
type 17.73 ms +9.02% -4.68% 18.36 ms +5.88% -5.45% -3.43%
navigate 118.28 ms +13.03% -4.48% 114.55 ms +6.2% -4.17% 3.26%
loadPatterns 1178.94 ms +1.27% -3.55% 1268.89 ms +5.58% -5.42% -7.09%
loadPages 993.88 ms +1.49% -5.58% 988.99 ms +1.22% -1.65% 0.49%
wpTotal 475.98 ms +3.76% -5.2% 477.6 ms +1.53% -3.47% -0.34%
wpMemoryUsage 12.71 MB +0% -0% 12.68 MB +0% -0% 0.27%
wpDbQueries 44 +2.27% -0% 44 +2.27% -0% 0%

b80b6b7 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-22T05:37:51", "date_gmt": "2026-10-22T05:37:51", "description": {"rendered": "<p class=\"attachment\"><a href='http://localhost:8889/wp-content/uploads/2026/10/9d375e83-0f8f-44f3-b80f-0931257f26ce.png'><img loading=\"lazy\" decoding=\"async\" width=\"10\" height=\"10\" src=\"http://localhost:8889/wp-content/uploads/2026/10/9d375e83-0f8f-44f3-b80f-0931257f26ce.png\" class=\"attachment-medium size-medium\" alt=\"\" style=\"width:100%;height:100%;max-width:10px;\" /></a></p>
"}, "featured_media": 0, "filename": "9d375e83-0f8f-44f3-b80f-0931257f26ce.png", "filesize": 80, "guid": {"rendered": "http://localhost:8889/wp-content/uploads/2026/10/9d375e83-0f8f-44f3-b80f-0931257f26ce.png"}, "id": 223, "link": "http://localhost:8889/?attachment_id=223", "media_details": {"file": "2026/10/9d375e83-0f8f-44f3-b80f-0931257f26ce.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-22T05:37:51", "modified_gmt": "2026-10-22T05:37:51", "ping_status": "closed", "post": 222, "slug": "9d375e83-0f8f-44f3-b80f-0931257f26ce", "source_url": "http://localhost:8889/wp-content/uploads/2026/10/9d375e83-0f8f-44f3-b80f-0931257f26ce.png", "status": "inherit", "template": "", "title": {"rendered": "9d375e83-0f8f-44f3-b80f-0931257f26ce"}, "type": "attachment"}]
    at /home/runner/work/gutenberg/gutenberg/test/e2e/specs/editor/various/single-file-placeholder-drop.spec.js:71:45

b80b6b7 Run

@ramonjd ramonjd self-assigned this Oct 22, 2026
@ramonjd ramonjd added the Backport to WP 7.2 Beta/RC Pull request that needs to be backported to the WordPress major release that's currently in beta label Oct 22, 2026
@ramonjd
ramonjd requested a balanced review from Copilot October 22, 2026 05:25
Copilot AI reviewed Oct 22, 2026
View reviewed changes

Copilot AI left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🟢 Approval recommended

The focused selector change uses existing CSS-generation support and has no identified blocking issues; tests were not run.

No open issues 🎉

What changed in this PR

This follow-up extends Navigation’s wrapper-only Additional CSS behavior to Global Styles, preventing duplicate borders and padding on inner lists.

Changes:

  • Adds a custom CSS selector that excludes inner list containers while supporting both <nav> and <div> wrappers.
  • Adds a PHP regression test and updates the block documentation and changelog.
File Description
phpunit/​blocks/​render-block-navigation-test.php Tests the generated Global Styles CSS selector.
packages/​block-library/​src/​navigation/​README.md Documents the custom CSS selector.
packages/​block-library/​src/​navigation/​block.json Restricts Global Styles Additional CSS to Navigation wrappers.
packages/​block-library/​CHANGELOG.md Records the Navigation styling fix.

Review effort: Balanced

@ramonjd ramonjd mentioned this pull request Oct 22, 2026
Merged
@ramonjd ramonjd added the Backport to Gutenberg RC Pull request that needs to be backported to a Gutenberg release candidate (RC) label Oct 22, 2026
andrewserong
andrewserong approved these changes Oct 22, 2026
View reviewed changes

@andrewserong andrewserong left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looking good, thanks for the follow-up!

Image

@ramonjd
ramonjd merged commit 2ec1005 into trunk Oct 22, 2026
105 checks passed
@ramonjd
ramonjd deleted the fix/navigation-global-styles-custom-css branch October 22, 2026 08:15
@github-actions github-actions Bot added this to the Gutenberg 24.4 milestone Oct 22, 2026
@github-actions github-actions Bot removed the Backport to WP 7.2 Beta/RC Pull request that needs to be backported to the WordPress major release that's currently in beta label Oct 22, 2026
gutenbergplugin pushed a commit that referenced this pull request Oct 22, 2026
@ramonjd @andrewserong @gutenbergplugin
Navigation: keep Global Styles custom CSS off inner list containers (#…
c6b641f 
…85366)

Co-authored-by: ramonjd <ramonopoly@git.wordpress.org>
Co-authored-by: andrewserong <andrewserong@git.wordpress.org>
@github-actions github-actions Bot added the Backported to WP Core Pull request that has been successfully merged into WP Core label Oct 22, 2026
@github-actions

github-actions Bot commented Oct 22, 2026

Copy link
Copy Markdown

I just cherry-picked this PR to the wp/7.2 branch to get it included in the next release: c6b641f

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

Reviewers

Copilot code review Copilot
Copilot review effort
Applies to this pull request for everyone.Learn more about Copilot code review.
Copilot left review comments
@andrewserong andrewserong andrewserong approved these changes
@fabiankaegy fabiankaegy Awaiting requested review from fabiankaegy fabiankaegy is a code owner
@aaronrobertshaw aaronrobertshaw Awaiting requested review from aaronrobertshaw

Assignees

@ramonjd ramonjd

Labels

Backport to Gutenberg RC Pull request that needs to be backported to a Gutenberg release candidate (RC) Backported to WP Core Pull request that has been successfully merged into WP Core [Block] Navigation Affects the Navigation Block [Package] Block library /packages/block-library [Type] Bug An existing feature does not function as intended

Projects

None yet

Milestone

Gutenberg 24.4

Development

Successfully merging this pull request may close these issues.

3 participants

@ramonjd @andrewserong