Fix template parts in view mode

WordPress · Nov 7, 2022 · 569315c · 569315c
1 parent f42f8cd
commit 569315c
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 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
@@ -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
@@ -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;