add condition to set prev container width if not set

packages/block-editor/src/components/iframe/index.js

@@ -242,7 +242,7 @@ function Iframe( {
 	const isZoomedOut = scale !== 1;
 
 	useEffect( () => {
-		if ( ! isZoomedOut ) {
+		if ( ! isZoomedOut || ! prevContainerWidthRef.current ) {
 			prevContainerWidthRef.current = containerWidth;
 		}
 	}, [ containerWidth, isZoomedOut ] );
@@ -303,8 +303,6 @@ function Iframe( {
 			return;
 		}
 
-		iframeDocument.documentElement.classList.add( 'is-zoomed-out' );
-
 		const maxWidth = 750;
 		iframeDocument.documentElement.style.setProperty(
 			'--wp-block-editor-iframe-zoom-out-scale',
@@ -313,6 +311,27 @@ function Iframe( {
 						prevContainerWidthRef.current
 				: scale
 		);
+
+		return () => {
+			iframeDocument.documentElement.style.removeProperty(
+				'--wp-block-editor-iframe-zoom-out-scale'
+			);
+		};
+	}, [
+		scale,
+		iframeDocument,
+		isZoomedOut,
+		containerWidth,
+		prevContainerWidthRef.current,
+	] );
+
+	useEffect( () => {
+		if ( ! iframeDocument || ! isZoomedOut ) {
+			return;
+		}
+
+		iframeDocument.documentElement.classList.add( 'is-zoomed-out' );
+
 		iframeDocument.documentElement.style.setProperty(
 			'--wp-block-editor-iframe-zoom-out-frame-size',
 			typeof frameSize === 'number' ? `${ frameSize }px` : frameSize
@@ -337,9 +356,6 @@ function Iframe( {
 		return () => {
 			iframeDocument.documentElement.classList.remove( 'is-zoomed-out' );
 
-			iframeDocument.documentElement.style.removeProperty(
-				'--wp-block-editor-iframe-zoom-out-scale'
-			);
 			iframeDocument.documentElement.style.removeProperty(
 				'--wp-block-editor-iframe-zoom-out-frame-size'
 			);