diff --git a/packages/edit-site/src/components/block-editor/resizable-editor.js b/packages/edit-site/src/components/block-editor/resizable-editor.js index ce9e0d1bdec6b1..4ccf3ca91ac934 100644 --- 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 rather than the because the latter - // gets destroyed and remounted after initialization in