ToggleGroupControl: rewrite backdrop animation with framer motion shared layout animations

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

@@ -2,11 +2,27 @@
  * WordPress dependencies
  */
 import { __experimentalToolsPanelContext as ToolsPanelContext } from '@wordpress/components';
-import { useContext } from '@wordpress/element';
+import { useContext, useMemo } from '@wordpress/element';
 
-export default function BlockSupportSlotContainer( { Slot, ...props } ) {
+export default function BlockSupportSlotContainer( {
+	Slot,
+	fillProps,
+	...props
+} ) {
+	// Add the toolspanel context provider and value to existing fill props
 	const toolsPanelContext = useContext( ToolsPanelContext );
+	const computedFillProps = useMemo(
+		() => ( {
+			...( fillProps ?? {} ),
+			forwardedContext: [
+				...( fillProps?.forwardedContext ?? [] ),
+				[ ToolsPanelContext.Provider, { value: toolsPanelContext } ],
+			],
+		} ),
+		[ toolsPanelContext, fillProps ]
+	);
+
 	return (
-		<Slot { ...props } fillProps={ toolsPanelContext } bubblesVirtually />
+		<Slot { ...props } fillProps={ computedFillProps } bubblesVirtually />
 	);
 }

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

@@ -7,7 +7,7 @@ import {
 } 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
@@ -60,28 +60,42 @@ 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;
 
 	// 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 =
-		fillProps && Object.keys( fillProps ).length > 0 ? fillProps : null;
-	return (
-		<ToolsPanelContext.Provider value={ value }>
+	const innerMarkup = (
+		<RegisterResetAll resetAllFilter={ resetAllFilter }>
 			{ children }
-		</ToolsPanelContext.Provider>
+		</RegisterResetAll>
+	);
+	return forwardedContext.reduce(
+		( inner, [ Provider, props ] ) => (
+			<Provider { ...props }>{ inner }</Provider>
+		),
+		innerMarkup
 	);
 }

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

@@ -1,7 +1,11 @@
 /**
  * WordPress dependencies
  */
-import { __experimentalUseSlotFills as useSlotFills } from '@wordpress/components';
+import {
+	__experimentalUseSlotFills as useSlotFills,
+	__unstableMotionContext as MotionContext,
+} from '@wordpress/components';
+import { useContext, useMemo } from '@wordpress/element';
 import warning from '@wordpress/warning';
 import deprecated from '@wordpress/deprecated';
 
@@ -16,6 +20,7 @@ export default function InspectorControlsSlot( {
 	__experimentalGroup,
 	group = 'default',
 	label,
+	fillProps,
 	...props
 } ) {
 	if ( __experimentalGroup ) {
@@ -31,6 +36,20 @@ export default function InspectorControlsSlot( {
 	}
 	const Slot = groups[ group ]?.Slot;
 	const fills = useSlotFills( Slot?.__unstableName );
+
+	const motionContextValue = useContext( MotionContext );
+
+	const computedFillProps = useMemo(
+		() => ( {
+			...( fillProps ?? {} ),
+			forwardedContext: [
+				...( fillProps?.forwardedContext ?? [] ),
+				[ MotionContext.Provider, { value: motionContextValue } ],
+			],
+		} ),
+		[ motionContextValue, fillProps ]
+	);
+
 	if ( ! Slot ) {
 		warning( `Unknown InspectorControls group "${ group }" provided.` );
 		return null;
@@ -43,10 +62,16 @@ export default function InspectorControlsSlot( {
 	if ( label ) {
 		return (
 			<BlockSupportToolsPanel group={ group } label={ label }>
-				<BlockSupportSlotContainer { ...props } Slot={ Slot } />
+				<BlockSupportSlotContainer
+					{ ...props }
+					fillProps={ computedFillProps }
+					Slot={ Slot }
+				/>
 			</BlockSupportToolsPanel>
 		);
 	}
 
-	return <Slot { ...props } bubblesVirtually />;
+	return (
+		<Slot { ...props } fillProps={ computedFillProps } bubblesVirtually />
+	);
 }

packages/components/CHANGELOG.md

@@ -9,6 +9,7 @@
 ### Enhancements
 
 -   Making Circular Option Picker a `listbox`. Note that while this changes some public API, new props are optional, and currently have default values; this will change in another patch ([#52255](https://github.com/WordPress/gutenberg/pull/52255)).
+-   `ToggleGroupControl`: Rewrite backdrop animation using framer motion shared layout animations, add better support for controlled and uncontrolled modes ([#50278](https://github.com/WordPress/gutenberg/pull/50278)).
 -   `Popover`: Add the `is-positioned` CSS class only after the popover has finished animating ([#54178](https://github.com/WordPress/gutenberg/pull/54178)).
 
 ### Bug Fix

packages/components/src/animation/index.tsx

@@ -10,4 +10,5 @@
 export {
 	motion as __unstableMotion,
 	AnimatePresence as __unstableAnimatePresence,
+	MotionContext as __unstableMotionContext,
 } from 'framer-motion';

packages/components/src/index.ts

@@ -17,7 +17,11 @@ export {
 	default as Animate,
 	getAnimateClassName as __unstableGetAnimateClassName,
 } from './animate';
-export { __unstableMotion, __unstableAnimatePresence } from './animation';
+export {
+	__unstableMotion,
+	__unstableAnimatePresence,
+	__unstableMotionContext,
+} from './animation';
 export { default as AnglePickerControl } from './angle-picker-control';
 export {
 	default as Autocomplete,