Avoid rendering fills if empty elements inside

packages/e2e-tests/specs/editor/various/reusable-blocks.test.js

@@ -117,7 +117,9 @@ describe( 'Reusable blocks', () => {
 		await insertBlock( 'Greeting block' );
 
 		// Put the reusable block in edit mode
-		const [ editButton ] = await page.$x( '//button[text()="Edit"]' );
+		const editButton = await page.waitForXPath(
+			'//button[text()="Edit" and not(@disabled)]'
+		);
 		await editButton.click();
 
 		// Change the block's title

packages/editor/src/components/convert-to-group-buttons/index.js

@@ -1,33 +1,138 @@
 /**
  * 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';
 import { BlockSettingsMenuControls } from '@wordpress/block-editor';
-import { withSelect } from '@wordpress/data';
 
-/**
- * Internal dependencies
- */
-import ConvertToGroupButton from './convert-button';
+export function ConvertToGroupButton( {
+	onConvertToGroup,
+	onConvertFromGroup,
+	isGroupable = false,
+	isUngroupable = false,
+} ) {
+	if ( ! isGroupable && ! isUngroupable ) {
+		return null;
+	}
 
-function ConvertToGroupButtons( { clientIds } ) {
 	return (
 		<BlockSettingsMenuControls>
 			{ ( { onClose } ) => (
-				<Fragment>
-					<ConvertToGroupButton
-						clientIds={ clientIds }
-						onToggle={ onClose }
-					/>
-				</Fragment>
+				<>
+					{ isGroupable && (
+						<MenuItem
+							onClick={ () => {
+								onConvertToGroup();
+								onClose();
+							} }
+						>
+							{ _x( 'Group', 'verb' ) }
+						</MenuItem>
+					) }
+					{ isUngroupable && (
+						<MenuItem
+							onClick={ () => {
+								onConvertFromGroup();
+								onClose();
+							} }
+						>
+							{ _x(
+								'Ungroup',
+								'Ungrouping blocks from within a Group block back into individual blocks within the Editor '
+							) }
+						</MenuItem>
+					) }
+				</>
 			) }
 		</BlockSettingsMenuControls>
 	);
 }
 
-export default withSelect( ( select ) => {
-	const { getSelectedBlockClientIds } = select( 'core/block-editor' );
-	return {
-		clientIds: getSelectedBlockClientIds(),
-	};
-} )( ConvertToGroupButtons );
+export default compose( [
+	withSelect( ( select ) => {
+		const {
+			getBlockRootClientId,
+			getBlocksByClientId,
+			canInsertBlockType,
+			getSelectedBlockClientIds,
+		} = select( 'core/block-editor' );
+
+		const { getGroupingBlockName } = select( 'core/blocks' );
+
+		const clientIds = getSelectedBlockClientIds();
+		const groupingBlockName = getGroupingBlockName();
+
+		const rootClientId =
+			clientIds && clientIds.length > 0
+				? getBlockRootClientId( clientIds[ 0 ] )
+				: undefined;
+
+		const groupingBlockAvailable = canInsertBlockType(
+			groupingBlockName,
+			rootClientId
+		);
+
+		const blocksSelection = getBlocksByClientId( clientIds );
+
+		const isSingleGroupingBlock =
+			blocksSelection.length === 1 &&
+			blocksSelection[ 0 ] &&
+			blocksSelection[ 0 ].name === groupingBlockName;
+
+		// 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;
+
+		// Do we have a single Group Block selected and does that group have inner blocks?
+		const isUngroupable =
+			isSingleGroupingBlock && !! blocksSelection[ 0 ].innerBlocks.length;
+
+		return {
+			clientIds,
+			isGroupable,
+			isUngroupable,
+			blocksSelection,
+			groupingBlockName,
+		};
+	} ),
+	withDispatch(
+		(
+			dispatch,
+			{ clientIds, blocksSelection = [], groupingBlockName }
+		) => {
+			const { replaceBlocks } = dispatch( 'core/block-editor' );
+
+			return {
+				onConvertToGroup() {
+					// Activate the `transform` on the Grouping Block which does the conversion
+					const newBlocks = switchToBlockType(
+						blocksSelection,
+						groupingBlockName
+					);
+
+					if ( newBlocks ) {
+						replaceBlocks( clientIds, newBlocks );
+					}
+				},
+				onConvertFromGroup() {
+					const innerBlocks = blocksSelection[ 0 ].innerBlocks;
+
+					if ( ! innerBlocks.length ) {
+						return;
+					}
+
+					replaceBlocks( clientIds, innerBlocks );
+				},
+			};
+		}
+	),
+] )( ConvertToGroupButton );

packages/editor/src/components/reusable-blocks-buttons/index.js

@@ -1,7 +1,6 @@
 /**
  * WordPress dependencies
  */
-import { BlockSettingsMenuControls } from '@wordpress/block-editor';
 import { withSelect } from '@wordpress/data';
 
 /**
@@ -12,22 +11,12 @@ import ReusableBlockDeleteButton from './reusable-block-delete-button';
 
 function ReusableBlocksButtons( { clientIds } ) {
 	return (
-		<BlockSettingsMenuControls>
-			{ ( { onClose } ) => (
-				<>
-					<ReusableBlockConvertButton
-						clientIds={ clientIds }
-						onToggle={ onClose }
-					/>
-					{ clientIds.length === 1 && (
-						<ReusableBlockDeleteButton
-							clientId={ clientIds[ 0 ] }
-							onToggle={ onClose }
-						/>
-					) }
-				</>
+		<>
+			<ReusableBlockConvertButton clientIds={ clientIds } />
+			{ clientIds.length === 1 && (
+				<ReusableBlockDeleteButton clientId={ clientIds[ 0 ] } />
 			) }
-		</BlockSettingsMenuControls>
+		</>
 	);
 }