Editor: Unify device preview styles

WordPress · Dec 8, 2023 · df1360d · df1360d
1 parent 8a702c3
commit df1360d
Show file tree

Hide file tree

Showing 5 changed files with 50 additions and 115 deletions.
diff --git a/packages/edit-post/src/components/visual-editor/index.js b/packages/edit-post/src/components/visual-editor/index.js
@@ -10,12 +10,8 @@ import {
 	store as editorStore,
 	privateApis as editorPrivateApis,
 } from '@wordpress/editor';
-import {
-	BlockTools,
-	__experimentalUseResizeCanvas as useResizeCanvas,
-} from '@wordpress/block-editor';
+import { BlockTools } from '@wordpress/block-editor';
 import { useRef, useMemo } from '@wordpress/element';
-import { __unstableMotion as motion } from '@wordpress/components';
 import { useSelect } from '@wordpress/data';
 import { store as blocksStore } from '@wordpress/blocks';
 
@@ -31,20 +27,17 @@ const isGutenbergPlugin = process.env.IS_GUTENBERG_PLUGIN ? true : false;
 
 export default function VisualEditor( { styles } ) {
 	const {
-		deviceType,
 		isWelcomeGuideVisible,
 		renderingMode,
 		isBlockBasedTheme,
 		hasV3BlocksOnly,
 	} = useSelect( ( select ) => {
 		const { isFeatureActive } = select( editPostStore );
-		const { getEditorSettings, getRenderingMode, getDeviceType } =
-			select( editorStore );
+		const { getEditorSettings, getRenderingMode } = select( editorStore );
 		const { getBlockTypes } = select( blocksStore );
 		const editorSettings = getEditorSettings();
 
 		return {
-			deviceType: getDeviceType(),
 			isWelcomeGuideVisible: isFeatureActive( 'welcomeGuide' ),
 			renderingMode: getRenderingMode(),
 			isBlockBasedTheme: editorSettings.__unstableIsBlockBasedTheme,
@@ -57,43 +50,12 @@ export default function VisualEditor( { styles } ) {
 		( select ) => select( editPostStore ).hasMetaBoxes(),
 		[]
 	);
-	const desktopCanvasStyles = {
-		height: '100%',
-		width: '100%',
-		marginLeft: 'auto',
-		marginRight: 'auto',
-		display: 'flex',
-		flexFlow: 'column',
-		// Default background color so that grey
-		// .edit-post-editor-regions__content color doesn't show through.
-		background: 'white',
-	};
-	const templateModeStyles = {
-		...desktopCanvasStyles,
-		borderRadius: '2px 2px 0 0',
-		border: '1px solid #ddd',
-		borderBottom: 0,
-	};
-	const resizedCanvasStyles = useResizeCanvas( deviceType );
-	const previewMode = 'is-' + deviceType.toLowerCase() + '-preview';
-
-	let animatedStyles =
-		renderingMode === 'template-only'
-			? templateModeStyles
-			: desktopCanvasStyles;
-	if ( resizedCanvasStyles ) {
-		animatedStyles = resizedCanvasStyles;
-	}
 
 	let paddingBottom;
 
 	// Add a constant padding for the typewritter effect. When typing at the
 	// bottom, there needs to be room to scroll up.
-	if (
-		! hasMetaBoxes &&
-		! resizedCanvasStyles &&
-		renderingMode === 'post-only'
-	) {
+	if ( ! hasMetaBoxes && renderingMode === 'post-only' ) {
 		paddingBottom = '40vh';
 	}
 
@@ -115,9 +77,7 @@ export default function VisualEditor( { styles } ) {
 	const isToBeIframed =
 		( ( hasV3BlocksOnly || ( isGutenbergPlugin && isBlockBasedTheme ) ) &&
 			! hasMetaBoxes ) ||
-		renderingMode === 'template-only' ||
-		deviceType === 'Tablet' ||
-		deviceType === 'Mobile';
+		renderingMode === 'template-only';
 
 	return (
 		<BlockTools
@@ -127,28 +87,14 @@ export default function VisualEditor( { styles } ) {
 				'has-inline-canvas': ! isToBeIframed,
 			} ) }
 		>
-			<motion.div
-				className="edit-post-visual-editor__content-area"
-				animate={ {
-					padding:
-						renderingMode === 'template-only' ? '48px 48px 0' : 0,
-				} }
-			>
-				<motion.div
-					animate={ animatedStyles }
-					initial={ desktopCanvasStyles }
-					className={ previewMode }
-				>
-					<EditorCanvas
-						ref={ ref }
-						disableIframe={ ! isToBeIframed }
-						styles={ styles }
-						// We should auto-focus the canvas (title) on load.
-						// eslint-disable-next-line jsx-a11y/no-autofocus
-						autoFocus={ ! isWelcomeGuideVisible }
-					/>
-				</motion.div>
-			</motion.div>
+			<EditorCanvas
+				ref={ ref }
+				disableIframe={ ! isToBeIframed }
+				styles={ styles }
+				// We should auto-focus the canvas (title) on load.
+				// eslint-disable-next-line jsx-a11y/no-autofocus
+				autoFocus={ ! isWelcomeGuideVisible }
+			/>
 		</BlockTools>
 	);
 }
diff --git a/packages/edit-post/src/editor.native.js b/packages/edit-post/src/editor.native.js
@@ -9,7 +9,7 @@ import { GestureHandlerRootView } from 'react-native-gesture-handler';
  * WordPress dependencies
  */
 import { Component } from '@wordpress/element';
-import { EditorProvider, store as editorStore } from '@wordpress/editor';
+import { EditorProvider } from '@wordpress/editor';
 import { parse, serialize, store as blocksStore } from '@wordpress/blocks';
 import { withDispatch, withSelect } from '@wordpress/data';
 import { compose } from '@wordpress/compose';
@@ -195,12 +195,9 @@ export default compose( [
 		const { isFeatureActive, getEditorMode, getHiddenBlockTypes } =
 			select( editPostStore );
 		const { getBlockTypes } = select( blocksStore );
-		const { getDeviceType } = select( editorStore );
 
 		return {
-			hasFixedToolbar:
-				isFeatureActive( 'fixedToolbar' ) ||
-				getDeviceType() !== 'Desktop',
+			hasFixedToolbar: isFeatureActive( 'fixedToolbar' ),
 			focusMode: isFeatureActive( 'focusMode' ),
 			mode: getEditorMode(),
 			hiddenBlockTypes: getHiddenBlockTypes(),

diff --git a/packages/edit-site/src/components/block-editor/editor-canvas.js b/packages/edit-site/src/components/block-editor/editor-canvas.js
@@ -6,18 +6,12 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import {
-	__experimentalUseResizeCanvas as useResizeCanvas,
-	store as blockEditorStore,
-} from '@wordpress/block-editor';
+import { store as blockEditorStore } from '@wordpress/block-editor';
 import { useSelect, useDispatch } from '@wordpress/data';
 import { ENTER, SPACE } from '@wordpress/keycodes';
 import { useState, useEffect, useMemo } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
-import {
-	privateApis as editorPrivateApis,
-	store as editorStore,
-} from '@wordpress/editor';
+import { privateApis as editorPrivateApis } from '@wordpress/editor';
 
 /**
  * Internal dependencies
@@ -38,33 +32,24 @@ function EditorCanvas( {
 	contentRef,
 	...props
 } ) {
-	const {
-		hasBlocks,
-		isFocusMode,
-		templateType,
-		canvasMode,
-		deviceType,
-		isZoomOutMode,
-	} = useSelect( ( select ) => {
-		const { getBlockCount, __unstableGetEditorMode } =
-			select( blockEditorStore );
-		const { getEditedPostType, getCanvasMode } = unlock(
-			select( editSiteStore )
-		);
-		const { getDeviceType } = select( editorStore );
-		const _templateType = getEditedPostType();
+	const { hasBlocks, isFocusMode, templateType, canvasMode, isZoomOutMode } =
+		useSelect( ( select ) => {
+			const { getBlockCount, __unstableGetEditorMode } =
+				select( blockEditorStore );
+			const { getEditedPostType, getCanvasMode } = unlock(
+				select( editSiteStore )
+			);
+			const _templateType = getEditedPostType();
 
-		return {
-			templateType: _templateType,
-			isFocusMode: FOCUSABLE_ENTITIES.includes( _templateType ),
-			deviceType: getDeviceType(),
-			isZoomOutMode: __unstableGetEditorMode() === 'zoom-out',
-			canvasMode: getCanvasMode(),
-			hasBlocks: !! getBlockCount(),
-		};
-	}, [] );
+			return {
+				templateType: _templateType,
+				isFocusMode: FOCUSABLE_ENTITIES.includes( _templateType ),
+				isZoomOutMode: __unstableGetEditorMode() === 'zoom-out',
+				canvasMode: getCanvasMode(),
+				hasBlocks: !! getBlockCount(),
+			};
+		}, [] );
 	const { setCanvasMode } = unlock( useDispatch( editSiteStore ) );
-	const deviceStyles = useResizeCanvas( deviceType );
 	const [ isFocused, setIsFocused ] = useState( false );
 
 	useEffect( () => {
@@ -132,7 +117,6 @@ function EditorCanvas( {
 				expand: isZoomOutMode,
 				scale: isZoomOutMode ? 0.45 : undefined,
 				frameSize: isZoomOutMode ? 100 : undefined,
-				style: enableResizing ? {} : deviceStyles,
 				className: classnames(
 					'edit-site-visual-editor__editor-canvas',
 					{

diff --git a/packages/edit-site/src/components/header-edit-mode/document-tools/index.js b/packages/edit-site/src/components/header-edit-mode/document-tools/index.js
@@ -42,13 +42,11 @@ export default function DocumentTools( {
 		useSelect( ( select ) => {
 			const { isInserterOpened, isListViewOpened, getEditorMode } =
 				select( editSiteStore );
-			const { getDeviceType } = select( editorStore );
 			const { getShortcutRepresentation } = select(
 				keyboardShortcutsStore
 			);
 
 			return {
-				deviceType: getDeviceType(),
 				isInserterOpen: isInserterOpened(),
 				isListViewOpen: isListViewOpened(),
 				listViewShortcut: getShortcutRepresentation(

diff --git a/packages/editor/src/components/editor-canvas/index.js b/packages/editor/src/components/editor-canvas/index.js
@@ -14,6 +14,7 @@ import {
 	useSettings,
 	__experimentalRecursionProvider as RecursionProvider,
 	privateApis as blockEditorPrivateApis,
+	__experimentalUseResizeCanvas as useResizeCanvas,
 } from '@wordpress/block-editor';
 import { useEffect, useRef, useMemo, forwardRef } from '@wordpress/element';
 import { useSelect } from '@wordpress/data';
@@ -90,14 +91,18 @@ function EditorCanvas(
 		editedPostTemplate = {},
 		wrapperBlockName,
 		wrapperUniqueId,
+		deviceType,
 	} = useSelect( ( select ) => {
 		const {
 			getCurrentPostId,
 			getCurrentPostType,
 			getCurrentTemplateId,
 			getEditorSettings,
 			getRenderingMode,
+			getDeviceType,
 		} = select( editorStore );
+		const { getPostType, canUser, getEditedEntityRecord } =
+			select( coreStore );
 		const postTypeSlug = getCurrentPostType();
 		const _renderingMode = getRenderingMode();
 		let _wrapperBlockName;
@@ -110,14 +115,11 @@ function EditorCanvas(
 
 		const editorSettings = getEditorSettings();
 		const supportsTemplateMode = editorSettings.supportsTemplateMode;
-		const postType = select( coreStore ).getPostType( postTypeSlug );
-		const canEditTemplate = select( coreStore ).canUser(
-			'create',
-			'templates'
-		);
+		const postType = getPostType( postTypeSlug );
+		const canEditTemplate = canUser( 'create', 'templates' );
 		const currentTemplateId = getCurrentTemplateId();
 		const template = currentTemplateId
-			? select( coreStore ).getEditedEntityRecord(
+			? getEditedEntityRecord(
 					'postType',
 					'wp_template',
 					currentTemplateId
@@ -135,6 +137,7 @@ function EditorCanvas(
 					: undefined,
 			wrapperBlockName: _wrapperBlockName,
 			wrapperUniqueId: getCurrentPostId(),
+			deviceType: getDeviceType(),
 		};
 	}, [] );
 	const { isCleanNewPost } = useSelect( editorStore );
@@ -152,6 +155,7 @@ function EditorCanvas(
 		};
 	}, [] );
 
+	const deviceStyles = useResizeCanvas( deviceType );
 	const [ globalLayoutSettings ] = useSettings( 'layout' );
 
 	// fallbackLayout is used if there is no Post Content,
@@ -292,11 +296,16 @@ function EditorCanvas(
 
 	return (
 		<BlockCanvas
-			shouldIframe={ ! disableIframe }
+			shouldIframe={
+				! disableIframe || [ 'Tablet', 'Mobile' ].includes( deviceType )
+			}
 			contentRef={ contentRef }
 			styles={ styles }
 			height="100%"
-			iframeProps={ iframeProps }
+			iframeProps={ {
+				...iframeProps,
+				style: { ...iframeProps?.style, ...deviceStyles },
+			} }
 		>
 			{ themeSupportsLayout &&
 				! themeHasDisabledLayoutStyles &&
@@ -348,6 +357,7 @@ function EditorCanvas(
 				<BlockList
 					className={ classnames(
 						className,
+						'is-' + deviceType.toLowerCase() + '-preview',
 						renderingMode !== 'post-only'
 							? 'wp-site-blocks'
 							: `${ blockListLayoutClass } wp-block-post-content` // Ensure root level blocks receive default/flow blockGap styling rules.