+"
+`;
diff --git a/packages/e2e-tests/specs/__snapshots__/block-transforms.test.js.snap b/packages/e2e-tests/specs/__snapshots__/block-transforms.test.js.snap
index ce9dfc0be7e555..25e50d75416a43 100644
--- a/packages/e2e-tests/specs/__snapshots__/block-transforms.test.js.snap
+++ b/packages/e2e-tests/specs/__snapshots__/block-transforms.test.js.snap
@@ -96,6 +96,14 @@ exports[`Block transforms correctly transform block Image in fixture core__image
"
`;
+exports[`Block transforms correctly transform block Image in fixture core__image into the Group block 1`] = `
+"
+
+
+
+"
+`;
+
exports[`Block transforms correctly transform block Image in fixture core__image into the Media & Text block 1`] = `
"
@@ -352,6 +360,14 @@ exports[`Block transforms correctly transform block Media & Text in fixture core
"
`;
+exports[`Block transforms correctly transform block Paragraph in fixture core__paragraph__align-right into the Group block 1`] = `
+"
+
+
... like this one, which is separate from the above and right aligned.
+
+"
+`;
+
exports[`Block transforms correctly transform block Paragraph in fixture core__paragraph__align-right into the Heading block 1`] = `
"
... like this one, which is separate from the above and right aligned.
diff --git a/packages/e2e-tests/specs/block-deletion.test.js b/packages/e2e-tests/specs/block-deletion.test.js
index 194ff847328c18..02cc0a0f5720ee 100644
--- a/packages/e2e-tests/specs/block-deletion.test.js
+++ b/packages/e2e-tests/specs/block-deletion.test.js
@@ -8,6 +8,7 @@ import {
createNewPost,
isInDefaultBlock,
pressKeyWithModifier,
+ pressKeyTimes,
insertBlock,
} from '@wordpress/e2e-test-utils';
@@ -22,10 +23,37 @@ const addThreeParagraphsToNewPost = async () => {
await page.keyboard.press( 'Enter' );
};
-const clickOnBlockSettingsMenuItem = async ( buttonLabel ) => {
+/**
+ * Due to an issue with the Popover component not being scrollable
+ * under certain conditions, Pupeteer cannot "see" the "Remove Block"
+ * button. This is a workaround until that issue is resolved.
+ *
+ * see: https://github.com/WordPress/gutenberg/pull/14908#discussion_r284725956
+ */
+const clickOnBlockSettingsMenuRemoveBlockButton = async () => {
await clickBlockToolbarButton( 'More options' );
- const itemButton = ( await page.$x( `//*[contains(@class, "block-editor-block-settings-menu__popover")]//button[contains(text(), '${ buttonLabel }')]` ) )[ 0 ];
- await itemButton.click();
+
+ let isRemoveButton = false;
+
+ let numButtons = await page.$$eval( '.block-editor-block-toolbar button', ( btns ) => btns.length );
+
+ // Limit by the number of buttons available
+ while ( --numButtons ) {
+ await page.keyboard.press( 'Tab' );
+
+ isRemoveButton = await page.evaluate( () => {
+ return document.activeElement.innerText.includes( 'Remove Block' );
+ } );
+
+ // Stop looping once we find the button
+ if ( isRemoveButton ) {
+ await pressKeyTimes( 'Enter', 1 );
+ break;
+ }
+ }
+
+ // Makes failures more explicit
+ await expect( isRemoveButton ).toBe( true );
};
describe( 'block deletion -', () => {
@@ -39,7 +67,8 @@ describe( 'block deletion -', () => {
// Press Escape to show the block toolbar
await page.keyboard.press( 'Escape' );
- await clickOnBlockSettingsMenuItem( 'Remove Block' );
+ await clickOnBlockSettingsMenuRemoveBlockButton();
+
expect( await getEditedPostContent() ).toMatchSnapshot();
// Type additional text and assert that caret position is correct by comparing to snapshot.
@@ -121,7 +150,7 @@ describe( 'deleting all blocks', () => {
await page.keyboard.press( 'Escape' );
- await clickOnBlockSettingsMenuItem( 'Remove Block' );
+ await clickOnBlockSettingsMenuRemoveBlockButton();
// There is a default block:
expect( await page.$$( '.block-editor-block-list__block' ) ).toHaveLength( 1 );
diff --git a/packages/e2e-tests/specs/block-grouping.test.js b/packages/e2e-tests/specs/block-grouping.test.js
new file mode 100644
index 00000000000000..57300ec2b9de66
--- /dev/null
+++ b/packages/e2e-tests/specs/block-grouping.test.js
@@ -0,0 +1,176 @@
+/**
+ * WordPress dependencies
+ */
+import {
+ insertBlock,
+ createNewPost,
+ clickBlockToolbarButton,
+ pressKeyWithModifier,
+ getEditedPostContent,
+ transformBlockTo,
+ getAllBlocks,
+ getAvailableBlockTransforms,
+} from '@wordpress/e2e-test-utils';
+
+async function insertBlocksOfSameType() {
+ await insertBlock( 'Paragraph' );
+ await page.keyboard.type( 'First Paragraph' );
+
+ await insertBlock( 'Paragraph' );
+ await page.keyboard.type( 'Second Paragraph' );
+
+ await insertBlock( 'Paragraph' );
+ await page.keyboard.type( 'Third Paragraph' );
+}
+
+async function insertBlocksOfMultipleTypes() {
+ await insertBlock( 'Heading' );
+ await page.keyboard.type( 'Group Heading' );
+
+ await insertBlock( 'Image' );
+
+ await insertBlock( 'Paragraph' );
+ await page.keyboard.type( 'Some paragraph' );
+}
+
+describe( 'Block Grouping', () => {
+ beforeEach( async () => {
+ // Posts are auto-removed at the end of each test run
+ await createNewPost();
+ } );
+
+ describe( 'Group creation', () => {
+ it( 'creates a group from multiple blocks of the same type via block transforms', async () => {
+ // Creating test blocks
+ await insertBlocksOfSameType();
+
+ // Multiselect via keyboard.
+ await pressKeyWithModifier( 'primary', 'a' );
+ await pressKeyWithModifier( 'primary', 'a' );
+
+ await transformBlockTo( 'Group' );
+
+ expect( await getEditedPostContent() ).toMatchSnapshot();
+ } );
+
+ it( 'creates a group from multiple blocks of different types via block transforms', async () => {
+ // Creating test blocks
+ await insertBlocksOfMultipleTypes();
+
+ // Multiselect via keyboard.
+ await pressKeyWithModifier( 'primary', 'a' );
+ await pressKeyWithModifier( 'primary', 'a' );
+
+ await transformBlockTo( 'Group' );
+
+ expect( await getEditedPostContent() ).toMatchSnapshot();
+ } );
+
+ it( 'creates a group from multiple blocks of the same type via options toolbar', async () => {
+ // Creating test blocks
+ await insertBlocksOfSameType();
+
+ // Multiselect via keyboard.
+ await pressKeyWithModifier( 'primary', 'a' );
+ await pressKeyWithModifier( 'primary', 'a' );
+
+ await clickBlockToolbarButton( 'More options' );
+
+ const groupButton = await page.waitForXPath( '//button[text()="Group"]' );
+ await groupButton.click();
+
+ expect( await getEditedPostContent() ).toMatchSnapshot();
+ } );
+
+ it( 'groups and ungroups multiple blocks of different types via options toolbar', async () => {
+ // Creating test blocks
+ await insertBlocksOfMultipleTypes();
+ await pressKeyWithModifier( 'primary', 'a' );
+ await pressKeyWithModifier( 'primary', 'a' );
+
+ // Group
+ await clickBlockToolbarButton( 'More options' );
+ const groupButton = await page.waitForXPath( '//button[text()="Group"]' );
+ await groupButton.click();
+
+ expect( await getEditedPostContent() ).toMatchSnapshot();
+
+ // UnGroup
+ await clickBlockToolbarButton( 'More options' );
+ const unGroupButton = await page.waitForXPath( '//button[text()="Ungroup"]' );
+ await unGroupButton.click();
+
+ expect( await getEditedPostContent() ).toMatchSnapshot();
+ } );
+ } );
+
+ describe( 'Container Block availability', () => {
+ beforeEach( async () => {
+ // Disable the Group block
+ await page.evaluate( () => {
+ const { dispatch } = wp.data;
+ dispatch( 'core/edit-post' ).hideBlockTypes( [ 'core/group' ] );
+ } );
+
+ // Create a Group
+ await insertBlocksOfMultipleTypes();
+ await pressKeyWithModifier( 'primary', 'a' );
+ await pressKeyWithModifier( 'primary', 'a' );
+ } );
+
+ afterAll( async () => {
+ // Re-enable the Group block
+ await page.evaluate( () => {
+ const { dispatch } = wp.data;
+ dispatch( 'core/edit-post' ).showBlockTypes( [ 'core/group' ] );
+ } );
+ } );
+
+ it( 'does not show group transform if container block is disabled', async () => {
+ const availableTransforms = await getAvailableBlockTransforms();
+
+ expect(
+ availableTransforms
+ ).not.toContain( 'Group' );
+ } );
+
+ it( 'does not show group option in the options toolbar if container block is disabled ', async () => {
+ await clickBlockToolbarButton( 'More options' );
+
+ const blockOptionsDropdownHTML = await page.evaluate( () => document.querySelector( '.block-editor-block-settings-menu__content' ).innerHTML );
+
+ expect( blockOptionsDropdownHTML ).not.toContain( 'Group' );
+ } );
+ } );
+
+ describe( 'Preserving selected blocks attributes', () => {
+ it( 'preserves width alignment settings of selected blocks', async () => {
+ await insertBlock( 'Heading' );
+ await page.keyboard.type( 'Group Heading' );
+
+ // Full width image
+ await insertBlock( 'Image' );
+ await clickBlockToolbarButton( 'Full width' );
+
+ // Wide width image)
+ await insertBlock( 'Image' );
+ await clickBlockToolbarButton( 'Wide width' );
+
+ await insertBlock( 'Paragraph' );
+ await page.keyboard.type( 'Some paragraph' );
+
+ await pressKeyWithModifier( 'primary', 'a' );
+ await pressKeyWithModifier( 'primary', 'a' );
+
+ await transformBlockTo( 'Group' );
+
+ const allBlocks = await getAllBlocks();
+
+ // We expect Group block align setting to match that
+ // of the widest of it's "child" innerBlocks
+ expect( allBlocks[ 0 ].attributes.align ).toBe( 'full' );
+
+ expect( await getEditedPostContent() ).toMatchSnapshot();
+ } );
+ } );
+} );
diff --git a/packages/e2e-tests/specs/block-switcher.test.js b/packages/e2e-tests/specs/block-switcher.test.js
index 0d2fcf2adfe9e3..9282e83dc855f1 100644
--- a/packages/e2e-tests/specs/block-switcher.test.js
+++ b/packages/e2e-tests/specs/block-switcher.test.js
@@ -27,6 +27,7 @@ describe( 'adding blocks', () => {
expect(
await getAvailableBlockTransforms()
).toEqual( [
+ 'Group',
'Paragraph',
'Quote',
] );
@@ -50,6 +51,7 @@ describe( 'adding blocks', () => {
expect(
await getAvailableBlockTransforms()
).toEqual( [
+ 'Group',
'Paragraph',
] );
} );
@@ -60,6 +62,7 @@ describe( 'adding blocks', () => {
( [
'core/quote',
'core/paragraph',
+ 'core/group',
] ).map( ( block ) => wp.blocks.unregisterBlockType( block ) );
} );
diff --git a/packages/e2e-tests/specs/block-transforms.test.js b/packages/e2e-tests/specs/block-transforms.test.js
index a16a7a1ec10035..89d14bf524491f 100644
--- a/packages/e2e-tests/specs/block-transforms.test.js
+++ b/packages/e2e-tests/specs/block-transforms.test.js
@@ -153,7 +153,12 @@ describe( 'Block transforms', () => {
)
);
- it.each( testTable )(
+ // As Group is available as a transform on *all* blocks this would create a lot of
+ // tests which would impact on the performance of the e2e test suite.
+ // To avoid this, we remove `core/group` from test table for all but 2 block types.
+ const testTableWithSomeGroupsFiltered = testTable.filter( ( transform ) => ( transform[ 2 ] !== 'Group' || transform[ 1 ] === 'core__paragraph__align-right' || transform[ 1 ] === 'core__image' ) );
+
+ it.each( testTableWithSomeGroupsFiltered )(
'block %s in fixture %s into the %s block',
async ( originalBlock, fixture, destinationBlock ) => {
const { content } = transformStructure[ fixture ];
diff --git a/packages/editor/src/components/convert-to-group-buttons/convert-button.js b/packages/editor/src/components/convert-to-group-buttons/convert-button.js
new file mode 100644
index 00000000000000..6a7299ed259c98
--- /dev/null
+++ b/packages/editor/src/components/convert-to-group-buttons/convert-button.js
@@ -0,0 +1,127 @@
+/**
+ * External dependencies
+ */
+import { noop } from 'lodash';
+
+/**
+ * WordPress dependencies
+ */
+import { Fragment } from '@wordpress/element';
+import { MenuItem } from '@wordpress/components';
+import { _x } from '@wordpress/i18n';
+import { switchToBlockType } from '@wordpress/blocks';
+import { withSelect, withDispatch } from '@wordpress/data';
+import { compose } from '@wordpress/compose';
+
+/**
+ * Internal dependencies
+ */
+import { Group, Ungroup } from './icons';
+
+export function ConvertToGroupButton( {
+ onConvertToGroup,
+ onConvertFromGroup,
+ isGroupable = false,
+ isUngroupable = false,
+} ) {
+ return (
+
+ { isGroupable && (
+
+ ) }
+ { isUngroupable && (
+
+ ) }
+
+ );
+}
+
+export default compose( [
+ withSelect( ( select, { clientIds } ) => {
+ const {
+ getBlocksByClientId,
+ canInsertBlockType,
+ } = select( 'core/block-editor' );
+
+ const containerBlockAvailable = canInsertBlockType( 'core/group' );
+
+ const blocksSelection = getBlocksByClientId( clientIds );
+
+ const isSingleContainerBlock = blocksSelection.length === 1 && blocksSelection[ 0 ] && blocksSelection[ 0 ].name === 'core/group';
+
+ // Do we have
+ // 1. Container 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 = (
+ containerBlockAvailable &&
+ blocksSelection.length &&
+ ! isSingleContainerBlock
+ );
+
+ // Do we have a single Group Block selected?
+ const isUngroupable = isSingleContainerBlock;
+
+ return {
+ isGroupable,
+ isUngroupable,
+ blocksSelection,
+ };
+ } ),
+ withDispatch( ( dispatch, { clientIds, onToggle = noop, blocksSelection = [] } ) => {
+ const {
+ replaceBlocks,
+ } = dispatch( 'core/block-editor' );
+
+ return {
+ onConvertToGroup() {
+ if ( ! blocksSelection.length ) {
+ return;
+ }
+
+ // Activate the `transform` on `core/group` which does the conversion
+ const newBlocks = switchToBlockType( blocksSelection, 'core/group' );
+
+ if ( newBlocks ) {
+ replaceBlocks(
+ clientIds,
+ newBlocks
+ );
+ }
+
+ onToggle();
+ },
+ onConvertFromGroup() {
+ if ( ! blocksSelection.length ) {
+ return;
+ }
+
+ const innerBlocks = blocksSelection[ 0 ].innerBlocks;
+
+ if ( ! innerBlocks.length ) {
+ return;
+ }
+
+ replaceBlocks(
+ clientIds,
+ innerBlocks
+ );
+
+ onToggle();
+ },
+ };
+ } ),
+] )( ConvertToGroupButton );
diff --git a/packages/editor/src/components/convert-to-group-buttons/icons.js b/packages/editor/src/components/convert-to-group-buttons/icons.js
new file mode 100644
index 00000000000000..8ca249c2fa7ee6
--- /dev/null
+++ b/packages/editor/src/components/convert-to-group-buttons/icons.js
@@ -0,0 +1,19 @@
+/**
+ * WordPress dependencies
+ */
+import { Icon, SVG, Path } from '@wordpress/components';
+
+const GroupSVG = ;
+
+export const Group = ;
+
+const UngroupSVG = ;
+
+export const Ungroup = ;
+
diff --git a/packages/editor/src/components/convert-to-group-buttons/index.js b/packages/editor/src/components/convert-to-group-buttons/index.js
new file mode 100644
index 00000000000000..a276ed4434bcab
--- /dev/null
+++ b/packages/editor/src/components/convert-to-group-buttons/index.js
@@ -0,0 +1,33 @@
+/**
+ * WordPress dependencies
+ */
+import { Fragment } from '@wordpress/element';
+import { __experimentalBlockSettingsMenuPluginsExtension } from '@wordpress/block-editor';
+import { withSelect } from '@wordpress/data';
+
+/**
+ * Internal dependencies
+ */
+import ConvertToGroupButton from './convert-button';
+
+function ConvertToGroupButtons( { clientIds } ) {
+ return (
+ <__experimentalBlockSettingsMenuPluginsExtension>
+ { ( { onClose } ) => (
+
+
+
+ ) }
+
+ );
+}
+
+export default withSelect( ( select ) => {
+ const { getSelectedBlockClientIds } = select( 'core/block-editor' );
+ return {
+ clientIds: getSelectedBlockClientIds(),
+ };
+} )( ConvertToGroupButtons );
diff --git a/packages/editor/src/components/provider/index.js b/packages/editor/src/components/provider/index.js
index 601a44c0260cfe..e897931daf6c42 100644
--- a/packages/editor/src/components/provider/index.js
+++ b/packages/editor/src/components/provider/index.js
@@ -21,6 +21,7 @@ import { decodeEntities } from '@wordpress/html-entities';
*/
import { mediaUpload } from '../../utils';
import ReusableBlocksButtons from '../reusable-blocks-buttons';
+import ConvertToGroupButtons from '../convert-to-group-buttons';
const fetchLinkSuggestions = async ( search ) => {
const posts = await apiFetch( {
@@ -159,6 +160,7 @@ class EditorProvider extends Component {
>
{ children }
+
);
}