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..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 @@ -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,27 @@ function BlockGroupToolbar() { useConvertToGroupButtonProps(); const { replaceBlocks } = useDispatch( blockEditorStore ); - const { canRemove, variations } = useSelect( + const { canInsertGallery, canRemove, variations } = useSelect( ( select ) => { - const { canRemoveBlocks } = select( blockEditorStore ); + 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: canTransformToGallery, canRemove: canRemoveBlocks( clientIds ), variations: getBlockVariations( groupingBlockName, @@ -37,9 +52,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 +101,13 @@ function BlockGroupToolbar() { return ( + { canInsertGallery && ( + + ) }