Responsive @tablet / @mobile styles are ignored in standalone block style variation JSON partials

[imflexwala]

WordPress 7.1 introduced responsive style states using the @tablet and @mobile keys. The dev note (Responsive block styles and configurable viewports in WordPress 7.1) states that these apply to all block types and their block style variations that use core block supports such as typography, color, background, border, dimensions, spacing and layout.

That holds when the variation is declared inside theme.json under styles.blocks.<block>.variations.<slug>. It does not hold when the same variation is declared in a standalone JSON partial in the theme's styles/ directory.

In the partial case, the base styles from the variation are generated correctly, but no media-query CSS is generated for the @tablet or @mobile blocks. Those keys appear to be dropped during processing rather than producing an error, so there is no indication in the editor or on the front end that anything was ignored.

Steps to reproduce

1. On a block theme running WordPress 7.1, create styles/article-heading-xl.json:

{
  "$schema": "https://schemas.wp.org/wp/7.1/theme.json",
  "version": 3,
  "title": "Heading XL",
  "slug": "article-heading-xl",
  "blockTypes": ["core/heading", "core/post-title"],
  "styles": {
    "typography": {
      "fontSize": "40px",
      "fontWeight": "700",
      "lineHeight": "1.3"
    },
    "@tablet": {
      "typography": { "fontSize": "28px" }
    },
    "@mobile": {
      "typography": { "fontSize": "16px", "lineHeight": "1.35" }
    }
  }
}

2. Add a Heading block to a page and apply the "Heading XL" style variation.
3. View the page on the front end and inspect the heading in DevTools.
4. Resize the viewport below the tablet breakpoint, then below the mobile breakpoint.

Expected result

Three rules are generated for the variation selector: the base rule, plus rules wrapped in the tablet and mobile media queries. The heading font size steps down at each breakpoint.

Actual result

Only the base rule is generated:

:root :where(.wp-block-heading.is-style-article-heading-xl--15) {
  font-size: clamp(24.034px, 1.502rem + ((1vw - 3.2px) * 1.782), 40px);
  font-weight: 700;
  line-height: 1.3;
}

No media-query rules are output for the variation. The heading keeps the desktop font size at every viewport width. Screenshots attached show the same element at 1440px and at 440px, with an identical computed font size and no additional rules in the Styles panel.

Working comparison

Moving the identical @tablet and @mobile blocks into theme.json under styles.blocks.core/heading.variations.article-heading-xl generates the expected media-query CSS. Only the standalone partial path is affected.

Attachments

Screenshot 2026-08-28 at 4.47.37 PM.jpg - front end at 1440px, base rule generated, no responsive rules present
Screenshot 2026-08-28 at 4.49.23 PM.jpg - same page at 440px, still resolving to the desktop font size