Remove duplication of editor styles (#28837)

* Revert "Fix global styles in iframed site editor (#28731)" This reverts commit 9c206dd. * Iframe editor styles: remove duplication * Polish * Use useMergeRefs * Use React for rendering style elements * Fix package.json
WordPress · Feb 11, 2021 · bbb9934 · bbb9934
1 parent 95551d9
commit bbb9934
Show file tree

Hide file tree

Showing 7 changed files with 66 additions and 111 deletions.
diff --git a/packages/block-editor/src/components/editor-styles/index.js b/packages/block-editor/src/components/editor-styles/index.js
@@ -1,62 +1,57 @@
 /**
  * External dependencies
  */
-import { compact, map } from 'lodash';
 import tinycolor from 'tinycolor2';
 
 /**
  * WordPress dependencies
  */
-import { useCallback, useRef } from '@wordpress/element';
+import { useCallback } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
 import transformStyles from '../../utils/transform-styles';
 
-function syncDarkThemeBodyClassname( node ) {
-	const backgroundColor = window
-		.getComputedStyle( node, null )
-		.getPropertyValue( 'background-color' );
-
-	const { ownerDocument } = node;
-	const body = ownerDocument.getElementsByTagName( 'body' )[ 0 ];
-
-	if ( tinycolor( backgroundColor ).getLuminance() > 0.5 ) {
-		body.classList.remove( 'is-dark-theme' );
-	} else {
-		body.classList.add( 'is-dark-theme' );
-	}
-}
-
-export default function useEditorStyles( styles ) {
-	const nodes = useRef( [] );
+const EDITOR_STYLES_SELECTOR = '.editor-styles-wrapper';
 
+function useDarkThemeBodyClassName( styles ) {
 	return useCallback(
 		( node ) => {
 			if ( ! node ) {
-				nodes.current.forEach( ( styleElement ) =>
-					styleElement.ownerDocument.body.removeChild( styleElement )
-				);
 				return;
 			}
 
-			const updatedStyles = transformStyles(
-				styles,
-				'.editor-styles-wrapper'
-			);
-
 			const { ownerDocument } = node;
-			nodes.current = map( compact( updatedStyles ), ( updatedCSS ) => {
-				const styleElement = ownerDocument.createElement( 'style' );
-				styleElement.innerHTML = updatedCSS;
-				ownerDocument.body.appendChild( styleElement );
-
-				return styleElement;
-			} );
-
-			syncDarkThemeBodyClassname( node );
+			const { defaultView, body } = ownerDocument;
+			const canvas = ownerDocument.querySelector(
+				EDITOR_STYLES_SELECTOR
+			);
+			const backgroundColor = defaultView
+				.getComputedStyle( canvas, null )
+				.getPropertyValue( 'background-color' );
+
+			if ( tinycolor( backgroundColor ).getLuminance() > 0.5 ) {
+				body.classList.remove( 'is-dark-theme' );
+			} else {
+				body.classList.add( 'is-dark-theme' );
+			}
 		},
 		[ styles ]
 	);
 }
+
+export default function EditorStyles( { styles } ) {
+	return (
+		<>
+			{ /* Use an empty style element to have a document reference,
+			     but this could be any element. */ }
+			<style ref={ useDarkThemeBodyClassName( styles ) } />
+			{ transformStyles( styles, EDITOR_STYLES_SELECTOR ).map(
+				( css, index ) => (
+					<style key={ index }>{ css }</style>
+				)
+			) }
+		</>
+	);
+}
diff --git a/packages/block-editor/src/components/iframe/index.js b/packages/block-editor/src/components/iframe/index.js
@@ -1,27 +1,15 @@
-/**
- * External dependencies
- */
-import { compact, map } from 'lodash';
-import tinycolor from 'tinycolor2';
-
 /**
  * WordPress dependencies
  */
 import {
 	useState,
 	createPortal,
 	useCallback,
-	useEffect,
 	forwardRef,
 } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import { useMergeRefs } from '@wordpress/compose';
 
-/**
- * Internal dependencies
- */
-import transformStyles from '../../utils/transform-styles';
-
 const BODY_CLASS_NAME = 'editor-styles-wrapper';
 const BLOCK_PREFIX = 'wp-block';
 
@@ -144,56 +132,34 @@ function setHead( doc, head ) {
 		'<style>body{margin:0}</style>' + head;
 }
 
-function updateEditorStyles( doc, styles ) {
-	if ( ! doc ) {
-		return;
-	}
-
-	const backgroundColor = window
-		.getComputedStyle( doc.body, null )
-		.getPropertyValue( 'background-color' );
-	if ( tinycolor( backgroundColor ).getLuminance() > 0.5 ) {
-		doc.body.classList.remove( 'is-dark-theme' );
-	} else {
-		doc.body.classList.add( 'is-dark-theme' );
-	}
-
-	const updatedStyles = transformStyles( styles, '.editor-styles-wrapper' );
-	map( compact( updatedStyles ), ( updatedStyle ) => {
-		const styleElement = doc.createElement( 'style' );
-		styleElement.innerHTML = updatedStyle;
-		doc.body.appendChild( styleElement );
-	} );
-}
-
-function Iframe( { contentRef, editorStyles, children, head, ...props }, ref ) {
+function Iframe( { contentRef, children, head, headHTML, ...props }, ref ) {
 	const [ iframeDocument, setIframeDocument ] = useState();
 
-	useEffect( () => {
-		updateEditorStyles( iframeDocument, editorStyles );
-	}, [ editorStyles ] );
-
 	const setRef = useCallback( ( node ) => {
 		if ( ! node ) {
 			return;
 		}
 
 		function setDocumentIfReady() {
 			const { contentDocument } = node;
-			const { readyState } = contentDocument;
+			const { readyState, body } = contentDocument;
 
 			if ( readyState !== 'interactive' && readyState !== 'complete' ) {
 				return false;
 			}
 
-			contentRef.current = contentDocument.body;
-			setIframeDocument( contentDocument );
-			setHead( contentDocument, head );
+			if ( typeof contentRef === 'function' ) {
+				contentRef( body );
+			} else if ( contentRef ) {
+				contentRef.current = body;
+			}
+
+			setHead( contentDocument, headHTML );
 			setBodyClassName( contentDocument );
 			styleSheetsCompat( contentDocument );
-			updateEditorStyles( contentDocument, editorStyles );
 			bubbleEvents( contentDocument );
 			setBodyClassName( contentDocument );
+			setIframeDocument( contentDocument );
 
 			return true;
 		}
@@ -217,6 +183,7 @@ function Iframe( { contentRef, editorStyles, children, head, ...props }, ref ) {
 			name="editor-canvas"
 		>
 			{ iframeDocument && createPortal( children, iframeDocument.body ) }
+			{ iframeDocument && createPortal( head, iframeDocument.head ) }
 		</iframe>
 	);
 }

diff --git a/packages/block-editor/src/components/index.js b/packages/block-editor/src/components/index.js
@@ -95,7 +95,7 @@ export {
 	useClipboardHandler as __unstableUseClipboardHandler,
 } from './copy-handler';
 export { default as DefaultBlockAppender } from './default-block-appender';
-export { default as __unstableUseEditorStyles } from './editor-styles';
+export { default as __unstableEditorStyles } from './editor-styles';
 export { default as Inserter } from './inserter';
 export { default as __experimentalLibrary } from './inserter/library';
 export { default as __experimentalSearchForm } from './inserter/search-form';

diff --git a/packages/edit-post/src/components/visual-editor/index.js b/packages/edit-post/src/components/visual-editor/index.js
@@ -16,11 +16,10 @@ import {
 	__experimentalBlockSettingsMenuFirstItem,
 	__experimentalUseResizeCanvas as useResizeCanvas,
 	__unstableUseCanvasClickRedirect as useCanvasClickRedirect,
-	__unstableUseEditorStyles as useEditorStyles,
+	__unstableEditorStyles as EditorStyles,
 } from '@wordpress/block-editor';
 import { Popover } from '@wordpress/components';
 import { useRef } from '@wordpress/element';
-import { useMergeRefs } from '@wordpress/compose';
 
 /**
  * Internal dependencies
@@ -59,14 +58,14 @@ export default function VisualEditor( { styles } ) {
 	useClipboardHandler( ref );
 	useTypingObserver( ref );
 	useCanvasClickRedirect( ref );
-	const editorStylesRef = useEditorStyles( styles );
 
 	return (
 		<div className="edit-post-visual-editor">
+			<EditorStyles styles={ styles } />
 			<VisualEditorGlobalKeyboardShortcuts />
 			<Popover.Slot name="block-toolbar" />
 			<div
-				ref={ useMergeRefs( [ ref, editorStylesRef ] ) }
+				ref={ ref }
 				className="editor-styles-wrapper"
 				style={ resizedCanvasStyles || desktopCanvasStyles }
 			>

diff --git a/packages/edit-site/src/components/block-editor/index.js b/packages/edit-site/src/components/block-editor/index.js
@@ -15,7 +15,7 @@ import {
 	__unstableUseBlockSelectionClearer as useBlockSelectionClearer,
 	__unstableUseTypingObserver as useTypingObserver,
 	__unstableUseMouseMoveTypingReset as useMouseMoveTypingReset,
-	__unstableUseEditorStyles as useEditorStyles,
+	__unstableEditorStyles as EditorStyles,
 	__unstableIframe as Iframe,
 } from '@wordpress/block-editor';
 import { DropZoneProvider, Popover } from '@wordpress/components';
@@ -69,10 +69,6 @@ export default function BlockEditor( { setIsInserterOpen } ) {
 	const contentRef = useRef();
 
 	useMouseMoveTypingReset( ref );
-	// This updates the host document styles.
-	// It is necessary to make sure the preset CSS Custom Properties
-	// are in scope for the sidebar UI controls that use them.
-	const editorStylesRef = useEditorStyles( settings.styles );
 
 	// Allow scrolling "through" popovers over the canvas. This is only called
 	// for as long as the pointer is over a popover.
@@ -105,20 +101,16 @@ export default function BlockEditor( { setIsInserterOpen } ) {
 			<SidebarInspectorFill>
 				<BlockInspector />
 			</SidebarInspectorFill>
-			<div
-				ref={ editorStylesRef }
-				className="edit-site-visual-editor"
-				onWheel={ onWheel }
-			>
+			<div className="edit-site-visual-editor" onWheel={ onWheel }>
 				<Popover.Slot name="block-toolbar" />
 				<Iframe
 					style={ resizedCanvasStyles }
-					editorStyles={ settings.styles }
-					head={ window.__editorStyles.html }
+					headHTML={ window.__editorStyles.html }
+					head={ <EditorStyles styles={ settings.styles } /> }
 					ref={ ref }
 					contentRef={ contentRef }
 				>
-					<Canvas body={ contentRef } styles={ settings.styles } />
+					<Canvas body={ contentRef } />
 				</Iframe>
 			</div>
 		</BlockEditorProvider>

diff --git a/packages/edit-widgets/src/components/layout/interface.js b/packages/edit-widgets/src/components/layout/interface.js
@@ -7,10 +7,7 @@ import {
 	useViewportMatch,
 } from '@wordpress/compose';
 import { close } from '@wordpress/icons';
-import {
-	__experimentalLibrary as Library,
-	__unstableUseEditorStyles as useEditorStyles,
-} from '@wordpress/block-editor';
+import { __experimentalLibrary as Library } from '@wordpress/block-editor';
 import { useEffect } from '@wordpress/element';
 import { useDispatch, useSelect } from '@wordpress/data';
 import {
@@ -45,13 +42,15 @@ function Interface( { blockEditorSettings } ) {
 	);
 	const { rootClientId, insertionIndex } = useWidgetLibraryInsertionPoint();
 
-	const { hasSidebarEnabled, isInserterOpened } = useSelect( ( select ) => ( {
-		hasSidebarEnabled: !! select(
-			interfaceStore
-		).getActiveComplementaryArea( editWidgetsStore ),
-		isInserterOpened: !! select( editWidgetsStore ).isInserterOpened(),
-	} ) );
-	const editorStylesRef = useEditorStyles( blockEditorSettings.styles );
+	const { hasSidebarEnabled, isInserterOpened } = useSelect(
+		( select ) => ( {
+			hasSidebarEnabled: !! select(
+				interfaceStore
+			).getActiveComplementaryArea( editWidgetsStore.name ),
+			isInserterOpened: !! select( editWidgetsStore ).isInserterOpened(),
+		} ),
+		[]
+	);
 
 	// Inserter and Sidebars are mutually exclusive
 	useEffect( () => {
@@ -72,7 +71,6 @@ function Interface( { blockEditorSettings } ) {
 
 	return (
 		<InterfaceSkeleton
-			ref={ editorStylesRef }
 			labels={ interfaceLabels }
 			header={ <Header /> }
 			secondarySidebar={

diff --git a/packages/edit-widgets/src/components/widget-areas-block-editor-content/index.js b/packages/edit-widgets/src/components/widget-areas-block-editor-content/index.js
@@ -8,6 +8,7 @@ import {
 	BlockSelectionClearer,
 	WritingFlow,
 	ObserveTyping,
+	__unstableEditorStyles as EditorStyles,
 } from '@wordpress/block-editor';
 
 /**
@@ -16,9 +17,12 @@ import {
 import Notices from '../notices';
 import KeyboardShortcuts from '../keyboard-shortcuts';
 
-export default function WidgetAreasBlockEditorContent() {
+export default function WidgetAreasBlockEditorContent( {
+	blockEditorSettings,
+} ) {
 	return (
 		<div className="edit-widgets-block-editor editor-styles-wrapper">
+			<EditorStyles styles={ blockEditorSettings.styles } />
 			<KeyboardShortcuts />
 			<BlockEditorKeyboardShortcuts />
 			<Notices />