Editor: Move the resizing of the editor to the EditorCanvas component (WordPress#61896)

Co-authored-by: youknowriad <[email protected]>
Co-authored-by: jameskoster <[email protected]>

Author: 2 people

packages/block-editor/src/components/block-canvas/style.scss

@@ -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;
-}

packages/block-editor/src/components/iframe/content.scss

@@ -1,3 +1,7 @@
+.block-editor-iframe__body {
+	position: relative;
+}
+
 .block-editor-iframe__container {
 	width: 100%;
 	height: 100%;

packages/edit-post/src/components/visual-editor/index.js

@@ -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 {
@@ -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(
@@ -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';
 	}

packages/edit-site/src/components/block-editor/editor-canvas.js

@@ -28,7 +28,7 @@ import {
 
 const { EditorCanvas: EditorCanvasRoot } = unlock( editorPrivateApis );
 
-function EditorCanvas( { enableResizing, settings, children, ...props } ) {
+function EditorCanvas( { settings, children } ) {
 	const {
 		hasBlocks,
 		isFocusMode,
@@ -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;'
@@ -122,7 +118,7 @@ function EditorCanvas( { enableResizing, settings, children, ...props } ) {
 				}}}`,
 			},
 		],
-		[ settings.styles, enableResizing, canvasMode, currentPostIsTrashed ]
+		[ settings.styles, canvasMode, currentPostIsTrashed ]
 	);
 
 	return (
@@ -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 : {} ),
 			} }
 		>

packages/edit-site/src/components/block-editor/site-editor-canvas.js

@@ -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>
 				)
 			}

packages/edit-site/src/components/block-editor/style.scss

@@ -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);
-	}
 }

packages/edit-site/src/components/editor-canvas-container/index.js

@@ -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.
@@ -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>
 	);
 }

packages/edit-site/src/components/editor-canvas-container/style.scss

@@ -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;