Factor frameSize into scaling and document width styling

WordPress · Oct 2, 2024 · 3cd5c19 · 3cd5c19
1 parent 41804e1
commit 3cd5c19
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 3 deletions.
diff --git 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
@@ -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',