diff --git a/packages/block-editor/src/components/convert-to-group-buttons/use-convert-to-group-button-props.js b/packages/block-editor/src/components/convert-to-group-buttons/use-convert-to-group-button-props.js index 07b2e275e3975c..9f3a7d908a11ed 100644 --- a/packages/block-editor/src/components/convert-to-group-buttons/use-convert-to-group-button-props.js +++ b/packages/block-editor/src/components/convert-to-group-buttons/use-convert-to-group-button-props.js @@ -64,12 +64,7 @@ export default function useConvertToGroupButtonProps() { // Do we have // 1. Grouping block available to be inserted? // 2. One or more blocks selected - // (we allow single Blocks to become groups unless - // they are a soltiary group block themselves) - const _isGroupable = - groupingBlockAvailable && - _blocksSelection.length && - ! isSingleGroupingBlock; + const _isGroupable = groupingBlockAvailable && _blocksSelection.length; // Do we have a single Group Block selected and does that group have inner blocks? const _isUngroupable = diff --git a/packages/block-library/src/group/index.js b/packages/block-library/src/group/index.js index e3b9d887d95f87..ddee42e095f7a0 100644 --- a/packages/block-library/src/group/index.js +++ b/packages/block-library/src/group/index.js @@ -2,7 +2,6 @@ * WordPress dependencies */ import { __ } from '@wordpress/i18n'; -import { createBlock } from '@wordpress/blocks'; import { group as icon } from '@wordpress/icons'; /** @@ -12,6 +11,7 @@ import deprecated from './deprecated'; import edit from './edit'; import metadata from './block.json'; import save from './save'; +import transforms from './transforms'; import variations from './variations'; const { name } = metadata; @@ -80,59 +80,7 @@ export const settings = { }, ], }, - transforms: { - from: [ - { - type: 'block', - isMultiBlock: true, - blocks: [ '*' ], - __experimentalConvert( blocks ) { - // Avoid transforming a single `core/group` Block - if ( - blocks.length === 1 && - blocks[ 0 ].name === 'core/group' - ) { - return; - } - - const alignments = [ 'wide', 'full' ]; - - // Determine the widest setting of all the blocks to be grouped - const widestAlignment = blocks.reduce( - ( accumulator, block ) => { - const { align } = block.attributes; - return alignments.indexOf( align ) > - alignments.indexOf( accumulator ) - ? align - : accumulator; - }, - undefined - ); - - // Clone the Blocks to be Grouped - // Failing to create new block references causes the original blocks - // to be replaced in the switchToBlockType call thereby meaning they - // are removed both from their original location and within the - // new group block. - const groupInnerBlocks = blocks.map( ( block ) => { - return createBlock( - block.name, - block.attributes, - block.innerBlocks - ); - } ); - - return createBlock( - 'core/group', - { - align: widestAlignment, - }, - groupInnerBlocks - ); - }, - }, - ], - }, + transforms, edit, save, deprecated, diff --git a/packages/block-library/src/group/transforms.js b/packages/block-library/src/group/transforms.js new file mode 100644 index 00000000000000..e71f55202c2216 --- /dev/null +++ b/packages/block-library/src/group/transforms.js @@ -0,0 +1,52 @@ +/** + * WordPress dependencies + */ +import { createBlock } from '@wordpress/blocks'; + +const transforms = { + from: [ + { + type: 'block', + isMultiBlock: true, + blocks: [ '*' ], + __experimentalConvert( blocks ) { + const alignments = [ 'wide', 'full' ]; + + // Determine the widest setting of all the blocks to be grouped + const widestAlignment = blocks.reduce( + ( accumulator, block ) => { + const { align } = block.attributes; + return alignments.indexOf( align ) > + alignments.indexOf( accumulator ) + ? align + : accumulator; + }, + undefined + ); + + // Clone the Blocks to be Grouped + // Failing to create new block references causes the original blocks + // to be replaced in the switchToBlockType call thereby meaning they + // are removed both from their original location and within the + // new group block. + const groupInnerBlocks = blocks.map( ( block ) => { + return createBlock( + block.name, + block.attributes, + block.innerBlocks + ); + } ); + + return createBlock( + 'core/group', + { + align: widestAlignment, + }, + groupInnerBlocks + ); + }, + }, + ], +}; + +export default transforms; diff --git a/packages/e2e-tests/specs/editor/various/block-grouping.test.js b/packages/e2e-tests/specs/editor/various/block-grouping.test.js index 007327cf95649a..7f12a9fccfeea2 100644 --- a/packages/e2e-tests/specs/editor/various/block-grouping.test.js +++ b/packages/e2e-tests/specs/editor/various/block-grouping.test.js @@ -140,6 +140,23 @@ describe( 'Block Grouping', () => { // Make sure the paragraph in reusable block exists. expect( await getParagraphText() ).toEqual( paragraphText ); } ); + it( 'should group another Group block via options toolbar', async () => { + await insertBlock( 'Paragraph' ); + await page.keyboard.type( '1' ); + await clickBlockToolbarButton( 'Options' ); + await clickMenuItem( 'Group' ); + await clickBlockToolbarButton( 'Options' ); + await clickMenuItem( 'Group' ); + expect( await getEditedPostContent() ).toMatchInlineSnapshot( ` + " +
+
+

1

+
+
+ " + ` ); + } ); } ); describe( 'Grouping Block availability', () => {