Fix register/deregister logic for toolspanel in inspector controls

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

@@ -1,10 +1,13 @@
 /**
  * WordPress dependencies
  */
-import { __experimentalStyleProvider as StyleProvider } from '@wordpress/components';
+import {
+	__experimentalStyleProvider as StyleProvider,
+	__experimentalToolsPanelContext as ToolsPanelContext,
+} from '@wordpress/components';
 import warning from '@wordpress/warning';
 import deprecated from '@wordpress/deprecated';
-import { useEffect } from '@wordpress/element';
+import { useEffect, useContext } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -57,19 +60,25 @@ export default function InspectorControlsFill( {
 	);
 }
 
-function ToolsPanelInspectorControl( { children, resetAllFilter, fillProps } ) {
-	const { registerResetAllFilter, deregisterResetAllFilter } = fillProps;
+function RegisterResetAll( { resetAllFilter, children } ) {
+	const { registerResetAllFilter, deregisterResetAllFilter } =
+		useContext( ToolsPanelContext );
 	useEffect( () => {
-		if ( resetAllFilter && registerResetAllFilter ) {
+		if (
+			resetAllFilter &&
+			registerResetAllFilter &&
+			deregisterResetAllFilter
+		) {
 			registerResetAllFilter( resetAllFilter );
-		}
-		return () => {
-			if ( resetAllFilter && deregisterResetAllFilter ) {
+			return () => {
 				deregisterResetAllFilter( resetAllFilter );
-			}
-		};
+			};
+		}
 	}, [ resetAllFilter, registerResetAllFilter, deregisterResetAllFilter ] );
+	return children;
+}
 
+function ToolsPanelInspectorControl( { children, resetAllFilter, fillProps } ) {
 	// `fillProps.forwardedContext` is an array of context provider entries, provided by slot,
 	// that should wrap the fill markup.
 	const { forwardedContext = [] } = fillProps;
@@ -78,7 +87,11 @@ function ToolsPanelInspectorControl( { children, resetAllFilter, fillProps } ) {
 	// access to any React Context whose Provider is part of
 	// the InspectorControlsSlot tree. So we re-create the
 	// Provider in this subtree.
-	const innerMarkup = <>{ children }</>;
+	const innerMarkup = (
+		<RegisterResetAll resetAllFilter={ resetAllFilter }>
+			{ children }
+		</RegisterResetAll>
+	);
 	return forwardedContext.reduce(
 		( inner, [ Provider, props ] ) => (
 			<Provider { ...props }>{ inner }</Provider>