Group block: use a variation picker in the placeholder

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

@@ -1,8 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { useSelect } from '@wordpress/data';
-
+import { useDispatch, useSelect } from '@wordpress/data';
 import {
 	InnerBlocks,
 	useBlockProps,
@@ -13,30 +12,67 @@ import {
 } from '@wordpress/block-editor';
 import { SelectControl } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
+import { useCallback } from '@wordpress/element';
 
-const htmlElementMessages = {
-	header: __(
-		'The <header> element should represent introductory content, typically a group of introductory or navigational aids.'
-	),
-	main: __(
-		'The <main> element should be used for the primary content of your document only. '
-	),
-	section: __(
-		"The <section> element should represent a standalone portion of the document that can't be better represented by another element."
-	),
-	article: __(
-		'The <article> element should represent a self contained, syndicatable portion of the document.'
-	),
-	aside: __(
-		"The <aside> element should represent a portion of a document whose content is only indirectly related to the document's main content."
-	),
-	footer: __(
-		'The <footer> element should represent a footer for its nearest sectioning element (e.g.: <section>, <article>, <main> etc.).'
-	),
-};
+/**
+ * Internal dependencies
+ */
+import GroupPlaceHolder, { useShouldShowPlaceHolder } from './placeholder';
+
+/**
+ * Render inspector controls for the Group block.
+ *
+ * @param {Object}   props                 Component props.
+ * @param {string}   props.tagName         The HTML tag name.
+ * @param {Function} props.onSelectTagName onChange function for the SelectControl.
+ *
+ * @return {JSX.Element}                The control group.
+ */
+function GroupEditControls( { tagName, onSelectTagName } ) {
+	const htmlElementMessages = {
+		header: __(
+			'The <header> element should represent introductory content, typically a group of introductory or navigational aids.'
+		),
+		main: __(
+			'The <main> element should be used for the primary content of your document only. '
+		),
+		section: __(
+			"The <section> element should represent a standalone portion of the document that can't be better represented by another element."
+		),
+		article: __(
+			'The <article> element should represent a self-contained, syndicatable portion of the document.'
+		),
+		aside: __(
+			"The <aside> element should represent a portion of a document whose content is only indirectly related to the document's main content."
+		),
+		footer: __(
+			'The <footer> element should represent a footer for its nearest sectioning element (e.g.: <section>, <article>, <main> etc.).'
+		),
+	};
+	return (
+		<InspectorControls __experimentalGroup="advanced">
+			<SelectControl
+				label={ __( 'HTML element' ) }
+				options={ [
+					{ label: __( 'Default (<div>)' ), value: 'div' },
+					{ label: '<header>', value: 'header' },
+					{ label: '<main>', value: 'main' },
+					{ label: '<section>', value: 'section' },
+					{ label: '<article>', value: 'article' },
+					{ label: '<aside>', value: 'aside' },
+					{ label: '<footer>', value: 'footer' },
+				] }
+				value={ tagName }
+				onChange={ onSelectTagName }
+				help={ htmlElementMessages[ tagName ] }
+			/>
+		</InspectorControls>
+	);
+}
 
 function GroupEdit( {
 	attributes,
+	name,
 	setAttributes,
 	clientId,
 	__unstableLayoutClassNames: layoutClassNames,
@@ -52,18 +88,26 @@ function GroupEdit( {
 		},
 		[ clientId ]
 	);
-	const defaultLayout = useSetting( 'layout' ) || {};
+
 	const { tagName: TagName = 'div', templateLock, layout = {} } = attributes;
+
+	// Layout settings.
+	const defaultLayout = useSetting( 'layout' ) || {};
 	const usedLayout = ! layout?.type
 		? { ...defaultLayout, ...layout, type: 'default' }
 		: { ...defaultLayout, ...layout };
 	const { type = 'default' } = usedLayout;
 	const layoutSupportEnabled = themeSupportsLayout || type === 'flex';
 
+	// Hooks.
 	const blockProps = useBlockProps( {
 		className: ! layoutSupportEnabled ? layoutClassNames : null,
 	} );
-
+	const [ showPlaceholder, setShowPlaceholder ] = useShouldShowPlaceHolder( {
+		attributes,
+		usedLayoutType: usedLayout?.type,
+		hasInnerBlocks,
+	} );
 	const innerBlocksProps = useInnerBlocksProps(
 		layoutSupportEnabled
 			? blockProps
@@ -78,31 +122,38 @@ function GroupEdit( {
 		}
 	);
 
+	const { selectBlock } = useDispatch( blockEditorStore );
+	const updateSelection = useCallback(
+		( newClientId ) => selectBlock( newClientId, -1 ),
+		[ selectBlock ]
+	);
+	const selectVariation = ( nextVariation ) => {
+		setAttributes( nextVariation.attributes );
+		updateSelection( clientId );
+		setShowPlaceholder( false );
+	};
+
 	return (
 		<>
-			<InspectorControls __experimentalGroup="advanced">
-				<SelectControl
-					label={ __( 'HTML element' ) }
-					options={ [
-						{ label: __( 'Default (<div>)' ), value: 'div' },
-						{ label: '<header>', value: 'header' },
-						{ label: '<main>', value: 'main' },
-						{ label: '<section>', value: 'section' },
-						{ label: '<article>', value: 'article' },
-						{ label: '<aside>', value: 'aside' },
-						{ label: '<footer>', value: 'footer' },
-					] }
-					value={ TagName }
-					onChange={ ( value ) =>
-						setAttributes( { tagName: value } )
-					}
-					help={ htmlElementMessages[ TagName ] }
+			<GroupEditControls
+				tagName={ TagName }
+				onSelectTagName={ ( value ) =>
+					setAttributes( { tagName: value } )
+				}
+			/>
+			{ showPlaceholder && (
+				<GroupPlaceHolder
+					clientId={ clientId }
+					name={ name }
+					onSelect={ selectVariation }
 				/>
-			</InspectorControls>
-			{ layoutSupportEnabled && <TagName { ...innerBlocksProps } /> }
+			) }
+			{ layoutSupportEnabled && ! showPlaceholder && (
+				<TagName { ...innerBlocksProps } />
+			) }
 			{ /* Ideally this is not needed but it's there for backward compatibility reason
 				to keep this div for themes that might rely on its presence */ }
-			{ ! layoutSupportEnabled && (
+			{ ! layoutSupportEnabled && ! showPlaceholder && (
 				<TagName { ...blockProps }>
 					<div { ...innerBlocksProps } />
 				</TagName>

packages/block-library/src/group/editor.scss

@@ -52,3 +52,51 @@
 		pointer-events: all;
 	}
 }
+
+.wp-block-group__placeholder {
+	.wp-block-group-placeholder__variations {
+		list-style: none;
+		display: flex;
+		justify-content: center;
+		flex-direction: row;
+		flex-wrap: wrap;
+		width: 100%;
+		padding: 0;
+		margin: 0;
+	}
+	.components-placeholder__instructions {
+		text-align: center;
+		margin-bottom: 18px;
+	}
+	.wp-block-group-placeholder__variations svg {
+		fill: $gray-400 !important;
+	}
+	.wp-block-group-placeholder__variations svg:hover {
+		fill: var(--wp-admin-theme-color) !important;
+	}
+	.wp-block-group-placeholder__variations > li {
+		margin: 0 $grid-unit-15 $grid-unit-15 $grid-unit-15;
+		width: auto;
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+	}
+	.wp-block-group-placeholder__variations li > .wp-block-group-placeholder__variation-button {
+		width: 44px;
+		height: 32px;
+		padding: 0;
+		&:hover {
+			box-shadow: none;
+		}
+	}
+	.components-placeholder {
+		min-height: auto;
+		padding: $grid-unit-30;
+	}
+	.is-small,
+	.is-medium {
+		.wp-block-group-placeholder__variations > li {
+			margin: $grid-unit-15;
+		}
+	}
+}