From 9d29a2e5a9341962337f883811d8dd04b7476a85 Mon Sep 17 00:00:00 2001 From: Alex Lende Date: Thu, 11 Apr 2024 10:03:23 -0500 Subject: [PATCH 01/15] Fix crash when switching to code editor --- .../src/components/iframe/index.js | 29 ++++++++----------- 1 file changed, 12 insertions(+), 17 deletions(-) diff --git a/packages/block-editor/src/components/iframe/index.js b/packages/block-editor/src/components/iframe/index.js index e90e8a094ba5ac..a4832184bda8ed 100644 --- a/packages/block-editor/src/components/iframe/index.js +++ b/packages/block-editor/src/components/iframe/index.js @@ -286,39 +286,30 @@ function Iframe( { // Hack to get proper margins when scaling the iframe document. const bottomFrameSize = frameSize - contentHeight * ( 1 - scale ); - iframeDocument.body.classList.add( 'is-zoomed-out' ); - iframeDocument.documentElement.style.transform = `scale( ${ scale } )`; iframeDocument.documentElement.style.marginTop = `${ frameSize }px`; // TODO: `marginBottom` doesn't work in Firefox. We need another way to do this. iframeDocument.documentElement.style.marginBottom = `${ bottomFrameSize }px`; - if ( iframeWindowInnerHeight > contentHeight * scale ) { - iframeDocument.body.style.minHeight = `${ Math.floor( - ( iframeWindowInnerHeight - 2 * frameSize ) / scale - ) }px`; - } return () => { - iframeDocument.body.classList.remove( 'is-zoomed-out' ); iframeDocument.documentElement.style.transform = ''; iframeDocument.documentElement.style.marginTop = ''; iframeDocument.documentElement.style.marginBottom = ''; - iframeDocument.body.style.minHeight = ''; }; } - }, [ - scale, - frameSize, - iframeDocument, - contentHeight, - iframeWindowInnerHeight, - contentWidth, - ] ); + }, [ scale, frameSize, iframeDocument, contentHeight ] ); // Make sure to not render the before and after focusable div elements in view // mode. They're only needed to capture focus in edit mode. const shouldRenderFocusCaptureElements = tabIndex >= 0 && ! isPreviewMode; + const scaleMinHeight = + scale !== 1 && iframeWindowInnerHeight > contentHeight * scale + ? `${ Math.floor( + ( iframeWindowInnerHeight - 2 * frameSize ) / scale + ) }px` + : undefined; + return ( <> { shouldRenderFocusCaptureElements && before } @@ -369,10 +360,14 @@ function Iframe( { { contentResizeListener } From f029d2d0f1191317d7347fe8d92949c84fbcf061 Mon Sep 17 00:00:00 2001 From: Alex Lende Date: Thu, 11 Apr 2024 13:22:21 -0500 Subject: [PATCH 02/15] Fix typo --- packages/block-editor/src/components/iframe/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-editor/src/components/iframe/index.js b/packages/block-editor/src/components/iframe/index.js index a4832184bda8ed..db69096f336f81 100644 --- a/packages/block-editor/src/components/iframe/index.js +++ b/packages/block-editor/src/components/iframe/index.js @@ -354,7 +354,7 @@ function Iframe( { > { iframeDocument && createPortal( - // We want to prevent React events from bubbling throught the iframe + // We want to prevent React events from bubbling through the iframe // we bubble these manually. /* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions */ Date: Thu, 11 Apr 2024 15:39:31 -0500 Subject: [PATCH 03/15] Remove unused eslint ignore --- packages/block-editor/src/components/iframe/index.js | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/block-editor/src/components/iframe/index.js b/packages/block-editor/src/components/iframe/index.js index db69096f336f81..5c9b6dbfb6c876 100644 --- a/packages/block-editor/src/components/iframe/index.js +++ b/packages/block-editor/src/components/iframe/index.js @@ -356,7 +356,6 @@ function Iframe( { createPortal( // We want to prevent React events from bubbling through the iframe // we bubble these manually. - /* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions */ Date: Thu, 11 Apr 2024 15:47:28 -0500 Subject: [PATCH 04/15] Add isZoomedOut variable --- packages/block-editor/src/components/iframe/index.js | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/packages/block-editor/src/components/iframe/index.js b/packages/block-editor/src/components/iframe/index.js index 5c9b6dbfb6c876..4b9b4aef22c371 100644 --- a/packages/block-editor/src/components/iframe/index.js +++ b/packages/block-editor/src/components/iframe/index.js @@ -277,12 +277,14 @@ function Iframe( { ? scale( contentWidth, contentHeight ) : scale; + const isZoomedOut = scale !== 1; + useEffect( () => { if ( ! iframeDocument ) { return; } - if ( scale !== 1 ) { + if ( isZoomedOut ) { // Hack to get proper margins when scaling the iframe document. const bottomFrameSize = frameSize - contentHeight * ( 1 - scale ); @@ -297,14 +299,14 @@ function Iframe( { iframeDocument.documentElement.style.marginBottom = ''; }; } - }, [ scale, frameSize, iframeDocument, contentHeight ] ); + }, [ scale, frameSize, iframeDocument, contentHeight, isZoomedOut ] ); // Make sure to not render the before and after focusable div elements in view // mode. They're only needed to capture focus in edit mode. const shouldRenderFocusCaptureElements = tabIndex >= 0 && ! isPreviewMode; const scaleMinHeight = - scale !== 1 && iframeWindowInnerHeight > contentHeight * scale + isZoomedOut && iframeWindowInnerHeight > contentHeight * scale ? `${ Math.floor( ( iframeWindowInnerHeight - 2 * frameSize ) / scale ) }px` @@ -359,7 +361,7 @@ function Iframe( { Date: Thu, 11 Apr 2024 15:48:41 -0500 Subject: [PATCH 05/15] Remove load callback that isn't needed --- packages/block-editor/src/components/iframe/index.js | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/packages/block-editor/src/components/iframe/index.js b/packages/block-editor/src/components/iframe/index.js index 4b9b4aef22c371..7dd1f0776f9902 100644 --- a/packages/block-editor/src/components/iframe/index.js +++ b/packages/block-editor/src/components/iframe/index.js @@ -130,9 +130,6 @@ function Iframe( { ] = useResizeObserver(); const setRef = useRefEffect( ( node ) => { - node._load = () => { - setIframeDocument( node.contentDocument ); - }; let iFrameDocument; // Prevent the default browser action for files dropped outside of dropzones. function preventFileDropDefault( event ) { @@ -145,6 +142,7 @@ function Iframe( { documentElement.classList.add( 'block-editor-iframe__html' ); + setIframeDocument( node.contentDocument ); clearerRef( documentElement ); // Ideally ALL classes that are added through get_body_class should @@ -194,7 +192,6 @@ function Iframe( { node.addEventListener( 'load', onLoad ); return () => { - delete node._load; node.removeEventListener( 'load', onLoad ); iFrameDocument?.removeEventListener( 'dragover', @@ -241,7 +238,6 @@ function Iframe( { -