fix: stackable should follow editor breakpoints from theme if valid

e2e/tests/editor-theme-viewports.spec.ts

@@ -0,0 +1,150 @@
+import { test, expect } from 'e2e/test-utils'
+
+const TABLET_VIEWPORT = '1000px'
+const MOBILE_VIEWPORT = '690px'
+
+const getUserGlobalStylesId = async requestUtils => {
+	const themes = await requestUtils.rest( { path: '/wp/v2/themes?status=active' } )
+	const href = themes?.[ 0 ]?._links?.[ 'wp:user-global-styles' ]?.[ 0 ]?.href
+	if ( ! href ) {
+		return null
+	}
+	return String( href ).split( '/' ).pop()
+}
+
+const setUserViewportSettings = async ( requestUtils, viewport ) => {
+	const id = await getUserGlobalStylesId( requestUtils )
+	if ( ! id ) {
+		return null
+	}
+
+	const current = await requestUtils.rest( { path: `/wp/v2/global-styles/${ id }` } )
+	await requestUtils.rest( {
+		method: 'POST',
+		path: `/wp/v2/global-styles/${ id }`,
+		data: {
+			settings: {
+				...( current.settings || {} ),
+				viewport,
+			},
+		},
+	} )
+	return id
+}
+
+const setEditorDeviceType = async ( page, deviceType ) => {
+	await page.evaluate( device => {
+		const dispatch = window.wp.data.dispatch
+		if ( dispatch( 'core/editor' )?.setDeviceType ) {
+			dispatch( 'core/editor' ).setDeviceType( device )
+			return
+		}
+		if ( dispatch( 'core/edit-post' )?.__experimentalSetPreviewDeviceType ) {
+			dispatch( 'core/edit-post' ).__experimentalSetPreviewDeviceType( device )
+		}
+	}, deviceType )
+}
+
+test.describe( 'Editor theme viewports', () => {
+	let pid = null
+	let stylesId = null
+	let previousSettings = null
+
+	test.beforeEach( async ( { editor, admin, requestUtils } ) => {
+		const wpVersion = process.env.WP_VERSION || 'latest'
+		test.skip( wpVersion !== 'latest' && wpVersion < '7.1', 'settings.viewport requires WordPress 7.1.' )
+
+		const id = await getUserGlobalStylesId( requestUtils )
+		test.skip( ! id, 'User global styles REST is unavailable.' )
+
+		stylesId = id
+		previousSettings = ( await requestUtils.rest( {
+			path: `/wp/v2/global-styles/${ id }`,
+		} ) ).settings || {}
+
+		const saved = await setUserViewportSettings( requestUtils, {
+			tablet: TABLET_VIEWPORT,
+			mobile: MOBILE_VIEWPORT,
+		} )
+		test.skip( ! saved, 'Could not write settings.viewport via Global Styles REST.' )
+
+		const after = await requestUtils.rest( { path: `/wp/v2/global-styles/${ id }` } )
+		test.skip(
+			after?.settings?.viewport?.tablet !== TABLET_VIEWPORT ||
+			after?.settings?.viewport?.mobile !== MOBILE_VIEWPORT,
+			'Global Styles REST did not persist custom viewport settings.'
+		)
+
+		await admin.createNewPost( { title: 'Editor theme viewports' } )
+		await editor.saveDraft()
+		pid = new URLSearchParams( new URL( editor.page.url() ).search ).get( 'post' )
+	} )
+
+	test.afterEach( async ( { requestUtils } ) => {
+		if ( stylesId ) {
+			await requestUtils.rest( {
+				method: 'POST',
+				path: `/wp/v2/global-styles/${ stylesId }`,
+				data: { settings: previousSettings || {} },
+			} ).catch( () => undefined )
+		}
+		if ( pid ) {
+			await requestUtils.deletePost( pid )
+		}
+	} )
+
+	test( 'tablet preview uses theme viewport settings for Stackable styles', async ( {
+		page,
+		editor,
+	} ) => {
+		await editor.insertBlock( {
+			name: 'stackable/text',
+			attributes: {
+				text: 'theme viewport preview',
+				fontSize: '16',
+				fontSizeTablet: '48',
+			},
+		} )
+
+		const text = editor.canvas.locator( '[data-type="stackable/text"] p' ).first()
+		await expect( text ).toBeVisible()
+
+		await setEditorDeviceType( page, 'Tablet' )
+
+		await expect.poll( async () => {
+			return page.evaluate( () => {
+				return window.wp.data.select( 'core/editor' )?.getDeviceType?.() ||
+					window.wp.data.select( 'core/edit-post' )?.__experimentalGetPreviewDeviceType?.() ||
+					''
+			} )
+		} ).toBe( 'Tablet' )
+
+		const preview = await page.evaluate( () => {
+			const editorSettings = window.wp.data.select( 'core/editor' )?.getEditorSettings?.() || {}
+			const blockSettings = window.wp.data.select( 'core/block-editor' )?.getSettings?.() || {}
+			const canvas = document.querySelector( 'iframe[name="editor-canvas"], iframe.edit-post-visual-editor__content-area' )
+			const canvasWidth = canvas ? Math.round( canvas.getBoundingClientRect().width ) : null
+			const features = blockSettings.__experimentalFeatures || editorSettings.__experimentalFeatures || {}
+			return {
+				stackableViewports: window.stackable?.settings?.stackable_editor_viewport_breakpoints || null,
+				featuresViewport: features.viewport || null,
+				canvasWidth,
+			}
+		} )
+
+		expect(
+			preview.featuresViewport?.tablet === TABLET_VIEWPORT ||
+			preview.stackableViewports?.tablet === TABLET_VIEWPORT,
+			`Editor did not see custom viewports: ${ JSON.stringify( preview ) }`
+		).toBeTruthy()
+
+		// Custom tablet is 1000px. The editor chrome can clamp the canvas below
+		// that, but it must stay wider than Stackable's old 781px query.
+		expect(
+			preview.canvasWidth,
+			`Tablet canvas should be wider than 781px so the pre-fix query misses. Got ${ JSON.stringify( preview ) }`
+		).toBeGreaterThan( 781 )
+
+		await expect( text ).toHaveCSS( 'font-size', '48px' )
+	} )
+} )

