diff --git a/packages/block-editor/src/components/editor-styles/index.js b/packages/block-editor/src/components/editor-styles/index.js
index e5acac522d6515..031df58d5a544a 100644
--- 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
index 129ca8f114a32c..9d619e94ba6e3f 100644
--- 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
index 85634df17ce5c1..9200c56812022c 100644
--- 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() {
-
+
diff --git a/packages/edit-site/src/components/editor/index.js b/packages/edit-site/src/components/editor/index.js
index 93067f58455a2d..4caf304b891b10 100644
--- 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 (
<>
-
@@ -235,6 +243,7 @@ function Editor() {
diff --git a/packages/edit-widgets/src/components/layout/interface.js b/packages/edit-widgets/src/components/layout/interface.js
index 9d680a48f3224c..768fc01e6ae407 100644
--- 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 (
}
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
index 0fbc2959971119..220a558e7fa14d 100644
--- 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 (
<>
-
diff --git a/packages/editor/src/components/provider/index.js b/packages/editor/src/components/provider/index.js
index afa93a98a3ca77..bd0ffb99021a2a 100644
--- 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 (
- <>
-
-
-
-
-
- { children }
-
-
-
-
-
+
+
+
+
+ { children }
+
+
+
+
- >
+
);
}
}