diff --git a/packages/block-editor/src/components/iframe/index.js b/packages/block-editor/src/components/iframe/index.js index c6639f9e057e1c..a61200b4b1f1ca 100644 --- a/packages/block-editor/src/components/iframe/index.js +++ b/packages/block-editor/src/components/iframe/index.js @@ -260,15 +260,18 @@ function Iframe( { style={ { ...props.style, height: expand ? contentHeight : props.style?.height, - marginTop: scale - ? -marginFromScaling + frameSize - : props.style?.marginTop, - marginBottom: scale - ? -marginFromScaling + frameSize - : props.style?.marginBottom, - transform: scale - ? `scale( ${ scale } )` - : props.style?.transform, + marginTop: + scale !== 1 + ? -marginFromScaling + frameSize + : props.style?.marginTop, + marginBottom: + scale !== 1 + ? -marginFromScaling + frameSize + : props.style?.marginBottom, + transform: + scale !== 1 + ? `scale( ${ scale } )` + : props.style?.transform, transition: 'all .3s', } } ref={ useMergeRefs( [ ref, setRef ] ) } diff --git a/packages/block-editor/src/components/use-resize-canvas/index.js b/packages/block-editor/src/components/use-resize-canvas/index.js index d329e20d6106e4..fab0b7a15e2afd 100644 --- a/packages/block-editor/src/components/use-resize-canvas/index.js +++ b/packages/block-editor/src/components/use-resize-canvas/index.js @@ -47,12 +47,20 @@ export default function useResizeCanvas( deviceType ) { const contentInlineStyles = ( device ) => { const height = device === 'Mobile' ? '768px' : '1024px'; + const marginVertical = marginValue() + 'px'; + const marginHorizontal = 'auto'; + switch ( device ) { case 'Tablet': case 'Mobile': return { width: getCanvasWidth( device ), - margin: marginValue() + 'px auto', + // Keeping margin styles separate to avoid warnings + // when those props get overridden in the iframe component + marginTop: marginVertical, + marginBottom: marginVertical, + marginLeft: marginHorizontal, + marginRight: marginHorizontal, height, borderRadius: '2px 2px 2px 2px', border: '1px solid #ddd',