Enables Block Grouping/UnGrouping using core/group

docs/designers-developers/developers/block-api/block-registration.md

@@ -311,6 +311,40 @@ transforms: {
 ```
 {% end %}
 
+In addition to accepting an array of known block types, the `blocks` option also accepts a "wildcard" (`"*"`). This allows for transformations which apply to _all_ block types (eg: all blocks can transform into `core/group`):
+
+{% codetabs %}
+{% ES5 %}
+```js
+transforms: {
+    from: [
+        {
+            type: 'block',
+            blocks: [ '*' ], // wildcard - match any block
+            transform: function( attributes, innerBlocks ) {
+                // transform logic here
+            },
+        },
+    ],
+},
+```
+{% ESNext %}
+```js
+transforms: {
+    from: [
+        {
+            type: 'block',
+            blocks: [ '*' ], // wildcard - match any block
+            transform: ( attributes, innerBlocks ) => {
+                // transform logic here
+            },
+        },
+    ],
+},
+```
+{% end %}
+
+
 A block with innerBlocks can also be transformed from and to another block with innerBlocks.
 
 {% codetabs %}

packages/block-editor/src/components/block-actions/index.js

@@ -8,13 +8,15 @@ import { castArray, first, last, every } from 'lodash';
  */
 import { compose } from '@wordpress/compose';
 import { withSelect, withDispatch } from '@wordpress/data';
-import { cloneBlock, hasBlockSupport } from '@wordpress/blocks';
+import { cloneBlock, hasBlockSupport, switchToBlockType } from '@wordpress/blocks';
 
 function BlockActions( {
 	onDuplicate,
 	onRemove,
 	onInsertBefore,
 	onInsertAfter,
+	onGroup,
+	onUngroup,
 	isLocked,
 	canDuplicate,
 	children,
@@ -24,6 +26,8 @@ function BlockActions( {
 		onRemove,
 		onInsertAfter,
 		onInsertBefore,
+		onGroup,
+		onUngroup,
 		isLocked,
 		canDuplicate,
 	} );
@@ -65,6 +69,7 @@ export default compose( [
 			multiSelect,
 			removeBlocks,
 			insertDefaultBlock,
+			replaceBlocks,
 		} = dispatch( 'core/block-editor' );
 
 		return {
@@ -107,6 +112,39 @@ export default compose( [
 					insertDefaultBlock( {}, rootClientId, lastSelectedIndex + 1 );
 				}
 			},
+			onGroup() {
+				if ( ! blocks.length ) {
+					return;
+				}
+
+				// Activate the `transform` on `core/group` which does the conversion
+				const newBlocks = switchToBlockType( blocks, 'core/group' );
+
+				if ( ! newBlocks ) {
+					return;
+				}
+				replaceBlocks(
+					clientIds,
+					newBlocks
+				);
+			},
+
+			onUngroup() {
+				if ( ! blocks.length ) {
+					return;
+				}
+
+				const innerBlocks = blocks[ 0 ].innerBlocks;
+
+				if ( ! innerBlocks.length ) {
+					return;
+				}
+
+				replaceBlocks(
+					clientIds,
+					innerBlocks
+				);
+			},
 		};
 	} ),
 ] )( BlockActions );

packages/block-editor/src/components/block-editor-keyboard-shortcuts/index.js

@@ -39,6 +39,15 @@ export const shortcuts = {
 		raw: rawShortcut.primaryAlt( 'y' ),
 		display: displayShortcut.primaryAlt( 'y' ),
 	},
+	group: {
+		raw: rawShortcut.primaryAlt( 'g' ),
+		display: displayShortcut.primaryAlt( 'g' ),
+	},
+	ungroup: {
+		raw: rawShortcut.secondary( 'g' ),
+		display: displayShortcut.secondary( 'g' ),
+	},
+
 };
 
 class BlockEditorKeyboardShortcuts extends Component {
@@ -91,7 +100,7 @@ class BlockEditorKeyboardShortcuts extends Component {
 				/>
 				{ selectedBlockClientIds.length > 0 && (
 					<BlockActions clientIds={ selectedBlockClientIds }>
-						{ ( { onDuplicate, onRemove, onInsertAfter, onInsertBefore } ) => (
+						{ ( { onDuplicate, onRemove, onInsertAfter, onInsertBefore, onGroup, onUngroup } ) => (
 							<KeyboardShortcuts
 								bindGlobal
 								shortcuts={ {
@@ -109,6 +118,10 @@ class BlockEditorKeyboardShortcuts extends Component {
 									// Does not clash with any known browser/native shortcuts, but preventDefault
 									// is used to prevent any obscure unknown shortcuts from triggering.
 									[ shortcuts.insertAfter.raw ]: flow( preventDefault, onInsertAfter ),
+
+									[ shortcuts.group.raw ]: flow( preventDefault, onGroup ),
+
+									[ shortcuts.ungroup.raw ]: flow( preventDefault, onUngroup ),
 								} }
 							/>
 						) }

packages/block-library/src/group/index.js

@@ -2,6 +2,7 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
+import { createBlock } from '@wordpress/blocks';
 
 /**
  * Internal dependencies
@@ -25,6 +26,45 @@ export const settings = {
 		anchor: true,
 		html: false,
 	},
+
+	transforms: {
+		from: [
+			{
+				type: 'block',
+				isMultiBlock: true,
+				blocks: [ '*' ],
+				convert( 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( ( result, block ) => {
+						const { align } = block.attributes;
+						return alignments.indexOf( align ) > alignments.indexOf( result ) ? align : result;
+					}, 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 );
+				},
+			},
+
+		],
+	},
+
 	edit,
 	save,
 };

packages/blocks/CHANGELOG.md

@@ -3,6 +3,8 @@
 ### New Feature
 
 - Added a default implementation for `save` setting in `registerBlockType` which saves no markup in the post content.
+- Added wildcard block transforms which allows for transforming all/any blocks in another block.
+- Added `convert()` method option to `transforms` definition. It receives complete block object(s) as it's argument(s). It is now preferred over the older `transform()` (note that `transform()` is still fully supported).
 
 ## 6.1.0 (2019-03-06)
 

packages/blocks/README.md

@@ -679,7 +679,7 @@ _Parameters_
 
 _Returns_
 
--   `Array`: Array of blocks.
+-   `?Array`: Array of blocks or null.
 
 <a name="synchronizeBlocksWithTemplate" href="#synchronizeBlocksWithTemplate">#</a> **synchronizeBlocksWithTemplate**