Repository navigation
Conversation
|
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 Core Committers: Use this line as a base for the props when committing in SVN: To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook. |
Test using WordPress PlaygroundThe 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
For more details about these limitations and more, check out the Limitations page in the WordPress Playground documentation. |
c1df65e to
cf098c6
Compare
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>
|
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. |
cf098c6 to
ec7281a
Compare
|
Thanks @adamsilverstein, yes, it's ready for review. 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. |
|
Thanks @guzel! I have requested some reviewers in GitHub. |
ec7281a to
d6fa671
Compare
…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>
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
left a comment
There was a problem hiding this comment.
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.
|
@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.
d6fa671 to
084b7d7
Compare
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
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
Trac ticket: https://core.trac.wordpress.org/ticket/65992
Problem
Responsive
@tabletand@mobilestyles are silently dropped from block stylevariations 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.jsonunderstyles.blocks.<block>.variations.<slug>works correctly. Only the standalonepartial path is affected.
Cause
Partials declare their styles at the root of the
stylesobject:{ "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 byrunning it through
WP_Theme_JSON, so the partial is validated against thetop-level styles schema in
WP_Theme_JSON::sanitize().That schema was deliberately built to mirror the block style variation schema —
both are
VALID_STYLESplusblocksandelements— which is what makespartials 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
@tabletand@mobileat the top level are removed byremove_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, andits guard also requires the variation to already be present in
$valid_variations, which is derived from the block styles registry. Partialsare 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 thedata 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
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" } } } }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 thebreakpoint keys survive
WP_Theme_JSON_Resolver::get_style_variations().test_block_style_variation_partial_responsive_styles_generate_css— assertsthe expected media queries appear in the generated CSS.
Both fail before the change and pass after. An existing expectation in
test_get_style_variationsis updated to account for the new test fixture.AI assistance
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.