Skip to content

Editor: Retain responsive styles in block style variation partials. - #13325

Closed
guzel wants to merge 1 commit into
WordPress:trunkfrom
guzel:fix/65992-responsive-styles-in-block-style-variation-partials
Closed

guzel wants to merge 1 commit into
WordPress:trunkfrom
guzel:fix/65992-responsive-styles-in-block-style-variation-partials

Conversation

@guzel

@guzel guzel commented Aug 31, 2026

Copy link
Copy Markdown

Trac ticket: https://core.trac.wordpress.org/ticket/65992

Problem

Responsive @tablet and @mobile styles are silently dropped from block style
variations declared in a standalone JSON partial in a theme's styles/
directory. The base rule is generated, but no media query CSS is emitted, and
nothing surfaces an error in the editor or on the front end.

The same variation declared inline in theme.json under
styles.blocks.<block>.variations.<slug> works correctly. Only the standalone
partial path is affected.

Cause

Partials declare their styles at the root of the styles object:

{
  "slug": "article-heading-xl",
  "blockTypes": [ "core/heading" ],
  "styles": {
    "typography": { "fontSize": "40px" },
    "@tablet": { "typography": { "fontSize": "28px" } }
  }
}

WP_Theme_JSON_Resolver::get_style_variations() sanitizes each partial by
running it through WP_Theme_JSON, so the partial is validated against the
top-level styles schema in WP_Theme_JSON::sanitize().

That schema was deliberately built to mirror the block style variation schema —
both are VALID_STYLES plus blocks and elements — which is what makes
partials sanitize correctly in the first place. The responsive breakpoint states
added in 7.1 were only added to the block, element, and variation branches, so
@tablet and @mobile at the top level are removed by
remove_keys_not_in_schema() as unknown keys.

The variation branch cannot cover this case: it validates
styles.blocks.<block>.variations.<slug>, a different location in the tree, and
its guard also requires the variation to already be present in
$valid_variations, which is derived from the block styles registry. Partials
are not registered until wp_register_block_style_variations_from_theme_json_partials()
runs, which happens after get_style_variations() returns.

The later, fully-correct sanitize pass in get_theme_data() cannot recover the
data either, because inject_variations_from_block_style_variation_files()
copies the already-stripped styles.

Fix

Add the responsive breakpoint states to the top-level styles schema, mirroring
what the block style variation branch already does. This restores the parity the
two schemas were written to have.

Testing instructions

  1. On a block theme, create styles/article-heading-xl.json:
{
	"version": 3,
	"title": "Heading XL",
	"slug": "article-heading-xl",
	"blockTypes": [ "core/heading" ],
	"styles": {
		"typography": { "fontSize": "40px", "fontWeight": "700", "lineHeight": "1.3" },
		"@tablet": { "typography": { "fontSize": "28px" } },
		"@mobile": { "typography": { "fontSize": "16px", "lineHeight": "1.35" } }
	}
}
  1. Add a Heading block to a page and apply the "Heading XL" style variation.
  2. View the page on the front end and inspect the heading.

Before: only the base rule is generated; the heading keeps its desktop font
size at every viewport width.

After: the base rule plus tablet and mobile media query rules are generated,
and the font size steps down at each breakpoint.

Automated tests

  • test_block_style_variation_partial_retains_responsive_styles — asserts the
    breakpoint keys survive WP_Theme_JSON_Resolver::get_style_variations().
  • test_block_style_variation_partial_responsive_styles_generate_css — asserts
    the expected media queries appear in the generated CSS.

Both fail before the change and pass after. An existing expectation in
test_get_style_variations is updated to account for the new test fixture.

AI assistance

  • AI assistance: Yes
  • Tool(s): Claude Code (Claude Opus 5)
  • Used for: Root cause analysis, drafting the fix, and the two regression tests.

The tests were written first and confirmed failing against unpatched trunk, then
confirmed passing after the change. The full PHPUnit suite was run locally
(31,037 tests, no regressions). All output was reviewed by me before submission.

@github-actions

github-actions Bot commented Aug 31, 2026 •

Copy link
Copy Markdown

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.

Core Committers: Use this line as a base for the props when committing in SVN:

Props mitgiselle, ramonopoly, adamsilverstein.

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

@github-actions

Copy link
Copy Markdown

Test using WordPress Playground

The changes in this pull request can previewed and tested using a WordPress Playground instance.

WordPress Playground is an experimental project that creates a full WordPress instance entirely within the browser.

Some things to be aware of

  • All changes will be lost when closing a tab with a Playground instance.
  • All changes will be lost when refreshing the page.
  • A fresh instance is created each time the link below is clicked.
  • Every time this pull request is updated, a new ZIP file containing all changes is created. If changes are not reflected in the Playground instance,
    it's possible that the most recent build failed, or has not completed. Check the list of workflow runs to be sure.

For more details about these limitations and more, check out the Limitations page in the WordPress Playground documentation.

Test this pull request with WordPress Playground.

@guzel
guzel force-pushed the fix/65992-responsive-styles-in-block-style-variation-partials branch from c1df65e to cf098c6 Compare August 31, 2026 00:47
guzel added a commit to guzel/gutenberg that referenced this pull request Sep 4, 2026
Links this PR to the Core backport PR WordPress/wordpress-develop#13325,
as required by the backport changelog check.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
@adamsilverstein

Copy link
Copy Markdown
Member

Hello @guzel is this PR ready for review? I see the upstream PR has not been merged.

Please note the RC for 7.1.1 is September 10th if we want it included in that version.

@guzel
guzel force-pushed the fix/65992-responsive-styles-in-block-style-variation-partials branch from cf098c6 to ec7281a Compare September 8, 2026 20:20
@guzel

guzel commented Sep 8, 2026

