Table of contents
WordPress 7.1 Is Here
As I’m writing this article, WordPress 7.1 has just been released following several beta versions. This update builds on the foundation laid by WordPress 7.0, which I wrote about earlier when I was excited about the promise of responsive editing mode.
Here’s the thing: WordPress 7.1 delivers on that promise.
The complete list of features and changes can be found here:
But let me highlight the features that I believe are true game-changers, especially for mobile control in Gutenberg.
The Features That Matter Most
Responsive Styling: Finally, Real Mobile Control
This is the feature I’ve been waiting for since I first wrote about responsive editing mode in my WordPress 7.0 article. In 7.0, we saw the promise. In 7.1, we get the implementation.
Here’s how it works: When you’re editing a block, you can now click on “Responsive editing” in the top toolbar, and “Tablet” and “Mobile” buttons will appear in the right-hand sidebar. This lets you visually define how a block behaves at specific screen widths (viewports).
Why this is a big deal:
Many of us have been using Elementor or Kadence simply because Gutenberg didn’t offer the ability to control core blocks based on device breakpoints. Now, you can:
- Apply different padding, margin, and spacing values for mobile vs. desktop
- Change typography (font sizes, line heights) per breakpoint
- Adjust colors and backgrounds for different screen sizes
- Control layout and dimensions without writing a single line of CSS
The system follows a desktop-first model, meaning styles cascade from desktop to tablet to mobile, and you only override what you need to change for smaller screens. For more technical details on how this works, check out the Gutenberg Times WordPress 7.1 Source of Truth.
Important note: There’s one quirk to be aware of. If you apply styling specifically to the tablet breakpoint, it does not automatically cascade down to mobile. You’ll need to manually apply the same changes to mobile if you want consistency across both smaller breakpoints. This is different from the desktop-to-tablet cascade, so keep an eye on it during your workflow.
Real-world example: You can now set a larger font size for headings on desktop (where you have more screen real estate) and a smaller, more readable size on mobile—all without touching your theme’s CSS.
Custom Breakpoints: Take Control of Your Design
WordPress 7.1 doesn’t just give you responsive controls—it lets you define your own breakpoints.
In your theme.json file, you can now specify custom mobile and tablet breakpoints instead of using WordPress’s defaults. This means:
{
"styles": {
"breakpoints": {
"mobile": "600px",
"tablet": "900px"
}
}
}
Why this matters:
Every project has different needs. Maybe your mobile audience primarily uses tablets, so you want a higher mobile breakpoint. Or maybe you’re designing for a niche where phones are the primary device. Now you can tailor your responsive design to your actual audience.
Navigation Block: Mobile Gets the Love It Deserves
The Navigation Block continues to receive significant improvements in 7.1, building on the “better control over navigation, including on mobile” that I mentioned in my 7.0 article.
What’s new:
- Customizable mobile overlay – You can now style how your navigation menu appears on mobile devices, including the overlay background, text colors, and spacing
- Responsive visibility – Show or hide specific navigation items based on screen size
- Better touch targets – Improved spacing and sizing for mobile menus
Real-world use case: You can now create a clean, minimal mobile menu that shows only the most important pages, while your desktop navigation displays the full site structure. No more plugins required.
Interactive States: Touch-Friendly Controls
WordPress 7.1 introduces style controls for interactive states like :hover, :focus, and :active. Currently, this works for the Button and Navigation Link blocks.
Why this matters for mobile:
On touch devices, :hover states don’t exist in the traditional sense, but :active (when a user taps) and :focus (when a form field is selected) are crucial. Now you can:
- Set a different background color when a button is tapped (
:active) - Style form fields differently when they’re selected (
:focus) - Ensure your interactive elements are visually distinct and accessible on all devices
Media Editor: Mobile Workflow Improvements
WordPress 7.1 brings some much-needed improvements to media handling:
- Client-side image processing – Images are now resized and encoded in the browser before upload, making the process faster and more efficient
- Native support for phone formats – You can now upload HEIC and AVIF images directly from your phone without conversion
- New media modal – Crop, rotate, and edit images without leaving the editor
Why this matters:
If you’ve ever tried to upload a photo from your iPhone to WordPress, you know the frustration of format incompatibility. Now, you can snap a photo, upload it directly, and even make basic edits—all from your mobile device.
Iframed Editor: Better Isolation, Better Mobile Rendering
Every editor instance is now iframed in WordPress 7.1. This is a technical change, but it has real-world implications:
- Better isolation between the editor and admin area
- More consistent rendering across different devices
- Improved stability for custom blocks and plugins
What This Means for Gutenberg Adoption
In my WordPress 7.0 article, I wrote:
“In my opinion, this is the most important update for editing in Gutenberg. A lot of people prefer to use Elementor or Kadence simply because Gutenberg doesn’t offer the ability to control core blocks based on the device’s breakpoint.”
WordPress 7.1 changes that.
With native responsive styling, custom breakpoints, and improved mobile controls, Gutenberg is finally catching up to page builders in terms of mobile design flexibility. And it’s doing it in a way that’s built into WordPress Core—no extra plugins, no bloat, no compatibility issues.
The best part? These features work across all block editors—Posts, Pages, Templates, Patterns, Template Parts, and Navigation. Whether you’re building a simple blog post or a complex full-site-editing template, you have the same mobile controls at your fingertips.
My Take: Is It Worth Updating?
Absolutely.
If you’ve been holding off on using Gutenberg because of mobile limitations, WordPress 7.1 is the update that should change your mind. The responsive styling controls alone make this a must-have for any site where mobile experience matters (which, let’s be honest, is every site these days).
The only caveat: Some features, like responsive styling, might require you to enable them in the editor settings. Look for the “Responsive styles” option in the View menu.
What’s Next: Collaboration Features on the Horizon
WordPress 7.1 also brings improvements to Notes—the collaboration feature I mentioned in my WordPress 7.0 article when I compared it to Figma’s commenting system. While the current implementation includes basic annotation capabilities, the foundation is finally coming together.
Looking ahead, future updates will likely introduce a dynamic Notes section with much better interactivity. If WordPress follows through on the vision, we can expect a collaboration experience that mirrors Figma’s approach—where teams can leave contextual comments, tag each other, and resolve discussions directly within the editor. This would be a game-changer for marketing teams, content creators, and anyone working on drafts together.
Final Thoughts
WordPress 7.1 feels like a maturity milestone for Gutenberg. It’s not just about adding features—it’s about filling the gaps that have been keeping developers and site owners from fully embracing the block editor.
The mobile controls, in particular, address one of the biggest pain points I’ve heard from clients and fellow developers. No more workarounds. No more custom CSS for every little mobile adjustment. Just native, visual controls that work the way you’d expect.
