Skip to content

Commit

Permalink
Editor: Unify device preview styles (#56904)
Browse files Browse the repository at this point in the history
  • Loading branch information
@youknowriad
youknowriad authored Dec 9, 2023
1 parent 83434bf commit 1783a4e
Show file tree
Hide file tree
Showing 5 changed files with 50 additions and 115 deletions.
78 changes: 12 additions & 66 deletions packages/edit-post/src/components/visual-editor/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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';

Expand All @@ -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,
Expand All @@ -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';
}

Expand All @@ -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
Expand All @@ -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>
);
}
7 changes: 2 additions & 5 deletions packages/edit-post/src/editor.native.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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(),
Expand Down
52 changes: 18 additions & 34 deletions packages/edit-site/src/components/block-editor/editor-canvas.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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( () => {
Expand Down Expand Up @@ -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',
{
Expand Down
2 changes: 0 additions & 2 deletions packages/edit-site/src/components/header-edit-mode/document-tools/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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(
Expand Down
26 changes: 18 additions & 8 deletions packages/editor/src/components/editor-canvas/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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;
Expand All @@ -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
Expand All @@ -135,6 +137,7 @@ function EditorCanvas(
: undefined,
wrapperBlockName: _wrapperBlockName,
wrapperUniqueId: getCurrentPostId(),
deviceType: getDeviceType(),
};
}, [] );
const { isCleanNewPost } = useSelect( editorStore );
Expand All @@ -152,6 +155,7 @@ function EditorCanvas(
};
}, [] );

const deviceStyles = useResizeCanvas( deviceType );
const [ globalLayoutSettings ] = useSettings( 'layout' );

// fallbackLayout is used if there is no Post Content,
Expand Down Expand Up @@ -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 &&
Expand Down Expand Up @@ -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.
Expand Down

1 comment on commit 1783a4e

@github-actions
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Flaky tests detected in 1783a4e.
Some tests passed with failed attempts. The failures may not be related to this commit but are still reported for visibility. See the documentation for more information.

🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/7153584216
📝 Reported issues:

Please sign in to comment.