Render viewport state element styles in the editor

[tellthemachines]

What?

Follow-up to #81265; applies the same rules on the editor side so any viewport-specific global element styles don't get wiped from the editor stylesheet.

Testing Instructions

1. In global styles, change the styles for the heading element inside the Group block on mobile viewport only.
2. Save and then open a post, add a Group with a Heading nested in it.
3. Check the mobile preview; the previously added global styles should apply to the heading.

Use of AI Tools

written with codex/gpt 5.6 sol and reviewed by myself

[github-actions]

Size Change: +183 B (0%)

Total Size: 7.82 MB

📦 View Changed

Filename	Size	Change
build/modules/lazy-editor/index.min.js	14.8 kB	+41 B (+0.28%)
build/scripts/block-editor/index.min.js	434 kB	+66 B (+0.02%)
build/scripts/edit-site/index.min.js	311 kB	+33 B (+0.01%)
build/scripts/editor/index.min.js	510 kB	+43 B (+0.01%)

_{compressed-size-action}

[ramonjd]

Tested headings and links. LGTM

@media (width <= 480px) {
    :root :where(.wp-block-group h1,.wp-block-group h2,.wp-block-group h3,.wp-block-group h4,.wp-block-group h5,.wp-block-group h6) {
        color: var(--wp--preset--color--accent-1);
        background-color: #e000d5;
    }
}

[ramonjd]

😢

[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.

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: tellthemachines <isabel_brison@git.wordpress.org>
Co-authored-by: ramonjd <ramonopoly@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]

Flaky tests detected in 645c239.
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/31145843334
📝 Reported tests:

As a user I want to be able to create a navigation overlay for a specific navigation block in /test/e2e/specs/site-editor/navigation-overlay-template-part.spec.js, passed after 1 failed attempt.

TimeoutError: locator.click: Timeout 10000ms exceeded.
Call log:
  - waiting for getByRole('region', { name: /(Editor publish|Save panel)/ }).getByRole('button', { name: 'Save', exact: true })

    at Editor.saveSiteEditorEntities (/home/runner/work/gutenberg/gutenberg/packages/e2e-test-utils-playwright/src/editor/site-editor.ts:45:5)
    at /home/runner/work/gutenberg/gutenberg/test/e2e/specs/site-editor/navigation-overlay-template-part.spec.js:93:4

chevron opens and closes submenu on touch devices in /test/e2e/specs/editor/blocks/navigation-frontend-interactivity.spec.js, passed after 1 failed attempt.

TimeoutError: locator.click: Timeout 10000ms exceeded.
Call log:
  - waiting for getByRole('button', { name: 'Submenu submenu' })
    - locator resolved to <button aria-expanded="false" aria-label="Submenu submenu" data-wp-on--click="actions.toggleMenuOnClick" data-wp-bind--aria-expanded="state.isSubmenuOpen" class="wp-block-navigation__submenu-icon wp-block-navigation-submenu__toggle">…</button>
  - attempting click action
    2 × waiting for element to be visible, enabled and stable
      - element is visible, enabled and stable
      - scrolling into view if needed
      - done scrolling
      - <a class="ab-item" role="menuitem" href="https://wordpress.org/">WordPress.org</a> from <div class="nojq" id="wpadminbar">…</div> subtree intercepts pointer events
    - retrying click action
    - waiting 20ms
    2 × waiting for element to be visible, enabled and stable
      - element is visible, enabled and stable
      - scrolling into view if needed
      - done scrolling
      - <a class="ab-item" role="menuitem" href="https://wordpress.org/">WordPress.org</a> from <div class="nojq" id="wpadminbar">…</div> subtree intercepts pointer events
    - retrying click action
      - waiting 100ms
    19 × waiting for element to be visible, enabled and stable
       - element is visible, enabled and stable
       - scrolling into view if needed
       - done scrolling
       - <a class="ab-item" role="menuitem" href="https://wordpress.org/">WordPress.org</a> from <div class="nojq" id="wpadminbar">…</div> subtree intercepts pointer events
     - retrying click action
       - waiting 500ms

    at /home/runner/work/gutenberg/gutenberg/test/e2e/specs/editor/blocks/navigation-frontend-interactivity.spec.js:725:23

[github-actions]

There was a conflict while trying to cherry-pick the commit to the wp/7.1 branch. Please resolve the conflict manually and create a PR to the wp/7.1 branch.

PRs to wp/7.1 are similar to PRs to trunk, but you should base your PR on the wp/7.1 branch instead of trunk.

# Checkout the wp/7.1 branch instead of trunk.
git checkout wp/7.1

# Create a new branch for your PR.
git checkout -b my-branch

# Cherry-pick the commit.
git cherry-pick e89872315e3d5947006e76772f6ebf3d4dcc5ba8

# Check which files have conflicts.
git status

# Resolve the conflict...
# Add the resolved files to the staging area.
git status
git add .
git cherry-pick --continue

# Push the branch to the repository
git push origin my-branch

# Create a PR and set the base to the wp/7.1 branch.
# See https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/proposing-changes-to-your-work-with-pull-requests/changing-the-base-branch-of-a-pull-request.

[t-hamano]

Backported: #81311