Fix template part focus mode resizable editor height (#43408)

* Use a timeout instead of an animation frame * Reduce latency * Add a regression e2e test * Fix comment * Remove unstable e2e test * Improve comments
WordPress · Aug 22, 2022 · de3dcae · de3dcae
1 parent a7e263a
commit de3dcae
Showing 1 changed file with 28 additions and 18 deletions.
diff --git a/packages/edit-site/src/components/block-editor/resizable-editor.js b/packages/edit-site/src/components/block-editor/resizable-editor.js
@@ -57,20 +57,31 @@ function ResizableEditor( { enableResizing, settings, children, ...props } ) {
 				return;
 			}
 
-			let animationFrame = null;
+			let timeoutId = null;
 
 			function resizeHeight() {
-				if ( ! animationFrame ) {
-					// Throttle the updates on animation frame.
-					animationFrame = iframe.contentWindow.requestAnimationFrame(
-						() => {
-							setHeight(
-								iframe.contentDocument.documentElement
-									.scrollHeight
-							);
-							animationFrame = null;
+				if ( ! timeoutId ) {
+					// Throttle the updates on timeout. This code previously
+					// used `requestAnimationFrame`, but that seems to not
+					// always work before an iframe is ready.
+					timeoutId = iframe.contentWindow.setTimeout( () => {
+						const { readyState } = iframe.contentDocument;
+
+						// Continue deferring the timeout until the document is ready.
+						// Only then will it have a height.
+						if (
+							readyState !== 'interactive' &&
+							readyState !== 'complete'
+						) {
+							resizeHeight();
+							return;
 						}
-					);
+
+						setHeight( iframe.contentDocument.body.scrollHeight );
+						timeoutId = null;
+
+						// 30 frames per second.
+					}, 1000 / 30 );
 				}
 			}
 
@@ -82,11 +93,10 @@ function ResizableEditor( { enableResizing, settings, children, ...props } ) {
 				resizeObserver = new iframe.contentWindow.ResizeObserver(
 					resizeHeight
 				);
-				// Observing the <html> rather than the <body> because the latter
-				// gets destroyed and remounted after initialization in <Iframe>.
-				resizeObserver.observe(
-					iframe.contentDocument.documentElement
-				);
+
+				// Observe the body, since the `html` element seems to always
+				// have a height of `100%`.
+				resizeObserver.observe( iframe.contentDocument.body );
 
 				resizeHeight();
 			}
@@ -97,7 +107,7 @@ function ResizableEditor( { enableResizing, settings, children, ...props } ) {
 			registerObserver();
 
 			return () => {
-				iframe.contentWindow?.cancelAnimationFrame( animationFrame );
+				iframe.contentWindow?.clearTimeout( timeoutId );
 				resizeObserver?.disconnect();
 				iframe.removeEventListener( 'load', registerObserver );
 			};
@@ -153,7 +163,7 @@ function ResizableEditor( { enableResizing, settings, children, ...props } ) {
 			} }
 		>
 			<Iframe
-				style={ enableResizing ? undefined : deviceStyles }
+				style={ enableResizing ? { height } : deviceStyles }
 				head={
 					<>
 						<EditorStyles styles={ settings.styles } />