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 } + + + + - + ); } }