Editor styles: convert to hook (#27080)

* Editor styles: convert to hook * Format * Fix import * Add ref to dependency array
WordPress · Nov 25, 2020 · 6f55369 · 6f55369
1 parent f1b561a
commit 6f55369
Show file tree

Hide file tree

Showing 8 changed files with 58 additions and 46 deletions.
diff --git a/packages/block-editor/src/components/editor-styles/index.js b/packages/block-editor/src/components/editor-styles/index.js
@@ -13,26 +13,23 @@ import { useEffect } from '@wordpress/element';
  */
 import transformStyles from '../../utils/transform-styles';
 
-function EditorStyles( { styles } ) {
+export default function useEditorStyles( ref, styles ) {
 	useEffect( () => {
 		const updatedStyles = transformStyles(
 			styles,
 			'.editor-styles-wrapper'
 		);
 
+		const { ownerDocument } = ref.current;
 		const nodes = map( compact( updatedStyles ), ( updatedCSS ) => {
-			const node = document.createElement( 'style' );
+			const node = ownerDocument.createElement( 'style' );
 			node.innerHTML = updatedCSS;
-			document.body.appendChild( node );
+			ownerDocument.body.appendChild( node );
 
 			return node;
 		} );
 
 		return () =>
-			nodes.forEach( ( node ) => document.body.removeChild( node ) );
-	}, [ styles ] );
-
-	return null;
+			nodes.forEach( ( node ) => ownerDocument.body.removeChild( node ) );
+	}, [ ref, styles ] );
 }
-
-export default EditorStyles;
diff --git a/packages/block-editor/src/components/index.js b/packages/block-editor/src/components/index.js
@@ -97,7 +97,7 @@ export {
 	useClipboardHandler as __unstableUseClipboardHandler,
 } from './copy-handler';
 export { default as DefaultBlockAppender } from './default-block-appender';
