Theme: forward ThemeProvider cornerRadius preset to :root for root providers by ciampo · Pull Request #79153 · WordPress/gutenberg

ciampo · 2026-06-12T14:04:14Z

What

A root ThemeProvider (isRoot) now forwards its cornerRadius preset to the document element, so --wpds-border-radius-* applies to <html> — not just the provider's scoping <div>. This matches how color and cursor already behave.

Why

color/cursor from a root provider already cascade to :root; cornerRadius was the odd one out. Mixed pages (React UI + PHP-rendered admin HTML) consume the tokens outside the React root, so the radius preset should reach <html> too.

Only isRoot providers are affected — non-root nested providers still scope their preset locally.

How

Each corner-radius-* mode in terrazzo.config.ts gains a :root:has([data-wpds-root-provider="true"][data-wpds-corner-radius="…"]) selector (plus regenerated CSS + CHANGELOG).

Test plan

In Storybook (Design System → Theme → Theme Provider), render a root ThemeProvider and switch the preset; confirm --wpds-border-radius-* updates on :root in DevTools.
Confirm a non-root provider still scopes its preset locally and does not affect :root.
Confirm color/cursor root forwarding still works and the default (subtle) preset matches existing appearance.

Note on the generated CSS

src/prebuilt/css/design-tokens.css is regenerated by npm run build (in packages/theme); running the full build produces this exact diff with no other changes.

Use of AI

Made with Cursor.

github-actions · 2026-06-12T14:17:56Z

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

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: ciampo <mciampini@git.wordpress.org>
Co-authored-by: aduth <aduth@git.wordpress.org>

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

github-actions · 2026-06-12T14:56:50Z

Size Change: +36 B (0%)

Total Size: 8.58 MB

📦 View Changed

Filename	Size	Change
`build/modules/boot/index.min.js`	52.8 kB	+36 B (+0.07%)

_{compressed-size-action}

