Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Block Conversion]: Show group option in Group blocks #39094

Merged
merged 2 commits into from
Mar 1, 2022
Merged

[Block Conversion]: Show group option in Group blocks #39094

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
b22301b
[Block Conversion]: Show `group` option in `Group` blocks
ntsekouras Feb 25, 2022
c4daa3e
add e2e test
ntsekouras Mar 1, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 1 addition & 6 deletions ...block-editor/src/components/convert-to-group-buttons/use-convert-to-group-button-props.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 =
Expand Down
56 changes: 2 additions & 54 deletions packages/block-library/src/group/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,6 @@
* WordPress dependencies
*/
import { __ } from '@wordpress/i18n';
import { createBlock } from '@wordpress/blocks';
import { group as icon } from '@wordpress/icons';

/**
Expand All @@ -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;
Expand Down Expand Up @@ -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,
Expand Down
52 changes: 52 additions & 0 deletions packages/block-library/src/group/transforms.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
17 changes: 17 additions & 0 deletions packages/e2e-tests/specs/editor/various/block-grouping.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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( `
"<!-- wp:group -->
<div class=\\"wp-block-group\\"><!-- wp:group -->
<div class=\\"wp-block-group\\"><!-- wp:paragraph -->
<p>1</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group --></div>
<!-- /wp:group -->"
` );
} );
} );

describe( 'Grouping Block availability', () => {
Expand Down