From 7b695ab1332c2f207ce69c4b3dbc068fe687be9f Mon Sep 17 00:00:00 2001
From: Alquen Sarmiento <sarmientoalquen@gmail.com>
Date: Tue, 26 May 2026 10:12:17 +0800
Subject: [PATCH 1/2] fix: update the editor breakpoints with wordpress 7.0
 changes

---
 src/components/block-css/index.js | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/components/block-css/index.js b/src/components/block-css/index.js
index 1383eba268..490b942b2b 100644
--- a/src/components/block-css/index.js
+++ b/src/components/block-css/index.js
@@ -535,9 +535,11 @@ function createCssEdit( selector, rule, value, device = 'desktop', vendorPrefixe
 	}
 	css = `\n${ selector } {\n\t${ css }\n}`
 
-	// The Block Editor has these fixed breakpoints.
-	const tabletBreakpoint = 781
-	const mobileBreakpoint = 361
+	// Match the Block Editor's fixed preview widths
+	// In WordPress 7.0, the preview widths have changed,
+	// see https://github.com/WordPress/gutenberg/pull/74339
+	const tabletBreakpoint = 782
+	const mobileBreakpoint = 480
 
 	const mediaQuery = getMediaQuery( device, tabletBreakpoint, mobileBreakpoint )
 	if ( mediaQuery ) {

From b0ce78d62e18444d6fe55e022a96f55bbba93866 Mon Sep 17 00:00:00 2001
From: Alquen Sarmiento <sarmientoalquen@gmail.com>
Date: Tue, 26 May 2026 14:30:51 +0800
Subject: [PATCH 2/2] fix: compatibility for pre wp7

---
 src/compatibility/index.js          |  1 +
 src/compatibility/wp-pre-7/index.js | 21 +++++++++++++++++++++
 src/components/block-css/index.js   | 15 ++++++++++-----
 3 files changed, 32 insertions(+), 5 deletions(-)
 create mode 100644 src/compatibility/wp-pre-7/index.js

diff --git a/src/compatibility/index.js b/src/compatibility/index.js
index 35febbb902..30f154b729 100644
--- a/src/compatibility/index.js
+++ b/src/compatibility/index.js
@@ -1,2 +1,3 @@
 import './kadence-theme'
 import './wp-6-2'
+import './wp-pre-7'
diff --git a/src/compatibility/wp-pre-7/index.js b/src/compatibility/wp-pre-7/index.js
new file mode 100644
index 0000000000..404007ac92
--- /dev/null
+++ b/src/compatibility/wp-pre-7/index.js
@@ -0,0 +1,21 @@
+/**
+ * WordPress dependencies
+ */
+import { addFilter } from '@wordpress/hooks'
+
+/**
+ * Internal dependencies
+ */
+import { semverCompare } from '~stackable/util'
+import { wpVersion } from 'stackable'
+
+addFilter( 'stackable.block-css.editor-preview-breakpoints', 'stackable/wp-pre-7', breakpoints => {
+	if ( wpVersion && semverCompare( wpVersion, '<', '7.0' ) ) {
+		return {
+			tablet: 781,
+			mobile: 361,
+		}
+	}
+
+	return breakpoints
+} )
diff --git a/src/components/block-css/index.js b/src/components/block-css/index.js
index 490b942b2b..47956abd95 100644
--- a/src/components/block-css/index.js
+++ b/src/components/block-css/index.js
@@ -535,11 +535,16 @@ function createCssEdit( selector, rule, value, device = 'desktop', vendorPrefixe
 	}
 	css = `\n${ selector } {\n\t${ css }\n}`
 
-	// Match the Block Editor's fixed preview widths
-	// In WordPress 7.0, the preview widths have changed,
-	// see https://github.com/WordPress/gutenberg/pull/74339
-	const tabletBreakpoint = 782
-	const mobileBreakpoint = 480
+	// Match the Block Editor's fixed preview widths. getMediaQuery subtracts 1,
+	// so these default values target 781px tablet and 479px mobile in WordPress 7.0.
+	// https://github.com/WordPress/gutenberg/pull/74339
+	const { tablet: tabletBreakpoint, mobile: mobileBreakpoint } = applyFilters(
+		'stackable.block-css.editor-preview-breakpoints',
+		{
+			tablet: 782,
+			mobile: 480,
+		}
+	)
 
 	const mediaQuery = getMediaQuery( device, tabletBreakpoint, mobileBreakpoint )
 	if ( mediaQuery ) {