From d67eeb601c6a95775987b4fbb0f88c995d2ac499 Mon Sep 17 00:00:00 2001
From: Andrew Serong <14988353+andrewserong@users.noreply.github.com>
Date: Tue, 30 Jan 2024 13:11:53 +1100
Subject: [PATCH 1/2] Block toolbar: Try adding a button to convert images to
 Gallery block

---
 .../convert-to-group-buttons/toolbar.js       | 30 ++++++++++++++++---
 1 file changed, 26 insertions(+), 4 deletions(-)

diff --git a/packages/block-editor/src/components/convert-to-group-buttons/toolbar.js b/packages/block-editor/src/components/convert-to-group-buttons/toolbar.js
index 38405fe3ee6abb..95a971a9191e50 100644
--- a/packages/block-editor/src/components/convert-to-group-buttons/toolbar.js
+++ b/packages/block-editor/src/components/convert-to-group-buttons/toolbar.js
@@ -4,7 +4,7 @@
 import { useDispatch, useSelect } from '@wordpress/data';
 import { switchToBlockType, store as blocksStore } from '@wordpress/blocks';
 import { ToolbarButton, ToolbarGroup } from '@wordpress/components';
-import { group, row, stack } from '@wordpress/icons';
+import { gallery, group, row, stack } from '@wordpress/icons';
 import { _x } from '@wordpress/i18n';
 
 /**
@@ -24,12 +24,19 @@ function BlockGroupToolbar() {
 		useConvertToGroupButtonProps();
 	const { replaceBlocks } = useDispatch( blockEditorStore );
 
-	const { canRemove, variations } = useSelect(
+	const { canInsertGallery, canRemove, variations } = useSelect(
 		( select ) => {
 			const { canRemoveBlocks } = select( blockEditorStore );
-			const { getBlockVariations } = select( blocksStore );
+			const { getBlockVariations, getBlockType } = select( blocksStore );
+
+			const isGalleryBlockAvailable = !! getBlockType( 'core/gallery' );
+
+			const areAllBlocksImages = blocksSelection.every(
+				( { name } ) => name === 'core/image'
+			);
 
 			return {
+				canInsertGallery: isGalleryBlockAvailable && areAllBlocksImages,
 				canRemove: canRemoveBlocks( clientIds ),
 				variations: getBlockVariations(
 					groupingBlockName,
@@ -37,9 +44,17 @@ function BlockGroupToolbar() {
 				),
 			};
 		},
-		[ clientIds, groupingBlockName ]
+		[ blocksSelection, clientIds, groupingBlockName ]
 	);
 
+	const onConvertToGallery = () => {
+		const newBlocks = switchToBlockType( blocksSelection, 'core/gallery' );
+
+		if ( newBlocks && newBlocks.length > 0 ) {
+			replaceBlocks( clientIds, newBlocks );
+		}
+	};
+
 	const onConvertToGroup = ( layout ) => {
 		const newBlocks = switchToBlockType(
 			blocksSelection,
@@ -78,6 +93,13 @@ function BlockGroupToolbar() {
 
 	return (
 		<ToolbarGroup>
+			{ canInsertGallery && (
+				<ToolbarButton
+					icon={ gallery }
+					label={ _x( 'Gallery', 'block name' ) }
+					onClick={ onConvertToGallery }
+				/>
+			) }
 			<ToolbarButton
 				icon={ group }
 				label={ _x( 'Group', 'verb' ) }

From 539874887701cb2e3242d6697457dfd49caf2567 Mon Sep 17 00:00:00 2001
From: Andrew Serong <14988353+andrewserong@users.noreply.github.com>
Date: Tue, 30 Jan 2024 14:16:52 +1100
Subject: [PATCH 2/2] Make logic a little more explicit

---
 .../convert-to-group-buttons/toolbar.js       | 24 ++++++++++++-------
 1 file changed, 16 insertions(+), 8 deletions(-)

diff --git a/packages/block-editor/src/components/convert-to-group-buttons/toolbar.js b/packages/block-editor/src/components/convert-to-group-buttons/toolbar.js
index 95a971a9191e50..c85366984ccd60 100644
--- a/packages/block-editor/src/components/convert-to-group-buttons/toolbar.js
+++ b/packages/block-editor/src/components/convert-to-group-buttons/toolbar.js
@@ -26,17 +26,25 @@ function BlockGroupToolbar() {
 
 	const { canInsertGallery, canRemove, variations } = useSelect(
 		( select ) => {
-			const { canRemoveBlocks } = select( blockEditorStore );
-			const { getBlockVariations, getBlockType } = select( blocksStore );
-
-			const isGalleryBlockAvailable = !! getBlockType( 'core/gallery' );
-
-			const areAllBlocksImages = blocksSelection.every(
-				( { name } ) => name === 'core/image'
+			const {
+				canRemoveBlocks,
+				getBlockRootClientId,
+				getBlockTransformItems,
+			} = select( blockEditorStore );
+			const { getBlockVariations } = select( blocksStore );
+
+			const rootClientId = getBlockRootClientId( blocksSelection[ 0 ] );
+			const possibleBlockTransformations = getBlockTransformItems(
+				blocksSelection,
+				rootClientId
+			);
+			const canTransformToGallery = possibleBlockTransformations.some(
+				( { name, isDisabled } ) =>
+					name === 'core/gallery' && ! isDisabled
 			);
 
 			return {
-				canInsertGallery: isGalleryBlockAvailable && areAllBlocksImages,
+				canInsertGallery: canTransformToGallery,
 				canRemove: canRemoveBlocks( clientIds ),
 				variations: getBlockVariations(
 					groupingBlockName,