gulpfile.js

@@ -571,15 +571,10 @@ exit;
 
 gulp.task( 'style-editor', function() {
 	return gulp.src( [ path.resolve( __dirname, './src/**/editor.scss' ), '!' + path.resolve( __dirname, './src/deprecated/**/editor.scss' ) ] )
-		// Override the breakpoints in the editor in
-		// src/styles/breakpoints.scss, we do it here because there are various
-		// files that use the breakpoints and it's easier to override it here.
+		// The active theme can change the editor preview widths at runtime.
+		// Use the editor's current device class rather than fixed Sass breakpoints.
 		.pipe( sassVariables( {
-			// 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
-			'$desktop-width': 782,
-			'$tablet-width': 480,
+			'$use-editor-preview-classes': true,
 		} ) )
 		.pipe( sass( sassOptions ).on( 'error', sass.logError ) )
 		.pipe( concat( 'editor_blocks.css' ) )

src/components/block-css/index.js

@@ -17,6 +17,7 @@ import {
 	getBlockUniqueClassname,
 	getDependencyAttrnamesFast,
 	getMediaQuery,
+	getViewportMediaQuery,
 	isVersionSupported,
 	prependClass,
 } from './util'
@@ -31,6 +32,7 @@ import {
  * External dependencies
  */
 import { pick, kebabCase } from 'lodash'
+import { settings } from 'stackable'
 
 /**
  * WordPress dependencies
@@ -546,7 +548,12 @@ function createCssEdit( selector, rule, value, device = 'desktop', vendorPrefixe
 		}
 	)
 
-	const mediaQuery = getMediaQuery( device, tabletBreakpoint, mobileBreakpoint )
+	const editorBreakpoints = settings.stackable_editor_breakpoints || {}
+	const mediaQuery = getViewportMediaQuery( device, settings.stackable_editor_viewport_breakpoints ) || getMediaQuery(
+		device,
+		editorBreakpoints.tablet || tabletBreakpoint,
+		editorBreakpoints.mobile || mobileBreakpoint
+	)
 	if ( mediaQuery ) {
 		css = `\n${ mediaQuery } {${ css }\n}`
 	}

src/components/block-css/util.js

@@ -33,7 +33,41 @@ export const getMediaQuery = ( devices = 'desktop', breakDesktop = 1024, breakTa
 	 } else if ( devices === 'mobile' ) {
 		 return '@media screen and (max-width: ' + ( breakTablet - 1 ) + 'px)'
 	 }
-	 return null
+	return null
+}
+
+/**
+ * Forms a media query string from WordPress theme.json viewport settings.
+ *
+ * WordPress 7.1 allows themes to configure these values and uses the same
+ * ranges for responsive editor previews. Unlike getMediaQuery, these are
+ * maximum viewport widths rather than the start of the next device range.
+ *
+ * @param {string} devices A list of devices: desktop, tablet or mobile.
+ * @param {Object} viewports WordPress viewport settings.
+ * @param {string} viewports.tablet Maximum Tablet viewport width.
+ * @param {string} viewports.mobile Maximum Mobile viewport width.
+ * @return {string|null} A media query, or null for missing settings.
+ */
+export const getViewportMediaQuery = ( devices = 'desktop', viewports = {} ) => {
+	const { tablet, mobile } = viewports
+	if ( ! tablet || ! mobile ) {
+		return null
+	}
+
+	if ( devices === 'desktopTablet' ) {
+		return `@media screen and (width > ${ mobile })`
+	} else if ( devices === 'desktopOnly' ) {
+		return `@media screen and (width > ${ tablet })`
+	} else if ( devices === 'tablet' ) {
+		return `@media screen and (width <= ${ tablet })`
+	} else if ( devices === 'tabletOnly' ) {
+		return `@media screen and (width > ${ mobile }) and (width <= ${ tablet })`
+	} else if ( devices === 'mobile' ) {
+		return `@media screen and (width <= ${ mobile })`
+	}
+
+	return null
 }
 
 /**

src/editor-settings.php

@@ -321,6 +321,22 @@ public function add_settings( $settings ) {
 			$settings['stackable_enable_heading_default_theme_margins_non_posts'] = get_option( 'stackable_enable_heading_default_theme_margins_non_posts' );
 			$settings['stackable_icon_list_block_default_icon'] = get_option( 'stackable_icon_list_block_default_icon' );
 
+			// WordPress 7.1 allows themes define the Tablet and Mobile editor preview
+			// breakpoints in theme.json. Keep Stackable's generated editor CSS in sync
+			// with those previews when the active theme provides valid values.
+			$viewport_breakpoints = function_exists( 'wp_get_global_settings' ) ? wp_get_global_settings( array( 'viewport' ) ) : array();
+			if (
+				is_array( $viewport_breakpoints ) &&
+				isset( $viewport_breakpoints['tablet'], $viewport_breakpoints['mobile'] ) &&
+				is_string( $viewport_breakpoints['tablet'] ) &&
+				is_string( $viewport_breakpoints['mobile'] )
+			) {
+				$settings['stackable_editor_viewport_breakpoints'] = array(
+					'tablet' => $viewport_breakpoints['tablet'],
+					'mobile' => $viewport_breakpoints['mobile'],
+				);
+			}
+
 			// Inserter variations are registered before the block Edit component renders,
 			// so provide the post type here.
 			$current_screen = function_exists( 'get_current_screen' ) ? get_current_screen() : null;