diff --git a/packages/block-editor/src/components/iframe/index.js b/packages/block-editor/src/components/iframe/index.js index a61200b4b1f1ca..6c4989d6f8b5eb 100644 --- a/packages/block-editor/src/components/iframe/index.js +++ b/packages/block-editor/src/components/iframe/index.js @@ -13,6 +13,7 @@ import { useMemo, useReducer, renderToString, + useEffect, } from '@wordpress/element'; import { __ } from '@wordpress/i18n'; import { @@ -243,10 +244,16 @@ function Iframe( { // Correct doctype is required to enable rendering in standards // mode. Also preload the styles to avoid a flash of unstyled // content. - const srcDoc = useMemo( () => { - return '' + renderToString( styleAssets ); + const src = useMemo( () => { + const html = '' + renderToString( styleAssets ); + const blob = new window.Blob( [ html ], { type: 'text/html' } ); + return URL.createObjectURL( blob ); }, [] ); + useEffect( () => () => { + URL.revokeObjectURL( src ); + } ); + // We need to counter the margin created by scaling the iframe. If the scale // is e.g. 0.45, then the top + bottom margin is 0.55 (1 - scale). Just the // top or bottom margin is 0.55 / 2 ((1 - scale) / 2). @@ -279,7 +286,7 @@ function Iframe( { // Correct doctype is required to enable rendering in standards // mode. Also preload the styles to avoid a flash of unstyled // content. - srcDoc={ srcDoc } + src={ src } title={ __( 'Editor canvas' ) } > { iframeDocument &&