Commit 938b9473c73 for woocommerce
commit 938b9473c73f9ebb74f2b5b96eb506609094b69f
Author: Rostislav Wolný <1082140+costasovo@users.noreply.github.com>
Date: Fri Aug 7 11:43:03 2026 +0200
[Email Editor] Disable WordPress 7.1 responsive styles feature (#67444)
* Disable WordPress 7.1 responsive styles in the email editor
WordPress 7.1 adds a Responsive styles toggle to the editor preview
dropdown. The email renderer cannot inline per-viewport (media query)
styles, so the feature must not be offered in the email editor. Setting
responsiveEditingEnabled: false in the editor settings hides the menu
item and the per-viewport style controls in the block inspector, while
keeping the device preview options.
diff --git a/packages/js/email-editor/changelog/update-disable-responsive-editing b/packages/js/email-editor/changelog/update-disable-responsive-editing
new file mode 100644
index 00000000000..548d5cccd21
--- /dev/null
+++ b/packages/js/email-editor/changelog/update-disable-responsive-editing
@@ -0,0 +1,4 @@
+Significance: minor
+Type: update
+
+Disable the WordPress 7.1 responsive styles feature in the email editor
diff --git a/packages/js/email-editor/src/editor.tsx b/packages/js/email-editor/src/editor.tsx
index fb5dcc9b93b..30552f20658 100644
--- a/packages/js/email-editor/src/editor.tsx
+++ b/packages/js/email-editor/src/editor.tsx
@@ -79,6 +79,9 @@ function Editor( {
...settings,
allowedBlockTypes: getAllowedBlockNames(),
isPreviewMode: isPreview,
+ // WordPress 7.1 responsive styles produce media-query-based styles
+ // that the email renderer cannot inline, so keep the feature off.
+ responsiveEditingEnabled: false,
} ),
[ settings, isPreview ]
);
diff --git a/plugins/woocommerce/tests/e2e/tests/email-editor/email-editor-loads.spec.ts b/plugins/woocommerce/tests/e2e/tests/email-editor/email-editor-loads.spec.ts
index 9c3cccac522..bbb37251ced 100644
--- a/plugins/woocommerce/tests/e2e/tests/email-editor/email-editor-loads.spec.ts
+++ b/plugins/woocommerce/tests/e2e/tests/email-editor/email-editor-loads.spec.ts
@@ -56,6 +56,15 @@ test.describe( 'WooCommerce Email Editor Core', () => {
await accessTheEmailEditor( page, 'New order' );
await page.getByRole( 'button', { name: 'View', exact: true } ).click();
+ // WP 7.1 adds a "Responsive styles" toggle to this menu; the email
+ // editor disables it because the email renderer cannot inline
+ // per-viewport styles. Also passes on older WP without the feature.
+ await expect(
+ page.getByRole( 'menuitemcheckbox', {
+ name: 'Responsive styles',
+ } )
+ ).toBeHidden();
+
const [ newPage ] = await Promise.all( [
page.waitForEvent( 'popup' ), // Waits for the new tab to open
page