Zoom out: fix scaling issues (WordPress#65998)

* changed from using borders to use pseudo elements * added comments * Include frame size in the scaling calculation Instead of adding the frame size as a border (which causes reflow issues), include the frame size in the scaling calculation so there's always a left/right gutter of the frame size. * Account for scaling in the frame height * Calculation in CSS * Revert "Calculation in CSS" This reverts commit 38de9fc. * Add comment about why the calculation for scaling needs to happen in the JS * Force px value for frameSize * Restore previous frameSize var setting * Add back line break * Use padding top/bottom instead of before/after for top/bottom frame * Remove more before/after css since we are using padding --------- Co-authored-by: Jerry Jones <[email protected]> Co-authored-by: Alex Lende <[email protected]> Co-authored-by: MaggieCabrera <[email protected]> Co-authored-by: jeryj <[email protected]> Co-authored-by: ajlende <[email protected]> Co-authored-by: richtabor <[email protected]> Co-authored-by: ndiego <[email protected]> Co-authored-by: getdave <[email protected]> Co-authored-by: talldan <[email protected]>
karthick-murugan · Nov 13, 2024 · 50f054c · 50f054c
1 parent 418449e
commit 50f054c
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 5 deletions.
diff --git a/packages/block-editor/src/components/iframe/content.scss b/packages/block-editor/src/components/iframe/content.scss
@@ -3,7 +3,6 @@
 }
 
 .block-editor-iframe__html {
-	border: 0 solid $gray-300;
 	transform-origin: top center;
 	@include editor-canvas-resize-animation;
 }
@@ -19,14 +18,17 @@
 
 	background-color: $gray-300;
 
-	padding: calc(#{$frame-size} / #{$scale}) 0;
-
 	// Chrome seems to respect that transform scale shouldn't affect the layout size of the element,
 	// so we need to adjust the height of the content to match the scale by using negative margins.
 	$extra-content-height: calc(#{$content-height} * (1 - #{$scale}));
-	$total-frame-height: calc(2 * #{$frame-size});
+	$total-frame-height: calc(2 * #{$frame-size} / #{$scale});
 	$total-height: calc(#{$extra-content-height} + #{$total-frame-height} + 2px);
 	margin-bottom: calc(-1 * #{$total-height});
+	// Add the top/bottom frame size. We use scaling to account for the left/right, as
+	// the padding left/right causes the contents to reflow, which breaks the 1:1 scaling
+	// of the content.
+	padding-top: calc(#{$frame-size} / #{$scale});
+	padding-bottom: calc(#{$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,13 +306,19 @@ function Iframe( {
 		iframeDocument.documentElement.classList.add( 'is-zoomed-out' );
 
 		const maxWidth = 750;
+		// This scaling calculation has to happen within the JS because CSS calc() can
+		// only divide and multiply by a unitless value. I.e. calc( 100px / 2 ) is valid
+		// but calc( 100px / 2px ) is not.
 		iframeDocument.documentElement.style.setProperty(
 			'--wp-block-editor-iframe-zoom-out-scale',
 			scale === 'default'
-				? Math.min( containerWidth, maxWidth ) /
+				? ( Math.min( containerWidth, maxWidth ) -
+						parseInt( frameSize ) * 2 ) /
 						prevContainerWidthRef.current
 				: scale
 		);
+
+		// frameSize has to be a px value for the scaling and frame size to be computed correctly.
 		iframeDocument.documentElement.style.setProperty(
 			'--wp-block-editor-iframe-zoom-out-frame-size',
 			typeof frameSize === 'number' ? `${ frameSize }px` : frameSize

diff --git a/packages/block-editor/src/components/iframe/style.scss b/packages/block-editor/src/components/iframe/style.scss
@@ -12,5 +12,6 @@
 	$container-width: var(--wp-block-editor-iframe-zoom-out-container-width, 100vw);
 	$prev-container-width: var(--wp-block-editor-iframe-zoom-out-prev-container-width, 100vw);
 	width: $prev-container-width;
+	// This is to offset the movement of the iframe when we open sidebars
 	margin-left: calc(-1 * (#{$prev-container-width} - #{$container-width}) / 2);
 }