Move creation of ToolsPanel to within fills

Creating the ToolsPanel for block supports around the slot resulted in the slot adding an extra div within the ToolsPanel breaking its layout. This div is needed for the slot's ref to be applied allowing virtual bubbling.  This change effectively moves the ToolsPanel inside that. It also avoids needing to retrieve ToolsPanelContext and recreating the context provider.

packages/block-editor/src/components/inspector-controls/block-support-tools-panel.js

@@ -10,7 +10,7 @@ import { useDispatch, useSelect } from '@wordpress/data';
 import { store as blockEditorStore } from '../../store';
 import { cleanEmptyObject } from '../../hooks/utils';
 
-export default function BlockSupportToolsPanel( { children, label, header } ) {
+export default function BlockSupportToolsPanel( { children, label } ) {
 	const { clientId, attributes } = useSelect( ( select ) => {
 		const { getBlockAttributes, getSelectedBlockClientId } = select(
 			blockEditorStore
@@ -47,7 +47,6 @@ export default function BlockSupportToolsPanel( { children, label, header } ) {
 	return (
 		<ToolsPanel
 			label={ label }
-			header={ header }
 			resetAll={ resetAll }
 			key={ clientId }
 			panelId={ clientId }

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

@@ -1,20 +1,13 @@
-/**
- * External dependencies
- */
-import { isEmpty } from 'lodash';
-
 /**
  * WordPress dependencies
  */
-import {
-	__experimentalStyleProvider as StyleProvider,
-	__experimentalToolsPanelContext as ToolsPanelContext,
-} from '@wordpress/components';
+import { __experimentalStyleProvider as StyleProvider } from '@wordpress/components';
 import warning from '@wordpress/warning';
 
 /**
  * Internal dependencies
  */
+import BlockSupportToolsPanel from './block-support-tools-panel';
 import useDisplayBlockControls from '../use-display-block-controls';
 import groups from './groups';
 
@@ -36,15 +29,18 @@ export default function InspectorControlsFill( {
 		<StyleProvider document={ document }>
 			<Fill>
 				{ ( fillProps ) => {
-					// Children passed to InspectorControlsFill will not have
-					// access to any React Context whose Provider is part of
-					// the InspectorControlsSlot tree. So we re-create the
-					// Provider in this subtree.
-					const value = ! isEmpty( fillProps ) ? fillProps : null;
+					// Check if the fills here represent the contents of a
+					// block support panel and require a wrapping ToolsPanel.
+					const { label } = fillProps;
+
+					if ( ! label ) {
+						return children;
+					}
+
 					return (
-						<ToolsPanelContext.Provider value={ value }>
+						<BlockSupportToolsPanel label={ label }>
 							{ children }
-						</ToolsPanelContext.Provider>
+						</BlockSupportToolsPanel>
 					);
 				} }
 			</Fill>

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

@@ -7,8 +7,6 @@ import warning from '@wordpress/warning';
 /**
  * Internal dependencies
  */
-import BlockSupportToolsPanel from './block-support-tools-panel';
-import BlockSupportSlotContainer from './block-support-slot-container';
 import groups from './groups';
 
 export default function InspectorControlsSlot( {
@@ -30,14 +28,15 @@ export default function InspectorControlsSlot( {
 	}
 
 	if ( label ) {
+		// Slots for block support panels will include a label for the panel
+		// header. This is passed through the fillProps to indicate when the
+		// fills require a wrapping ToolsPanel.
 		return (
-			<BlockSupportToolsPanel group={ group } label={ label }>
-				<BlockSupportSlotContainer
-					{ ...props }
-					bubblesVirtually={ bubblesVirtually }
-					Slot={ Slot }
-				/>
-			</BlockSupportToolsPanel>
+			<Slot
+				{ ...props }
+				bubblesVirtually={ bubblesVirtually }
+				fillProps={ { label } }
+			/>
 		);
 	}