Auto resize the height of template part focus mode

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

@@ -10,6 +10,7 @@ import { useSelect, useDispatch } from '@wordpress/data';
 import { useCallback, useRef } from '@wordpress/element';
 import { useEntityBlockEditor } from '@wordpress/core-data';
 import {
+	BlockList,
 	BlockEditorProvider,
 	__experimentalLinkControl,
 	BlockInspector,
@@ -32,16 +33,26 @@ import EditTemplatePartMenuButton from '../edit-template-part-menu-button';
 import BackButton from './back-button';
 import ResizableEditor from './resizable-editor';
 
+const LAYOUT = {
+	type: 'default',
+	// At the root level of the site editor, no alignments should be allowed.
+	alignments: [],
+};
+
 export default function BlockEditor( { setIsInserterOpen } ) {
-	const { settings, templateType, page } = useSelect(
+	const { settings, templateType, templateId, page } = useSelect(
 		( select ) => {
-			const { getSettings, getEditedPostType, getPage } = select(
-				editSiteStore
-			);
+			const {
+				getSettings,
+				getEditedPostType,
+				getEditedPostId,
+				getPage,
+			} = select( editSiteStore );
 
 			return {
 				settings: getSettings( setIsInserterOpen ),
 				templateType: getEditedPostType(),
+				templateId: getEditedPostId(),
 				page: getPage(),
 			};
 		},
@@ -99,14 +110,21 @@ export default function BlockEditor( { setIsInserterOpen } ) {
 				<BackButton />
 
 				<ResizableEditor
+					// Reinitialize the editor and reset the states when the template changes.
+					key={ templateId }
 					enableResizing={
 						isTemplatePart &&
 						// Disable resizing in mobile viewport.
 						! isMobileViewport
 					}
 					settings={ settings }
 					contentRef={ mergedRefs }
-				/>
+				>
+					<BlockList
+						className="edit-site-block-editor__block-list wp-site-blocks"
+						__experimentalLayout={ LAYOUT }
+					/>
+				</ResizableEditor>
 
 				<__unstableBlockSettingsMenuFirstItem>
 					{ ( { onClose } ) => (

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

@@ -1,21 +1,15 @@
-/**
- * External dependencies
- */
-import { omit } from 'lodash';
-
 /**
  * WordPress dependencies
  */
 import { useState, useEffect, useRef, useCallback } from '@wordpress/element';
 import { ResizableBox } from '@wordpress/components';
 import {
-	BlockList,
 	__experimentalUseResizeCanvas as useResizeCanvas,
 	__unstableEditorStyles as EditorStyles,
 	__unstableIframe as Iframe,
 	__unstableUseMouseMoveTypingReset as useMouseMoveTypingReset,
 } from '@wordpress/block-editor';
-import { useDispatch, useSelect } from '@wordpress/data';
+import { useSelect } from '@wordpress/data';
 import { useMergeRefs } from '@wordpress/compose';
 
 /**
@@ -24,14 +18,6 @@ import { useMergeRefs } from '@wordpress/compose';
 import { store as editSiteStore } from '../../store';
 import ResizeHandle from './resize-handle';
 
-const LAYOUT = {
-	type: 'default',
-	// At the root level of the site editor, no alignments should be allowed.
-	alignments: [],
-};
-
-const RESPONSIVE_DEVICE = 'responsive';
-
 const DEFAULT_STYLES = {
 	width: '100%',
 	height: '100%',
@@ -56,49 +42,60 @@ function ResizableEditor( { enableResizing, settings, ...props } ) {
 			select( editSiteStore ).__experimentalGetPreviewDeviceType(),
 		[]
 	);
-	const resizedCanvasStyles = useResizeCanvas( deviceType ) ?? DEFAULT_STYLES;
-	const previousResizedCanvasStylesRef = useRef( resizedCanvasStyles );
-	// Keep the height of the canvas when resizing on each device type.
-	const styles =
-		deviceType === RESPONSIVE_DEVICE
-			? previousResizedCanvasStylesRef.current
-			: resizedCanvasStyles;
-	const [ width, setWidth ] = useState( styles.width );
-	const {
-		__experimentalSetPreviewDeviceType: setPreviewDeviceType,
-	} = useDispatch( editSiteStore );
+	const deviceStyles = useResizeCanvas( deviceType );
+	const [ width, setWidth ] = useState( DEFAULT_STYLES.width );
+	const [ height, setHeight ] = useState( DEFAULT_STYLES.height );
 	const iframeRef = useRef();
 	const mouseMoveTypingResetRef = useMouseMoveTypingReset();
 	const ref = useMergeRefs( [ iframeRef, mouseMoveTypingResetRef ] );
 
 	useEffect(
-		function setWidthWhenDeviceTypeChanged() {
-			if ( deviceType !== RESPONSIVE_DEVICE ) {
-				setWidth( resizedCanvasStyles.width );
-				previousResizedCanvasStylesRef.current = resizedCanvasStyles;
+		function autoResizeIframeHeight() {
+			const iframe = iframeRef.current;
+
+			if ( ! iframe || ! enableResizing ) {
+				return;
 			}
+
+			const resizeObserver = new iframe.contentWindow.ResizeObserver(
+				() => {
+					setHeight(
+						iframe.contentDocument.querySelector(
+							`.edit-site-block-editor__block-list`
+						).offsetHeight
+					);
+				}
+			);
+
+			// Observing the <html> rather than the <body> because the latter
+			// gets destroyed and remounted after initialization in <Iframe>.
+			resizeObserver.observe( iframe.contentDocument.documentElement );
+
+			return () => {
+				resizeObserver.disconnect();
+			};
 		},
-		[ deviceType, resizedCanvasStyles.width ]
+		[ enableResizing ]
 	);
 
 	const resizeWidthBy = useCallback( ( deltaPixels ) => {
 		if ( iframeRef.current ) {
-			setWidth( `${ iframeRef.current.offsetWidth + deltaPixels }px` );
+			setWidth( iframeRef.current.offsetWidth + deltaPixels );
 		}
 	}, [] );
 
 	return (
 		<ResizableBox
 			size={ {
 				width,
-				height: styles.height,
+				height,
 			} }
 			onResizeStop={ ( event, direction, element ) => {
 				setWidth( element.style.width );
-				setPreviewDeviceType( RESPONSIVE_DEVICE );
 			} }
 			minWidth={ 300 }
 			maxWidth="100%"
+			maxHeight="100%"
 			enable={ {
 				right: enableResizing,
 				left: enableResizing,
@@ -129,21 +126,22 @@ function ResizableEditor( { enableResizing, settings, ...props } ) {
 			} }
 		>
 			<Iframe
-				style={
-					// We'll be using the size controlled by ResizableBox so resetting them here.
-					omit( styles, [ 'width', 'height', 'margin' ] )
+				style={ enableResizing ? undefined : deviceStyles }
+				head={
+					<>
+						<EditorStyles styles={ settings.styles } />
+						<style>{
+							// Forming a "block formatting context" to prevent margin collapsing.
+							// @see https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context
+							`.edit-site-block-editor__block-list { display: flow-root; }`
+						}</style>
+					</>
 				}
-				head={ <EditorStyles styles={ settings.styles } /> }
 				ref={ ref }
 				name="editor-canvas"
 				className="edit-site-visual-editor__editor-canvas"
 				{ ...props }
-			>
-				<BlockList
-					className="edit-site-block-editor__block-list wp-site-blocks"
-					__experimentalLayout={ LAYOUT }
-				/>
-			</Iframe>
+			/>
 		</ResizableBox>
 	);
 }

packages/edit-site/src/components/block-editor/resize-handle.js

@@ -5,6 +5,8 @@ import { __ } from '@wordpress/i18n';
 import { LEFT, RIGHT } from '@wordpress/keycodes';
 import { VisuallyHidden } from '@wordpress/components';
 
+const DELTA_DISTANCE = 20; // The distance to resize per keydown in pixels.
+
 export default function ResizeHandle( { direction, resizeWidthBy } ) {
 	function handleKeyDown( event ) {
 		const { keyCode } = event;
@@ -13,12 +15,12 @@ export default function ResizeHandle( { direction, resizeWidthBy } ) {
 			( direction === 'left' && keyCode === LEFT ) ||
 			( direction === 'right' && keyCode === RIGHT )
 		) {
-			resizeWidthBy( 20 );
+			resizeWidthBy( DELTA_DISTANCE );
 		} else if (
 			( direction === 'left' && keyCode === RIGHT ) ||
 			( direction === 'right' && keyCode === LEFT )
 		) {
-			resizeWidthBy( -20 );
+			resizeWidthBy( -DELTA_DISTANCE );
 		}
 	}
 

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

@@ -19,7 +19,11 @@
 	align-items: center;
 
 	&.is-focus-mode {
-		padding: 48px 48px 0;
+		padding: 48px;
+
+		.edit-site-visual-editor__editor-canvas {
+			border-radius: 2px;
+		}
 	}
 }
 
@@ -40,6 +44,10 @@
 	}
 }
 
+.components-resizable-box__container {
+	margin: 0 auto;
+}
+
 .resizable-editor__drag-handle {
 	$height: 100px;
 	position: absolute;

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

@@ -23,8 +23,8 @@
 .edit-site-visual-editor {
 	position: relative;
 	height: 100%;
-	display: flex;
-	flex-flow: column;
+	display: block;
+	overflow: hidden;
 
 	iframe {
 		display: block;

packages/edit-site/src/components/header/index.js

@@ -100,6 +100,8 @@ export default function Header( {
 		[ setIsListViewOpened, isListViewOpen ]
 	);
 
+	const isFocusMode = templateType === 'wp_template_part';
+
 	return (
 		<div className="edit-site-header">
 			<div className="edit-site-header_start">
@@ -157,10 +159,12 @@ export default function Header( {
 
 			<div className="edit-site-header_end">
 				<div className="edit-site-header__actions">
-					<PreviewOptions
-						deviceType={ deviceType }
-						setDeviceType={ setPreviewDeviceType }
-					/>
+					{ ! isFocusMode && (
+						<PreviewOptions
+							deviceType={ deviceType }
+							setDeviceType={ setPreviewDeviceType }
+						/>
+					) }
 					<SaveButton
 						openEntitiesSavedStates={ openEntitiesSavedStates }
 						isEntitiesSavedStatesOpen={ isEntitiesSavedStatesOpen }