fix: update the editor breakpoints with wordpress 7.0 changes (#3711)

* fix: update the editor breakpoints with wordpress 7.0 changes

* fix: compatibility for pre wp7

Author: Arukuen

src/compatibility/index.js

@@ -1,2 +1,3 @@
 import './kadence-theme'
 import './wp-6-2'
+import './wp-pre-7'

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
+} )

src/components/block-css/index.js

@@ -535,9 +535,16 @@ 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. 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 ) {