Fix grouping actions in list view (WordPress#48910)

DustyReagan · Mar 9, 2023 · 1d4e333 · 1d4e333
1 parent b66d9e1
commit 1d4e333
Show file tree

Hide file tree

Showing 2 changed files with 50 additions and 39 deletions.
diff --git a/packages/block-editor/src/components/block-settings-menu-controls/index.js b/packages/block-editor/src/components/block-settings-menu-controls/index.js
@@ -48,7 +48,8 @@ const BlockSettingsMenuControlsSlot = ( {
 
 	// Check if current selection of blocks is Groupable or Ungroupable
 	// and pass this props down to ConvertToGroupButton.
-	const convertToGroupButtonProps = useConvertToGroupButtonProps();
+	const convertToGroupButtonProps =
+		useConvertToGroupButtonProps( selectedClientIds );
 	const { isGroupable, isUngroupable } = convertToGroupButtonProps;
 	const showConvertToGroupButton =
 		( isGroupable || isUngroupable ) && canRemove;

diff --git a/...block-editor/src/components/convert-to-group-buttons/use-convert-to-group-button-props.js b/...block-editor/src/components/convert-to-group-buttons/use-convert-to-group-button-props.js
@@ -25,59 +25,69 @@ import { store as blockEditorStore } from '../../store';
  * It is used in `BlockSettingsMenuControls` to know if `ConvertToGroupButton`
  * should be rendered, to avoid ending up with an empty MenuGroup.
  *
+ * @param {?string[]} selectedClientIds An optional array of clientIds to group. The selected blocks
+ *                                      from the block editor store are used if this is not provided.
+ *
  * @return {ConvertToGroupButtonProps} Returns the properties needed by `ConvertToGroupButton`.
  */
-export default function useConvertToGroupButtonProps() {
+export default function useConvertToGroupButtonProps( selectedClientIds ) {
 	const {
 		clientIds,
 		isGroupable,
 		isUngroupable,
 		blocksSelection,
 		groupingBlockName,
-	} = useSelect( ( select ) => {
-		const {
-			getBlockRootClientId,
-			getBlocksByClientId,
-			canInsertBlockType,
-			getSelectedBlockClientIds,
-		} = select( blockEditorStore );
-		const { getGroupingBlockName } = select( blocksStore );
+	} = useSelect(
+		( select ) => {
+			const {
+				getBlockRootClientId,
+				getBlocksByClientId,
+				canInsertBlockType,
+				getSelectedBlockClientIds,
+			} = select( blockEditorStore );
+			const { getGroupingBlockName } = select( blocksStore );
+
+			const _clientIds = selectedClientIds?.length
+				? selectedClientIds
+				: getSelectedBlockClientIds();
+			const _groupingBlockName = getGroupingBlockName();
 
-		const _clientIds = getSelectedBlockClientIds();
-		const _groupingBlockName = getGroupingBlockName();
+			const rootClientId = !! _clientIds?.length
+				? getBlockRootClientId( _clientIds[ 0 ] )
+				: undefined;
 
-		const rootClientId = !! _clientIds?.length
-			? getBlockRootClientId( _clientIds[ 0 ] )
-			: undefined;
+			const groupingBlockAvailable = canInsertBlockType(
+				_groupingBlockName,
+				rootClientId
+			);
 
-		const groupingBlockAvailable = canInsertBlockType(
-			_groupingBlockName,
-			rootClientId
-		);
+			const _blocksSelection = getBlocksByClientId( _clientIds );
 
-		const _blocksSelection = getBlocksByClientId( _clientIds );
+			const isSingleGroupingBlock =
+				_blocksSelection.length === 1 &&
+				_blocksSelection[ 0 ]?.name === _groupingBlockName;
 
-		const isSingleGroupingBlock =
-			_blocksSelection.length === 1 &&
-			_blocksSelection[ 0 ]?.name === _groupingBlockName;
+			// Do we have
+			// 1. Grouping block available to be inserted?
+			// 2. One or more blocks selected
+			const _isGroupable =
+				groupingBlockAvailable && _blocksSelection.length;
 
-		// Do we have
-		// 1. Grouping block available to be inserted?
-		// 2. One or more blocks selected
-		const _isGroupable = groupingBlockAvailable && _blocksSelection.length;
+			// Do we have a single Group Block selected and does that group have inner blocks?
+			const _isUngroupable =
+				isSingleGroupingBlock &&
+				!! _blocksSelection[ 0 ].innerBlocks.length;
+			return {
+				clientIds: _clientIds,
+				isGroupable: _isGroupable,
+				isUngroupable: _isUngroupable,
+				blocksSelection: _blocksSelection,
+				groupingBlockName: _groupingBlockName,
+			};
+		},
+		[ selectedClientIds ]
+	);
 
-		// Do we have a single Group Block selected and does that group have inner blocks?
-		const _isUngroupable =
-			isSingleGroupingBlock &&
-			!! _blocksSelection[ 0 ].innerBlocks.length;
-		return {
-			clientIds: _clientIds,
-			isGroupable: _isGroupable,
-			isUngroupable: _isUngroupable,
-			blocksSelection: _blocksSelection,
-			groupingBlockName: _groupingBlockName,
-		};
-	}, [] );
 	return {
 		clientIds,
 		isGroupable,