Copy link
Copy Markdown
Author

Thanks @adamsilverstein, yes, it's ready for review.
I've just pushed an update so this matches the current state of
WordPress/gutenberg#82403

That includes the review feedback from @talldan there: the states are now gated on the blockTypes property, so only block style variation partials are affected and regular theme.json files are unchanged. Pseudo-selectors in partials are supported alongside the responsive states, since they were dropped by the same root cause.

The Gutenberg PR is green and waiting on final sign-off. If anything changes there I'll mirror it here.

@adamsilverstein
adamsilverstein requested review from mukeshpanchal27, ramonjd and tellthemachines and removed request for ramonjd September 8, 2026 23:23
@adamsilverstein

Copy link
Copy Markdown
Member

Thanks @guzel! I have requested some reviewers in GitHub.

@ramonjd
ramonjd requested a review from talldan September 9, 2026 00:32
@guzel
guzel force-pushed the fix/65992-responsive-styles-in-block-style-variation-partials branch from ec7281a to d6fa671 Compare September 10, 2026 12:42
ramonjd pushed a commit to guzel/gutenberg that referenced this pull request Sep 10, 2026
…ials

Responsive `@tablet` and `@mobile` styles were silently dropped from block
style variations declared in a standalone JSON partial in a theme's `styles`
directory, so only the base rule was generated and no media query CSS was
output.

Partials declare their styles at the root of the `styles` object and are
sanitized against the top-level styles schema in
`WP_Theme_JSON_Gutenberg::sanitize()`. That schema mirrors the block style
variation schema, but the responsive breakpoint states were only added to the
block, element, and variation branches, so the states were removed as unknown
keys.

Add the responsive breakpoint states to the top-level styles schema to restore
parity. Variations declared inline in theme.json under
`styles.blocks.<block>.variations.<slug>` were unaffected and keep working.

This ports the core fix in WordPress/wordpress-develop#13325 to the plugin.
Since `WP_Theme_JSON_Gutenberg` overrides core's class while the plugin is
active, the core fix alone does not resolve this for Gutenberg users.

Fixes WordPress#82392.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
ramonjd pushed a commit to guzel/gutenberg that referenced this pull request Sep 10, 2026
Links this PR to the Core backport PR WordPress/wordpress-develop#13325,
as required by the backport changelog check.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

@ramonjd ramonjd left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

Tested manually and did a fidelity check on the Gutenberg PR

This is a faithful backport that works the same as the original plugin PR, fixing the bug.

@ramonjd

ramonjd commented Sep 11, 2026

Copy link
Copy Markdown
Member

@adamsilverstein PR approved if there's still time for 7.1.1 RC 1

Responsive `@tablet` and `@mobile` styles, and pseudo-selector styles, were
silently dropped from block style variations declared in a standalone JSON
partial in a theme's `styles` directory, so only the base rule was generated.

Partials declare their styles at the root of the `styles` object and are
sanitized against the top-level styles schema in `WP_Theme_JSON::sanitize()`.
That schema mirrors the block style variation schema, but the states were only
added to the block, element, and variation branches, so they were removed as
unknown keys.

Allow those states at the top level when the config is a block style variation
partial, which is identified by the `blockTypes` property. Regular theme.json
files are unaffected. The partial's own `blockTypes` determines which
pseudo-selectors are valid for it.

Also removes `blocks` from within responsive breakpoint states, for both the
new partial states and the pre-existing block style variation states. Nesting
`blocks` within a breakpoint state generates no CSS; only the reverse works,
with the breakpoint state nested within `blocks`.

Custom states are not included: `get_block_nodes()` only emits custom state
nodes for the block path, so allowing them here would preserve the data
without generating any CSS.

Props imflexwala, wildworks, talldan, arkaprabhachowdhury, andrewserong, ramonopoly.
Fixes #65992.
@ramonjd
ramonjd force-pushed the fix/65992-responsive-styles-in-block-style-variation-partials branch from d6fa671 to 084b7d7 Compare September 14, 2026 00:30
wporg-sync pushed a commit that referenced this pull request Sep 14, 2026
Responsive `@tablet` and `@mobile` styles were silently dropped from block style variations declared in a standalone JSON partial in a theme's `styles/` directory.

This commit adds the responsive breakpoint states to the top-level styles schema, mirroring what the block style variation branch already does. This restores the parity to the two schemas.

Developed in: #13325

Props adamsilverstein, andraganescu, andrewserong, firdaus666, mitgiselle, pbiron, ramonopoly, talldanwp.

Fixes #65992.



git-svn-id: https://develop.svn.wordpress.org/trunk@63610 602fd350-edb4-49c9-b593-d223f7449a82
@github-actions

Copy link
Copy Markdown

A commit was made that fixes the Trac ticket referenced in the description of this pull request.

SVN changeset: 63610
GitHub commit: ce1aa14

This PR will be closed, but please confirm the accuracy of this and reopen if there is more work to be done.

@github-actions github-actions Bot closed this Sep 14, 2026
wporg-sync pushed a commit to WordPress/WordPress that referenced this pull request Sep 14, 2026
Responsive `@tablet` and `@mobile` styles were silently dropped from block style variations declared in a standalone JSON partial in a theme's `styles/` directory.

This commit adds the responsive breakpoint states to the top-level styles schema, mirroring what the block style variation branch already does. This restores the parity to the two schemas.

Developed in: WordPress/wordpress-develop#13325

Props adamsilverstein, andraganescu, andrewserong, firdaus666, mitgiselle, pbiron, ramonopoly, talldanwp.

Fixes #65992.


Built from https://develop.svn.wordpress.org/trunk@63610


git-svn-id: http://core.svn.wordpress.org/trunk@62786 1a063a9b-81f0-0310-95a4-ce76da25c4cd
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants