Calculation in CSS

WordPress · Oct 9, 2024 · 38de9fc · 38de9fc
1 parent 6a247d6
commit 38de9fc
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 6 deletions.
diff --git a/packages/block-editor/src/components/iframe/content.scss b/packages/block-editor/src/components/iframe/content.scss
@@ -21,9 +21,15 @@
 	$inner-height: var(--wp-block-editor-iframe-zoom-out-inner-height);
 	$content-height: var(--wp-block-editor-iframe-zoom-out-content-height);
 	$prev-container-width: var(--wp-block-editor-iframe-zoom-out-prev-container-width);
+	$container-width: var(--wp-block-editor-iframe-zoom-out-container-width, 100vw);
+	$max-width: 750px;
 
 	transform: scale(#{$scale});
 
+	&.is-default-scale {
+		transform: scale( calc( ( min( #{$container-width}, #{$max-width} ) - 2 * #{$frame-size} ) / #{$prev-container-width} ) );
+	}
+
 	background-color: $gray-300;
 
 	// Chrome seems to respect that transform scale shouldn't affect the layout size of the element,

diff --git a/packages/block-editor/src/components/iframe/index.js b/packages/block-editor/src/components/iframe/index.js
@@ -305,14 +305,13 @@ function Iframe( {
 
 		iframeDocument.documentElement.classList.add( 'is-zoomed-out' );
 
-		const maxWidth = 750;
+		if ( scale === 'default' ) {
+			iframeDocument.documentElement.classList.add( 'is-default-scale' );
+		}
+
 		iframeDocument.documentElement.style.setProperty(
 			'--wp-block-editor-iframe-zoom-out-scale',
-			scale === 'default'
-				? ( Math.min( containerWidth, maxWidth ) -
-						parseInt( frameSize ) * 2 ) /
-						prevContainerWidthRef.current
-				: scale
+			scale
 		);
 		iframeDocument.documentElement.style.setProperty(
 			'--wp-block-editor-iframe-zoom-out-frame-size',
@@ -356,6 +355,9 @@ function Iframe( {
 			iframeDocument.documentElement.style.removeProperty(
 				'--wp-block-editor-iframe-zoom-out-prev-container-width'
 			);
+			iframeDocument.documentElement.classList.remove(
+				'is-default-scale'
+			);
 		};
 	}, [
 		scale,