Apply a StyleProvider around fills that can be used inside the iframe

packages/block-editor/README.md

@@ -194,6 +194,14 @@ _Related_
 
 -   <https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/block-settings-menu-controls/README.md>
 
+_Parameters_
+
+-   _props_ `Object`: Fill props.
+
+_Returns_
+
+-   `WPElement`: Element.
+
 <a name="BlockTitle" href="#BlockTitle">#</a> **BlockTitle**
 
 Renders the block's configured title as a string, or empty if the title

packages/block-editor/src/components/block-controls/fill.js

@@ -7,6 +7,7 @@ import { isEmpty } from 'lodash';
  * WordPress dependencies
  */
 import {
+	__experimentalStyleProvider as StyleProvider,
 	__experimentalToolbarContext as ToolbarContext,
 	ToolbarGroup,
 } from '@wordpress/components';
@@ -28,21 +29,23 @@ export default function BlockControlsFill( {
 	const Fill = groups[ group ].Fill;
 
 	return (
-		<Fill>
-			{ ( fillProps ) => {
-				// Children passed to BlockControlsFill will not have access to any
-				// React Context whose Provider is part of the BlockControlsSlot tree.
-				// So we re-create the Provider in this subtree.
-				const value = ! isEmpty( fillProps ) ? fillProps : null;
-				return (
-					<ToolbarContext.Provider value={ value }>
-						{ group === 'default' && (
-							<ToolbarGroup controls={ controls } />
-						) }
-						{ children }
-					</ToolbarContext.Provider>
-				);
-			} }
-		</Fill>
+		<StyleProvider document={ document }>
+			<Fill>
+				{ ( fillProps ) => {
+					// Children passed to BlockControlsFill will not have access to any
+					// React Context whose Provider is part of the BlockControlsSlot tree.
+					// So we re-create the Provider in this subtree.
+					const value = ! isEmpty( fillProps ) ? fillProps : null;
+					return (
+						<ToolbarContext.Provider value={ value }>
+							{ group === 'default' && (
+								<ToolbarGroup controls={ controls } />
+							) }
+							{ children }
+						</ToolbarContext.Provider>
+					);
+				} }
+			</Fill>
+		</StyleProvider>
 	);
 }

packages/block-editor/src/components/block-settings-menu-controls/index.js

@@ -6,7 +6,11 @@ import { compact, map } from 'lodash';
 /**
  * WordPress dependencies
  */
-import { createSlotFill, MenuGroup } from '@wordpress/components';
+import {
+	createSlotFill,
+	MenuGroup,
+	__experimentalStyleProvider as StyleProvider,
+} from '@wordpress/components';
 import { useSelect } from '@wordpress/data';
 
 /**
@@ -18,9 +22,7 @@ import {
 } from '../convert-to-group-buttons';
 import { store as blockEditorStore } from '../../store';
 
-const { Fill: BlockSettingsMenuControls, Slot } = createSlotFill(
-	'BlockSettingsMenuControls'
-);
+const { Fill, Slot } = createSlotFill( 'BlockSettingsMenuControls' );
 
 const BlockSettingsMenuControlsSlot = ( { fillProps, clientIds = null } ) => {
 	const selectedBlocks = useSelect(
@@ -62,9 +64,20 @@ const BlockSettingsMenuControlsSlot = ( { fillProps, clientIds = null } ) => {
 	);
 };
 
-BlockSettingsMenuControls.Slot = BlockSettingsMenuControlsSlot;
-
 /**
  * @see https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/block-settings-menu-controls/README.md
+ *
+ * @param {Object} props  Fill props.
+ * @return {WPElement} Element.
  */
+function BlockSettingsMenuControls( { ...props } ) {
+	return (
+		<StyleProvider document={ document }>
+			<Fill { ...props } />
+		</StyleProvider>
+	);
+}
+
+BlockSettingsMenuControls.Slot = BlockSettingsMenuControlsSlot;
+
 export default BlockSettingsMenuControls;

packages/block-editor/src/components/iframe/index.js

@@ -185,7 +185,7 @@ function Iframe( { contentRef, children, head, headHTML, ...props }, ref ) {
 		>
 			{ iframeDocument &&
 				createPortal(
-					<StyleProvider iframeDocument={ iframeDocument }>
+					<StyleProvider document={ iframeDocument }>
 						{ children }
 					</StyleProvider>,
 					iframeDocument.body

packages/block-editor/src/components/inspector-advanced-controls/index.js

@@ -1,7 +1,10 @@
 /**
  * WordPress dependencies
  */
-import { createSlotFill } from '@wordpress/components';
+import {
+	createSlotFill,
+	__experimentalStyleProvider as StyleProvider,
+} from '@wordpress/components';
 
 /**
  * Internal dependencies
@@ -13,7 +16,11 @@ const { Fill, Slot } = createSlotFill( name );
 
 function InspectorAdvancedControls( { children } ) {
 	const { isSelected } = useBlockEditContext();
-	return isSelected ? <Fill>{ children }</Fill> : null;
+	return isSelected ? (
+		<StyleProvider document={ document }>
+			<Fill>{ children }</Fill>
+		</StyleProvider>
+	) : null;
 }
 
 InspectorAdvancedControls.slotName = name;

packages/block-editor/src/components/inspector-controls/index.js

@@ -1,7 +1,10 @@
 /**
  * WordPress dependencies
  */
-import { createSlotFill } from '@wordpress/components';
+import {
+	__experimentalStyleProvider as StyleProvider,
+	createSlotFill,
+} from '@wordpress/components';
 
 /**
  * Internal dependencies
@@ -11,7 +14,11 @@ import useDisplayBlockControls from '../use-display-block-controls';
 const { Fill, Slot } = createSlotFill( 'InspectorControls' );
 
 function InspectorControls( { children } ) {
-	return useDisplayBlockControls() ? <Fill>{ children }</Fill> : null;
+	return useDisplayBlockControls() ? (
+		<StyleProvider document={ document }>
+			<Fill>{ children }</Fill>
+		</StyleProvider>
+	) : null;
 }
 
 InspectorControls.Slot = Slot;

packages/components/src/index.native.js

@@ -28,6 +28,7 @@ export {
 	Fill,
 	Provider as SlotFillProvider,
 } from './slot-fill';
+export { default as __experimentalStyleProvider } from './style-provider';
 export { default as BaseControl } from './base-control';
 export { default as TextareaControl } from './textarea-control';
 export { default as PanelBody } from './panel/body';

packages/components/src/style-provider/index.js

@@ -9,12 +9,12 @@ const memoizedCreateCacheWithContainer = memoize( ( container ) => {
 	return createCache( { container } );
 } );
 
-export default function StyleProvider( { children, iframeDocument } ) {
-	if ( ! iframeDocument ) {
+export default function StyleProvider( { children, document } ) {
+	if ( ! document ) {
 		return null;
 	}
 
-	const cache = memoizedCreateCacheWithContainer( iframeDocument.head );
+	const cache = memoizedCreateCacheWithContainer( document.head );
 
 	return <CacheProvider value={ cache }>{ children }</CacheProvider>;
 }

packages/components/src/style-provider/index.native.js

@@ -0,0 +1,3 @@
+export default function StyleProvider( { children } ) {
+	return children;
+}