diff --git a/packages/block-editor/src/components/iframe/content.scss b/packages/block-editor/src/components/iframe/content.scss index 90b887993bf6db..b6531d84afb56c 100644 --- a/packages/block-editor/src/components/iframe/content.scss +++ b/packages/block-editor/src/components/iframe/content.scss @@ -48,6 +48,7 @@ $total-frame-height: calc(2 * #{$frame-size}); $total-height: calc(#{$extra-content-height} + #{$total-frame-height} + 2px); margin-bottom: calc(-1 * #{$total-height}); + margin-inline: calc(-1 * #{$frame-size} / #{$scale}); body { min-height: calc((#{$inner-height} - #{$total-frame-height}) / #{$scale}); diff --git a/packages/block-editor/src/components/iframe/index.js b/packages/block-editor/src/components/iframe/index.js index 3e022cf95ae556..60129e7395ab10 100644 --- a/packages/block-editor/src/components/iframe/index.js +++ b/packages/block-editor/src/components/iframe/index.js @@ -306,16 +306,26 @@ function Iframe( { iframeDocument.documentElement.classList.add( 'is-zoomed-out' ); const maxWidth = 750; + const frameSizeIsNumber = frameSize === 'number'; + // The added space from `frameSize` has to be accounted for in scale calculation. + // This just punts in case `frameSize` can’t be treated as a pixel value. It’d + // probably be good to formally type `frameSize` as number and treat it as pixels. + // Core usage is pixels only and supporting any unit would be complicated. + let frameWidth = 0; + if ( frameSizeIsNumber || frameSize.endsWith( 'px' ) ) { + frameWidth = + 2 * ( frameSizeIsNumber ? frameSize : parseInt( frameSize ) ); + } + const usedWidth = Math.min( containerWidth, maxWidth ) - frameWidth; iframeDocument.documentElement.style.setProperty( '--wp-block-editor-iframe-zoom-out-scale', scale === 'default' - ? Math.min( containerWidth, maxWidth ) / - prevContainerWidthRef.current + ? usedWidth / prevContainerWidthRef.current : scale ); iframeDocument.documentElement.style.setProperty( '--wp-block-editor-iframe-zoom-out-frame-size', - typeof frameSize === 'number' ? `${ frameSize }px` : frameSize + frameSizeIsNumber ? `${ frameSize }px` : frameSize ); iframeDocument.documentElement.style.setProperty( '--wp-block-editor-iframe-zoom-out-content-height',