Use grouped InspectorControls

WordPress · Aug 20, 2021 · 3386a7d · 3386a7d
1 parent 7ac6079
commit 3386a7d
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 42 deletions.
diff --git a/packages/block-editor/src/components/inspector-controls/groups.js b/packages/block-editor/src/components/inspector-controls/groups.js
@@ -5,10 +5,14 @@ import { createSlotFill } from '@wordpress/components';
 
 const InspectorControlsDefault = createSlotFill( 'InspectorControls' );
 const InspectorControlsAdvanced = createSlotFill( 'InspectorAdvancedControls' );
+const InspectorControlsDimensions = createSlotFill(
+	'InspectorDimensionsControls'
+);
 
 const groups = {
 	default: InspectorControlsDefault,
 	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
+					__experimentalGroup="dimensions"
+					bubblesVirtually={ false }
+				/>
 			</ToolsPanel>
 		</InspectorControls>
 	);

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,9 @@ 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.
@@ -67,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.