Add the style provider to the block settings fill

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-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 iframeDocument={ document }>
+			<Fill { ...props } />
+		</StyleProvider>
+	);
+}
+
+BlockSettingsMenuControls.Slot = BlockSettingsMenuControlsSlot;
+
 export default BlockSettingsMenuControls;