Use grouped InspectorControls

WordPress · Aug 16, 2021 · 6c0813e · 6c0813e
1 parent 64ccc59
commit 6c0813e
Show file tree

Hide file tree

Showing 4 changed files with 60 additions and 43 deletions.
diff --git a/packages/block-editor/src/components/inspector-controls/groups.js b/packages/block-editor/src/components/inspector-controls/groups.js
@@ -6,11 +6,15 @@ import { createSlotFill } from '@wordpress/components';
 const InspectorControlsDefault = createSlotFill( 'InspectorControls' );
 const InspectorControlsBlock = createSlotFill( 'InspectorControlsBlock' );
 const InspectorControlsAdvanced = createSlotFill( 'InspectorAdvancedControls' );
+const InspectorControlsDimensions = createSlotFill(
+	'InspectorDimensionsControls'
+);
 
 const groups = {
 	default: InspectorControlsDefault,
 	block: InspectorControlsBlock,
 	advanced: InspectorControlsAdvanced,
+	dimensions: InspectorControlsDimensions,
 };
 
 export default groups;
diff --git a/packages/block-editor/src/hooks/dimensions.js b/packages/block-editor/src/hooks/dimensions.js
@@ -13,7 +13,6 @@ import { getBlockSupport } from '@wordpress/blocks';
  * Internal dependencies
  */
 import InspectorControls from '../components/inspector-controls';
-import DimensionControls from '../components/dimension-controls';
 import {
 	MarginEdit,
 	hasMarginSupport,
@@ -74,7 +73,10 @@ export function DimensionsPanel( props ) {
 		// Injected controls can register additional functions to further adjust
 		// the attributes being reset.
 		resetFilters.forEach( ( resetFilter ) => {
-			newAttributes = resetFilter( newAttributes );
+			newAttributes = {
+				...newAttributes,
+				...resetFilter( newAttributes ),
+			};
 		} );
 
 		// Enforce a cleaned style object.
@@ -93,37 +95,30 @@ export function DimensionsPanel( props ) {
 				header={ __( 'Dimensions' ) }
 				resetAll={ resetAll }
 			>
-				<DimensionControls.Slot>
-					{ ( fills ) => (
-						<>
-							{ ! isPaddingDisabled && (
-								<ToolsPanelItem
-									hasValue={ () => hasPaddingValue( props ) }
-									label={ __( 'Padding' ) }
-									onDeselect={ () => resetPadding( props ) }
-									isShownByDefault={
-										defaultSpacingControls?.padding
-									}
-								>
-									<PaddingEdit { ...props } />
-								</ToolsPanelItem>
-							) }
-							{ ! isMarginDisabled && (
-								<ToolsPanelItem
-									hasValue={ () => hasMarginValue( props ) }
-									label={ __( 'Margin' ) }
-									onDeselect={ () => resetMargin( props ) }
-									isShownByDefault={
-										defaultSpacingControls?.margin
-									}
-								>
-									<MarginEdit { ...props } />
-								</ToolsPanelItem>
-							) }
-							{ fills }
-						</>
-					) }
-				</DimensionControls.Slot>
+				{ ! isPaddingDisabled && (
+					<ToolsPanelItem
+						hasValue={ () => hasPaddingValue( props ) }
+						label={ __( 'Padding' ) }
+						onDeselect={ () => resetPadding( props ) }
+						isShownByDefault={ defaultSpacingControls?.padding }
+					>
+						<PaddingEdit { ...props } />
+					</ToolsPanelItem>
+				) }
+				{ ! isMarginDisabled && (
+					<ToolsPanelItem
+						hasValue={ () => hasMarginValue( props ) }
+						label={ __( 'Margin' ) }
+						onDeselect={ () => resetMargin( props ) }
+						isShownByDefault={ defaultSpacingControls?.margin }
+					>
+						<MarginEdit { ...props } />
+					</ToolsPanelItem>
+				) }
+				<InspectorControls.Slot
+					group="dimensions"
+					bubblesVirtually={ false }
+				/>
 			</ToolsPanel>
 		</InspectorControls>
 	);

diff --git a/packages/components/src/tools-panel/tools-panel-item/hook.js b/packages/components/src/tools-panel/tools-panel-item/hook.js
@@ -29,7 +29,11 @@ export function useToolsPanelItem( props ) {
 		return cx( styles.ToolsPanelItem, className );
 	} );
 
-	const { menuItems, registerPanelItem } = useToolsPanelContext();
+	const {
+		menuItems,
+		registerPanelItem,
+		deregisterPanelItem,
+	} = useToolsPanelContext();
 
 	// Registering the panel item allows the panel to include it in its
 	// automatically generated menu and determine its initial checked status.
@@ -40,6 +44,8 @@ export function useToolsPanelItem( props ) {
 			label,
 			resetAllFilter,
 		} );
+
+		return () => deregisterPanelItem( label );
 	}, [] );
 
 	const isValueSet = hasValue();

diff --git a/packages/components/src/tools-panel/tools-panel/hook.js b/packages/components/src/tools-panel/tools-panel/hook.js
@@ -23,17 +23,17 @@ export function useToolsPanel( props ) {
 
 	// Allow panel items to register themselves.
 	const [ panelItems, setPanelItems ] = useState( [] );
-	const [ panelResetAllFilters, setPanelResetAllFilters ] = useState( [] );
 
 	const registerPanelItem = ( item ) => {
 		setPanelItems( ( items ) => [ ...items, item ] );
+	};
 
-		if ( item.resetAllFilter ) {
-			setPanelResetAllFilters( ( filters ) => [
-				...filters,
-				item.resetAllFilter,
-			] );
-		}
+	// Panels need to deregister on unmount to avoid orphans in menu state.
+	// This is an issue when panel items are being injected via SlotFills.
+	const deregisterPanelItem = ( label ) => {
+		setPanelItems( ( items ) =>
+			items.filter( ( item ) => item.label !== label )
+		);
 	};
 
 	// Manage and share display state of menu items representing child controls.
@@ -59,10 +59,22 @@ export function useToolsPanel( props ) {
 		} );
 	};
 
+	const getResetAllFilters = () => {
+		const filters = [];
+
+		panelItems.forEach( ( item ) => {
+			if ( item.resetAllFilter ) {
+				filters.push( item.resetAllFilter );
+			}
+		} );
+
+		return filters;
+	};
+
 	// Resets display of children and executes resetAll callback if available.
 	const resetAllItems = () => {
 		if ( typeof resetAll === 'function' ) {
-			resetAll( panelResetAllFilters );
+			resetAll( getResetAllFilters() );
 		}
 
 		// Turn off display of all non-default items.
@@ -75,7 +87,7 @@ export function useToolsPanel( props ) {
 		setMenuItems( resetMenuItems );
 	};
 
-	const panelContext = { menuItems, registerPanelItem };
+	const panelContext = { menuItems, registerPanelItem, deregisterPanelItem };
 
 	return {
 		...otherProps,