diff --git a/packages/block-editor/src/components/iframe/index.js b/packages/block-editor/src/components/iframe/index.js index b4e1e44f6568b..acbfae766e3d4 100644 --- a/packages/block-editor/src/components/iframe/index.js +++ b/packages/block-editor/src/components/iframe/index.js @@ -203,14 +203,10 @@ function Iframe( return true; } - if ( setDocumentIfReady() ) { - return; - } + // Document set with srcDoc is not immediately ready. + node.addEventListener( 'load', setDocumentIfReady ); - // Document is not immediately loaded in Firefox. - node.addEventListener( 'load', () => { - setDocumentIfReady(); - } ); + return () => node.removeEventListener( 'load', setDocumentIfReady ); }, [] ); const headRef = useRefEffect( ( element ) => { scripts @@ -264,6 +260,8 @@ function Iframe( { ...props } ref={ useMergeRefs( [ ref, setRef ] ) } tabIndex={ tabIndex } + // Correct doctype is required to enable rendering in standards mode + srcDoc="" title={ __( 'Editor canvas' ) } > { iframeDocument && diff --git a/packages/e2e-tests/specs/site-editor/iframe-rendering-mode.test.js b/packages/e2e-tests/specs/site-editor/iframe-rendering-mode.test.js new file mode 100644 index 0000000000000..d7eb0a22ae2da --- /dev/null +++ b/packages/e2e-tests/specs/site-editor/iframe-rendering-mode.test.js @@ -0,0 +1,31 @@ +/** + * WordPress dependencies + */ +import { activateTheme, visitSiteEditor } from '@wordpress/e2e-test-utils'; + +describe( 'Site editor iframe rendering mode', () => { + beforeAll( async () => { + await activateTheme( 'emptytheme' ); + } ); + + afterAll( async () => { + await activateTheme( 'twentytwentyone' ); + } ); + + it( 'Should render editor in standards mode.', async () => { + await visitSiteEditor( { + postId: 'emptytheme//index', + postType: 'wp_template', + } ); + + const compatMode = await page.evaluate( + () => + document.querySelector( `iframe[name='editor-canvas']` ) + .contentDocument.compatMode + ); + + // CSS1Compat = expected standards mode. + // BackCompat = quirks mode. + expect( compatMode ).toBe( 'CSS1Compat' ); + } ); +} );