Restores `data-wpds-root-provider="true"` on the wrapper when `isRoot`, so prebuilt CSS can forward preset-based settings (e.g. `cornerRadius` in #79153) to `:root` via `:root:has([data-wpds-root-provider="true"]…)`. Dynamic color/cursor values keep using the JS sync in `useLayoutEffect` (they can't be expressed in a static stylesheet). Comment updated to explain the deliberate split.

github-actions · 2026-06-15T16:33:57Z

Flaky tests detected in dc37527.
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.

🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/27557643745
📝 Reported issues:

[Flaky Test] shouldn't conflict with server-side autosave #78706 in /test/e2e/specs/editor/various/autosave.spec.js

aduth · 2026-06-15T19:05:32Z

A couple clarifying questions on the difference in implementation between radius & color/cursor:

Does this mean that someone must load design-tokens.css for corner radius customization to take effect? My understanding is that up until now it's been somewhat optional to load that stylesheet, with how color and cursor styles are implemented and build upon the defaults embedded through the CSS fallback values.
I'm not sure I fully follow why they're different; i.e. why couldn't cornerRadius be implemented through ThemeProvider inline styles, or vice-versa why cursor shouldn't be implemented through design-tokens.css modifier selectors. Should we want them to be distinctly implemented?

aduth

LGTM 👍

This was a little tricky to test, since all the border radiuses in Storybook fall within a ThemeProvider wrapper and so testing the :root forwarding required a bit of manual manipulation to copy/paste an element from the inspector to outside the ThemeProvider wrapper. Separately-but-maybe-relatedly it might be a good idea to change some of our hard-coded borderRadius in theme examples to use the tokens.

Before	After

aduth · 2026-06-15T19:38:59Z

+		// block (it also defines base tokens on `:root`) to avoid interfering
+		// with the color assertions above.
+		describe( 'cornerRadius forwarding', () => {
+			const BORDER_RADIUS = '--wpds-border-radius-sm';


Nit: I'd only expect SCREAMING_SNAKE_CASE constant variables at the top-level of the module (ref), so either moving this to be with the rest or renaming it to a camelCase naming scheme.

aduth · 2026-06-15T19:48:11Z

+			beforeAll( () => {
+				prebuiltStyle = document.createElement( 'style' );
+				prebuiltStyle.textContent = readFileSync(
+					join( __dirname, '../prebuilt/css/design-tokens.css' ),


Tangent: I wonder if we could save ourselves some future headache adopting something like babel-plugin-transform-import-meta so we could start using (and avoid future migration to) import.meta.dirname since __dirname doesn't exist in true ESM. Ideally we'd upgrade Jest and try to start using some of their native ESM support, but that's a bigger task.

aduth · 2026-06-15T19:51:03Z

+### Enhancements
+
+-   `ThemeProvider`: forward the `cornerRadius` preset to the document element when `isRoot` is set, matching `color` and `cursor`. [#79153](https://github.com/WordPress/gutenberg/pull/79153).


Arguably a bug fix, but since it hasn't released yet I suppose it's not a bug quite yet!

Restore the `:root:has([data-wpds-root-provider="true"][data-wpds-corner-radius="…"])` selectors for each corner-radius preset mode in the Terrazzo config (and the generated prebuilt CSS) so a root `ThemeProvider` applies the `--wpds-border-radius-*` tokens to the document element, consistent with how `color` and `cursor` tokens already behave. Follow-up to #78816 (comment)

Add coverage for the prebuilt `:root:has( [data-wpds-root-provider='true']… )` rule: a root provider forwards its corner-radius preset to the document element, while a non-root provider does not. Loads the prebuilt design-token CSS (where the border-radius preset values live) to exercise the cascade.

github-actions Bot added the [Package] Theme /packages/theme label Jun 12, 2026

ciampo self-assigned this Jun 12, 2026

ciampo added the [Type] Enhancement A suggestion for improvement. label Jun 12, 2026

ciampo marked this pull request as ready for review June 12, 2026 14:17

ciampo requested a review from a team as a code owner June 12, 2026 14:17

ciampo force-pushed the add-corner-radius-root-selector branch from 3108de9 to 93a39d0 Compare June 12, 2026 14:48

ciampo force-pushed the add-corner-radius-root-selector branch from 93a39d0 to dc37527 Compare June 15, 2026 15:35

ciampo mentioned this pull request Jun 15, 2026

Theme: apply ThemeProvider styles inline (I2) #78678

Draft

aduth approved these changes Jun 15, 2026

View reviewed changes

ciampo added 4 commits June 15, 2026 23:59

Update CHANGELOG with PR number

7f0fa3b

Shorten CHANGELOG entry

89743f0

ciampo force-pushed the add-corner-radius-root-selector branch from dc37527 to 415e57d Compare June 15, 2026 22:01

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Theme: forward ThemeProvider cornerRadius preset to :root for root providers#79153

Theme: forward ThemeProvider cornerRadius preset to :root for root providers#79153
ciampo wants to merge 4 commits into
trunkfrom
add-corner-radius-root-selector

ciampo commented Jun 12, 2026 •

edited

Loading

Uh oh!

github-actions Bot commented Jun 12, 2026 •

edited

Loading

Uh oh!

github-actions Bot commented Jun 12, 2026 •

edited

Loading

Uh oh!

github-actions Bot commented Jun 15, 2026

Uh oh!

aduth commented Jun 15, 2026

Uh oh!

aduth left a comment

Uh oh!

aduth Jun 15, 2026

Uh oh!

aduth Jun 15, 2026 •

edited

Loading

Uh oh!

aduth Jun 15, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

		### Enhancements

		- `ThemeProvider`: forward the `cornerRadius` preset to the document element when `isRoot` is set, matching `color` and `cursor`. [#79153](https://github.com/WordPress/gutenberg/pull/79153).

Conversation

ciampo commented Jun 12, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

What

Why

How

Use of AI

Uh oh!

github-actions Bot commented Jun 12, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions Bot commented Jun 12, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions Bot commented Jun 15, 2026

Uh oh!

aduth commented Jun 15, 2026

Uh oh!

aduth left a comment

Choose a reason for hiding this comment

Uh oh!

aduth Jun 15, 2026

Choose a reason for hiding this comment

Uh oh!

aduth Jun 15, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

aduth Jun 15, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

ciampo commented Jun 12, 2026 •

edited

Loading

github-actions Bot commented Jun 12, 2026 •

edited

Loading

github-actions Bot commented Jun 12, 2026 •

edited

Loading

aduth Jun 15, 2026 •

edited

Loading