Dimensions Support: Add SlotFill to Dimensions Panel

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;

packages/block-editor/src/hooks/dimensions.js

@@ -56,19 +56,36 @@ export function DimensionsPanel( props ) {
 	] );
 
 	// Callback to reset all block support attributes controlled via this panel.
-	const resetAll = () => {
+	const resetAll = ( resetFilters = [] ) => {
 		const { style } = props.attributes;
 
-		props.setAttributes( {
-			style: cleanEmptyObject( {
+		let newAttributes = {
+			style: {
 				...style,
 				spacing: {
 					...style?.spacing,
 					margin: undefined,
 					padding: undefined,
 				},
-			} ),
+			},
+		};
+
+		// Injected controls can register additional functions to further adjust
+		// the attributes being reset.
+		resetFilters.forEach( ( resetFilter ) => {
+			newAttributes = {
+				...newAttributes,
+				...resetFilter( newAttributes ),
+			};
 		} );
+
+		// Enforce a cleaned style object.
+		newAttributes = {
+			...newAttributes,
+			style: cleanEmptyObject( newAttributes.style ),
+		};
+
+		props.setAttributes( newAttributes );
 	};
 
 	return (
@@ -98,6 +115,10 @@ export function DimensionsPanel( props ) {
 						<MarginEdit { ...props } />
 					</ToolsPanelItem>
 				) }
+				<InspectorControls.Slot
+					__experimentalGroup="dimensions"
+					bubblesVirtually={ false }
+				/>
 			</ToolsPanel>
 		</InspectorControls>
 	);

packages/components/src/tools-panel/tools-panel-item/hook.js

@@ -18,6 +18,7 @@ export function useToolsPanelItem( props ) {
 		hasValue,
 		isShownByDefault,
 		label,
+		resetAllFilter,
 		onDeselect = () => undefined,
 		onSelect = () => undefined,
 		...otherProps
@@ -41,6 +42,7 @@ export function useToolsPanelItem( props ) {
 			hasValue,
 			isShownByDefault,
 			label,
+			resetAllFilter,
 		} );
 
 		return () => deregisterPanelItem( label );

packages/components/src/tools-panel/tools-panel/hook.js

@@ -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();
+			resetAll( getResetAllFilters() );
 		}
 
 		// Turn off display of all non-default items.