Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Editor: Unify device preview styles #56904

Merged
merged 1 commit into from
Dec 9, 2023
Merged

Editor: Unify device preview styles #56904

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
78 changes: 12 additions & 66 deletions packages/edit-post/src/components/visual-editor/index.js
View file
Open in desktop
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
Open in desktop
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' ),
Copy link
Member

Choose a reason for hiding this comment

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

Don't we still need this? Although I see the floating toolbar even in trunk for the post editor...

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Yeah, it's a left over for a very old behavior.

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
Open in desktop
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
Open in desktop
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
Open in desktop
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',
Copy link
Member

Choose a reason for hiding this comment

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

@youknowriad I got a ping from @sergiu-radu that we previous had this class on the .editor-styles-wrapper container, and since 6.5 on the .is-root-container div, so this is a small breaking change. @sergiu-radu, could you maybe give us some more info about why you were relying on this?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

We can consider it adding it to that wrapper too. It would be good to open a detailed issue about this.

Copy link

Choose a reason for hiding this comment

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

Hi guys 👋

No, this class was not on .editor-styles-wrapper but outside this container...

To be more specific, this class.is-desktop-preview was a direct child container of .edit-post-visual-editor__content-area container and inside it was the .editor-styles-wrapper.
Here is a screenshot - https://share.cleanshot.com/D1h4tF67

Now, in 6.5 the .is-desktop-preview class is placed on .is-root-container and this breaks a lot of things for us, and I think for other classic themes too.
Here is a screenshot - https://share.cleanshot.com/r57zPg57

We will try to make some tests and adjust our code first but if we won't succeed - will open an issue.

Thank you.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

To be clear, per the extensibility guidelines of Gutenberg, this is an internal modifier class. It's unfortunate that theme authors are relying on it. We can try to mitigate the issues though (the class will probably end up being present in two places)

Copy link
Member

Choose a reason for hiding this comment

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

@youknowriad Why was it needed to move it from outside the canvas to inside the canvas?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

This PR unified the behavior between post and site editors, which also meant some markup simplification (removing unnecessary wrappers in the post editor)

Copy link

@sergiu-radu sergiu-radu Apr 4, 2024 •
edited
Loading

Choose a reason for hiding this comment

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

Hey guys, we made some more investigations and yes, the problem seems to not be related to that class actually but something else (most likely because of 2 scenarios - when we have iframe on desktop and when we don't have the iframe).
We are still investigating this issue and will get back with more details.

Thank you!

Copy link
Contributor Author

Choose a reason for hiding this comment

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

I don't remember exactly but I believe this class was not present at all in the site editor and I just kept it around (for BC) but in a unified place. We can consider moving it to anther place in. EditorCanvas if needed but it shouldn't be something that the editor implementor have to think about. The device handling moved within EditorCanvas

renderingMode !== 'post-only'
? 'wp-site-blocks'
: `${ blockListLayoutClass } wp-block-post-content` // Ensure root level blocks receive default/flow blockGap styling rules.
Expand Down
Loading