Use smaller min-height for body when zoomed out

WordPress · Oct 23, 2024 · a9acfc3 · a9acfc3
1 parent 48f4077
commit a9acfc3
Show file tree

Hide file tree

Showing 2 changed files with 1 addition and 29 deletions.
diff --git a/packages/block-editor/src/components/iframe/content.scss b/packages/block-editor/src/components/iframe/content.scss
@@ -21,7 +21,6 @@
 .block-editor-iframe__html.is-zoomed-out {
 	$scale: var(--wp-block-editor-iframe-zoom-out-scale);
 	$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);
 	$scale-container-width: var(--wp-block-editor-iframe-zoom-out-scale-container-width);
 	$container-width: var(--wp-block-editor-iframe-zoom-out-container-width, 100vw);
@@ -43,6 +42,6 @@
 	padding-bottom: calc(#{$frame-size} / #{$scale});
 
 	body {
-		min-height: calc((#{$inner-height} - #{$total-frame-height}) / #{$scale});
+		min-height: 100vh;
 	}
 }
diff --git a/packages/block-editor/src/components/iframe/index.js b/packages/block-editor/src/components/iframe/index.js
@@ -209,21 +209,6 @@ function Iframe( {
 		};
 	}, [] );
 
-	const [ iframeWindowInnerHeight, setIframeWindowInnerHeight ] = useState();
-
-	const iframeResizeRef = useRefEffect( ( node ) => {
-		const nodeWindow = node.ownerDocument.defaultView;
-
-		setIframeWindowInnerHeight( nodeWindow.innerHeight );
-		const onResize = () => {
-			setIframeWindowInnerHeight( nodeWindow.innerHeight );
-		};
-		nodeWindow.addEventListener( 'resize', onResize );
-		return () => {
-			nodeWindow.removeEventListener( 'resize', onResize );
-		};
-	}, [] );
-
 	const [ windowInnerWidth, setWindowInnerWidth ] = useState();
 
 	const windowResizeRef = useRefEffect( ( node ) => {
@@ -259,10 +244,6 @@ function Iframe( {
 		clearerRef,
 		writingFlowRef,
 		disabledRef,
-		// Avoid resize listeners when not needed, these will trigger
-		// unnecessary re-renders when animating the iframe width, or when
-		// expanding preview iframes.
-		isZoomedOut ? iframeResizeRef : null,
 	] );
 
 	// Correct doctype is required to enable rendering in standards
@@ -370,10 +351,6 @@ function Iframe( {
 			'--wp-block-editor-iframe-zoom-out-content-height',
 			`${ contentHeight }px`
 		);
-		iframeDocument.documentElement.style.setProperty(
-			'--wp-block-editor-iframe-zoom-out-inner-height',
-			`${ iframeWindowInnerHeight }px`
-		);
 		iframeDocument.documentElement.style.setProperty(
 			'--wp-block-editor-iframe-zoom-out-container-width',
 			`${ containerWidth }px`
@@ -393,9 +370,6 @@ function Iframe( {
 			iframeDocument.documentElement.style.removeProperty(
 				'--wp-block-editor-iframe-zoom-out-content-height'
 			);
-			iframeDocument.documentElement.style.removeProperty(
-				'--wp-block-editor-iframe-zoom-out-inner-height'
-			);
 			iframeDocument.documentElement.style.removeProperty(
 				'--wp-block-editor-iframe-zoom-out-container-width'
 			);
@@ -407,7 +381,6 @@ function Iframe( {
 		scale,
 		frameSize,
 		iframeDocument,
-		iframeWindowInnerHeight,
 		contentHeight,
 		containerWidth,
 		windowInnerWidth,