BlockToolbar: Show Group button in toolbar when multiple blocks are s…

…elected (#39710)

* BlockToolbar: Show Group button in toolbar when multiple blocks are selected

Co-authored-by: Jitesh Dhamaniya <[email protected]>

* Ensure blocks locked against removal cause the Group button not to render

* Add translator context for Group as a verb

Co-authored-by: Jitesh Dhamaniya <[email protected]>

packages/block-editor/src/components/block-toolbar/index.js

@@ -21,6 +21,7 @@ import BlockSwitcher from '../block-switcher';
 import BlockControls from '../block-controls';
 import BlockSettingsMenu from '../block-settings-menu';
 import { BlockLockToolbar } from '../block-lock';
+import { BlockGroupToolbar } from '../convert-to-group-buttons';
 import { useShowMoversGestures } from './utils';
 import { store as blockEditorStore } from '../../store';
 
@@ -127,6 +128,9 @@ export default function BlockToolbar( { hideDragHandle } ) {
 					</ToolbarGroup>
 				) }
 			</div>
+			{ shouldShowVisualToolbar && isMultiToolbar && (
+				<BlockGroupToolbar />
+			) }
 			{ shouldShowVisualToolbar && (
 				<>
 					<BlockControls.Slot

packages/block-editor/src/components/convert-to-group-buttons/index.js

@@ -11,6 +11,7 @@ import { useDispatch } from '@wordpress/data';
  */
 import { store as blockEditorStore } from '../../store';
 import useConvertToGroupButtonProps from './use-convert-to-group-button-props';
+import BlockGroupToolbar from './toolbar';
 
 function ConvertToGroupButton( {
 	clientIds,
@@ -73,4 +74,8 @@ function ConvertToGroupButton( {
 	);
 }
 
-export { useConvertToGroupButtonProps, ConvertToGroupButton };
+export {
+	BlockGroupToolbar,
+	ConvertToGroupButton,
+	useConvertToGroupButtonProps,
+};

packages/block-editor/src/components/convert-to-group-buttons/toolbar.js

@@ -0,0 +1,64 @@
+/**
+ * WordPress dependencies
+ */
+import { useDispatch, useSelect } from '@wordpress/data';
+import { switchToBlockType } from '@wordpress/blocks';
+import { ToolbarButton, ToolbarGroup } from '@wordpress/components';
+import { group } from '@wordpress/icons';
+import { _x } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import { useConvertToGroupButtonProps } from '../convert-to-group-buttons';
+import { store as blockEditorStore } from '../../store';
+
+function BlockGroupToolbar( { label = _x( 'Group', 'verb' ) } ) {
+	const {
+		blocksSelection,
+		clientIds,
+		groupingBlockName,
+		isGroupable,
+	} = useConvertToGroupButtonProps();
+	const { replaceBlocks } = useDispatch( blockEditorStore );
+
+	const { canRemove } = useSelect(
+		( select ) => {
+			const { canRemoveBlocks } = select( blockEditorStore );
+			return {
+				canRemove: canRemoveBlocks( clientIds ),
+			};
+		},
+		[ clientIds ]
+	);
+
+	const onConvertToGroup = () => {
+		const newBlocks = switchToBlockType(
+			blocksSelection,
+			groupingBlockName
+		);
+		if ( newBlocks ) {
+			replaceBlocks( clientIds, newBlocks );
+		}
+	};
+
+	// Don't render the button if the current selection cannot be grouped.
+	// A good example is selecting multiple button blocks within a Buttons block:
+	// The group block is not a valid child of Buttons, so we should not show the button.
+	// Any blocks that are locked against removal also cannot be grouped.
+	if ( ! isGroupable || ! canRemove ) {
+		return null;
+	}
+
+	return (
+		<ToolbarGroup>
+			<ToolbarButton
+				icon={ group }
+				label={ label }
+				onClick={ onConvertToGroup }
+			/>
+		</ToolbarGroup>
+	);
+}
+
+export default BlockGroupToolbar;