diff --git a/packages/block-editor/src/components/iframe/index.js b/packages/block-editor/src/components/iframe/index.js
index 87630f3be979e..f724027952a32 100644
--- a/packages/block-editor/src/components/iframe/index.js
+++ b/packages/block-editor/src/components/iframe/index.js
@@ -88,9 +88,10 @@ function Iframe( {
forwardedRef: ref,
...props
} ) {
- const assets = useSelect(
+ const { styles = '', scripts = '' } = useSelect(
( select ) =>
- select( blockEditorStore ).getSettings().__unstableResolvedAssets,
+ select( blockEditorStore ).getSettings().__unstableResolvedAssets ??
+ {},
[]
);
const [ iframeDocument, setIframeDocument ] = useState();
@@ -181,24 +182,23 @@ function Iframe( {
};
}, [] );
+ const html =
+ '' +
+ '' +
+ styles +
+ scripts;
+
// Correct doctype is required to enable rendering in standards
// mode. Also preload the styles to avoid a flash of unstyled
// content.
- const src = useMemo( () => {
- const html =
- '' +
- assets?.styles +
- assets?.scripts;
- const blob = new window.Blob( [ html ], { type: 'text/html' } );
- return URL.createObjectURL( blob );
- }, [] );
+ const [ src, cleanup ] = useMemo( () => {
+ const _src = URL.createObjectURL(
+ new window.Blob( [ html ], { type: 'text/html' } )
+ );
+ return [ _src, () => URL.revokeObjectURL( _src ) ];
+ }, [ html ] );
- useEffect(
- () => () => {
- URL.revokeObjectURL( src );
- },
- []
- );
+ useEffect( () => cleanup, [ cleanup ] );
// 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