Wrap block support slots in ToolsPanel for dimensions support

Co-Authored-By: Greg Ziółkowski <grzegorz@gziolo.pl>
WordPress · Sep 10, 2021 · 269b5d1 · 269b5d1
1 parent 3b14a92
commit 269b5d1
Show file tree

Hide file tree

Showing 6 changed files with 127 additions and 64 deletions.
diff --git a/packages/block-editor/src/components/block-inspector/index.js b/packages/block-editor/src/components/block-inspector/index.js
@@ -129,6 +129,11 @@ const BlockInspectorSingleBlock = ( {
 				</div>
 			) }
 			<InspectorControls.Slot bubblesVirtually={ bubblesVirtually } />
+			<InspectorControls.Slot
+				__experimentalGroup="dimensions"
+				bubblesVirtually={ false }
+				label={ __( 'Dimensions' ) }
+			/>
 			<div>
 				<AdvancedControls bubblesVirtually={ bubblesVirtually } />
 			</div>

diff --git a/packages/block-editor/src/components/inspector-controls/block-support-tools-panel.js b/packages/block-editor/src/components/inspector-controls/block-support-tools-panel.js
@@ -0,0 +1,58 @@
+/**
+ * WordPress dependencies
+ */
+import { __experimentalToolsPanel as ToolsPanel } from '@wordpress/components';
+import { useDispatch, useSelect } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+import { store as blockEditorStore } from '../../store';
+import { cleanEmptyObject } from '../../hooks/utils';
+
+export default function BlockSupportToolsPanel( { children, label, header } ) {
+	const { clientId, attributes } = useSelect( ( select ) => {
+		const { getBlockAttributes, getSelectedBlockClientId } = select(
+			blockEditorStore
+		);
+		const selectedBlockClientId = getSelectedBlockClientId();
+
+		return {
+			clientId: selectedBlockClientId,
+			attributes: getBlockAttributes( selectedBlockClientId ),
+		};
+	} );
+	const { updateBlockAttributes } = useDispatch( blockEditorStore );
+
+	const resetAll = ( resetFilters = [] ) => {
+		const { style } = attributes;
+		let newAttributes = { style };
+
+		resetFilters.forEach( ( resetFilter ) => {
+			newAttributes = {
+				...newAttributes,
+				...resetFilter( newAttributes ),
+			};
+		} );
+
+		// Enforce a cleaned style object.
+		newAttributes = {
+			...newAttributes,
+			style: cleanEmptyObject( newAttributes.style ),
+		};
+
+		updateBlockAttributes( clientId, newAttributes );
+	};
+
+	return (
+		<ToolsPanel
+			label={ label }
+			header={ header }
+			resetAll={ resetAll }
+			key={ clientId }
+			panelId={ clientId }
+		>
+			{ children }
+		</ToolsPanel>
+	);
+}
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(
+	'InspectorControlsDimensions'
+);
 
 const groups = {
 	default: InspectorControlsDefault,
 	advanced: InspectorControlsAdvanced,
+	dimensions: InspectorControlsDimensions,
 };
 
 export default groups;
diff --git a/packages/block-editor/src/components/inspector-controls/slot.js b/packages/block-editor/src/components/inspector-controls/slot.js
@@ -7,11 +7,13 @@ import warning from '@wordpress/warning';
 /**
  * Internal dependencies
  */
+import BlockSupportToolsPanel from './block-support-tools-panel';
 import groups from './groups';
 
 export default function InspectorControlsSlot( {
 	__experimentalGroup: group = 'default',
 	bubblesVirtually = true,
+	label,
 	...props
 } ) {
 	const Slot = groups[ group ]?.Slot;
@@ -26,5 +28,13 @@ export default function InspectorControlsSlot( {
 		return null;
 	}
 
+	if ( label ) {
+		return (
+			<BlockSupportToolsPanel group={ group } label={ label }>
+				<Slot { ...props } bubblesVirtually={ bubblesVirtually } />
+			</BlockSupportToolsPanel>
+		);
+	}
+
 	return <Slot { ...props } bubblesVirtually={ bubblesVirtually } />;
 }
diff --git a/packages/block-editor/src/hooks/dimensions.js b/packages/block-editor/src/hooks/dimensions.js
@@ -1,10 +1,7 @@
 /**
  * WordPress dependencies
  */
-import {
-	__experimentalToolsPanel as ToolsPanel,
-	__experimentalToolsPanelItem as ToolsPanelItem,
-} from '@wordpress/components';
+import { __experimentalToolsPanelItem as ToolsPanelItem } from '@wordpress/components';
 import { Platform } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import { getBlockSupport } from '@wordpress/blocks';
@@ -34,7 +31,6 @@ import {
 	resetPadding,
 	useIsPaddingDisabled,
 } from './padding';
-import { cleanEmptyObject } from './utils';
 
 export const SPACING_SUPPORT_KEY = 'spacing';
 export const ALL_SIDES = [ 'top', 'right', 'bottom', 'left' ];
@@ -63,62 +59,56 @@ export function DimensionsPanel( props ) {
 		'__experimentalDefaultControls',
 	] );
 
