Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Iframe: preload style assets to avoid flash of unstyled content #46706

Merged
merged 5 commits into from
Jan 9, 2023
Merged

Iframe: preload style assets to avoid flash of unstyled content #46706

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
6c95889
Iframe: preload style assets to avoid flash of unstyled content
ellatrix Dec 21, 2022
c094ac3
Merge everything into one select call
ellatrix Dec 21, 2022
b19bef8
Address feedback
ellatrix Dec 22, 2022
0dd8203
fix typo
ellatrix Dec 22, 2022
2f539a4
Reduce diff
ellatrix Dec 22, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 1 addition & 3 deletions packages/block-editor/src/components/block-preview/auto.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,11 +33,10 @@ function ScaledBlockPreview( {

const [ contentResizeListener, { height: contentHeight } ] =
useResizeObserver();
const { styles, assets, duotone } = useSelect( ( select ) => {
const { styles, duotone } = useSelect( ( select ) => {
const settings = select( store ).getSettings();
return {
styles: settings.styles,
assets: settings.__unstableResolvedAssets,
duotone: settings.__experimentalFeatures?.color?.duotone,
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It makes me wonder about these two remaining things: styles, duotone. How are they being handled in the case of the regular editors? Wondering if there's a way to move them to the iframe automatically?

Copy link
Member Author

@ellatrix ellatrix Dec 23, 2022 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The styles are passed to <EditorStyles>, which is created separately from the Iframe and then passed to it. I guess at some point we can also integrate this.
Don't know about duotone. It seems to create SVG filters and then renders it in the content area. Tbh, that doesn't feel like the iframe's responsibility, Ideally this should be isolated to the duotone hook.

};
}, [] );
Expand Down Expand Up @@ -79,7 +78,6 @@ function ScaledBlockPreview( {
>
<Iframe
head={ <EditorStyles styles={ editorStyles } /> }
assets={ assets }
contentRef={ useRefEffect( ( bodyElement ) => {
const {
ownerDocument: { documentElement },
Expand Down
71 changes: 52 additions & 19 deletions packages/block-editor/src/components/iframe/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ import {
forwardRef,
useMemo,
useReducer,
renderToString,
} from '@wordpress/element';
import { __ } from '@wordpress/i18n';
import {
Expand All @@ -20,13 +21,15 @@ import {
useRefEffect,
} from '@wordpress/compose';
import { __experimentalStyleProvider as StyleProvider } from '@wordpress/components';
import { useSelect } from '@wordpress/data';

/**
* Internal dependencies
*/
import { useBlockSelectionClearer } from '../block-selection-clearer';
import { useWritingFlow } from '../writing-flow';
import { useCompatibilityStyles } from './use-compatibility-styles';
import { store as blockEditorStore } from '../../store';

/**
* Bubbles some event types (keydown, keypress, and dragover) to parent document
Expand Down Expand Up @@ -97,20 +100,22 @@ async function loadScript( head, { id, src } ) {
} );
}

function Iframe(
{
contentRef,
children,
head,
tabIndex = 0,
assets,
scale = 1,
frameSize = 0,
readonly,
...props
},
ref
) {
function Iframe( {
contentRef,
children,
head,
tabIndex = 0,
scale = 1,
frameSize = 0,
readonly,
forwardedRef: ref,
...props
} ) {
const assets = useSelect(
( select ) =>
select( blockEditorStore ).getSettings().__unstableResolvedAssets,
[]
);
const [ , forceRender ] = useReducer( () => ( {} ) );
const [ iframeDocument, setIframeDocument ] = useState();
const [ bodyClasses, setBodyClasses ] = useState( [] );
Expand Down Expand Up @@ -204,7 +209,7 @@ function Iframe(
}, [] );
const bodyRef = useMergeRefs( [ contentRef, clearerRef, writingFlowRef ] );

head = (
const styleAssets = (
<>
<style>{ 'html{height:auto!important;}body{margin:0}' }</style>
{ [ ...styles, ...neededCompatStyles ].map(
Expand All @@ -224,25 +229,34 @@ function Iframe(
);
}
) }
{ head }
</>
);

// 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 '<!doctype html>' + renderToString( styleAssets );
youknowriad marked this conversation as resolved.
Show resolved Hide resolved
}, [] );

return (
<>
{ tabIndex >= 0 && before }
<iframe
{ ...props }
ref={ useMergeRefs( [ ref, setRef ] ) }
tabIndex={ tabIndex }
// Correct doctype is required to enable rendering in standards mode
srcDoc="<!doctype html>"
// Correct doctype is required to enable rendering in standards
// mode. Also preload the styles to avoid a flash of unstyled
// content.
srcDoc={ srcDoc }
title={ __( 'Editor canvas' ) }
>
{ iframeDocument &&
createPortal(
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ideally we do something like hydrateRoot in the future so existing HTML is reused.

<>
<head ref={ headRef }>
{ styleAssets }
{ head }
<style>
{ `html { transition: background 5s; ${
Expand Down Expand Up @@ -286,4 +300,23 @@ function Iframe(
);
}

export default forwardRef( 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;
}

return <Iframe { ...props } forwardedRef={ ref } />;
}

export default forwardRef( IframeIfReady );
5 changes: 4 additions & 1 deletion packages/block-editor/src/components/provider/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,10 @@ function BlockEditorProvider( props ) {

const { updateSettings } = useDispatch( blockEditorStore );
useEffect( () => {
updateSettings( settings );
updateSettings( {
...settings,
__internalIsInitialized: true,
} );
}, [ settings ] );

// Syncs the entity provider with changes in the block-editor store.
Expand Down
34 changes: 10 additions & 24 deletions packages/edit-post/src/components/visual-editor/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,14 +46,7 @@ import { store as coreStore } from '@wordpress/core-data';
import BlockInspectorButton from './block-inspector-button';
import { store as editPostStore } from '../../store';

function MaybeIframe( {
children,
contentRef,
shouldIframe,
styles,
assets,
style,
} ) {
function MaybeIframe( { children, contentRef, shouldIframe, styles, style } ) {
const ref = useMouseMoveTypingReset();

if ( ! shouldIframe ) {
Expand All @@ -75,7 +68,6 @@ function MaybeIframe( {
return (
<Iframe
head={ <EditorStyles styles={ styles } /> }
assets={ assets }
ref={ ref }
contentRef={ contentRef }
style={ { width: '100%', height: '100%', display: 'block' } }
Expand Down Expand Up @@ -165,20 +157,15 @@ export default function VisualEditor( { styles } ) {
( select ) => select( editPostStore ).hasMetaBoxes(),
[]
);
const {
themeHasDisabledLayoutStyles,
themeSupportsLayout,
assets,
isFocusMode,
} = useSelect( ( select ) => {
const _settings = select( blockEditorStore ).getSettings();
return {
themeHasDisabledLayoutStyles: _settings.disableLayoutStyles,
themeSupportsLayout: _settings.supportsLayout,
assets: _settings.__unstableResolvedAssets,
isFocusMode: _settings.focusMode,
};
}, [] );
const { themeHasDisabledLayoutStyles, themeSupportsLayout, isFocusMode } =
useSelect( ( select ) => {
const _settings = select( blockEditorStore ).getSettings();
return {
themeHasDisabledLayoutStyles: _settings.disableLayoutStyles,
themeSupportsLayout: _settings.supportsLayout,
isFocusMode: _settings.focusMode,
};
}, [] );
const { clearSelectedBlock } = useDispatch( blockEditorStore );
const { setIsEditingTemplate } = useDispatch( editPostStore );
const desktopCanvasStyles = {
Expand Down Expand Up @@ -361,7 +348,6 @@ export default function VisualEditor( { styles } ) {
}
contentRef={ contentRef }
styles={ styles }
assets={ assets }
>
{ themeSupportsLayout &&
! themeHasDisabledLayoutStyles &&
Expand Down
1 change: 0 additions & 1 deletion packages/edit-site/src/components/block-editor/editor-canvas.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -53,7 +53,6 @@ function EditorCanvas( { enableResizing, settings, children, ...props } ) {
) }
</>
}
assets={ settings.__unstableResolvedAssets }
ref={ mouseMoveTypingRef }
name="editor-canvas"
className="edit-site-visual-editor__editor-canvas"
Expand Down