-export { default as __unstableEditorStyles } from './editor-styles';
+export { default as __unstableUseEditorStyles } 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/layout/index.js b/packages/edit-post/src/components/layout/index.js
@@ -17,6 +17,7 @@ import { useSelect, useDispatch } from '@wordpress/data';
 import {
 	BlockBreadcrumb,
 	__experimentalLibrary as Library,
+	__unstableUseEditorStyles as useEditorStyles,
 } from '@wordpress/block-editor';
 import {
 	Button,
@@ -32,7 +33,7 @@ import {
 	FullscreenMode,
 	InterfaceSkeleton,
 } from '@wordpress/interface';
-import { useState, useEffect, useCallback } from '@wordpress/element';
+import { useState, useEffect, useCallback, useRef } from '@wordpress/element';
 import { close } from '@wordpress/icons';
 
 /**
@@ -66,7 +67,7 @@ const interfaceLabels = {
 	footer: __( 'Editor footer' ),
 };
 
-function Layout() {
+function Layout( { settings } ) {
 	const isMobileViewport = useViewportMatch( 'medium', '<' );
 	const isHugeViewport = useViewportMatch( 'huge', '>=' );
 	const {
@@ -163,6 +164,9 @@ function Layout() {
 		},
 		[ entitiesSavedStatesCallback ]
 	);
+	const ref = useRef();
+
+	useEditorStyles( ref, settings.styles );
 
 	return (
 		<>
@@ -176,6 +180,7 @@ function Layout() {
 			<SettingsSidebar />
 			<FocusReturnProvider>
 				<InterfaceSkeleton
+					ref={ ref }
 					className={ className }
 					labels={ interfaceLabels }
 					header={

diff --git a/packages/edit-post/src/editor.js b/packages/edit-post/src/editor.js
@@ -146,7 +146,7 @@ class Editor extends Component {
 							>
 								<ErrorBoundary onError={ onError }>
 									<EditorInitialization postId={ postId } />
-									<Layout />
+									<Layout settings={ settings } />
 									<KeyboardShortcuts
 										shortcuts={ preventEventDiscovery }
 									/>

diff --git a/packages/edit-site/src/components/editor/index.js b/packages/edit-site/src/components/editor/index.js
@@ -1,7 +1,13 @@
 /**
  * WordPress dependencies
  */
-import { useEffect, useState, useMemo, useCallback } from '@wordpress/element';
+import {
+	useEffect,
+	useState,
+	useMemo,
+	useCallback,
+	useRef,
+} from '@wordpress/element';
 import { useSelect, useDispatch } from '@wordpress/data';
 import {
 	SlotFillProvider,
@@ -15,7 +21,7 @@ import {
 	BlockContextProvider,
 	BlockSelectionClearer,
 	BlockBreadcrumb,
-	__unstableEditorStyles as EditorStyles,
+	__unstableUseEditorStyles as useEditorStyles,
 	__experimentalUseResizeCanvas as useResizeCanvas,
 	__experimentalLibrary as Library,
 } from '@wordpress/block-editor';
@@ -191,10 +197,12 @@ function Editor() {
 	}, [ isNavigationOpen ] );
 
 	const isMobile = useViewportMatch( 'medium', '<' );
+	const ref = useRef();
+
+	useEditorStyles( ref, settings.styles );
 
 	return (
 		<>
-			<EditorStyles styles={ settings.styles } />
 			<FullscreenMode isActive={ isFullscreenActive } />
 			<UnsavedChangesWarning />
 			<SlotFillProvider>
@@ -235,6 +243,7 @@ function Editor() {
 												<KeyboardShortcuts.Register />
 												<SidebarComplementaryAreaFills />
 												<InterfaceSkeleton
+													ref={ ref }
 													labels={ interfaceLabels }
 													drawer={
 														<NavigationSidebar />

diff --git a/packages/edit-widgets/src/components/layout/interface.js b/packages/edit-widgets/src/components/layout/interface.js
@@ -4,8 +4,11 @@
 import { Button } from '@wordpress/components';
 import { useViewportMatch } from '@wordpress/compose';
 import { close } from '@wordpress/icons';
-import { __experimentalLibrary as Library } from '@wordpress/block-editor';
-import { useEffect } from '@wordpress/element';
+import {
+	__experimentalLibrary as Library,
+	__unstableUseEditorStyles as useEditorStyles,
+} from '@wordpress/block-editor';
+import { useEffect, useRef } from '@wordpress/element';
 import { useDispatch, useSelect } from '@wordpress/data';
 import { InterfaceSkeleton, ComplementaryArea } from '@wordpress/interface';
 import { __ } from '@wordpress/i18n';
@@ -41,6 +44,9 @@ function Interface( { blockEditorSettings } ) {
 		).getActiveComplementaryArea( 'core/edit-widgets' ),
 		isInserterOpened: !! select( 'core/edit-widgets' ).isInserterOpened(),
 	} ) );
+	const ref = useRef();
+
+	useEditorStyles( ref, blockEditorSettings.styles );
 
 	// Inserter and Sidebars are mutually exclusive
 	useEffect( () => {
@@ -57,6 +63,7 @@ function Interface( { blockEditorSettings } ) {
 
 	return (
 		<InterfaceSkeleton
+			ref={ ref }
 			labels={ interfaceLabels }
 			header={ <Header /> }
 			secondarySidebar={

diff --git a/packages/edit-widgets/src/components/widget-areas-block-editor-provider/index.js b/packages/edit-widgets/src/components/widget-areas-block-editor-provider/index.js
@@ -17,7 +17,6 @@ import { useMemo } from '@wordpress/element';
 import {
 	BlockEditorProvider,
 	BlockEditorKeyboardShortcuts,
-	__unstableEditorStyles as EditorStyles,
 } from '@wordpress/block-editor';
 import { ReusableBlocksMenuItems } from '@wordpress/reusable-blocks';
 
@@ -86,7 +85,6 @@ export default function WidgetAreasBlockEditorProvider( {
 
 	return (
 		<>
-			<EditorStyles styles={ settings.styles } />
 			<BlockEditorKeyboardShortcuts.Register />
 			<KeyboardShortcuts.Register />
 			<SlotFillProvider>

diff --git a/packages/editor/src/components/provider/index.js b/packages/editor/src/components/provider/index.js
@@ -15,7 +15,6 @@ import { EntityProvider } from '@wordpress/core-data';
 import {
 	BlockEditorProvider,
 	BlockContextProvider,
-	__unstableEditorStyles as EditorStyles,
 } from '@wordpress/block-editor';
 import apiFetch from '@wordpress/api-fetch';
 import { addQueryArgs } from '@wordpress/url';
@@ -269,32 +268,29 @@ class EditorProvider extends Component {
 		);
 
 		return (
-			<>
-				<EditorStyles styles={ settings.styles } />
-				<EntityProvider kind="root" type="site">
-					<EntityProvider
-						kind="postType"
-						type={ post.type }
-						id={ post.id }
-					>
-						<BlockContextProvider value={ defaultBlockContext }>
-							<BlockEditorProvider
-								value={ blocks }
-								onInput={ resetEditorBlocksWithoutUndoLevel }
-								onChange={ resetEditorBlocks }
-								selectionStart={ selectionStart }
-								selectionEnd={ selectionEnd }
-								settings={ editorSettings }
-								useSubRegistry={ false }
-							>
-								{ children }
-								<ReusableBlocksMenuItems />
-								<ConvertToGroupButtons />
-							</BlockEditorProvider>
-						</BlockContextProvider>
-					</EntityProvider>
+			<EntityProvider kind="root" type="site">
+				<EntityProvider
+					kind="postType"
+					type={ post.type }
+					id={ post.id }
+				>
+					<BlockContextProvider value={ defaultBlockContext }>
+						<BlockEditorProvider
+							value={ blocks }
+							onInput={ resetEditorBlocksWithoutUndoLevel }
+							onChange={ resetEditorBlocks }
+							selectionStart={ selectionStart }
+							selectionEnd={ selectionEnd }
+							settings={ editorSettings }
+							useSubRegistry={ false }
+						>
+							{ children }
+							<ReusableBlocksMenuItems />
+							<ConvertToGroupButtons />
+						</BlockEditorProvider>
+					</BlockContextProvider>
 				</EntityProvider>
-			</>
+			</EntityProvider>
 		);
 	}
 }