Skip to content

Commit

Permalink
Editor: Move the resizing of the editor to the EditorCanvas component (…
Browse files Browse the repository at this point in the history 
…#61896)

Co-authored-by: youknowriad <youknowriad@git.wordpress.org>
Co-authored-by: jameskoster <jameskoster@git.wordpress.org>
  • Loading branch information
@youknowriad @jameskoster
3 people authored May 23, 2024
1 parent 79d79ff commit 19508f9
Show file tree
Hide file tree
Showing 15 changed files with 313 additions and 308 deletions.
5 changes: 0 additions & 5 deletions packages/block-editor/src/components/block-canvas/style.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,3 @@ iframe[name="editor-canvas"] {
display: block;
background-color: $gray-300;
}


iframe[name="editor-canvas"].has-editor-padding {
padding: $grid-unit-30 $grid-unit-30 0;
}
4 changes: 4 additions & 0 deletions packages/block-editor/src/components/iframe/content.scss
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,7 @@
.block-editor-iframe__body {
position: relative;
}

.block-editor-iframe__container {
width: 100%;
height: 100%;
Expand Down
18 changes: 14 additions & 4 deletions packages/edit-post/src/components/visual-editor/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,12 @@ import { usePaddingAppender } from './use-padding-appender';
const { EditorCanvas } = unlock( editorPrivateApis );

const isGutenbergPlugin = globalThis.IS_GUTENBERG_PLUGIN ? true : false;
const DESIGN_POST_TYPES = [
'wp_template',
'wp_template_part',
'wp_block',
'wp_navigation',
];

export default function VisualEditor( { styles } ) {
const {
Expand All @@ -34,22 +40,25 @@ export default function VisualEditor( { styles } ) {
hasV3BlocksOnly,
isEditingTemplate,
isZoomedOutView,
postType,
} = useSelect( ( select ) => {
const { isFeatureActive } = select( editPostStore );
const { getEditorSettings, getRenderingMode } = select( editorStore );
const { getEditorSettings, getRenderingMode, getCurrentPostType } =
select( editorStore );
const { getBlockTypes } = select( blocksStore );
const { __unstableGetEditorMode } = select( blockEditorStore );
const editorSettings = getEditorSettings();
const _postType = getCurrentPostType();
return {
isWelcomeGuideVisible: isFeatureActive( 'welcomeGuide' ),
renderingMode: getRenderingMode(),
isBlockBasedTheme: editorSettings.__unstableIsBlockBasedTheme,
hasV3BlocksOnly: getBlockTypes().every( ( type ) => {
return type.apiVersion >= 3;
} ),
isEditingTemplate:
select( editorStore ).getCurrentPostType() === 'wp_template',
isEditingTemplate: _postType === 'wp_template',
isZoomedOutView: __unstableGetEditorMode() === 'zoom-out',
postType: _postType,
};
}, [] );
const hasMetaBoxes = useSelect(
Expand All @@ -66,7 +75,8 @@ export default function VisualEditor( { styles } ) {
if (
! isZoomedOutView &&
! hasMetaBoxes &&
renderingMode === 'post-only'
renderingMode === 'post-only' &&
! DESIGN_POST_TYPES.includes( postType )
) {
paddingBottom = '40vh';
}
Expand Down
11 changes: 3 additions & 8 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 @@ -28,7 +28,7 @@ import {

const { EditorCanvas: EditorCanvasRoot } = unlock( editorPrivateApis );

function EditorCanvas( { enableResizing, settings, children, ...props } ) {
function EditorCanvas( { settings, children } ) {
const {
hasBlocks,
isFocusMode,
Expand Down Expand Up @@ -109,11 +109,7 @@ function EditorCanvas( { enableResizing, settings, children, ...props } ) {
// Forming a "block formatting context" to prevent margin collapsing.
// @see https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context

css: `.is-root-container{display:flow-root;${
// Some themes will have `min-height: 100vh` for the root container,
// which isn't a requirement in auto resize mode.
enableResizing ? 'min-height:0!important;' : ''
}}body{position:relative; ${
css: `body{${
canvasMode === 'view'
? `min-height: 100vh; ${
currentPostIsTrashed ? '' : 'cursor: pointer;'
Expand All @@ -122,7 +118,7 @@ function EditorCanvas( { enableResizing, settings, children, ...props } ) {
}}}`,
},
],
[ settings.styles, enableResizing, canvasMode, currentPostIsTrashed ]
[ settings.styles, canvasMode, currentPostIsTrashed ]
);

return (
Expand All @@ -136,7 +132,6 @@ function EditorCanvas( { enableResizing, settings, children, ...props } ) {
className: clsx( 'edit-site-visual-editor__editor-canvas', {
'is-focused': isFocused && canvasMode === 'view',
} ),
...props,
...( canvasMode === 'view' ? viewModeIframeProps : {} ),
} }
>
Expand Down
73 changes: 8 additions & 65 deletions packages/edit-site/src/components/block-editor/site-editor-canvas.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,98 +6,41 @@ import clsx from 'clsx';
* WordPress dependencies
*/
import { useSelect } from '@wordpress/data';
import { useViewportMatch, useResizeObserver } from '@wordpress/compose';
import { store as blockEditorStore } from '@wordpress/block-editor';

/**
* Internal dependencies
*/
import ResizableEditor from './resizable-editor';
import EditorCanvas from './editor-canvas';
import EditorCanvasContainer from '../editor-canvas-container';
import useSiteEditorSettings from './use-site-editor-settings';
import { store as editSiteStore } from '../../store';
import {
FOCUSABLE_ENTITIES,
NAVIGATION_POST_TYPE,
TEMPLATE_POST_TYPE,
} from '../../utils/constants';
import { unlock } from '../../lock-unlock';
import { privateApis as routerPrivateApis } from '@wordpress/router';

const { useLocation } = unlock( routerPrivateApis );

export default function SiteEditorCanvas() {
const location = useLocation();
const { templateType, isFocusableEntity, isViewMode, isZoomOutMode } =
useSelect( ( select ) => {
const { getEditedPostType, getCanvasMode } = unlock(
select( editSiteStore )
);
const { __unstableGetEditorMode } = select( blockEditorStore );
const _templateType = getEditedPostType();
const { isViewMode } = useSelect( ( select ) => {
const { getCanvasMode } = unlock( select( editSiteStore ) );

return {
templateType: _templateType,
isFocusableEntity: FOCUSABLE_ENTITIES.includes( _templateType ),
isViewMode: getCanvasMode() === 'view',
isZoomOutMode: __unstableGetEditorMode() === 'zoom-out',
};
}, [] );
const isFocusMode = location.params.focusMode || isFocusableEntity;
const [ resizeObserver, sizes ] = useResizeObserver();
return {
isViewMode: getCanvasMode() === 'view',
};
}, [] );

const settings = useSiteEditorSettings();

const isMobileViewport = useViewportMatch( 'small', '<' );
const enableResizing =
isFocusMode &&
! isViewMode &&
// Disable resizing in mobile viewport.
! isMobileViewport &&
// Dsiable resizing in zoomed-out mode.
! isZoomOutMode &&
// Disable resizing when editing a template in focus mode.
templateType !== TEMPLATE_POST_TYPE;

const isTemplateTypeNavigation = templateType === NAVIGATION_POST_TYPE;
const isNavigationFocusMode = isTemplateTypeNavigation && isFocusMode;
const forceFullHeight = isNavigationFocusMode;

return (
<EditorCanvasContainer.Slot>
{ ( [ editorCanvasView ] ) =>
editorCanvasView ? (
<div className="edit-site-visual-editor is-focus-mode">
<div className="edit-site-visual-editor">
{ editorCanvasView }
</div>
) : (
<div
className={ clsx( 'edit-site-visual-editor', {
'is-focus-mode': isFocusMode || !! editorCanvasView,
'is-view-mode': isViewMode,
} ) }
>
<ResizableEditor
enableResizing={ enableResizing }
height={
sizes.height && ! forceFullHeight
? sizes.height
: '100%'
}
>
<EditorCanvas
enableResizing={ enableResizing }
settings={ settings }
>
{
// Avoid resize listeners when not needed,
// these will trigger unnecessary re-renders
// when animating the iframe width.
enableResizing && resizeObserver
}
</EditorCanvas>
</ResizableEditor>
<EditorCanvas settings={ settings } />
</div>
)
}
Expand Down
94 changes: 0 additions & 94 deletions packages/edit-site/src/components/block-editor/style.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,98 +40,4 @@
outline-offset: calc(-2 * var(--wp-admin-border-width-focus));
}
}


&.is-focus-mode {
.edit-site-layout.is-full-canvas & {
padding: $grid-unit-30;
}

.edit-site-visual-editor__editor-canvas {
max-height: 100%;
}

// To hide the horizontal scrollbar and show the drag handle on the
// left and right of the container.
.components-resizable-box__container {
overflow: visible;
}
}

& > .components-resizable-box__container {
margin: 0 auto;
}
}

.resizable-editor__drag-handle {
position: absolute;
top: 0;
bottom: 0;
padding: 0;
margin: auto 0;
width: $grid-unit-15;
appearance: none;
cursor: ew-resize;
outline: none;
background: none;
border-radius: $radius-block-ui;
border: 0;

&.is-variation-default {
height: 100px;
}

&.is-variation-separator {
height: 100%;
width: $grid-unit-30;
right: 0;

&::after {
width: 2px;
border-radius: 0;
background: transparent;
left: 50%;
transform: translateX(-1px);
right: 0;
transition: all ease 0.2s;
transition-delay: 0.1s;
@include reduce-motion;
}
}

&::after {
position: absolute;
top: $grid-unit-20;
left: $grid-unit-05;
right: 0;
bottom: $grid-unit-20;
content: "";
width: $grid-unit-05;
background-color: rgba($gray-700, 0.4);
border-radius: $radius-block-ui;
}

&.is-left {
// Subtract half of the handle width to properly center.
left: -$grid-unit-20 - math.div($grid-unit-05, 2);
}

&.is-right {
// Subtract half of the handle width to properly center.
right: -$grid-unit-20 - math.div($grid-unit-05, 2);
}

&:hover,
&:focus,
&:active {
opacity: 1;
&::after {
background-color: var(--wp-admin-theme-color);
}
}

&.is-variation-separator:focus::after {
border-radius: $radius-block-ui;
box-shadow: inset 0 0 0 2px var(--wp-admin-theme-color);
}
}
48 changes: 27 additions & 21 deletions packages/edit-site/src/components/editor-canvas-container/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,14 +13,18 @@ import { useDispatch, useSelect } from '@wordpress/data';
import { closeSmall } from '@wordpress/icons';
import { useFocusOnMount, useFocusReturn } from '@wordpress/compose';
import { store as preferencesStore } from '@wordpress/preferences';
import { store as editorStore } from '@wordpress/editor';
import {
store as editorStore,
privateApis as editorPrivateApis,
} from '@wordpress/editor';

/**
* Internal dependencies
*/
import { unlock } from '../../lock-unlock';
import { store as editSiteStore } from '../../store';
import ResizableEditor from '../block-editor/resizable-editor';

const { ResizableEditor } = unlock( editorPrivateApis );

/**
* Returns a translated string for the title of the editor canvas container.
Expand Down Expand Up @@ -120,25 +124,27 @@ function EditorCanvasContainer( {

return (
<EditorCanvasContainerFill>
<ResizableEditor enableResizing={ enableResizing }>
{ /* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions */ }
<section
className="edit-site-editor-canvas-container"
ref={ shouldShowCloseButton ? focusOnMountRef : null }
onKeyDown={ closeOnEscape }
aria-label={ title }
>
{ shouldShowCloseButton && (
<Button
className="edit-site-editor-canvas-container__close-button"
icon={ closeSmall }
label={ closeButtonLabel || __( 'Close' ) }
onClick={ onCloseContainer }
/>
) }
{ childrenWithProps }
</section>
</ResizableEditor>
<div className="edit-site-editor-canvas-container">
<ResizableEditor enableResizing={ enableResizing }>
{ /* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions */ }
<section
className="edit-site-editor-canvas-container__section"
ref={ shouldShowCloseButton ? focusOnMountRef : null }
onKeyDown={ closeOnEscape }
aria-label={ title }
>
{ shouldShowCloseButton && (
<Button
className="edit-site-editor-canvas-container__close-button"
icon={ closeSmall }
label={ closeButtonLabel || __( 'Close' ) }
onClick={ onCloseContainer }
/>
) }
{ childrenWithProps }
</section>
</ResizableEditor>
</div>
</EditorCanvasContainerFill>
);
}
Expand Down
8 changes: 8 additions & 0 deletions packages/edit-site/src/components/editor-canvas-container/style.scss
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,12 @@
.edit-site-editor-canvas-container {
height: 100%;

.edit-site-layout.is-full-canvas & {
padding: $grid-unit-30 $grid-unit-30 0;
}
}

.edit-site-editor-canvas-container__section {
background: $white; // Fallback color, overridden by JavaScript.
border-radius: $radius-block-ui;
bottom: 0;
Expand Down
Loading

1 comment on commit 19508f9

@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 19508f9.
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/9210951041
📝 Reported issues:

Please sign in to comment.