-	// Callback to reset all block support attributes controlled via this panel.
-	const resetAll = () => {
-		const { style } = props.attributes;
-
-		props.setAttributes( {
-			style: cleanEmptyObject( {
-				...style,
-				spacing: {
-					...style?.spacing,
-					blockGap: undefined,
-					margin: undefined,
-					padding: undefined,
-				},
-			} ),
-		} );
-	};
+	const createResetAllFilter = ( attribute ) => ( newAttributes ) => ( {
+		...newAttributes,
+		style: {
+			...newAttributes.style,
+			spacing: {
+				...newAttributes.style?.spacing,
+				[ attribute ]: undefined,
+			},
+		},
+	} );
 
 	return (
-		<InspectorControls key="dimensions">
-			<ToolsPanel
-				label={ __( 'Dimensions options' ) }
-				header={ __( 'Dimensions' ) }
-				resetAll={ resetAll }
-			>
-				{ ! 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>
-				) }
-				{ ! isGapDisabled && (
-					<ToolsPanelItem
-						className="single-column"
-						hasValue={ () => hasGapValue( props ) }
-						label={ __( 'Block gap' ) }
-						onDeselect={ () => resetGap( props ) }
-						isShownByDefault={ defaultSpacingControls?.blockGap }
-					>
-						<GapEdit { ...props } />
-					</ToolsPanelItem>
-				) }
-			</ToolsPanel>
+		<InspectorControls __experimentalGroup="dimensions">
+			{ ! isPaddingDisabled && (
+				<ToolsPanelItem
+					hasValue={ () => hasPaddingValue( props ) }
+					label={ __( 'Padding' ) }
+					onDeselect={ () => resetPadding( props ) }
+					resetAllFilter={ createResetAllFilter( 'padding' ) }
+					isShownByDefault={ defaultSpacingControls?.padding }
+					panelId={ props.clientId }
+				>
+					<PaddingEdit { ...props } />
+				</ToolsPanelItem>
+			) }
+			{ ! isMarginDisabled && (
+				<ToolsPanelItem
+					hasValue={ () => hasMarginValue( props ) }
+					label={ __( 'Margin' ) }
+					onDeselect={ () => resetMargin( props ) }
+					resetAllFilter={ createResetAllFilter( 'margin' ) }
+					isShownByDefault={ defaultSpacingControls?.margin }
+					panelId={ props.clientId }
+				>
+					<MarginEdit { ...props } />
+				</ToolsPanelItem>
+			) }
+			{ ! isGapDisabled && (
+				<ToolsPanelItem
+					className="single-column"
+					hasValue={ () => hasGapValue( props ) }
+					label={ __( 'Block gap' ) }
+					onDeselect={ () => resetGap( props ) }
+					resetAllFilter={ createResetAllFilter( 'blockGap' ) }
+					isShownByDefault={ defaultSpacingControls?.blockGap }
+					panelId={ props.clientId }
+				>
+					<GapEdit { ...props } />
+				</ToolsPanelItem>
+			) }
 		</InspectorControls>
 	);
 }

diff --git a/packages/edit-site/src/components/sidebar/dimensions-panel.js b/packages/edit-site/src/components/sidebar/dimensions-panel.js
@@ -140,11 +140,7 @@ export default function DimensionsPanel( { context, getStyle, setStyle } ) {
 	};
 
 	return (
-		<ToolsPanel
-			label={ __( 'Dimensions options' ) }
-			header={ __( 'Dimensions' ) }
-			resetAll={ resetAll }
-		>
+		<ToolsPanel label={ __( 'Dimensions' ) } resetAll={ resetAll }>
 			{ showPaddingControl && (
 				<ToolsPanelItem
 					hasValue={ hasPaddingValue }