2023-10-12 04:32:20 +00:00
|
|
|
// Reference: https://github.com/WordPress/gutenberg/blob/f91b4fb4a12e41dd39c9594f24ea1a1a4e23dade/packages/block-editor/src/components/iframe/index.js#L1
|
|
|
|
|
// We fork the code from the above link to reduce the unnecessary network requests and improve the performance.
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* External dependencies
|
|
|
|
|
*/
|
2024-05-31 03:49:36 +00:00
|
|
|
import clsx from 'clsx';
|
2023-10-12 04:32:20 +00:00
|
|
|
import {
|
|
|
|
|
useState,
|
|
|
|
|
createPortal,
|
|
|
|
|
forwardRef,
|
|
|
|
|
useMemo,
|
|
|
|
|
useEffect,
|
|
|
|
|
} from '@wordpress/element';
|
|
|
|
|
import { __ } from '@wordpress/i18n';
|
|
|
|
|
import {
|
|
|
|
|
useResizeObserver,
|
|
|
|
|
useMergeRefs,
|
|
|
|
|
useRefEffect,
|
|
|
|
|
useDisabled,
|
|
|
|
|
} from '@wordpress/compose';
|
|
|
|
|
import { __experimentalStyleProvider as StyleProvider } from '@wordpress/components';
|
|
|
|
|
import { useSelect } from '@wordpress/data';
|
|
|
|
|
|
2024-08-09 15:15:06 +00:00
|
|
|
import { store as blockEditorStore } from '@wordpress/block-editor';
|
2024-08-06 13:29:21 +00:00
|
|
|
|
2023-10-12 04:32:20 +00:00
|
|
|
function Iframe( {
|
|
|
|
|
contentRef,
|
|
|
|
|
children,
|
|
|
|
|
tabIndex = 0,
|
|
|
|
|
scale = 1,
|
|
|
|
|
frameSize = 0,
|
2024-08-09 15:15:06 +00:00
|
|
|
expand = false,
|
2023-10-12 04:32:20 +00:00
|
|
|
readonly,
|
|
|
|
|
forwardedRef: ref,
|
2024-08-09 15:15:06 +00:00
|
|
|
loadStyles = true,
|
|
|
|
|
loadScripts = false,
|
2023-10-12 04:32:20 +00:00
|
|
|
...props
|
|
|
|
|
} ) {
|
2024-08-09 15:15:06 +00:00
|
|
|
const [ iframeDocument, setIframeDocument ] = useState();
|
|
|
|
|
|
|
|
|
|
const [ bodyClasses, setBodyClasses ] = useState( [] );
|
|
|
|
|
|
2023-11-15 13:06:05 +00:00
|
|
|
const { resolvedAssets } = useSelect( ( select ) => {
|
2024-08-09 15:15:06 +00:00
|
|
|
const settings = select( blockEditorStore ).getSettings();
|
|
|
|
|
|
2023-11-15 13:06:05 +00:00
|
|
|
return {
|
|
|
|
|
resolvedAssets: settings.__unstableResolvedAssets,
|
|
|
|
|
};
|
|
|
|
|
}, [] );
|
2024-08-06 13:29:21 +00:00
|
|
|
const { styles = '', scripts = '' } = resolvedAssets;
|
2024-08-09 15:15:06 +00:00
|
|
|
|
2023-10-12 04:32:20 +00:00
|
|
|
const [ contentResizeListener, { height: contentHeight } ] =
|
|
|
|
|
useResizeObserver();
|
|
|
|
|
const setRef = useRefEffect( ( node ) => {
|
|
|
|
|
node._load = () => {
|
|
|
|
|
setIframeDocument( node.contentDocument );
|
|
|
|
|
};
|
2024-07-05 10:20:49 +00:00
|
|
|
function onLoad() {
|
|
|
|
|
const { contentDocument, ownerDocument } = node;
|
|
|
|
|
const { documentElement } = contentDocument;
|
|
|
|
|
|
|
|
|
|
documentElement.classList.add( 'block-editor-iframe__html' );
|
|
|
|
|
|
|
|
|
|
setBodyClasses(
|
|
|
|
|
Array.from( ownerDocument?.body.classList ).filter(
|
|
|
|
|
( name ) =>
|
|
|
|
|
name.startsWith( 'admin-color-' ) ||
|
|
|
|
|
name.startsWith( 'post-type-' ) ||
|
|
|
|
|
name === 'wp-embed-responsive'
|
|
|
|
|
)
|
|
|
|
|
);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
node.addEventListener( 'load', onLoad );
|
|
|
|
|
|
|
|
|
|
return () => {
|
|
|
|
|
delete node._load;
|
|
|
|
|
node.removeEventListener( 'load', onLoad );
|
|
|
|
|
};
|
2023-10-12 04:32:20 +00:00
|
|
|
}, [] );
|
|
|
|
|
|
|
|
|
|
const disabledRef = useDisabled( { isDisabled: ! readonly } );
|
2024-08-09 15:15:06 +00:00
|
|
|
const bodyRef = useMergeRefs( [ contentRef, disabledRef ] );
|
2023-10-12 04:32:20 +00:00
|
|
|
|
|
|
|
|
// Correct doctype is required to enable rendering in standards
|
|
|
|
|
// mode. Also preload the styles to avoid a flash of unstyled
|
|
|
|
|
// content.
|
|
|
|
|
const html = `<!doctype html>
|
|
|
|
|
<html>
|
|
|
|
|
<head>
|
|
|
|
|
<script>window.frameElement._load()</script>
|
2024-08-09 15:15:06 +00:00
|
|
|
<style>html{height:auto!important;min-height:100%;}body{margin:0}</style>
|
|
|
|
|
${ loadStyles ? styles : '' }
|
|
|
|
|
${ loadScripts ? scripts : '' }
|
2023-10-12 04:32:20 +00:00
|
|
|
</head>
|
|
|
|
|
<body>
|
|
|
|
|
<script>document.currentScript.parentElement.remove()</script>
|
|
|
|
|
</body>
|
|
|
|
|
</html>`;
|
|
|
|
|
|
|
|
|
|
const [ src, cleanup ] = useMemo( () => {
|
|
|
|
|
const _src = URL.createObjectURL(
|
|
|
|
|
new window.Blob( [ html ], { type: 'text/html' } )
|
|
|
|
|
);
|
|
|
|
|
return [ _src, () => URL.revokeObjectURL( _src ) ];
|
|
|
|
|
}, [ html ] );
|
|
|
|
|
|
|
|
|
|
useEffect( () => cleanup, [ cleanup ] );
|
|
|
|
|
|
2024-08-09 15:15:06 +00:00
|
|
|
// 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).
|
|
|
|
|
const marginFromScaling = ( contentHeight * ( 1 - scale ) ) / 2;
|
2024-08-06 13:29:21 +00:00
|
|
|
|
2024-08-09 15:15:06 +00:00
|
|
|
return (
|
2023-10-12 04:32:20 +00:00
|
|
|
<>
|
|
|
|
|
<iframe
|
|
|
|
|
{ ...props }
|
|
|
|
|
style={ {
|
|
|
|
|
...props.style,
|
2024-08-09 15:15:06 +00:00
|
|
|
height: expand ? contentHeight : props.style?.height,
|
|
|
|
|
marginTop:
|
|
|
|
|
scale !== 1
|
|
|
|
|
? -marginFromScaling + frameSize
|
|
|
|
|
: props.style?.marginTop,
|
|
|
|
|
marginBottom:
|
|
|
|
|
scale !== 1
|
|
|
|
|
? -marginFromScaling + frameSize
|
|
|
|
|
: props.style?.marginBottom,
|
|
|
|
|
transform:
|
|
|
|
|
scale !== 1
|
|
|
|
|
? `scale( ${ scale } )`
|
|
|
|
|
: props.style?.transform,
|
2023-10-12 04:32:20 +00:00
|
|
|
transition: 'all .3s',
|
|
|
|
|
} }
|
|
|
|
|
ref={ useMergeRefs( [ ref, setRef ] ) }
|
|
|
|
|
tabIndex={ tabIndex }
|
|
|
|
|
// Correct doctype is required to enable rendering in standards
|
|
|
|
|
// mode. Also preload the styles to avoid a flash of unstyled
|
|
|
|
|
// content.
|
|
|
|
|
src={ src }
|
2024-08-09 15:15:06 +00:00
|
|
|
title={ __( 'Editor canvas', 'woocommerce' ) }
|
2024-02-12 17:33:19 +00:00
|
|
|
name="editor-canvas"
|
2023-10-12 04:32:20 +00:00
|
|
|
>
|
|
|
|
|
{ iframeDocument &&
|
|
|
|
|
createPortal(
|
|
|
|
|
<body
|
|
|
|
|
ref={ bodyRef }
|
2024-05-31 03:49:36 +00:00
|
|
|
className={ clsx(
|
2023-10-12 04:32:20 +00:00
|
|
|
'block-editor-iframe__body',
|
2024-07-05 10:20:49 +00:00
|
|
|
'editor-styles-wrapper',
|
|
|
|
|
...bodyClasses
|
2023-10-12 04:32:20 +00:00
|
|
|
) }
|
|
|
|
|
>
|
|
|
|
|
{ contentResizeListener }
|
|
|
|
|
<StyleProvider document={ iframeDocument }>
|
|
|
|
|
{ children }
|
|
|
|
|
</StyleProvider>
|
|
|
|
|
</body>,
|
|
|
|
|
iframeDocument.documentElement
|
|
|
|
|
) }
|
|
|
|
|
</iframe>
|
|
|
|
|
</>
|
|
|
|
|
);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function IframeIfReady( props, ref ) {
|
|
|
|
|
const isInitialised = useSelect(
|
|
|
|
|
( select ) =>
|
|
|
|
|
select( blockEditorStore ).getSettings().__internalIsInitialized,
|
|
|
|
|
[]
|
|
|
|
|
);
|
|
|
|
|
|
|
|
|
|
// We shouldn't render the iframe until the editor settings are initialised.
|
|
|
|
|
// The initial settings are needed to get the styles for the srcDoc, which
|
|
|
|
|
// cannot be changed after the iframe is mounted. srcDoc is used to to set
|
|
|
|
|
// the initial iframe HTML, which is required to avoid a flash of unstyled
|
|
|
|
|
// content.
|
|
|
|
|
if ( ! isInitialised ) {
|
|
|
|
|
return null;
|
|
|
|
|
}
|
|
|
|
|
|
2024-08-09 15:15:06 +00:00
|
|
|
return <Iframe { ...props } forwardedRef={ ref } />;
|
2023-10-12 04:32:20 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
export default forwardRef( IframeIfReady );
|
