Editor Canvas: Fix animation when device type changes (#56970)

* Editor Canvas: Fix animation when device type changes * Include margin in deviceStyles
WordPress · Dec 13, 2023 · e07802b · e07802b · github-actions · Dec 13, 2023
1 parent 2936660
commit e07802b
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 3 deletions.
diff --git a/packages/block-editor/src/components/use-resize-canvas/README.md b/packages/block-editor/src/components/use-resize-canvas/README.md
@@ -1,6 +1,6 @@
 # useResizeCanvas
 
-This React hook generates inline CSS suitable for resizing a container to fit a device's dimensions. It adjusts the CSS according to the current device dimensions. It has no effect on desktop.
+This React hook generates inline CSS suitable for resizing a container to fit a device's dimensions. It adjusts the CSS according to the current device dimensions.
 
 On-page CSS media queries are also updated to match the width of the device.
 

diff --git a/packages/block-editor/src/components/use-resize-canvas/index.js b/packages/block-editor/src/components/use-resize-canvas/index.js
@@ -67,7 +67,10 @@ export default function useResizeCanvas( deviceType ) {
 					overflowY: 'auto',
 				};
 			default:
-				return null;
+				return {
+					marginLeft: marginHorizontal,
+					marginRight: marginHorizontal,
+				};
 		}
 	};
 

diff --git a/packages/editor/src/components/editor-canvas/index.js b/packages/editor/src/components/editor-canvas/index.js
@@ -304,7 +304,10 @@ function EditorCanvas(
 			height="100%"
 			iframeProps={ {
 				...iframeProps,
-				style: { ...iframeProps?.style, ...deviceStyles },
+				style: {
+					...iframeProps?.style,
+					...deviceStyles,
+				},
 			} }
 		>
 			{ themeSupportsLayout &&