Editor: order viewport breakpoints only against a comparable base

[jigneshbhavani]

WP_Theme_JSON::sanitize_viewport_settings() proves that tablet is larger than mobile using values normalized at a hardcoded 16px, but get_viewport_media_queries() emits the authored units. A media query resolves em and rem against the initial font size rather than anything set on the page, so the ordering proven at 16px does not transfer to the browser when the two breakpoints are measured against different bases.

With mobile: 30em, tablet: 500px the guard passes because 30 x 16 = 480 < 500, and core emits @media (30em < width <= 500px). Above a 16px base that range is empty, and @media (width <= 30em) and @media (width > 500px) begin to overlap instead, so two viewport states apply at once.

em and rem share a base in a media query, so they can be ordered against each other. A px length and a font-relative one cannot, at any base. This adds get_viewport_breakpoint_base() and keeps tablet only when both breakpoints are measured against the same base, dropping it in the mixed case exactly as it is already dropped when it is not larger than mobile.

No new string, so it is available after hard string freeze. settings.viewport is new in 7.1 and unreleased, so no existing theme depends on the current behavior.

Approach agreed with wildworks in comment:3. The warning message requested there is a follow-up rather than part of this change, since it needs a translatable string.

Gutenberg mirrors this logic in packages/global-styles-engine/src/utils/viewport.ts and lib/class-wp-theme-json-gutenberg.php, so the editor preview needs the same change upstream. Not part of this PR.

Testing instructions

In a theme's theme.json:

{ "version": 3, "settings": { "viewport": { "mobile": "30em", "tablet": "500px" } } }

Add a paragraph with block visibility set to hide on tablet, then view the post. Before this change the page emits @media (30em < width <= 500px). After it, tablet is not a configured breakpoint and only the mobile query is emitted. mobile: 30em, tablet: 40rem keeps both breakpoints, since those share a base.

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

Use of AI Tools

AI assistance: Yes
Tool(s): Claude Code
Model(s): Claude Opus 5
Used for: Investigation, browser measurements, drafting the change and the tests. I
reviewed, tested and take responsibility for everything in this pull request.

[github-actions]

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 bejignesh, wildworks, irozum.

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

[github-actions]

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.

[t-hamano]

@jigneshbhavani Thanks for the PR! I have submitted a similar PR to Gutenberg. WordPress/gutenberg#81388 Let's ask for opinions on this approach. Also, I made minor code refactoring and test changes in 4d14624.