use previous container width instead of a fixed value

WordPress · May 10, 2024 · b3bd4d8 · b3bd4d8
1 parent 0904eb3
commit b3bd4d8
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 5 deletions.
diff --git a/packages/block-editor/src/components/iframe/content.scss b/packages/block-editor/src/components/iframe/content.scss
@@ -11,8 +11,9 @@
 
 .block-editor-iframe__scale-container.is-zoomed-out {
 	$container-width: var(--wp-block-editor-iframe-zoom-out-container-width, 100vw);
-	width: calc(100vw - 350px);
-	margin-left: calc(-1 * ((100vw - 350px) - #{$container-width}) / 2);
+	$prev-container-width: var(--wp-block-editor-iframe-zoom-out-prev-container-width, 100vw);
+	width: $prev-container-width;
+	margin-left: calc(-1 * (#{$prev-container-width} - #{$container-width}) / 2);
 }
 
 .block-editor-iframe__html {
@@ -26,7 +27,7 @@
 	$frame-size: var(--wp-block-editor-iframe-zoom-out-frame-size);
 	$inner-height: var(--wp-block-editor-iframe-zoom-out-inner-height);
 	$content-height: var(--wp-block-editor-iframe-zoom-out-content-height);
-	$container-width: var(--wp-block-editor-iframe-zoom-out-container-width);
+	$prev-container-width: var(--wp-block-editor-iframe-zoom-out-prev-container-width);
 
 	transform: scale(#{$scale});
 

diff --git a/packages/block-editor/src/components/iframe/index.js b/packages/block-editor/src/components/iframe/index.js
@@ -12,6 +12,7 @@ import {
 	forwardRef,
 	useMemo,
 	useEffect,
+	useRef,
 } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import {
@@ -121,6 +122,7 @@ function Iframe( {
 	}, [] );
 	const { styles = '', scripts = '' } = resolvedAssets;
 	const [ iframeDocument, setIframeDocument ] = useState();
+	const prevContainerWidth = useRef();
 	const [ bodyClasses, setBodyClasses ] = useState( [] );
 	const clearerRef = useBlockSelectionClearer();
 	const [ before, writingFlowRef, after ] = useWritingFlow();
@@ -239,6 +241,12 @@ function Iframe( {
 
 	const isZoomedOut = scale !== 1;
 
+	useEffect( () => {
+		if ( ! isZoomedOut ) {
+			prevContainerWidth.current = containerWidth;
+		}
+	}, [ containerWidth, isZoomedOut ] );
+
 	const disabledRef = useDisabled( { isDisabled: ! readonly } );
 	const bodyRef = useMergeRefs( [
 		useBubbleEvents( iframeDocument ),
@@ -302,7 +310,7 @@ function Iframe( {
 			'--wp-block-editor-iframe-zoom-out-scale',
 			scale === 'default'
 				? Math.min( containerWidth, maxWidth ) /
-						( windowInnerWidth - 350 )
+						prevContainerWidth.current
 				: scale
 		);
 		iframeDocument.documentElement.style.setProperty(
@@ -319,7 +327,11 @@ function Iframe( {
 		);
 		iframeDocument.documentElement.style.setProperty(
 			'--wp-block-editor-iframe-zoom-out-container-width',
-			`${ containerWidth - 350 }px`
+			`${ containerWidth }px`
+		);
+		iframeDocument.documentElement.style.setProperty(
+			'--wp-block-editor-iframe-zoom-out-prev-container-width',
+			`${ prevContainerWidth.current }px`
 		);
 
 		return () => {
@@ -340,6 +352,9 @@ function Iframe( {
 			iframeDocument.documentElement.style.removeProperty(
 				'--wp-block-editor-iframe-zoom-out-container-width'
 			);
+			iframeDocument.documentElement.style.removeProperty(
+				'--wp-block-editor-iframe-zoom-out-prev-container-width'
+			);
 		};
 	}, [
 		scale,
@@ -442,6 +457,8 @@ function Iframe( {
 				style={ {
 					'--wp-block-editor-iframe-zoom-out-container-width':
 						isZoomedOut && `${ containerWidth }px`,
+					'--wp-block-editor-iframe-zoom-out-prev-container-width':
+						isZoomedOut && `${ prevContainerWidth.current }px`,
 				} }
 			>
 				{ iframe }