From 569315cdcf226ffed0dd9819a7795d29d68ab615 Mon Sep 17 00:00:00 2001
From: Riad Benguella <benguella@gmail.com>
Date: Mon, 7 Nov 2022 07:49:53 +0100
Subject: [PATCH] Fix template parts in view mode

---
 .../block-editor/resizable-editor.js           | 18 ++++++++++--------
 .../src/components/block-editor/style.scss     |  4 +++-
 2 files changed, 13 insertions(+), 9 deletions(-)

diff --git a/packages/edit-site/src/components/block-editor/resizable-editor.js b/packages/edit-site/src/components/block-editor/resizable-editor.js
index ce692af4b5d44e..a4a170623d4e80 100644
--- a/packages/edit-site/src/components/block-editor/resizable-editor.js
+++ b/packages/edit-site/src/components/block-editor/resizable-editor.js
@@ -50,17 +50,19 @@ function ResizableEditor( { enableResizing, settings, children, ...props } ) {
 	const iframeRef = useRef();
 	const mouseMoveTypingResetRef = useMouseMoveTypingReset();
 	const ref = useMergeRefs( [ iframeRef, mouseMoveTypingResetRef ] );
-
+	const isResizingEnabled = enableResizing && canvasMode !== 'view';
 	const resizeWidthBy = useCallback( ( deltaPixels ) => {
 		if ( iframeRef.current ) {
 			setWidth( iframeRef.current.offsetWidth + deltaPixels );
 		}
 	}, [] );
+
 	return (
 		<ResizableBox
 			size={ {
-				width: enableResizing ? width : '100%',
-				height: enableResizing && sizes.height ? sizes.height : '100%',
+				width: isResizingEnabled ? width : '100%',
+				height:
+					isResizingEnabled && sizes.height ? sizes.height : '100%',
 			} }
 			onResizeStop={ ( event, direction, element ) => {
 				setWidth( element.style.width );
@@ -69,10 +71,10 @@ function ResizableEditor( { enableResizing, settings, children, ...props } ) {
 			maxWidth="100%"
 			maxHeight="100%"
 			enable={ {
-				right: enableResizing,
-				left: enableResizing,
+				right: isResizingEnabled,
+				left: isResizingEnabled,
 			} }
-			showHandle={ enableResizing }
+			showHandle={ isResizingEnabled }
 			// The editor is centered horizontally, resizing it only
 			// moves half the distance. Hence double the ratio to correctly
 			// align the cursor to the resizer handle.
@@ -104,7 +106,7 @@ function ResizableEditor( { enableResizing, settings, children, ...props } ) {
 					undefined
 				}
 				frameSize={ isZoomOutMode ? 100 : undefined }
-				style={ enableResizing ? {} : deviceStyles }
+				style={ isResizingEnabled ? {} : deviceStyles }
 				head={
 					<>
 						<EditorStyles styles={ settings.styles } />
@@ -114,7 +116,7 @@ function ResizableEditor( { enableResizing, settings, children, ...props } ) {
 							`.is-root-container { display: flow-root; }
 							body { position: relative; }`
 						}</style>
-						{ enableResizing && (
+						{ isResizingEnabled && (
 							<style>
 								{
 									// Some themes will have `min-height: 100vh` for the root container,
diff --git a/packages/edit-site/src/components/block-editor/style.scss b/packages/edit-site/src/components/block-editor/style.scss
index 6a63806ed62b6c..76ddabe01adc6f 100644
--- a/packages/edit-site/src/components/block-editor/style.scss
+++ b/packages/edit-site/src/components/block-editor/style.scss
@@ -28,7 +28,9 @@
 	}
 
 	&.is-focus-mode {
-		padding: $grid-unit-60;
+		.edit-site-layout.is-full-canvas & {
+			padding: $grid-unit-60;
+		}
 
 		.edit-site-visual-editor__editor-canvas {
 			border-radius: $radius-block-ui;