WordPress 7.1 lets block styles define mobile and tablet states while keeping the base style as desktop. The feature is useful, but a rushed migration can duplicate existing media queries, change cascade order, or leave responsive styles active after the editor controls are hidden.
Use this for block themes, classic themes using theme.json, design-system plugins, patterns, and client sites that already have custom responsive CSS.
Quick answer
Build one test page with the exact blocks and states your theme uses. Record the WordPress 7.0.2 frontend at desktop, tablet, and mobile widths, add responsive style states on a WordPress 7.1 staging copy, then compare generated CSS, computed values, editor controls, and saved output. Migrate one component family at a time.
What to check first
- Inventory theme.json styles, Additional CSS, block CSS, pattern styles, and plugin media queries that affect the same properties.
- Create a fixture with Group, Columns, Navigation, Buttons, Image, Cover, and any custom blocks used in production.
- Record computed values at desktop, tablet, just above tablet, mobile, and just above mobile widths.
- Test base, mobile, tablet, hover, focus, and any custom state combinations that the component supports.
- Turn responsive editing controls off and confirm previously saved responsive styles still render on the frontend.
Test scenarios to run
Run the same controlled fixture across these branches. Write down the expected result before testing so a surprising response is easy to identify.
| Scenario | Fixture | Expected result |
|---|
| Existing CSS | A component already has theme and plugin media queries | No duplicate rule changes spacing, type, visibility, or order |
| Nested state | Button focus-visible inside a mobile style state | Responsive and interaction states resolve to the approved value |
| Hidden UI | Save responsive values, then disable responsiveEditingEnabled | Controls disappear but saved frontend styles still apply |
| Boundary widths | 479, 480, 481, 781, 782, and 783 pixels | Each breakpoint changes only at the documented threshold |
Decision rule
Hold the migration when a breakpoint moves unexpectedly, an interaction state becomes unreadable, editor and frontend values differ, or hiding the editing UI appears to remove a saved style only in one context.
Safe fix order
Use a sequence that makes each result easy to prove. Stop when new evidence changes the scope or owner of the problem.
- Create the responsive fixture
- Map overlapping CSS owners
- Migrate one component
- Compare every state and boundary
- Remove only superseded rules
Diagnostic table
Use this table to connect the observed behavior to evidence and a verification step.
| Action | Evidence to collect | How to verify |
|---|
| Create the responsive fixture | Inventory theme.json styles, Additional CSS, block CSS, pattern styles, and plugin media queries that affect the same properties. | Desktop values remain the approved base styles. |
| Map overlapping CSS owners | Create a fixture with Group, Columns, Navigation, Buttons, Image, Cover, and any custom blocks used in production. | Mobile and tablet values change at the intended boundaries. |
| Migrate one component | Record computed values at desktop, tablet, just above tablet, mobile, and just above mobile widths. | Nested hover, focus, and custom states remain accessible. |
| Compare every state and boundary | Test base, mobile, tablet, hover, focus, and any custom state combinations that the component supports. | Saved responsive values render after cache purge and after the editing controls are hidden. |
Useful command or data shape
Adapt paths, IDs, and privacy handling to the site before running commands or storing data on production.
// theme.json excerpt for a controlled fixture
{
"settings": {
"viewport": { "mobile": "480px", "tablet": "782px" }
}
}
// Record computed padding, gap, font-size, display, and order at each boundary.
Production verification checklist
- Desktop values remain the approved base styles.
- Mobile and tablet values change at the intended boundaries.
- Nested hover, focus, and custom states remain accessible.
- Saved responsive values render after cache purge and after the editing controls are hidden.
Why this usually happens
- Generated responsive rules can target the same property as legacy theme or plugin media queries.
- A hidden editor control does not remove responsive values already stored in block attributes or global styles.
- Nested responsive and pseudo states add cascade paths that a desktop-only visual check will miss.
Field notes
- Use identical content, font loading, viewport, zoom, and cache state for each screenshot.
- Capture the matched CSS rule and computed value, not only the visual result.
- Keep the old media query until the replacement passes on representative templates.
Mistakes to avoid
- Do not migrate every media query in one release.
- Do not test only the editor canvas.
- Do not assume disabling the editor UI deletes saved styles.
- Do not remove old CSS until templates outside the fixture have been checked.
What to tell the client or owner
Share the page URL, block path, property, base value, mobile value, tablet value, viewport, matched rule, WordPress build, theme version, and before and after screenshots.
Questions teams ask during testing
Is the base style mobile-first?
No. In the WordPress 7.1 implementation described by Core, the base style represents desktop and mobile or tablet values override it.
Can responsive and hover states be combined?
Yes, which is why nested state fixtures are part of this test.
Will disabling responsive editing remove the frontend CSS?
No. The setting hides the editing controls. Saved responsive styles continue to render.
When HandL WP should help
HandL WP can inventory existing responsive CSS, build a representative block fixture, compare generated and legacy rules, and verify desktop, tablet, mobile, keyboard, and frontend behavior.
If this is active on a production site, test a WordPress 7.1 theme migration.
Related HandL WP guides
Use these related guides when the same issue touches tracking, security, checkout, or crawler visibility.
Helpful references