@wordpress/editor 14.49.0 → 14.50.0

package/src/components/visual-editor/index.js

@@ -14,7 +14,6 @@ import {
 	useSettings,
 	RecursionProvider,
 	privateApis as blockEditorPrivateApis,
-	__experimentalUseResizeCanvas as useResizeCanvas,
 } from '@wordpress/block-editor';
 import { useEffect, useRef, useMemo } from '@wordpress/element';
 import { useSelect } from '@wordpress/data';
@@ -112,6 +111,7 @@ function VisualEditor( {
 		postType,
 		isPreview,
 		styles,
+		hasCanvasWidth,
 	} = useSelect( ( select ) => {
 		const {
 			getCurrentPostId,
@@ -120,6 +120,7 @@ function VisualEditor( {
 			getEditorSettings,
 			getRenderingMode,
 			getDeviceType,
+			getCanvasWidth,
 		} = unlock( select( editorStore ) );
 		const { getPostType, getEditedEntityRecord } = select( coreStore );
 		const postTypeSlug = getCurrentPostType();
@@ -161,6 +162,7 @@ function VisualEditor( {
 			postType: postTypeSlug,
 			isPreview: editorSettings.isPreviewMode,
 			styles: editorSettings.styles,
+			hasCanvasWidth: getCanvasWidth() !== undefined,
 		};
 	}, [] );
 	const { isCleanNewPost } = useSelect( editorStore );
@@ -185,7 +187,6 @@ function VisualEditor( {
 	}, [] );
 
 	const localRef = useRef();
-	const deviceStyles = useResizeCanvas( deviceType );
 	const [ globalLayoutSettings ] = useSettings( 'layout' );
 
 	// fallbackLayout is used if there is no Post Content,
@@ -319,17 +320,19 @@ function VisualEditor( {
 		.is-root-container.alignfull:where(.is-layout-flow) > :not(.alignleft):not(.alignright) { max-width: none;}`;
 
 	const enableResizing =
-		[
+		( [
 			NAVIGATION_POST_TYPE,
 			TEMPLATE_PART_POST_TYPE,
 			PATTERN_POST_TYPE,
 		].includes( postType ) &&
-		// Disable in previews / view mode.
-		! isPreview &&
-		// Disable resizing in mobile viewport.
-		! isMobileViewport &&
-		// Disable resizing in zoomed-out mode.
-		! isZoomedOut;
+			// Disable in previews / view mode.
+			! isPreview &&
+			// Disable resizing in mobile viewport.
+			! isMobileViewport &&
+			// Disable resizing in zoomed-out mode.
+			! isZoomedOut ) ||
+		// When the canvas has an explicit width, always allow resizing.
+		hasCanvasWidth;
 
 	const isNavigationPreview = postType === NAVIGATION_POST_TYPE && isPreview;
 
@@ -394,8 +397,12 @@ function VisualEditor( {
 				'edit-post-visual-editor',
 				className,
 				{
-					'has-padding': isFocusedEntity || enableResizing,
-					'is-resizable': enableResizing,
+					// Vertical padding frames a width-constrained canvas
+					// (device preview or after a resize) as a centered preview.
+					'has-vertical-padding': isFocusedEntity || hasCanvasWidth,
+					// Horizontal padding leaves room for the resize handles
+					// that appear on the left/right of a resizable canvas.
+					'has-horizontal-padding': isFocusedEntity || enableResizing,
 					'is-iframed': ! disableIframe,
 				}
 			) }
@@ -409,10 +416,7 @@ function VisualEditor( {
 					height="100%"
 					iframeProps={ {
 						...iframeProps,
-						style: {
-							...iframeProps?.style,
-							...deviceStyles,
-						},
+						style: iframeProps?.style,
 					} }
 				>
 					{ themeSupportsLayout &&

package/src/components/visual-editor/style.scss

@@ -3,6 +3,7 @@
 .editor-visual-editor {
 	position: relative;
 	display: flex;
+	max-height: 100%;
 
 	// This duplicates the iframe background but it's necessary in some situations
 	// when the iframe doesn't cover the whole canvas
@@ -19,12 +20,18 @@
 	// Centralize the editor horizontally (flex-direction is column).
 	align-items: center;
 
-	&.is-resizable {
-		max-height: 100%;
+	@media (prefers-reduced-motion: no-preference) {
+		transition: padding 0.2s ease-out;
 	}
 
-	&.has-padding {
-		padding: $grid-unit-30 $grid-unit-30 0;
+	&.has-vertical-padding {
+		padding-top: $grid-unit-30;
+		padding-bottom: $grid-unit-30;
+	}
+
+	&.has-horizontal-padding {
+		padding-left: $grid-unit-30;
+		padding-right: $grid-unit-30;
 	}
 
 	// In the iframed canvas this keeps extra scrollbars from appearing (when block toolbars overflow). In the

package/src/store/actions.js

@@ -30,6 +30,9 @@ import {
 	getNotificationArgumentsForTrashFail,
 } from './utils/notice-builder';
 import { unlock } from '../lock-unlock';
+import { setCanvasWidth } from './private-actions';
+import { getCanvasWidthByDeviceType } from '../utils/device-type';
+
 /**
  * Returns an action generator used in signalling that editor has initialized with
  * the specified post object and editor settings.
@@ -757,9 +760,9 @@ export const setRenderingMode =
  * @return {Object} Action object.
  */
 export function setDeviceType( deviceType ) {
-	return {
-		type: 'SET_DEVICE_TYPE',
-		deviceType,
+	return ( { dispatch } ) => {
+		const width = getCanvasWidthByDeviceType( deviceType );
+		dispatch( setCanvasWidth( width ) );
 	};
 }
 

package/src/store/constants.ts

@@ -1,3 +1,9 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { desktop, tablet, mobile } from '@wordpress/icons';
+
 /**
  * Set of post properties for which edits should assume a merging behavior,
  * assuming an object value.
@@ -37,3 +43,42 @@ export const DESIGN_POST_TYPES = [
 	PATTERN_POST_TYPE,
 	NAVIGATION_POST_TYPE,
 ];
+
+/*
+ * Contains the device types and their corresponding canvas width.
+ * Matches the breakpoints in packages/base-styles/_breakpoints.scss,
+ * and breakpoints in packages/compose/src/hooks/use-viewport-match/index.js.
+ * minus 1 to trigger the media query for device preview.
+ *
+ * These breakpoints are currently hardcoded, but are expected to become
+ * customizable via the `settings.viewport` values in theme.json in the future.
+ * See https://github.com/WordPress/gutenberg/pull/79104.
+ */
+export const DEVICE_TYPES: Record<
+	string,
+	{
+		value: string;
+		label: string;
+		icon: React.JSX.Element;
+		canvasWidth: number | undefined;
+	}
+> = {
+	Desktop: {
+		value: 'Desktop',
+		label: __( 'Desktop' ),
+		icon: desktop,
+		canvasWidth: undefined,
+	},
+	Tablet: {
+		value: 'Tablet',
+		label: __( 'Tablet' ),
+		icon: tablet,
+		canvasWidth: 782 - 1, // preview for useViewportMatch( 'medium', '<' )
+	},
+	Mobile: {
+		value: 'Mobile',
+		label: __( 'Mobile' ),
+		icon: mobile,
+		canvasWidth: 480 - 1, // preview for useViewportMatch( 'mobile', '<' )
+	},
+};

package/src/store/private-actions.js

@@ -17,35 +17,13 @@ import { dateI18n, getSettings as getDateSettings } from '@wordpress/date';
  */
 import isTemplateRevertable from './utils/is-template-revertable';
 import { buildRevisionsPageQuery } from './private-selectors';
+import {
+	getDeviceTypeByCanvasWidth,
+	VIEWPORT_STATE_BY_DEVICE_TYPE,
+} from '../utils/device-type';
 import { unlock } from '../lock-unlock';
 export * from '../dataviews/store/private-actions';
 
-const DEVICE_TYPE_BY_VIEWPORT_STATE = {
-	'@mobile': 'Mobile',
-	'@tablet': 'Tablet',
-};
-
-/**
- * Updates the editor preview device in response to a block-editor viewport
- * state signal.
- *
- * @param {Object}  options                   Viewport state change options.
- * @param {string}  options.viewport          Selected viewport state.
- * @param {boolean} options.showStateOnCanvas Whether canvas preview is enabled.
- */
-export const updateDeviceTypeForViewportState =
-	( { viewport = 'default', showStateOnCanvas = true } = {} ) =>
-	( { dispatch, registry } ) => {
-		if ( ! showStateOnCanvas ) {
-			return;
-		}
-
-		dispatch.setDeviceType(
-			DEVICE_TYPE_BY_VIEWPORT_STATE[ viewport ] ?? 'Desktop'
-		);
-		unlock( registry.dispatch( blockEditorStore ) ).resetZoomLevel();
-	};
-
 /**
  * Returns an action object used to set which template is currently being used/edited.
  *
@@ -603,6 +581,34 @@ export function resetStylesNavigation() {
 	};
 }
 
+/**
+ * Set the width of the canvas.
+ *
+ * @param {number} width The width of the canvas in pixels.
+ */
+export function setCanvasWidth( width ) {
+	return ( { dispatch, registry } ) => {
+		dispatch( {
+			type: 'SET_CANVAS_WIDTH',
+			width,
+		} );
+
+		// While Responsive editing is enabled, the canvas width also drives the
+		// viewport style state, whether changed via the device preview or by
+		// manually resizing the canvas.
+		if (
+			unlock( registry.select( blockEditorStore ) ).isResponsiveEditing()
+		) {
+			const deviceType = getDeviceTypeByCanvasWidth( width );
+			unlock(
+				registry.dispatch( blockEditorStore )
+			).setStyleStateViewport(
+				VIEWPORT_STATE_BY_DEVICE_TYPE[ deviceType ] ?? 'default'
+			);
+		}
+	};
+}
+
 /**
  * Set the current revision ID for revisions preview mode.
  * Pass a revision ID to enter revisions mode, or null to exit.

package/src/store/private-selectors.js

@@ -353,6 +353,16 @@ export function getShowStylebook( state ) {
 	return state.showStylebook ?? false;
 }
 
+/**
+ * Get the canvas width.
+ *
+ * @param {Object} state Global application state.
+ * @return {number} The canvas width in pixels.
+ */
+export function getCanvasWidth( state ) {
+	return state.canvasWidth;
+}
+
 /**
  * Returns the current revisions page number.
  *

package/src/store/reducer.js

@@ -277,19 +277,17 @@ export function renderingMode( state = 'post-only', action ) {
 }
 
 /**
- * Reducer returning the editing canvas device type.
+ * Reducer for the canvas width.
  *
- * @param {Object} state  Current state.
+ * @param {number} state  Current state.
  * @param {Object} action Dispatched action.
- *
- * @return {Object} Updated state.
+ * @return {number} Updated state.
  */
-export function deviceType( state = 'Desktop', action ) {
+export function canvasWidth( state = undefined, action ) {
 	switch ( action.type ) {
-		case 'SET_DEVICE_TYPE':
-			return action.deviceType;
+		case 'SET_CANVAS_WIDTH':
+			return action.width;
 	}
-
 	return state;
 }
 
@@ -500,7 +498,7 @@ export default combineReducers( {
 	editorSettings,
 	postAutosavingLock,
 	renderingMode,
-	deviceType,
+	canvasWidth,
 	removedPanels,
 	blockInserterPanel,
 	inserterSidebarToggleRef,

package/src/store/selectors.js

@@ -29,6 +29,7 @@ import { getPostRawValue } from './reducer';
 import { getTemplatePartIcon } from '../utils/get-template-part-icon';
 import { unlock } from '../lock-unlock';
 import { getTemplateInfo } from '../utils/get-template-info';
+import { getDeviceTypeByCanvasWidth } from '../utils/device-type';
 
 /**
  * Shared reference to an empty object for cases where it is important to avoid
@@ -1352,7 +1353,8 @@ export const getDeviceType = createRegistrySelector(
 		if ( isZoomOut ) {
 			return 'Desktop';
 		}
-		return state.deviceType;
+		const canvasWidth = state.canvasWidth;
+		return getDeviceTypeByCanvasWidth( canvasWidth );
 	}
 );
 

package/src/store/test/actions.js

@@ -12,8 +12,8 @@ import { store as preferencesStore } from '@wordpress/preferences';
  * Internal dependencies
  */
 
-import * as actions from '../actions';
 import { store as editorStore } from '..';
+import * as actions from '../actions';
 import { unlock } from '../../lock-unlock';
 
 const postId = 44;
@@ -64,36 +64,45 @@ const getMethod = ( options ) =>
 	options.headers?.[ 'X-HTTP-Method-Override' ] || options.method || 'GET';
 
 describe( 'Post actions', () => {
-	describe( 'updateDeviceTypeForViewportState', () => {
-		it( 'updates the editor device type for a viewport state', () => {
+	describe( 'setCanvasWidth', () => {
+		it( 'syncs the viewport style state while Responsive editing is enabled', () => {
 			const registry = createRegistryWithStores();
+			const getViewport = () =>
+				unlock(
+					registry.select( blockEditorStore )
+				).getStyleStateViewport();
+			const setCanvasWidth = ( width ) =>
+				unlock( registry.dispatch( editorStore ) ).setCanvasWidth(
+					width
+				);
 
 			unlock(
-				registry.dispatch( editorStore )
-			).updateDeviceTypeForViewportState( {
-				viewport: '@mobile',
-				showStateOnCanvas: true,
-			} );
+				registry.dispatch( blockEditorStore )
+			).setResponsiveEditing( true );
 
-			expect( registry.select( editorStore ).getDeviceType() ).toBe(
-				'Mobile'
-			);
+			// A tablet-sized canvas selects the tablet viewport.
+			setCanvasWidth( 600 );
+			expect( getViewport() ).toBe( '@tablet' );
+
+			// A mobile-sized canvas selects the mobile viewport.
+			setCanvasWidth( 400 );
+			expect( getViewport() ).toBe( '@mobile' );
+
+			// A full-width (desktop) canvas resets to the default viewport.
+			setCanvasWidth( undefined );
+			expect( getViewport() ).toBe( 'default' );
 		} );
 
-		it( 'keeps the editor device type when canvas preview is disabled', () => {
+		it( 'leaves the viewport style state untouched while Responsive editing is disabled', () => {
 			const registry = createRegistryWithStores();
-			registry.dispatch( editorStore ).setDeviceType( 'Tablet' );
+			const getViewport = () =>
+				unlock(
+					registry.select( blockEditorStore )
+				).getStyleStateViewport();
 
-			unlock(
-				registry.dispatch( editorStore )
-			).updateDeviceTypeForViewportState( {
-				viewport: '@mobile',
-				showStateOnCanvas: false,
-			} );
+			unlock( registry.dispatch( editorStore ) ).setCanvasWidth( 400 );
 
-			expect( registry.select( editorStore ).getDeviceType() ).toBe(
-				'Tablet'
-			);
+			expect( getViewport() ).toBe( 'default' );
 		} );
 	} );
 

package/src/utils/device-type.js

@@ -0,0 +1,46 @@
+/**
+ * Internal dependencies
+ */
+import { DEVICE_TYPES } from '../store/constants';
+
+/**
+ * Maps a device preview type to its corresponding viewport style state. Used
+ * when Responsive editing is enabled so the device preview drives which
+ * viewport block style edits are applied to.
+ *
+ * @type {Object}
+ */
+export const VIEWPORT_STATE_BY_DEVICE_TYPE = {
+	Desktop: 'default',
+	Tablet: '@tablet',
+	Mobile: '@mobile',
+};
+
+/**
+ * Gets the most appropriate device type based on the canvas width.
+ *
+ * @param {number} canvasWidth The canvas width in pixels.
+ * @return {string} The device type.
+ */
+export function getDeviceTypeByCanvasWidth( canvasWidth ) {
+	// Mobile
+	if ( canvasWidth && canvasWidth <= DEVICE_TYPES.Mobile.canvasWidth ) {
+		return DEVICE_TYPES.Mobile.value;
+	}
+	// Tablet
+	if ( canvasWidth && canvasWidth <= DEVICE_TYPES.Tablet.canvasWidth ) {
+		return DEVICE_TYPES.Tablet.value;
+	}
+	// Desktop
+	return DEVICE_TYPES.Desktop.value;
+}
+
+/**
+ * Get the canvas width by device type.
+ *
+ * @param {string} deviceType The device type.
+ * @return {number|undefined} The canvas width in pixels.
+ */
+export function getCanvasWidthByDeviceType( deviceType ) {
+	return DEVICE_TYPES[ deviceType ]?.canvasWidth;
+}