Add a responsiveEditingEnabled editor setting to hide the Responsive styles option

[t-hamano]

What?

• See https://make.wordpress.org/test/2026/07/03/call-for-testing-responsive-styling/#comment-3708
• As discussed on Slack: https://wordpress.slack.com/archives/C0B4Q0RJVAT/p1785254573145719

Adds a responsiveEditingEnabled editor setting so that sites can hide the "Responsive styles" option from the device preview dropdown.

Why?

Feedback on the Call for Testing for responsive styling asked for a way to opt out of the feature.

How?

Adds a responsiveEditingEnabled editor setting, which can be set through the block_editor_settings_all filter. It follows the existing richEditingEnabled / codeEditingEnabled pattern.

The setting only hides the toggle. Responsive styles already stored in content, and the styles they output on the front end, are unaffected.

Testing Instructions

1. On trunk, add a block and apply a style to the Mobile viewport only and save the post.

2. Add the filter from the documentation to a plugin or your theme's functions.php:

   add_filter( 'block_editor_settings_all', function ( $settings ) {
   	$settings['responsiveEditingEnabled'] = false;
   	return $settings;
   } );

3. Reload the editor and open the device preview dropdown. Confirm that "Responsive styles" is no longer listed and that the viewport options still work.

4. Confirm the style applied in step 1 is still rendered in the editor and on the front end.

Repeat steps 3 and 4 in the Site Editor.

Use of AI Tools

Claude Code was used to write the implementation and documentation following my direction. I have reviewed and tested all of the changes.

Note

If this PR is merged, I plan to add code examples to the dev note to disable responsive editing.
https://make.wordpress.org/core/?p=124535&preview=1&_ppp=bb56023b02

[github-actions]

Size Change: +37 B (0%)

Total Size: 7.76 MB

📦 View Changed

Filename	Size	Change
build/scripts/editor/index.min.js	500 kB	+37 B (+0.01%)

_{compressed-size-action}

[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: t-hamano <wildworks@git.wordpress.org>
Co-authored-by: andrewserong <andrewserong@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.

[andrewserong]

This looks like a good and simple way to do it to me! I like the responsiveEditingEnabled name as it's consistent with some of the other settings, and this feels like an easy way for plugins or site owners to disable the responsive editing if they want to.

A couple of other things that I think is good about the approach:

• It just hides the toggle, so responsive styles that exist in post content still work as before. This seems important if themes or templates wind up using responsive styles — it's just that an editor is prevented from making changes.
• It also means that a plugin could disable based on user capability or other means so that perhaps an admin could make responsive styling changes, but regular authors etc maybe not, and so on

It does mean we'll need to keep this setting in mind for future changes to the UI, but I think that's also a good thing.

LGTM! 🚀

[andrewserong]

Totally optional nit, to lead with the responsive name:

Suggested change

	* @property {boolean} responsiveEditingEnabled Whether editing styles per viewport is enabled or not
	* @property {boolean} responsiveEditingEnabled Whether responsive (per-viewport) style editing is enabled or not

[t-hamano]

Fixed in c6b9fa5

[ramonjd]

Adds a responsiveEditingEnabled editor setting so that sites can hide the "Responsive styles" option from the device preview dropdown.

This PR does what it says! I had a few questions around naming, and the JS dispatch to toggle off the preview dropdown.

[github-actions]

I just cherry-picked this PR to the wp/7.1 branch to get it included in the next release: 2095371

[t-hamano]

I plan to add the following content to the dev note.

https://make.wordpress.org/core/?p=124535&preview=1&_ppp=bb56023b02

---

Opting out of responsive editing

Sites that need style changes to always apply to every viewport can turn off responsive editing with the responsiveEditingEnabled editor setting, which defaults to true:

add_filter( 'block_editor_settings_all', 'example_disable_responsive_editing' );

function example_disable_responsive_editing( $settings ) {
	$settings['responsiveEditingEnabled'] = false;
	return $settings;
}

When it is false, both entry points for choosing a viewport are removed: the "Responsive styles" toggle in the Editor's View menu, and the "Viewport" group in the "States" dropdown in Global Styles. Device previews still work, and pseudo states such as Hover remain available.

The setting governs the editing interface only. Responsive styles already saved in theme.json, in Global Styles, or in a block's style attribute are left untouched, and the media-query CSS described above is still generated for them, so existing content renders exactly as before both in the Editor and on the front end.

[andrewserong]

I plan to add the following content to the dev note.

Nice one! Sorry to be nitpicky, there's a tiny bit of wording I'd tweak if you're up for it:

Sites that need style changes to always apply to every viewport can turn off responsive editing with the responsiveEditingEnabled editor setting, which defaults to true:

I'd possibly say instead

"Sites that need to prevent users from making viewport-based styling changes can turn off responsive style editing with the..."

So that it's clear it's about gating the the editing behaviour, not the styles output.

Up to you, though, otherwise that reads nicely to me!

[t-hamano]

@andrewserong Thanks for the feedback! I have updated the content according to the feedback.

[tellthemachines]

Thanks for sorting this out!