From 4e9a7263e40c0787bd7392eaae161b7441a46c06 Mon Sep 17 00:00:00 2001 From: Noah Allen Date: Wed, 1 Apr 2020 19:20:33 -0700 Subject: [PATCH 1/2] Fix global styles --- .../global-styles/src/dom-updater.js | 21 ++++++++++++++----- 1 file changed, 16 insertions(+), 5 deletions(-) diff --git a/apps/full-site-editing/full-site-editing-plugin/global-styles/src/dom-updater.js b/apps/full-site-editing/full-site-editing-plugin/global-styles/src/dom-updater.js index a5a632e8c09d58..b209c12bae8eb5 100644 --- a/apps/full-site-editing/full-site-editing-plugin/global-styles/src/dom-updater.js +++ b/apps/full-site-editing/full-site-editing-plugin/global-styles/src/dom-updater.js @@ -1,7 +1,7 @@ /** * External dependencies */ -import { subscribe } from '@wordpress/data'; +import { subscribe, select } from '@wordpress/data'; import domReady from '@wordpress/dom-ready'; import { isEmpty, isEqual } from 'lodash'; @@ -13,10 +13,6 @@ import { isEmpty, isEqual } from 'lodash'; */ export default ( options, getOptionValue ) => { domReady( () => { - // Create style node. - const styleElement = document.createElement( 'style' ); - document.body.appendChild( styleElement ); - // Book-keeping. const currentOptions = {}; let previousOptions = {}; @@ -25,7 +21,22 @@ export default ( options, getOptionValue ) => { cssVariables[ option ] = `--${ option.replace( '_', '-' ) }`; } ); + let styleElement = null; subscribe( () => { + // Do nothing until the editor is ready. + const isEditorReady = select( 'core/editor' ).__unstableIsEditorReady; + if ( isEditorReady && isEditorReady() === false ) { + return; + } + + // Create style element if it has not been created yet. Must happen + // after the editor is ready or the style element will be appended + // before the styles it needs to affect. + if ( ! styleElement ) { + styleElement = document.createElement( 'style' ); + document.body.appendChild( styleElement ); + } + // Maybe bail-out early. options.forEach( option => { currentOptions[ option ] = getOptionValue( option ); From 29b72be4f6c82342f9d580f7f0db2406a6a67451 Mon Sep 17 00:00:00 2001 From: Noah Allen Date: Thu, 2 Apr 2020 08:37:56 -0700 Subject: [PATCH 2/2] Add comment linking to GH --- .../global-styles/src/dom-updater.js | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/apps/full-site-editing/full-site-editing-plugin/global-styles/src/dom-updater.js b/apps/full-site-editing/full-site-editing-plugin/global-styles/src/dom-updater.js index b209c12bae8eb5..9d4094ce7166b6 100644 --- a/apps/full-site-editing/full-site-editing-plugin/global-styles/src/dom-updater.js +++ b/apps/full-site-editing/full-site-editing-plugin/global-styles/src/dom-updater.js @@ -23,7 +23,13 @@ export default ( options, getOptionValue ) => { let styleElement = null; subscribe( () => { - // Do nothing until the editor is ready. + /** + * Do nothing until the editor is ready. This is required when + * working in wpcom iframe environment to avoid running code before + * everything has loaded, which can cause bugs like the following. + * + * @see https://github.com/Automattic/wp-calypso/pull/40690 + */ const isEditorReady = select( 'core/editor' ).__unstableIsEditorReady; if ( isEditorReady && isEditorReady() === false ) { return;