From 94f444c15c809d1932d04adc35d7d0e130bc3dbb Mon Sep 17 00:00:00 2001
From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com>
Date: Mon, 13 Sep 2021 17:48:10 +1000
Subject: [PATCH] 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.
---
 .../block-support-slot-container.js           | 10 -------
 .../block-support-tools-panel.js              |  3 +-
 .../src/components/inspector-controls/fill.js | 28 ++++++++-----------
 .../src/components/inspector-controls/slot.js | 17 ++++++-----
 4 files changed, 21 insertions(+), 37 deletions(-)
 delete mode 100644 packages/block-editor/src/components/inspector-controls/block-support-slot-container.js

diff --git a/packages/block-editor/src/components/inspector-controls/block-support-slot-container.js b/packages/block-editor/src/components/inspector-controls/block-support-slot-container.js
deleted file mode 100644
index e450ab8b0d407..0000000000000
--- a/packages/block-editor/src/components/inspector-controls/block-support-slot-container.js
+++ /dev/null
@@ -1,10 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { __experimentalToolsPanelContext as ToolsPanelContext } from '@wordpress/components';
-import { useContext } from '@wordpress/element';
-
-export default function BlockSupportSlotContainer( { Slot, ...props } ) {
-	const toolsPanelContext = useContext( ToolsPanelContext );
-	return <Slot { ...props } fillProps={ toolsPanelContext } />;
-}
diff --git a/packages/block-editor/src/components/inspector-controls/block-support-tools-panel.js b/packages/block-editor/src/components/inspector-controls/block-support-tools-panel.js
index 450a8351de8e3..411b827259d03 100644
--- a/packages/block-editor/src/components/inspector-controls/block-support-tools-panel.js
+++ b/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 }
diff --git a/packages/block-editor/src/components/inspector-controls/fill.js b/packages/block-editor/src/components/inspector-controls/fill.js
index af3478252de6d..f8fc6fb2ba2de 100644
--- a/packages/block-editor/src/components/inspector-controls/fill.js
+++ b/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>
diff --git a/packages/block-editor/src/components/inspector-controls/slot.js b/packages/block-editor/src/components/inspector-controls/slot.js
index c9da21817103d..58a02c72e687f 100644
--- a/packages/block-editor/src/components/inspector-controls/slot.js
+++ b/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 } }
+			/>
 		);
 	}