Block Support Panels - Make block support tools panels compatible wit…

…h multi-selection (#37216) * Update block support panels to display in multi select inspector * Update the order of block support slots
WordPress · Dec 21, 2021 · e4d58ce · e4d58ce
1 parent 4ada4e7
commit e4d58ce
Show file tree

Hide file tree

Showing 2 changed files with 74 additions and 22 deletions.
diff --git a/packages/block-editor/src/components/block-inspector/index.js b/packages/block-editor/src/components/block-inspector/index.js
@@ -69,7 +69,19 @@ const BlockInspector = ( {
 		return (
 			<div className="block-editor-block-inspector">
 				<MultiSelectionInspector />
-				<InspectorControls.Slot bubblesVirtually={ bubblesVirtually } />
+				<InspectorControls.Slot />
+				<InspectorControls.Slot
+					__experimentalGroup="typography"
+					label={ __( 'Typography' ) }
+				/>
+				<InspectorControls.Slot
+					__experimentalGroup="dimensions"
+					label={ __( 'Dimensions' ) }
+				/>
+				<InspectorControls.Slot
+					__experimentalGroup="border"
+					label={ __( 'Border' ) }
+				/>
 			</div>
 		);
 	}
@@ -139,6 +151,10 @@ const BlockInspectorSingleBlock = ( {
 				bubblesVirtually={ bubblesVirtually }
 				label={ __( 'Dimensions' ) }
 			/>
+			<InspectorControls.Slot
+				__experimentalGroup="border"
+				label={ __( 'Border' ) }
+			/>
 			<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
@@ -11,46 +11,82 @@ import { store as blockEditorStore } from '../../store';
 import { cleanEmptyObject } from '../../hooks/utils';
 
 export default function BlockSupportToolsPanel( { children, group, label } ) {
-	const { clientId, attributes } = useSelect( ( select ) => {
-		const { getBlockAttributes, getSelectedBlockClientId } = select(
-			blockEditorStore
-		);
+	const { attributes, clientIds, panelId } = useSelect( ( select ) => {
+		const {
+			getBlockAttributes,
+			getMultiSelectedBlockClientIds,
+			getSelectedBlockClientId,
+			hasMultiSelection,
+		} = select( blockEditorStore );
+
+		// When we currently have a multi-selection, the value returned from
+		// `getSelectedBlockClientId()` is `null`. When a `null` value is used
+		// for the `panelId`, a `ToolsPanel` will still allow panel items to
+		// register themselves despite their panelIds not matching.
 		const selectedBlockClientId = getSelectedBlockClientId();
 
+		if ( hasMultiSelection() ) {
+			const selectedBlockClientIds = getMultiSelectedBlockClientIds();
+			const selectedBlockAttributes = selectedBlockClientIds.reduce(
+				( blockAttributes, blockId ) => {
+					blockAttributes[ blockId ] = getBlockAttributes( blockId );
+					return blockAttributes;
+				},
+				{}
+			);
+
+			return {
+				panelId: selectedBlockClientId,
+				clientIds: selectedBlockClientIds,
+				attributes: selectedBlockAttributes,
+			};
+		}
+
 		return {
-			clientId: selectedBlockClientId,
-			attributes: getBlockAttributes( selectedBlockClientId ),
+			panelId: selectedBlockClientId,
+			clientIds: [ selectedBlockClientId ],
+			attributes: {
+				[ selectedBlockClientId ]: getBlockAttributes(
+					selectedBlockClientId
+				),
+			},
 		};
 	}, [] );
 	const { updateBlockAttributes } = useDispatch( blockEditorStore );
 
 	const resetAll = ( resetFilters = [] ) => {
-		const { style } = attributes;
-		let newAttributes = { style };
+		const newAttributes = {};
+
+		clientIds.forEach( ( clientId ) => {
+			const { style } = attributes[ clientId ];
+			let newBlockAttributes = { style };
 
-		resetFilters.forEach( ( resetFilter ) => {
-			newAttributes = {
-				...newAttributes,
-				...resetFilter( newAttributes ),
+			resetFilters.forEach( ( resetFilter ) => {
+				newBlockAttributes = {
+					...newBlockAttributes,
+					...resetFilter( newBlockAttributes ),
+				};
+			} );
+
+			// Enforce a cleaned style object.
+			newBlockAttributes = {
+				...newBlockAttributes,
+				style: cleanEmptyObject( newBlockAttributes.style ),
 			};
-		} );
 
-		// Enforce a cleaned style object.
-		newAttributes = {
-			...newAttributes,
-			style: cleanEmptyObject( newAttributes.style ),
-		};
+			newAttributes[ clientId ] = newBlockAttributes;
+		} );
 
-		updateBlockAttributes( clientId, newAttributes );
+		updateBlockAttributes( clientIds, newAttributes, true );
 	};
 
 	return (
 		<ToolsPanel
 			className={ `${ group }-block-support-panel` }
 			label={ label }
 			resetAll={ resetAll }
-			key={ clientId }
-			panelId={ clientId }
+			key={ panelId }
+			panelId={ panelId }
 			hasInnerWrapper={ true }
 			shouldRenderPlaceholderItems={ true } // Required to maintain fills ordering.
 		>