From df1360d5765ed22ded65ae404583a7b3832841d4 Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Fri, 8 Dec 2023 15:23:56 +0100 Subject: [PATCH] Editor: Unify device preview styles --- .../src/components/visual-editor/index.js | 78 +++---------------- packages/edit-post/src/editor.native.js | 7 +- .../components/block-editor/editor-canvas.js | 52 +++++-------- .../header-edit-mode/document-tools/index.js | 2 - .../src/components/editor-canvas/index.js | 26 +++++-- 5 files changed, 50 insertions(+), 115 deletions(-) diff --git a/packages/edit-post/src/components/visual-editor/index.js b/packages/edit-post/src/components/visual-editor/index.js index 5d309947a37c2..b929e03bc453a 100644 --- 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 ( - - - - - + ); } diff --git a/packages/edit-post/src/editor.native.js b/packages/edit-post/src/editor.native.js index 49b6022d6c05b..17e2ad1780f1d 100644 --- 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 index bf40c655b4477..d7dbf6fb07a7a 100644 --- 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 index eefc6668b5b95..53d7de6fba18f 100644 --- 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 index a0e82694b1044..921f3ce23c0ee 100644 --- 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,6 +91,7 @@ function EditorCanvas( editedPostTemplate = {}, wrapperBlockName, wrapperUniqueId, + deviceType, } = useSelect( ( select ) => { const { getCurrentPostId, @@ -97,7 +99,10 @@ function EditorCanvas( 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 ( { themeSupportsLayout && ! themeHasDisabledLayoutStyles && @@ -348,6 +357,7 @@ function EditorCanvas(