From cdacf9e1ee45528987093341477b40670a271230 Mon Sep 17 00:00:00 2001
From: ramonjd <ramonjd@gmail.com>
Date: Tue, 23 Aug 2022 13:57:41 +1000
Subject: [PATCH 01/24] Group block: remove default layout for the group block
 and use a variation picker in the placeholder.

---
 packages/block-library/src/group/edit.js      | 54 ++++++++++++++++++-
 .../block-library/src/group/variations.js     |  6 +--
 2 files changed, 55 insertions(+), 5 deletions(-)

diff --git a/packages/block-library/src/group/edit.js b/packages/block-library/src/group/edit.js
index efe0d0ede9ebc..183f5d7fcabef 100644
--- a/packages/block-library/src/group/edit.js
+++ b/packages/block-library/src/group/edit.js
@@ -9,10 +9,12 @@ import {
 	InspectorControls,
 	useInnerBlocksProps,
 	useSetting,
+	__experimentalBlockVariationPicker,
 	store as blockEditorStore,
 } from '@wordpress/block-editor';
 import { SelectControl } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
+import { store as blocksStore } from '@wordpress/blocks';
 
 const htmlElementMessages = {
 	header: __(
@@ -25,7 +27,7 @@ const htmlElementMessages = {
 		"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.'
+		'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."
@@ -54,6 +56,7 @@ function GroupEdit( {
 	);
 	const defaultLayout = useSetting( 'layout' ) || {};
 	const { tagName: TagName = 'div', templateLock, layout = {} } = attributes;
+	const showPlaceholder = ! attributes?.layout?.type && ! hasInnerBlocks;
 	const usedLayout = ! layout?.type
 		? { ...defaultLayout, ...layout, type: 'default' }
 		: { ...defaultLayout, ...layout };
@@ -99,7 +102,11 @@ function GroupEdit( {
 					help={ htmlElementMessages[ TagName ] }
 				/>
 			</InspectorControls>
-			{ layoutSupportEnabled && <TagName { ...innerBlocksProps } /> }
+			{ layoutSupportEnabled && ! showPlaceholder ? (
+				<TagName { ...innerBlocksProps } />
+			) : (
+				<Placeholder name={ name } setAttributes={ setAttributes } />
+			) }
 			{ /* 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 && (
@@ -111,4 +118,47 @@ function GroupEdit( {
 	);
 }
 
+/**
+ * Display group variations if none is selected.
+ *
+ * @param {Object}   props               Component props.
+ * @param {string}   props.name          The block's name.
+ * @param {Function} props.setAttributes Function to set block's attributes.
+ *
+ * @return {JSX.Element}                The placeholder.
+ */
+function Placeholder( { name, setAttributes } ) {
+	const { blockType, defaultVariation, variations } = useSelect(
+		( select ) => {
+			const {
+				getBlockVariations,
+				getBlockType,
+				getDefaultBlockVariation,
+			} = select( blocksStore );
+
+			return {
+				blockType: getBlockType( name ),
+				defaultVariation: getDefaultBlockVariation( name, 'block' ),
+				variations: getBlockVariations( name, 'block' ),
+			};
+		},
+		[ name ]
+	);
+	const blockProps = useBlockProps();
+
+	return (
+		<div { ...blockProps }>
+			<__experimentalBlockVariationPicker
+				icon={ blockType?.icon?.src }
+				label={ blockType?.title }
+				variations={ variations }
+				onSelect={ ( nextVariation = defaultVariation ) => {
+					setAttributes( nextVariation.attributes );
+				} }
+				allowSkip
+			/>
+		</div>
+	);
+}
+
 export default GroupEdit;
diff --git a/packages/block-library/src/group/variations.js b/packages/block-library/src/group/variations.js
index 777e8e76d9b4c..2b64d794dd4cc 100644
--- a/packages/block-library/src/group/variations.js
+++ b/packages/block-library/src/group/variations.js
@@ -11,7 +11,7 @@ const variations = [
 		description: __( 'Gather blocks in a container.' ),
 		attributes: { layout: { type: 'constrained' } },
 		isDefault: true,
-		scope: [ 'inserter', 'transform' ],
+		scope: [ 'block', 'inserter', 'transform' ],
 		isActive: ( blockAttributes ) =>
 			! blockAttributes.layout ||
 			! blockAttributes.layout?.type ||
@@ -24,7 +24,7 @@ const variations = [
 		title: _x( 'Row', 'single horizontal line' ),
 		description: __( 'Arrange blocks horizontally.' ),
 		attributes: { layout: { type: 'flex', flexWrap: 'nowrap' } },
-		scope: [ 'inserter', 'transform' ],
+		scope: [ 'block', 'inserter', 'transform' ],
 		isActive: ( blockAttributes ) =>
 			blockAttributes.layout?.type === 'flex' &&
 			( ! blockAttributes.layout?.orientation ||
@@ -36,7 +36,7 @@ const variations = [
 		title: __( 'Stack' ),
 		description: __( 'Arrange blocks vertically.' ),
 		attributes: { layout: { type: 'flex', orientation: 'vertical' } },
-		scope: [ 'inserter', 'transform' ],
+		scope: [ 'block', 'inserter', 'transform' ],
 		isActive: ( blockAttributes ) =>
 			blockAttributes.layout?.type === 'flex' &&
 			blockAttributes.layout?.orientation === 'vertical',

From b25f7ea31d91a94a8704f151d58278fbc7ad2484 Mon Sep 17 00:00:00 2001
From: ramonjd <ramonjd@gmail.com>
Date: Tue, 23 Aug 2022 15:11:43 +1000
Subject: [PATCH 02/24] Updating e2e tests to select default group from group
 variation placeholder

---
 test/e2e/specs/editor/blocks/group.spec.js | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/test/e2e/specs/editor/blocks/group.spec.js b/test/e2e/specs/editor/blocks/group.spec.js
index ae4da6153bad5..059123a4b43a7 100644
--- a/test/e2e/specs/editor/blocks/group.spec.js
+++ b/test/e2e/specs/editor/blocks/group.spec.js
@@ -28,6 +28,8 @@ test.describe( 'Group', () => {
 			'role=listbox[name="Blocks"i] >> role=option[name="Group"i]'
 		);
 
+		await page.click( 'role=button[name="Skip"i]' );
+
 		expect( await editor.getEditedPostContent() ).toMatchSnapshot();
 	} );
 
@@ -41,6 +43,7 @@ test.describe( 'Group', () => {
 			page.locator( 'role=option[name="Group"i][selected]' )
 		).toBeVisible();
 		await page.keyboard.press( 'Enter' );
+		await page.click( 'role=button[name="Skip"i]' );
 
 		expect( await editor.getEditedPostContent() ).toMatchSnapshot();
 	} );
@@ -50,6 +53,7 @@ test.describe( 'Group', () => {
 		page,
 	} ) => {
 		await editor.insertBlock( { name: 'core/group' } );
+		await page.click( 'role=button[name="Skip"i]' );
 		await page.click( 'role=button[name="Add block"i]' );
 		await page.click(
 			'role=listbox[name="Blocks"i] >> role=option[name="Paragraph"i]'

From 323545cc575a649189f34138289b696a404c146c Mon Sep 17 00:00:00 2001
From: ramonjd <ramonjd@gmail.com>
Date: Wed, 24 Aug 2022 12:13:35 +1000
Subject: [PATCH 03/24] Adding meaningful aria label to block variation picker
 Updating e2e tests Refactoring Group edit.js

---
 .../block-variation-picker/index.js           |   8 +-
 packages/block-library/src/group/edit.js      | 213 ++++++++++--------
 test/e2e/specs/editor/blocks/group.spec.js    |  14 +-
 3 files changed, 132 insertions(+), 103 deletions(-)

diff --git a/packages/block-editor/src/components/block-variation-picker/index.js b/packages/block-editor/src/components/block-variation-picker/index.js
index 24bdfa272c34b..db2e2bd880873 100644
--- a/packages/block-editor/src/components/block-variation-picker/index.js
+++ b/packages/block-editor/src/components/block-variation-picker/index.js
@@ -61,7 +61,13 @@ function BlockVariationPicker( {
 			{ /* eslint-enable jsx-a11y/no-redundant-roles */ }
 			{ allowSkip && (
 				<div className="block-editor-block-variation-picker__skip">
-					<Button variant="link" onClick={ () => onSelect() }>
+					<Button
+						variant="link"
+						onClick={ () => onSelect() }
+						aria-label={ __(
+							'Skip selection and choose default block variation.'
+						) }
+					>
 						{ __( 'Skip' ) }
 					</Button>
 				</div>
diff --git a/packages/block-library/src/group/edit.js b/packages/block-library/src/group/edit.js
index 183f5d7fcabef..9091756fc080a 100644
--- a/packages/block-library/src/group/edit.js
+++ b/packages/block-library/src/group/edit.js
@@ -16,105 +16,54 @@ import { SelectControl } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { store as blocksStore } from '@wordpress/blocks';
 
-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.).'
-	),
-};
-
-function GroupEdit( {
-	attributes,
-	setAttributes,
-	clientId,
-	__unstableLayoutClassNames: layoutClassNames,
-} ) {
-	const { hasInnerBlocks, themeSupportsLayout } = useSelect(
-		( select ) => {
-			const { getBlock, getSettings } = select( blockEditorStore );
-			const block = getBlock( clientId );
-			return {
-				hasInnerBlocks: !! ( block && block.innerBlocks.length ),
-				themeSupportsLayout: getSettings()?.supportsLayout,
-			};
-		},
-		[ clientId ]
-	);
-	const defaultLayout = useSetting( 'layout' ) || {};
-	const { tagName: TagName = 'div', templateLock, layout = {} } = attributes;
-	const showPlaceholder = ! attributes?.layout?.type && ! hasInnerBlocks;
-	const usedLayout = ! layout?.type
-		? { ...defaultLayout, ...layout, type: 'default' }
-		: { ...defaultLayout, ...layout };
-	const { type = 'default' } = usedLayout;
-	const layoutSupportEnabled = themeSupportsLayout || type === 'flex';
-
-	const blockProps = useBlockProps( {
-		className: ! layoutSupportEnabled ? layoutClassNames : null,
-	} );
-
-	const innerBlocksProps = useInnerBlocksProps(
-		layoutSupportEnabled
-			? blockProps
-			: { className: 'wp-block-group__inner-container' },
-		{
-			templateLock,
-			renderAppender: hasInnerBlocks
-				? undefined
-				: InnerBlocks.ButtonBlockAppender,
-			__experimentalLayout: layoutSupportEnabled ? usedLayout : undefined,
-			__unstableDisableLayoutClassNames: ! layoutSupportEnabled,
-		}
-	);
-
+/**
+ * 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={ ( value ) =>
-						setAttributes( { tagName: value } )
-					}
-					help={ htmlElementMessages[ TagName ] }
-				/>
-			</InspectorControls>
-			{ layoutSupportEnabled && ! showPlaceholder ? (
-				<TagName { ...innerBlocksProps } />
-			) : (
-				<Placeholder name={ name } setAttributes={ setAttributes } />
-			) }
-			{ /* 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 && (
-				<TagName { ...blockProps }>
-					<div { ...innerBlocksProps } />
-				</TagName>
-			) }
-		</>
+		<InspectorControls __experimental Group="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>
 	);
 }
 
@@ -161,4 +110,72 @@ function Placeholder( { name, setAttributes } ) {
 	);
 }
 
+function GroupEdit( { attributes, name, setAttributes, clientId } ) {
+	const { hasInnerBlocks, themeSupportsLayout } = useSelect(
+		( select ) => {
+			const { getBlock, getSettings } = select( blockEditorStore );
+			const block = getBlock( clientId );
+			return {
+				hasInnerBlocks: !! ( block && block.innerBlocks.length ),
+				themeSupportsLayout: getSettings()?.supportsLayout,
+			};
+		},
+		[ clientId ]
+	);
+
+	const { tagName: TagName = 'div', templateLock, layout = {} } = attributes;
+	const { type: layoutType = null } = layout;
+
+	// Whether to show the variations placeholder.
+	const showPlaceholder = ! layoutType && ! hasInnerBlocks;
+
+	// 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();
+
+	const innerBlocksProps = useInnerBlocksProps(
+		layoutSupportEnabled
+			? blockProps
+			: { className: 'wp-block-group__inner-container' },
+		{
+			templateLock,
+			renderAppender: hasInnerBlocks
+				? undefined
+				: InnerBlocks.ButtonBlockAppender,
+			__experimentalLayout: layoutSupportEnabled ? usedLayout : undefined,
+		}
+	);
+
+	return (
+		<>
+			<GroupEditControls
+				tagName={ TagName }
+				onSelectTagName={ ( value ) =>
+					setAttributes( { tagName: value } )
+				}
+			/>
+			{ showPlaceholder && (
+				<Placeholder name={ name } setAttributes={ setAttributes } />
+			) }
+			{ 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 && ! showPlaceholder && (
+				<TagName { ...blockProps }>
+					<div { ...innerBlocksProps } />
+				</TagName>
+			) }
+		</>
+	);
+}
+
 export default GroupEdit;
diff --git a/test/e2e/specs/editor/blocks/group.spec.js b/test/e2e/specs/editor/blocks/group.spec.js
index 059123a4b43a7..617fd9936b474 100644
--- a/test/e2e/specs/editor/blocks/group.spec.js
+++ b/test/e2e/specs/editor/blocks/group.spec.js
@@ -8,7 +8,7 @@ test.describe( 'Group', () => {
 		await admin.createNewPost();
 	} );
 
-	test( 'can be created using the block inserter', async ( {
+	test.only( 'can be created using the block inserter', async ( {
 		editor,
 		page,
 	} ) => {
@@ -28,7 +28,9 @@ test.describe( 'Group', () => {
 			'role=listbox[name="Blocks"i] >> role=option[name="Group"i]'
 		);
 
-		await page.click( 'role=button[name="Skip"i]' );
+		await page.click(
+			'role=button[name="Skip selection and choose default block variation."i]'
+		);
 
 		expect( await editor.getEditedPostContent() ).toMatchSnapshot();
 	} );
@@ -43,7 +45,9 @@ test.describe( 'Group', () => {
 			page.locator( 'role=option[name="Group"i][selected]' )
 		).toBeVisible();
 		await page.keyboard.press( 'Enter' );
-		await page.click( 'role=button[name="Skip"i]' );
+		await page.click(
+			'role=button[name="Skip selection and choose default block variation."i]'
+		);
 
 		expect( await editor.getEditedPostContent() ).toMatchSnapshot();
 	} );
@@ -53,7 +57,9 @@ test.describe( 'Group', () => {
 		page,
 	} ) => {
 		await editor.insertBlock( { name: 'core/group' } );
-		await page.click( 'role=button[name="Skip"i]' );
+		await page.click(
+			'role=button[name="Skip selection and choose default block variation."i]'
+		);
 		await page.click( 'role=button[name="Add block"i]' );
 		await page.click(
 			'role=listbox[name="Blocks"i] >> role=option[name="Paragraph"i]'

From bd309ce0899520aaf6a95b134cebdb63838b3adc Mon Sep 17 00:00:00 2001
From: ramonjd <ramonjd@gmail.com>
Date: Wed, 24 Aug 2022 12:29:54 +1000
Subject: [PATCH 04/24] Only you..... can make my tests go green....

---
 test/e2e/specs/editor/blocks/group.spec.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/test/e2e/specs/editor/blocks/group.spec.js b/test/e2e/specs/editor/blocks/group.spec.js
index 617fd9936b474..4136bad610409 100644
--- a/test/e2e/specs/editor/blocks/group.spec.js
+++ b/test/e2e/specs/editor/blocks/group.spec.js
@@ -8,7 +8,7 @@ test.describe( 'Group', () => {
 		await admin.createNewPost();
 	} );
 
-	test.only( 'can be created using the block inserter', async ( {
+	test( 'can be created using the block inserter', async ( {
 		editor,
 		page,
 	} ) => {

From 85f4018f72278738b0446e4c164a9e2f412313b3 Mon Sep 17 00:00:00 2001
From: ramonjd <ramonjd@gmail.com>
Date: Wed, 24 Aug 2022 15:34:20 +1000
Subject: [PATCH 05/24] Clicking on block variation skip button

---
 .../specs/editor/various/block-hierarchy-navigation.test.js | 4 +++-
 .../e2e-tests/specs/editor/various/inserting-blocks.test.js | 6 ++++++
 .../specs/editor/various/keyboard-navigable-blocks.test.js  | 4 +++-
 3 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/packages/e2e-tests/specs/editor/various/block-hierarchy-navigation.test.js b/packages/e2e-tests/specs/editor/various/block-hierarchy-navigation.test.js
index fef0f11eca67a..e9d3eccbc5726 100644
--- a/packages/e2e-tests/specs/editor/various/block-hierarchy-navigation.test.js
+++ b/packages/e2e-tests/specs/editor/various/block-hierarchy-navigation.test.js
@@ -167,7 +167,9 @@ describe( 'Navigating the block hierarchy', () => {
 	it( 'should select the wrapper div for a group', async () => {
 		// Insert a group block.
 		await insertBlock( 'Group' );
-
+		await page.click(
+			'[aria-label="Skip selection and choose default block variation."]'
+		);
 		// Insert some random blocks.
 		// The last block shouldn't be a textual block.
 		await page.click( '.block-list-appender .block-editor-inserter' );
diff --git a/packages/e2e-tests/specs/editor/various/inserting-blocks.test.js b/packages/e2e-tests/specs/editor/various/inserting-blocks.test.js
index 9056b5b0a62b9..7b153a76507cf 100644
--- a/packages/e2e-tests/specs/editor/various/inserting-blocks.test.js
+++ b/packages/e2e-tests/specs/editor/various/inserting-blocks.test.js
@@ -277,6 +277,9 @@ describe( 'Inserting blocks', () => {
 	// Check for regression of https://github.com/WordPress/gutenberg/issues/24403
 	it( 'inserts a block in proper place after having clicked `Browse All` from block appender', async () => {
 		await insertBlock( 'Group' );
+		await page.click(
+			'[aria-label="Skip selection and choose default block variation."]'
+		);
 		await insertBlock( 'Paragraph' );
 		await page.keyboard.type( 'Paragraph after group' );
 		// Click the Group first to make the appender inside it clickable.
@@ -295,6 +298,9 @@ describe( 'Inserting blocks', () => {
 		const INSERTER_SEARCH_SELECTOR =
 			'.block-editor-inserter__search input,.block-editor-inserter__search-input,input.block-editor-inserter__search';
 		await insertBlock( 'Group' );
+		await page.click(
+			'[aria-label="Skip selection and choose default block variation."]'
+		);
 		await insertBlock( 'Paragraph' );
 		await page.keyboard.type( 'Text' );
 		// Click the Group first to make the appender inside it clickable.
diff --git a/packages/e2e-tests/specs/editor/various/keyboard-navigable-blocks.test.js b/packages/e2e-tests/specs/editor/various/keyboard-navigable-blocks.test.js
index a5297a38f537b..891e2f17ded4d 100644
--- a/packages/e2e-tests/specs/editor/various/keyboard-navigable-blocks.test.js
+++ b/packages/e2e-tests/specs/editor/various/keyboard-navigable-blocks.test.js
@@ -223,7 +223,9 @@ describe( 'Order of block keyboard navigation', () => {
 	it( 'allows the block wrapper to gain focus for a group block instead of the first element', async () => {
 		// Insert a group block.
 		await insertBlock( 'Group' );
-
+		await page.click(
+			'[aria-label="Skip selection and choose default block variation."]'
+		);
 		// If active label matches, that means focus did not change from group block wrapper.
 		await expect( await getActiveLabel() ).toBe( 'Block: Group' );
 	} );

From fcde025654ed89f71355239fc3b96de6efff8de6 Mon Sep 17 00:00:00 2001
From: ramonjd <ramonjd@gmail.com>
Date: Wed, 24 Aug 2022 15:56:32 +1000
Subject: [PATCH 06/24] Clicking on block variation skip

---
 .../specs/editor/various/multi-block-selection.test.js         | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/packages/e2e-tests/specs/editor/various/multi-block-selection.test.js b/packages/e2e-tests/specs/editor/various/multi-block-selection.test.js
index a5954796bff9e..1de1517907aad 100644
--- a/packages/e2e-tests/specs/editor/various/multi-block-selection.test.js
+++ b/packages/e2e-tests/specs/editor/various/multi-block-selection.test.js
@@ -398,6 +398,9 @@ describe( 'Multi-block selection', () => {
 			`//*[contains(@class, "components-autocomplete__result") and contains(@class, "is-selected") and contains(text(), 'Group')]`
 		);
 		await page.keyboard.press( 'Enter' );
+		await page.click(
+			'[aria-label="Skip selection and choose default block variation."]'
+		);
 
 		const groupAppender = await page.waitForSelector(
 			'.block-editor-button-block-appender'

From a9c623e6213198338d677f62313d54f388a42358 Mon Sep 17 00:00:00 2001
From: ramonjd <ramonjd@gmail.com>
Date: Thu, 25 Aug 2022 14:14:08 +1000
Subject: [PATCH 07/24] Programmatically creating a group block will not
 default to the constrained layout type. It must be specified.

---
 packages/e2e-tests/plugins/cpt-locking.php | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/packages/e2e-tests/plugins/cpt-locking.php b/packages/e2e-tests/plugins/cpt-locking.php
index 5ac97c9cfae52..0aa98f8d13d30 100644
--- a/packages/e2e-tests/plugins/cpt-locking.php
+++ b/packages/e2e-tests/plugins/cpt-locking.php
@@ -69,6 +69,9 @@ function gutenberg_test_cpt_locking() {
 					'core/group',
 					array(
 						'templateLock' => false,
+						'layout'       => array(
+							'type' => 'constrained',
+						),
 					),
 					array(
 						array(

From 5f5d5a546325109345c21411202e67e24c123358 Mon Sep 17 00:00:00 2001
From: ramonjd <ramonjd@gmail.com>
Date: Thu, 25 Aug 2022 15:15:24 +1000
Subject: [PATCH 08/24] Reinstating default "constrained" layout type, but
 adding an extra ephemeral property to identify blocks that have been
 inserted.

---
 packages/block-library/src/group/edit.js | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/packages/block-library/src/group/edit.js b/packages/block-library/src/group/edit.js
index 9091756fc080a..3538ffd26ce80 100644
--- a/packages/block-library/src/group/edit.js
+++ b/packages/block-library/src/group/edit.js
@@ -124,10 +124,13 @@ function GroupEdit( { attributes, name, setAttributes, clientId } ) {
 	);
 
 	const { tagName: TagName = 'div', templateLock, layout = {} } = attributes;
-	const { type: layoutType = null } = layout;
+	const { type: layoutType = null, isDefault = false } = layout;
 
 	// Whether to show the variations placeholder.
-	const showPlaceholder = ! layoutType && ! hasInnerBlocks;
+	// `isDefault: true` only exists in the default layout attributes in block.json
+	// in order to identify blocks that have been inserted, programmatically or otherwise, with no changes.
+	// When a user selects a layout `isDefault` won't appear in the block's attributes.
+	const showPlaceholder = isDefault && ! hasInnerBlocks;
 
 	// Layout settings.
 	const defaultLayout = useSetting( 'layout' ) || {};

From 4ef0d754ea5140e338b3a732d194f8155f791160 Mon Sep 17 00:00:00 2001
From: ramonjd <ramonjd@gmail.com>
Date: Tue, 6 Sep 2022 11:07:25 +1000
Subject: [PATCH 09/24] Ensure that the inserted block is selected after a
 Group variation is selected.

---
 packages/block-library/src/group/edit.js | 21 ++++++++++++++++-----
 1 file changed, 16 insertions(+), 5 deletions(-)

diff --git a/packages/block-library/src/group/edit.js b/packages/block-library/src/group/edit.js
index 3538ffd26ce80..b45dc6d745d7b 100644
--- a/packages/block-library/src/group/edit.js
+++ b/packages/block-library/src/group/edit.js
@@ -1,8 +1,8 @@
 /**
  * WordPress dependencies
  */
-import { useSelect } from '@wordpress/data';
-
+import { useSelect, useDispatch } from '@wordpress/data';
+import { useCallback } from '@wordpress/element';
 import {
 	InnerBlocks,
 	useBlockProps,
@@ -71,12 +71,13 @@ function GroupEditControls( { tagName, onSelectTagName } ) {
  * Display group variations if none is selected.
  *
  * @param {Object}   props               Component props.
+ * @param {string}   props.clientId      The block's clientId.
  * @param {string}   props.name          The block's name.
  * @param {Function} props.setAttributes Function to set block's attributes.
  *
  * @return {JSX.Element}                The placeholder.
  */
-function Placeholder( { name, setAttributes } ) {
+function Placeholder( { clientId, name, setAttributes } ) {
 	const { blockType, defaultVariation, variations } = useSelect(
 		( select ) => {
 			const {
@@ -94,7 +95,12 @@ function Placeholder( { name, setAttributes } ) {
 		[ name ]
 	);
 	const blockProps = useBlockProps();
-
+	const { selectBlock } = useDispatch( blockEditorStore );
+	// Ensure that the inserted block is selected after a Group variation is selected.
+	const updateSelection = useCallback(
+		( newClientId ) => selectBlock( newClientId, -1 ),
+		[ selectBlock ]
+	);
 	return (
 		<div { ...blockProps }>
 			<__experimentalBlockVariationPicker
@@ -103,6 +109,7 @@ function Placeholder( { name, setAttributes } ) {
 				variations={ variations }
 				onSelect={ ( nextVariation = defaultVariation ) => {
 					setAttributes( nextVariation.attributes );
+					updateSelection( clientId );
 				} }
 				allowSkip
 			/>
@@ -165,7 +172,11 @@ function GroupEdit( { attributes, name, setAttributes, clientId } ) {
 				}
 			/>
 			{ showPlaceholder && (
-				<Placeholder name={ name } setAttributes={ setAttributes } />
+				<Placeholder
+					clientId={ clientId }
+					name={ name }
+					setAttributes={ setAttributes }
+				/>
 			) }
 			{ layoutSupportEnabled && ! showPlaceholder && (
 				<TagName { ...innerBlocksProps } />

From 435c42bae981a8f02e55d28a49f0674b5071572b Mon Sep 17 00:00:00 2001
From: ramonjd <ramonjd@gmail.com>
Date: Tue, 6 Sep 2022 20:47:44 +1000
Subject: [PATCH 10/24] Removing skip link and update description

---
 packages/block-library/src/group/edit.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/block-library/src/group/edit.js b/packages/block-library/src/group/edit.js
index b45dc6d745d7b..4ba36048ebed9 100644
--- a/packages/block-library/src/group/edit.js
+++ b/packages/block-library/src/group/edit.js
@@ -111,7 +111,8 @@ function Placeholder( { clientId, name, setAttributes } ) {
 					setAttributes( nextVariation.attributes );
 					updateSelection( clientId );
 				} }
-				allowSkip
+				instructions={ __( 'Group blocks together. Select a layout:' ) }
+				allowSkip={ false }
 			/>
 		</div>
 	);

From 506162d785f9fc4ec463ca2783342befcee7a825 Mon Sep 17 00:00:00 2001
From: ramonjd <ramonjd@gmail.com>
Date: Tue, 6 Sep 2022 21:17:30 +1000
Subject: [PATCH 11/24] Reinstate skip for now until we can update the e2e
 tests

---
 packages/block-library/src/group/edit.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/block-library/src/group/edit.js b/packages/block-library/src/group/edit.js
index 4ba36048ebed9..4cc86cbd99a76 100644
--- a/packages/block-library/src/group/edit.js
+++ b/packages/block-library/src/group/edit.js
@@ -112,7 +112,7 @@ function Placeholder( { clientId, name, setAttributes } ) {
 					updateSelection( clientId );
 				} }
 				instructions={ __( 'Group blocks together. Select a layout:' ) }
-				allowSkip={ false }
+				allowSkip
 			/>
 		</div>
 	);

From b5d878de376bf497d066eb845fbb4c818d2422b8 Mon Sep 17 00:00:00 2001
From: ramonjd <ramonjd@gmail.com>
Date: Wed, 7 Sep 2022 13:01:30 +1000
Subject: [PATCH 12/24] Stylising the placeholder icons updating tests

---
 .../block-variation-picker/index.js           |   5 +-
 packages/block-library/src/group/edit.js      |  63 +--------
 packages/block-library/src/group/editor.scss  |  16 +++
 .../block-library/src/group/placeholder.js    | 126 ++++++++++++++++++
 .../block-hierarchy-navigation.test.js        |   3 +-
 .../editor/various/inserting-blocks.test.js   |   6 +-
 .../various/keyboard-navigable-blocks.test.js |   3 +-
 .../various/multi-block-selection.test.js     |   4 +-
 test/e2e/specs/editor/blocks/group.spec.js    |  10 +-
 9 files changed, 170 insertions(+), 66 deletions(-)
 create mode 100644 packages/block-library/src/group/placeholder.js

diff --git a/packages/block-editor/src/components/block-variation-picker/index.js b/packages/block-editor/src/components/block-variation-picker/index.js
index db2e2bd880873..7bf926275c635 100644
--- a/packages/block-editor/src/components/block-variation-picker/index.js
+++ b/packages/block-editor/src/components/block-variation-picker/index.js
@@ -17,6 +17,7 @@ function BlockVariationPicker( {
 	variations,
 	onSelect,
 	allowSkip,
+	buttonType = 'secondary',
 } ) {
 	const classes = classnames( 'block-editor-block-variation-picker', {
 		'has-many-variations': variations.length > 4,
@@ -42,8 +43,8 @@ function BlockVariationPicker( {
 				{ variations.map( ( variation ) => (
 					<li key={ variation.name }>
 						<Button
-							variant="secondary"
-							icon={ variation.icon }
+							variant={ buttonType }
+							icon={ variation.placeHolderIcon || variation.icon }
 							iconSize={ 48 }
 							onClick={ () => onSelect( variation ) }
 							className="block-editor-block-variation-picker__variation"
diff --git a/packages/block-library/src/group/edit.js b/packages/block-library/src/group/edit.js
index 4cc86cbd99a76..a02b63974522c 100644
--- a/packages/block-library/src/group/edit.js
+++ b/packages/block-library/src/group/edit.js
@@ -1,20 +1,22 @@
 /**
  * WordPress dependencies
  */
-import { useSelect, useDispatch } from '@wordpress/data';
-import { useCallback } from '@wordpress/element';
+import { useSelect } from '@wordpress/data';
 import {
 	InnerBlocks,
 	useBlockProps,
 	InspectorControls,
 	useInnerBlocksProps,
 	useSetting,
-	__experimentalBlockVariationPicker,
 	store as blockEditorStore,
 } from '@wordpress/block-editor';
 import { SelectControl } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
-import { store as blocksStore } from '@wordpress/blocks';
+
+/**
+ * Internal dependencies
+ */
+import GroupPlaceHolder from './placeholder';
 
 /**
  * Render inspector controls for the Group block.
@@ -67,57 +69,6 @@ function GroupEditControls( { tagName, onSelectTagName } ) {
 	);
 }
 
-/**
- * Display group variations if none is selected.
- *
- * @param {Object}   props               Component props.
- * @param {string}   props.clientId      The block's clientId.
- * @param {string}   props.name          The block's name.
- * @param {Function} props.setAttributes Function to set block's attributes.
- *
- * @return {JSX.Element}                The placeholder.
- */
-function Placeholder( { clientId, name, setAttributes } ) {
-	const { blockType, defaultVariation, variations } = useSelect(
-		( select ) => {
-			const {
-				getBlockVariations,
-				getBlockType,
-				getDefaultBlockVariation,
-			} = select( blocksStore );
-
-			return {
-				blockType: getBlockType( name ),
-				defaultVariation: getDefaultBlockVariation( name, 'block' ),
-				variations: getBlockVariations( name, 'block' ),
-			};
-		},
-		[ name ]
-	);
-	const blockProps = useBlockProps();
-	const { selectBlock } = useDispatch( blockEditorStore );
-	// Ensure that the inserted block is selected after a Group variation is selected.
-	const updateSelection = useCallback(
-		( newClientId ) => selectBlock( newClientId, -1 ),
-		[ selectBlock ]
-	);
-	return (
-		<div { ...blockProps }>
-			<__experimentalBlockVariationPicker
-				icon={ blockType?.icon?.src }
-				label={ blockType?.title }
-				variations={ variations }
-				onSelect={ ( nextVariation = defaultVariation ) => {
-					setAttributes( nextVariation.attributes );
-					updateSelection( clientId );
-				} }
-				instructions={ __( 'Group blocks together. Select a layout:' ) }
-				allowSkip
-			/>
-		</div>
-	);
-}
-
 function GroupEdit( { attributes, name, setAttributes, clientId } ) {
 	const { hasInnerBlocks, themeSupportsLayout } = useSelect(
 		( select ) => {
@@ -173,7 +124,7 @@ function GroupEdit( { attributes, name, setAttributes, clientId } ) {
 				}
 			/>
 			{ showPlaceholder && (
-				<Placeholder
+				<GroupPlaceHolder
 					clientId={ clientId }
 					name={ name }
 					setAttributes={ setAttributes }
diff --git a/packages/block-library/src/group/editor.scss b/packages/block-library/src/group/editor.scss
index 375a80be9c0f8..13f0ddf1798a2 100644
--- a/packages/block-library/src/group/editor.scss
+++ b/packages/block-library/src/group/editor.scss
@@ -52,3 +52,19 @@
 		pointer-events: all;
 	}
 }
+
+.wp-block-group__placeholder {
+	.components-placeholder__instructions {
+		text-align: center;
+	}
+	.block-editor-block-variation-picker__variations {
+		justify-content: center;
+	}
+	.block-editor-block-variation-picker__variations svg {
+		fill: $gray-400 !important;
+	}
+	.block-editor-block-variation-picker__variations > li {
+		margin: 0 10px;
+		width: auto;
+	}
+}
diff --git a/packages/block-library/src/group/placeholder.js b/packages/block-library/src/group/placeholder.js
new file mode 100644
index 0000000000000..dd7a27a9401e6
--- /dev/null
+++ b/packages/block-library/src/group/placeholder.js
@@ -0,0 +1,126 @@
+/**
+ * WordPress dependencies
+ */
+import { useSelect, useDispatch } from '@wordpress/data';
+import { useCallback } from '@wordpress/element';
+import {
+	useBlockProps,
+	__experimentalBlockVariationPicker,
+	store as blockEditorStore,
+} from '@wordpress/block-editor';
+import { __ } from '@wordpress/i18n';
+import { store as blocksStore } from '@wordpress/blocks';
+import { Path, SVG } from '@wordpress/components';
+
+const getGroupPlaceholderIcons = ( name = 'group' ) => {
+	const icons = {
+		group: (
+			<SVG
+				xmlns="http://www.w3.org/2000/svg"
+				width="44"
+				height="32"
+				viewBox="0 0 44 32"
+			>
+				<Path
+					d="M42 0H2C.9 0 0 .9 0 2v28c0 1.1.9 2 2 2h40c1.1 0 2-.9 2-2V2c0-1.1-.9-2-2-2z"
+					// style="fill:#ccc"
+				/>
+			</SVG>
+		),
+		'group-row': (
+			<SVG
+				xmlns="http://www.w3.org/2000/svg"
+				width="44"
+				height="32"
+				viewBox="0 0 44 32"
+			>
+				<Path
+					d="M42 0H23.5c-.6 0-1 .4-1 1v30c0 .6.4 1 1 1H42c1.1 0 2-.9 2-2V2c0-1.1-.9-2-2-2zM20.5 0H2C.9 0 0 .9 0 2v28c0 1.1.9 2 2 2h18.5c.6 0 1-.4 1-1V1c0-.6-.4-1-1-1z"
+					// style="fill:#ccc"
+				/>
+			</SVG>
+		),
+		'group-stack': (
+			<SVG
+				xmlns="http://www.w3.org/2000/svg"
+				width="44"
+				height="32"
+				viewBox="0 0 44 32"
+			>
+				<Path
+					d="M42 0H2C.9 0 0 .9 0 2v12.5c0 .6.4 1 1 1h42c.6 0 1-.4 1-1V2c0-1.1-.9-2-2-2zm1 16.5H1c-.6 0-1 .4-1 1V30c0 1.1.9 2 2 2h40c1.1 0 2-.9 2-2V17.5c0-.6-.4-1-1-1z"
+					// style="fill:#ccc"
+				/>
+			</SVG>
+		),
+	};
+	return icons?.[ name ];
+};
+
+/**
+ * Display group variations if none is selected.
+ *
+ * @param {Object}   props               Component props.
+ * @param {string}   props.clientId      The block's clientId.
+ * @param {string}   props.name          The block's name.
+ * @param {Function} props.setAttributes Function to set block's attributes.
+ *
+ * @return {JSX.Element}                The placeholder.
+ */
+function GroupPlaceHolder( { clientId, name, setAttributes } ) {
+	const { blockType, defaultVariation, variations } = useSelect(
+		( select ) => {
+			const {
+				getBlockVariations,
+				getBlockType,
+				getDefaultBlockVariation,
+			} = select( blocksStore );
+
+			const variationsWithPlaceHolderIcons = (
+				getBlockVariations( name, 'block' ) || []
+			).map( ( groupVariation ) => {
+				const placeholderIcon = getGroupPlaceholderIcons(
+					groupVariation.name
+				);
+				if ( !! placeholderIcon ) {
+					groupVariation.placeHolderIcon = placeholderIcon;
+				}
+				return groupVariation;
+			} );
+
+			return {
+				blockType: getBlockType( name ),
+				defaultVariation: getDefaultBlockVariation( name, 'block' ),
+				variations: variationsWithPlaceHolderIcons,
+			};
+		},
+		[ name ]
+	);
+	const blockProps = useBlockProps( {
+		className: 'wp-block-group__placeholder',
+	} );
+	const { selectBlock } = useDispatch( blockEditorStore );
+	// Ensure that the inserted block is selected after a Group variation is selected.
+	const updateSelection = useCallback(
+		( newClientId ) => selectBlock( newClientId, -1 ),
+		[ selectBlock ]
+	);
+	return (
+		<div { ...blockProps }>
+			<__experimentalBlockVariationPicker
+				icon={ blockType?.icon?.src }
+				label={ blockType?.title }
+				variations={ variations }
+				onSelect={ ( nextVariation = defaultVariation ) => {
+					setAttributes( nextVariation.attributes );
+					updateSelection( clientId );
+				} }
+				instructions={ __( 'Group blocks together. Select a layout:' ) }
+				allowSkip={ false }
+				buttonType="tertiary"
+			/>
+		</div>
+	);
+}
+
+export default GroupPlaceHolder;
diff --git a/packages/e2e-tests/specs/editor/various/block-hierarchy-navigation.test.js b/packages/e2e-tests/specs/editor/various/block-hierarchy-navigation.test.js
index e9d3eccbc5726..5c12a169fb80c 100644
--- a/packages/e2e-tests/specs/editor/various/block-hierarchy-navigation.test.js
+++ b/packages/e2e-tests/specs/editor/various/block-hierarchy-navigation.test.js
@@ -167,8 +167,9 @@ describe( 'Navigating the block hierarchy', () => {
 	it( 'should select the wrapper div for a group', async () => {
 		// Insert a group block.
 		await insertBlock( 'Group' );
+		// Select the default, selected Group layout from the variation picker.
 		await page.click(
-			'[aria-label="Skip selection and choose default block variation."]'
+			'button[aria-label="Gather blocks in a container."]'
 		);
 		// Insert some random blocks.
 		// The last block shouldn't be a textual block.
diff --git a/packages/e2e-tests/specs/editor/various/inserting-blocks.test.js b/packages/e2e-tests/specs/editor/various/inserting-blocks.test.js
index 7b153a76507cf..8a0e7ecc3f1f3 100644
--- a/packages/e2e-tests/specs/editor/various/inserting-blocks.test.js
+++ b/packages/e2e-tests/specs/editor/various/inserting-blocks.test.js
@@ -277,8 +277,9 @@ describe( 'Inserting blocks', () => {
 	// Check for regression of https://github.com/WordPress/gutenberg/issues/24403
 	it( 'inserts a block in proper place after having clicked `Browse All` from block appender', async () => {
 		await insertBlock( 'Group' );
+		// Select the default, selected Group layout from the variation picker.
 		await page.click(
-			'[aria-label="Skip selection and choose default block variation."]'
+			'button[aria-label="Gather blocks in a container."]'
 		);
 		await insertBlock( 'Paragraph' );
 		await page.keyboard.type( 'Paragraph after group' );
@@ -298,8 +299,9 @@ describe( 'Inserting blocks', () => {
 		const INSERTER_SEARCH_SELECTOR =
 			'.block-editor-inserter__search input,.block-editor-inserter__search-input,input.block-editor-inserter__search';
 		await insertBlock( 'Group' );
+		// Select the default, selected Group layout from the variation picker.
 		await page.click(
-			'[aria-label="Skip selection and choose default block variation."]'
+			'button[aria-label="Gather blocks in a container."]'
 		);
 		await insertBlock( 'Paragraph' );
 		await page.keyboard.type( 'Text' );
diff --git a/packages/e2e-tests/specs/editor/various/keyboard-navigable-blocks.test.js b/packages/e2e-tests/specs/editor/various/keyboard-navigable-blocks.test.js
index 891e2f17ded4d..25408f73dcfc0 100644
--- a/packages/e2e-tests/specs/editor/various/keyboard-navigable-blocks.test.js
+++ b/packages/e2e-tests/specs/editor/various/keyboard-navigable-blocks.test.js
@@ -223,8 +223,9 @@ describe( 'Order of block keyboard navigation', () => {
 	it( 'allows the block wrapper to gain focus for a group block instead of the first element', async () => {
 		// Insert a group block.
 		await insertBlock( 'Group' );
+		// Select the default, selected Group layout from the variation picker.
 		await page.click(
-			'[aria-label="Skip selection and choose default block variation."]'
+			'button[aria-label="Gather blocks in a container."]'
 		);
 		// If active label matches, that means focus did not change from group block wrapper.
 		await expect( await getActiveLabel() ).toBe( 'Block: Group' );
diff --git a/packages/e2e-tests/specs/editor/various/multi-block-selection.test.js b/packages/e2e-tests/specs/editor/various/multi-block-selection.test.js
index 1de1517907aad..3ec170bf0014a 100644
--- a/packages/e2e-tests/specs/editor/various/multi-block-selection.test.js
+++ b/packages/e2e-tests/specs/editor/various/multi-block-selection.test.js
@@ -398,8 +398,10 @@ describe( 'Multi-block selection', () => {
 			`//*[contains(@class, "components-autocomplete__result") and contains(@class, "is-selected") and contains(text(), 'Group')]`
 		);
 		await page.keyboard.press( 'Enter' );
+
+		// Select the default, selected Group layout from the variation picker.
 		await page.click(
-			'[aria-label="Skip selection and choose default block variation."]'
+			'button[aria-label="Gather blocks in a container."]'
 		);
 
 		const groupAppender = await page.waitForSelector(
diff --git a/test/e2e/specs/editor/blocks/group.spec.js b/test/e2e/specs/editor/blocks/group.spec.js
index 4136bad610409..25aff31657986 100644
--- a/test/e2e/specs/editor/blocks/group.spec.js
+++ b/test/e2e/specs/editor/blocks/group.spec.js
@@ -28,8 +28,9 @@ test.describe( 'Group', () => {
 			'role=listbox[name="Blocks"i] >> role=option[name="Group"i]'
 		);
 
+		// Select the default, selected Group layout from the variation picker.
 		await page.click(
-			'role=button[name="Skip selection and choose default block variation."i]'
+			'role=button[name="Gather blocks in a container."i]'
 		);
 
 		expect( await editor.getEditedPostContent() ).toMatchSnapshot();
@@ -45,8 +46,10 @@ test.describe( 'Group', () => {
 			page.locator( 'role=option[name="Group"i][selected]' )
 		).toBeVisible();
 		await page.keyboard.press( 'Enter' );
+
+		// Select the default, selected Group layout from the variation picker.
 		await page.click(
-			'role=button[name="Skip selection and choose default block variation."i]'
+			'role=button[name="Gather blocks in a container."i]'
 		);
 
 		expect( await editor.getEditedPostContent() ).toMatchSnapshot();
@@ -57,8 +60,9 @@ test.describe( 'Group', () => {
 		page,
 	} ) => {
 		await editor.insertBlock( { name: 'core/group' } );
+		// Select the default, selected Group layout from the variation picker.
 		await page.click(
-			'role=button[name="Skip selection and choose default block variation."i]'
+			'role=button[name="Gather blocks in a container."i]'
 		);
 		await page.click( 'role=button[name="Add block"i]' );
 		await page.click(

From c6771d6694e7fde3d67126ce435bf85688da7564 Mon Sep 17 00:00:00 2001
From: ramonjd <ramonjd@gmail.com>
Date: Wed, 21 Sep 2022 12:37:18 +1000
Subject: [PATCH 13/24] Adding `isDefault` to the default props and removing it
 when a group variation is selected.

---
 packages/block-library/src/group/edit.js        | 15 ++++++++-------
 packages/block-library/src/group/placeholder.js | 13 ++++++++++++-
 packages/block-library/src/group/variations.js  |  2 +-
 3 files changed, 21 insertions(+), 9 deletions(-)

diff --git a/packages/block-library/src/group/edit.js b/packages/block-library/src/group/edit.js
index a02b63974522c..6a12750d44d98 100644
--- a/packages/block-library/src/group/edit.js
+++ b/packages/block-library/src/group/edit.js
@@ -49,7 +49,7 @@ function GroupEditControls( { tagName, onSelectTagName } ) {
 		),
 	};
 	return (
-		<InspectorControls __experimental Group="advanced">
+		<InspectorControls __experimentalGroup="advanced">
 			<SelectControl
 				label={ __( 'HTML element' ) }
 				options={ [
@@ -83,12 +83,13 @@ function GroupEdit( { attributes, name, setAttributes, clientId } ) {
 	);
 
 	const { tagName: TagName = 'div', templateLock, layout = {} } = attributes;
-	const { type: layoutType = null, isDefault = false } = layout;
-
-	// Whether to show the variations placeholder.
-	// `isDefault: true` only exists in the default layout attributes in block.json
-	// in order to identify blocks that have been inserted, programmatically or otherwise, with no changes.
-	// When a user selects a layout `isDefault` won't appear in the block's attributes.
+	/*
+		Whether to show the variations placeholder.
+		`isDefault: true` only exists in the default layout attributes
+		in order to identify blocks that have been inserted, programmatically or otherwise, with no changes.
+		When a user selects a layout `isDefault` won't appear in the block's attributes.
+	 */
+	const { isDefault = false } = layout;
 	const showPlaceholder = isDefault && ! hasInnerBlocks;
 
 	// Layout settings.
diff --git a/packages/block-library/src/group/placeholder.js b/packages/block-library/src/group/placeholder.js
index dd7a27a9401e6..6a056adb2484d 100644
--- a/packages/block-library/src/group/placeholder.js
+++ b/packages/block-library/src/group/placeholder.js
@@ -112,7 +112,18 @@ function GroupPlaceHolder( { clientId, name, setAttributes } ) {
 				label={ blockType?.title }
 				variations={ variations }
 				onSelect={ ( nextVariation = defaultVariation ) => {
-					setAttributes( nextVariation.attributes );
+					/*
+						Remove layout.isDefault if present.
+						`isDefault` exists to identify blocks that have been inserted, programmatically or otherwise, with no changes.
+						When a user selects a layout `isDefault` should not appear in the block's attributes.
+					 */
+					const { isDefault, ...rest } =
+						nextVariation.attributes?.layout;
+					const newAttributes = {
+						...nextVariation.attributes,
+						layout: rest,
+					};
+					setAttributes( newAttributes );
 					updateSelection( clientId );
 				} }
 				instructions={ __( 'Group blocks together. Select a layout:' ) }
diff --git a/packages/block-library/src/group/variations.js b/packages/block-library/src/group/variations.js
index 2b64d794dd4cc..cf08a79b2dae8 100644
--- a/packages/block-library/src/group/variations.js
+++ b/packages/block-library/src/group/variations.js
@@ -9,7 +9,7 @@ const variations = [
 		name: 'group',
 		title: __( 'Group' ),
 		description: __( 'Gather blocks in a container.' ),
-		attributes: { layout: { type: 'constrained' } },
+		attributes: { layout: { type: 'constrained', isDefault: true } },
 		isDefault: true,
 		scope: [ 'block', 'inserter', 'transform' ],
 		isActive: ( blockAttributes ) =>

From dbdc9c4ac1fafb522f3444c7d4e6b61a646c4365 Mon Sep 17 00:00:00 2001
From: ramonjd <ramonjd@gmail.com>
Date: Wed, 21 Sep 2022 14:31:20 +1000
Subject: [PATCH 14/24] Updating tests to account for: - default layout is
 "constrained" when programmatically inserting a group block - using
 createBlock with no attributes passed

---
 .../editor/plugins/__snapshots__/cpt-locking.test.js.snap     | 4 ++--
 test/e2e/specs/editor/blocks/group.spec.js                    | 4 ----
 2 files changed, 2 insertions(+), 6 deletions(-)

diff --git a/packages/e2e-tests/specs/editor/plugins/__snapshots__/cpt-locking.test.js.snap b/packages/e2e-tests/specs/editor/plugins/__snapshots__/cpt-locking.test.js.snap
index 0acc31727beeb..f12d66f3f2f33 100644
--- a/packages/e2e-tests/specs/editor/plugins/__snapshots__/cpt-locking.test.js.snap
+++ b/packages/e2e-tests/specs/editor/plugins/__snapshots__/cpt-locking.test.js.snap
@@ -41,7 +41,7 @@ exports[`cpt locking template_lock all should not error when deleting the cotent
 `;
 
 exports[`cpt locking template_lock all unlocked group should allow blocks to be moved 1`] = `
-"<!-- wp:group {\\"templateLock\\":false} -->
+"<!-- wp:group {\\"templateLock\\":false,\\"layout\\":{\\"type\\":\\"constrained\\"}} -->
 <div class=\\"wp-block-group\\"><!-- wp:paragraph {\\"placeholder\\":\\"Add a description\\"} -->
 <p>p1</p>
 <!-- /wp:paragraph -->
@@ -55,7 +55,7 @@ exports[`cpt locking template_lock all unlocked group should allow blocks to be
 `;
 
 exports[`cpt locking template_lock all unlocked group should allow blocks to be removed 1`] = `
-"<!-- wp:group {\\"templateLock\\":false} -->
+"<!-- wp:group {\\"templateLock\\":false,\\"layout\\":{\\"type\\":\\"constrained\\"}} -->
 <div class=\\"wp-block-group\\"><!-- wp:quote -->
 <blockquote class=\\"wp-block-quote\\"><!-- wp:paragraph -->
 <p></p>
diff --git a/test/e2e/specs/editor/blocks/group.spec.js b/test/e2e/specs/editor/blocks/group.spec.js
index 25aff31657986..4c25f48e1a5cd 100644
--- a/test/e2e/specs/editor/blocks/group.spec.js
+++ b/test/e2e/specs/editor/blocks/group.spec.js
@@ -60,10 +60,6 @@ test.describe( 'Group', () => {
 		page,
 	} ) => {
 		await editor.insertBlock( { name: 'core/group' } );
-		// Select the default, selected Group layout from the variation picker.
-		await page.click(
-			'role=button[name="Gather blocks in a container."i]'
-		);
 		await page.click( 'role=button[name="Add block"i]' );
 		await page.click(
 			'role=listbox[name="Blocks"i] >> role=option[name="Paragraph"i]'

From ed855ecd3079b0c6a1fe32de9ae50f78ccf9f8dd Mon Sep 17 00:00:00 2001
From: ramonjd <ramonjd@gmail.com>
Date: Tue, 25 Oct 2022 12:38:58 +1100
Subject: [PATCH 15/24] Creating a custom group block variation picker so we do
 not have to update (and potentially break) the blockvariationpicker
 component, which is used elsewhere.

---
 .../block-variation-picker/index.js           | 13 +---
 packages/block-library/src/group/editor.scss  | 43 ++++++++++--
 .../block-library/src/group/placeholder.js    | 66 ++++++++++++-------
 3 files changed, 84 insertions(+), 38 deletions(-)

diff --git a/packages/block-editor/src/components/block-variation-picker/index.js b/packages/block-editor/src/components/block-variation-picker/index.js
index 7bf926275c635..24bdfa272c34b 100644
--- a/packages/block-editor/src/components/block-variation-picker/index.js
+++ b/packages/block-editor/src/components/block-variation-picker/index.js
@@ -17,7 +17,6 @@ function BlockVariationPicker( {
 	variations,
 	onSelect,
 	allowSkip,
-	buttonType = 'secondary',
 } ) {
 	const classes = classnames( 'block-editor-block-variation-picker', {
 		'has-many-variations': variations.length > 4,
@@ -43,8 +42,8 @@ function BlockVariationPicker( {
 				{ variations.map( ( variation ) => (
 					<li key={ variation.name }>
 						<Button
-							variant={ buttonType }
-							icon={ variation.placeHolderIcon || variation.icon }
+							variant="secondary"
+							icon={ variation.icon }
 							iconSize={ 48 }
 							onClick={ () => onSelect( variation ) }
 							className="block-editor-block-variation-picker__variation"
@@ -62,13 +61,7 @@ function BlockVariationPicker( {
 			{ /* eslint-enable jsx-a11y/no-redundant-roles */ }
 			{ allowSkip && (
 				<div className="block-editor-block-variation-picker__skip">
-					<Button
-						variant="link"
-						onClick={ () => onSelect() }
-						aria-label={ __(
-							'Skip selection and choose default block variation.'
-						) }
-					>
+					<Button variant="link" onClick={ () => onSelect() }>
 						{ __( 'Skip' ) }
 					</Button>
 				</div>
diff --git a/packages/block-library/src/group/editor.scss b/packages/block-library/src/group/editor.scss
index 13f0ddf1798a2..2e08593af3fd0 100644
--- a/packages/block-library/src/group/editor.scss
+++ b/packages/block-library/src/group/editor.scss
@@ -54,17 +54,48 @@
 }
 
 .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-bottom: $grid-unit-20;
+	}
 	.components-placeholder__instructions {
 		text-align: center;
 	}
-	.block-editor-block-variation-picker__variations {
-		justify-content: center;
-	}
-	.block-editor-block-variation-picker__variations svg {
+	.wp-block-group-placeholder__variations svg {
 		fill: $gray-400 !important;
 	}
-	.block-editor-block-variation-picker__variations > li {
-		margin: 0 10px;
+	.wp-block-group-placeholder__variations svg:hover {
+		fill: $gray-600 !important;
+	}
+	.wp-block-group-placeholder__variations > li {
+		margin: 0 $grid-unit-20;
 		width: auto;
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+	}
+	.wp-block-group-placeholder__variations li > button {
+		margin: 0 0 $grid-unit-20 0;
+		height: auto;
+	}
+	.is-small,
+	.is-medium {
+		.wp-block-group-placeholder__variations,
+		.wp-block-group-placeholder__variations li > button,
+		.wp-block-group-placeholder__variations > li {
+			margin: 0;
+		}
+		.wp-block-group-placeholder__variations svg {
+			width: 48px;
+		}
+		.wp-block-group-placeholder__variations li > button {
+			height: inherit;
+		}
 	}
 }
diff --git a/packages/block-library/src/group/placeholder.js b/packages/block-library/src/group/placeholder.js
index 6a056adb2484d..fa14e794ccef3 100644
--- a/packages/block-library/src/group/placeholder.js
+++ b/packages/block-library/src/group/placeholder.js
@@ -5,12 +5,11 @@ import { useSelect, useDispatch } from '@wordpress/data';
 import { useCallback } from '@wordpress/element';
 import {
 	useBlockProps,
-	__experimentalBlockVariationPicker,
 	store as blockEditorStore,
 } from '@wordpress/block-editor';
 import { __ } from '@wordpress/i18n';
 import { store as blocksStore } from '@wordpress/blocks';
-import { Path, SVG } from '@wordpress/components';
+import { Path, SVG, Button, Placeholder } from '@wordpress/components';
 
 const getGroupPlaceholderIcons = ( name = 'group' ) => {
 	const icons = {
@@ -105,31 +104,54 @@ function GroupPlaceHolder( { clientId, name, setAttributes } ) {
 		( newClientId ) => selectBlock( newClientId, -1 ),
 		[ selectBlock ]
 	);
+	const selectVariation = ( nextVariation = defaultVariation ) => {
+		/*
+				Remove layout.isDefault if present.
+				`isDefault` exists to identify blocks that have been inserted, programmatically or otherwise, with no changes.
+				When a user selects a layout `isDefault` should not appear in the block's attributes.
+			 */
+		const { isDefault, ...rest } = nextVariation.attributes?.layout;
+		const newAttributes = {
+			...nextVariation.attributes,
+			layout: rest,
+		};
+		setAttributes( newAttributes );
+		updateSelection( clientId );
+	};
 	return (
 		<div { ...blockProps }>
-			<__experimentalBlockVariationPicker
+			<Placeholder
 				icon={ blockType?.icon?.src }
 				label={ blockType?.title }
-				variations={ variations }
-				onSelect={ ( nextVariation = defaultVariation ) => {
-					/*
-						Remove layout.isDefault if present.
-						`isDefault` exists to identify blocks that have been inserted, programmatically or otherwise, with no changes.
-						When a user selects a layout `isDefault` should not appear in the block's attributes.
-					 */
-					const { isDefault, ...rest } =
-						nextVariation.attributes?.layout;
-					const newAttributes = {
-						...nextVariation.attributes,
-						layout: rest,
-					};
-					setAttributes( newAttributes );
-					updateSelection( clientId );
-				} }
 				instructions={ __( 'Group blocks together. Select a layout:' ) }
-				allowSkip={ false }
-				buttonType="tertiary"
-			/>
+			>
+				{ /*
+				 * Taken from BlockVariationPicker component.
+				 * Disable reason: The `list` ARIA role is redundant but
+				 * Safari+VoiceOver won't announce the list otherwise.
+				 */
+				/* eslint-disable jsx-a11y/no-redundant-roles */ }
+				<ul
+					role="list"
+					className="wp-block-group-placeholder__variations"
+					aria-label={ __( 'Block variations' ) }
+				>
+					{ variations.map( ( variation ) => (
+						<li key={ variation.name }>
+							<Button
+								variant="tertiary"
+								icon={
+									variation.placeHolderIcon || variation.icon
+								}
+								iconSize={ 64 }
+								onClick={ () => selectVariation( variation ) }
+							/>
+							<span role="presentation">{ variation.title }</span>
+						</li>
+					) ) }
+				</ul>
+				{ /* eslint-enable jsx-a11y/no-redundant-roles */ }
+			</Placeholder>
 		</div>
 	);
 }

From 87aa63ee0bec043ba417070457088de025c3a94c Mon Sep 17 00:00:00 2001
From: ramonjd <ramonjd@gmail.com>
Date: Tue, 25 Oct 2022 14:28:39 +1100
Subject: [PATCH 16/24] Add missing button label. Add class to button. Fix
 outline heights for button.

---
 packages/block-library/src/group/editor.scss    | 10 +++++-----
 packages/block-library/src/group/placeholder.js |  4 ++++
 2 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/packages/block-library/src/group/editor.scss b/packages/block-library/src/group/editor.scss
index 2e08593af3fd0..3a39c1f7653be 100644
--- a/packages/block-library/src/group/editor.scss
+++ b/packages/block-library/src/group/editor.scss
@@ -80,22 +80,22 @@
 		flex-direction: column;
 		align-items: center;
 	}
-	.wp-block-group-placeholder__variations li > button {
+	.wp-block-group-placeholder__variations li > .wp-block-group-placeholder__variation {
 		margin: 0 0 $grid-unit-20 0;
-		height: auto;
+		height: 68px;
 	}
 	.is-small,
 	.is-medium {
 		.wp-block-group-placeholder__variations,
-		.wp-block-group-placeholder__variations li > button,
+		.wp-block-group-placeholder__variations li > .wp-block-group-placeholder__variation,
 		.wp-block-group-placeholder__variations > li {
 			margin: 0;
 		}
 		.wp-block-group-placeholder__variations svg {
 			width: 48px;
 		}
-		.wp-block-group-placeholder__variations li > button {
-			height: inherit;
+		.wp-block-group-placeholder__variations li > .wp-block-group-placeholder__variation {
+			height: 52px;
 		}
 	}
 }
diff --git a/packages/block-library/src/group/placeholder.js b/packages/block-library/src/group/placeholder.js
index fa14e794ccef3..f3411d9136bad 100644
--- a/packages/block-library/src/group/placeholder.js
+++ b/packages/block-library/src/group/placeholder.js
@@ -145,6 +145,10 @@ function GroupPlaceHolder( { clientId, name, setAttributes } ) {
 								}
 								iconSize={ 64 }
 								onClick={ () => selectVariation( variation ) }
+								className="wp-block-group-placeholder__variation"
+								label={
+									variation.description || variation.title
+								}
 							/>
 							<span role="presentation">{ variation.title }</span>
 						</li>

From 5c6cfa6c0e75b03ae44e2fa52b058cc1cb59c710 Mon Sep 17 00:00:00 2001
From: ramonjd <ramonjd@gmail.com>
Date: Thu, 27 Oct 2022 11:53:50 +1100
Subject: [PATCH 17/24] Update native test fixture

Updating design/spacing of placeholder
Hardcoding custom icons
---
 packages/block-library/src/group/edit.js      | 13 ++++-
 packages/block-library/src/group/editor.scss  | 33 ++++++------
 .../block-library/src/group/placeholder.js    | 51 ++++++-------------
 .../test/__snapshots__/edit.native.js.snap    |  2 +-
 .../block-hierarchy-navigation.test.js        |  2 +-
 .../editor/various/inserting-blocks.test.js   |  4 +-
 .../various/keyboard-navigable-blocks.test.js |  2 +-
 .../various/multi-block-selection.test.js     |  2 +-
 test/e2e/specs/editor/blocks/group.spec.js    |  4 +-
 9 files changed, 51 insertions(+), 62 deletions(-)

diff --git a/packages/block-library/src/group/edit.js b/packages/block-library/src/group/edit.js
index 6a12750d44d98..2ee3764f68052 100644
--- a/packages/block-library/src/group/edit.js
+++ b/packages/block-library/src/group/edit.js
@@ -69,7 +69,13 @@ function GroupEditControls( { tagName, onSelectTagName } ) {
 	);
 }
 
-function GroupEdit( { attributes, name, setAttributes, clientId } ) {
+function GroupEdit( {
+	attributes,
+	name,
+	setAttributes,
+	clientId,
+	__unstableLayoutClassNames: layoutClassNames,
+} ) {
 	const { hasInnerBlocks, themeSupportsLayout } = useSelect(
 		( select ) => {
 			const { getBlock, getSettings } = select( blockEditorStore );
@@ -101,7 +107,9 @@ function GroupEdit( { attributes, name, setAttributes, clientId } ) {
 	const layoutSupportEnabled = themeSupportsLayout || type === 'flex';
 
 	// Hooks.
-	const blockProps = useBlockProps();
+	const blockProps = useBlockProps( {
+		className: ! layoutSupportEnabled ? layoutClassNames : null,
+	} );
 
 	const innerBlocksProps = useInnerBlocksProps(
 		layoutSupportEnabled
@@ -113,6 +121,7 @@ function GroupEdit( { attributes, name, setAttributes, clientId } ) {
 				? undefined
 				: InnerBlocks.ButtonBlockAppender,
 			__experimentalLayout: layoutSupportEnabled ? usedLayout : undefined,
+			__unstableDisableLayoutClassNames: ! layoutSupportEnabled,
 		}
 	);
 
diff --git a/packages/block-library/src/group/editor.scss b/packages/block-library/src/group/editor.scss
index 3a39c1f7653be..71c694dd347fa 100644
--- a/packages/block-library/src/group/editor.scss
+++ b/packages/block-library/src/group/editor.scss
@@ -62,40 +62,41 @@
 		flex-wrap: wrap;
 		width: 100%;
 		padding: 0;
-		margin-bottom: $grid-unit-20;
+		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: $gray-600 !important;
+		fill: var(--wp-admin-theme-color) !important;
 	}
 	.wp-block-group-placeholder__variations > li {
-		margin: 0 $grid-unit-20;
+		margin: 0 $grid-unit-15;
 		width: auto;
 		display: flex;
 		flex-direction: column;
 		align-items: center;
 	}
-	.wp-block-group-placeholder__variations li > .wp-block-group-placeholder__variation {
-		margin: 0 0 $grid-unit-20 0;
-		height: 68px;
+	.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,
-		.wp-block-group-placeholder__variations li > .wp-block-group-placeholder__variation,
-		.wp-block-group-placeholder__variations > li {
-			margin: 0;
-		}
-		.wp-block-group-placeholder__variations svg {
-			width: 48px;
-		}
-		.wp-block-group-placeholder__variations li > .wp-block-group-placeholder__variation {
-			height: 52px;
+		.wp-block-group-placeholder__variations li {
+			margin: $grid-unit-15;
 		}
 	}
 }
diff --git a/packages/block-library/src/group/placeholder.js b/packages/block-library/src/group/placeholder.js
index f3411d9136bad..db2698fd28a9b 100644
--- a/packages/block-library/src/group/placeholder.js
+++ b/packages/block-library/src/group/placeholder.js
@@ -67,30 +67,13 @@ const getGroupPlaceholderIcons = ( name = 'group' ) => {
  * @return {JSX.Element}                The placeholder.
  */
 function GroupPlaceHolder( { clientId, name, setAttributes } ) {
-	const { blockType, defaultVariation, variations } = useSelect(
+	const { defaultVariation, variations } = useSelect(
 		( select ) => {
-			const {
-				getBlockVariations,
-				getBlockType,
-				getDefaultBlockVariation,
-			} = select( blocksStore );
-
-			const variationsWithPlaceHolderIcons = (
-				getBlockVariations( name, 'block' ) || []
-			).map( ( groupVariation ) => {
-				const placeholderIcon = getGroupPlaceholderIcons(
-					groupVariation.name
-				);
-				if ( !! placeholderIcon ) {
-					groupVariation.placeHolderIcon = placeholderIcon;
-				}
-				return groupVariation;
-			} );
-
+			const { getBlockVariations, getDefaultBlockVariation } =
+				select( blocksStore );
 			return {
-				blockType: getBlockType( name ),
 				defaultVariation: getDefaultBlockVariation( name, 'block' ),
-				variations: variationsWithPlaceHolderIcons,
+				variations: getBlockVariations( name, 'block' ) || [],
 			};
 		},
 		[ name ]
@@ -106,10 +89,10 @@ function GroupPlaceHolder( { clientId, name, setAttributes } ) {
 	);
 	const selectVariation = ( nextVariation = defaultVariation ) => {
 		/*
-				Remove layout.isDefault if present.
-				`isDefault` exists to identify blocks that have been inserted, programmatically or otherwise, with no changes.
-				When a user selects a layout `isDefault` should not appear in the block's attributes.
-			 */
+		 * Remove layout.isDefault if present.
+		 * `isDefault` exists to identify blocks that have been inserted, programmatically or otherwise, with no changes.
+		 * When a user selects a layout `isDefault` should not appear in the block's attributes.
+		 */
 		const { isDefault, ...rest } = nextVariation.attributes?.layout;
 		const newAttributes = {
 			...nextVariation.attributes,
@@ -118,11 +101,10 @@ function GroupPlaceHolder( { clientId, name, setAttributes } ) {
 		setAttributes( newAttributes );
 		updateSelection( clientId );
 	};
+
 	return (
 		<div { ...blockProps }>
 			<Placeholder
-				icon={ blockType?.icon?.src }
-				label={ blockType?.title }
 				instructions={ __( 'Group blocks together. Select a layout:' ) }
 			>
 				{ /*
@@ -140,17 +122,14 @@ function GroupPlaceHolder( { clientId, name, setAttributes } ) {
 						<li key={ variation.name }>
 							<Button
 								variant="tertiary"
-								icon={
-									variation.placeHolderIcon || variation.icon
-								}
-								iconSize={ 64 }
+								icon={ getGroupPlaceholderIcons(
+									variation.name
+								) }
+								iconSize={ 44 }
 								onClick={ () => selectVariation( variation ) }
-								className="wp-block-group-placeholder__variation"
-								label={
-									variation.description || variation.title
-								}
+								className="wp-block-group-placeholder__variation-button"
+								label={ `${ variation.title }: ${ variation.description }` }
 							/>
-							<span role="presentation">{ variation.title }</span>
 						</li>
 					) ) }
 				</ul>
diff --git a/packages/block-library/src/group/test/__snapshots__/edit.native.js.snap b/packages/block-library/src/group/test/__snapshots__/edit.native.js.snap
index ee8488edf8864..8c0321a2a97f2 100644
--- a/packages/block-library/src/group/test/__snapshots__/edit.native.js.snap
+++ b/packages/block-library/src/group/test/__snapshots__/edit.native.js.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Group block inserts block and adds a Heading block as an inner block 1`] = `
-"<!-- wp:group {\\"layout\\":{\\"type\\":\\"constrained\\"}} -->
+"<!-- wp:group {\\"layout\\":{\\"type\\":\\"constrained\\",\\"isDefault\\":true}} -->
 <div class=\\"wp-block-group\\"><!-- wp:heading -->
 <h2></h2>
 <!-- /wp:heading --></div>
diff --git a/packages/e2e-tests/specs/editor/various/block-hierarchy-navigation.test.js b/packages/e2e-tests/specs/editor/various/block-hierarchy-navigation.test.js
index 5c12a169fb80c..6adcfa2d878bc 100644
--- a/packages/e2e-tests/specs/editor/various/block-hierarchy-navigation.test.js
+++ b/packages/e2e-tests/specs/editor/various/block-hierarchy-navigation.test.js
@@ -169,7 +169,7 @@ describe( 'Navigating the block hierarchy', () => {
 		await insertBlock( 'Group' );
 		// Select the default, selected Group layout from the variation picker.
 		await page.click(
-			'button[aria-label="Gather blocks in a container."]'
+			'button[aria-label="Group: Gather blocks in a container."]'
 		);
 		// Insert some random blocks.
 		// The last block shouldn't be a textual block.
diff --git a/packages/e2e-tests/specs/editor/various/inserting-blocks.test.js b/packages/e2e-tests/specs/editor/various/inserting-blocks.test.js
index 8a0e7ecc3f1f3..e1f6b0985e375 100644
--- a/packages/e2e-tests/specs/editor/various/inserting-blocks.test.js
+++ b/packages/e2e-tests/specs/editor/various/inserting-blocks.test.js
@@ -279,7 +279,7 @@ describe( 'Inserting blocks', () => {
 		await insertBlock( 'Group' );
 		// Select the default, selected Group layout from the variation picker.
 		await page.click(
-			'button[aria-label="Gather blocks in a container."]'
+			'button[aria-label="Group: Gather blocks in a container."]'
 		);
 		await insertBlock( 'Paragraph' );
 		await page.keyboard.type( 'Paragraph after group' );
@@ -301,7 +301,7 @@ describe( 'Inserting blocks', () => {
 		await insertBlock( 'Group' );
 		// Select the default, selected Group layout from the variation picker.
 		await page.click(
-			'button[aria-label="Gather blocks in a container."]'
+			'button[aria-label="Group: Gather blocks in a container."]'
 		);
 		await insertBlock( 'Paragraph' );
 		await page.keyboard.type( 'Text' );
diff --git a/packages/e2e-tests/specs/editor/various/keyboard-navigable-blocks.test.js b/packages/e2e-tests/specs/editor/various/keyboard-navigable-blocks.test.js
index 25408f73dcfc0..9a6a432d465a6 100644
--- a/packages/e2e-tests/specs/editor/various/keyboard-navigable-blocks.test.js
+++ b/packages/e2e-tests/specs/editor/various/keyboard-navigable-blocks.test.js
@@ -225,7 +225,7 @@ describe( 'Order of block keyboard navigation', () => {
 		await insertBlock( 'Group' );
 		// Select the default, selected Group layout from the variation picker.
 		await page.click(
-			'button[aria-label="Gather blocks in a container."]'
+			'button[aria-label="Group: Gather blocks in a container."]'
 		);
 		// If active label matches, that means focus did not change from group block wrapper.
 		await expect( await getActiveLabel() ).toBe( 'Block: Group' );
diff --git a/packages/e2e-tests/specs/editor/various/multi-block-selection.test.js b/packages/e2e-tests/specs/editor/various/multi-block-selection.test.js
index 3ec170bf0014a..3d0db13db8ad0 100644
--- a/packages/e2e-tests/specs/editor/various/multi-block-selection.test.js
+++ b/packages/e2e-tests/specs/editor/various/multi-block-selection.test.js
@@ -401,7 +401,7 @@ describe( 'Multi-block selection', () => {
 
 		// Select the default, selected Group layout from the variation picker.
 		await page.click(
-			'button[aria-label="Gather blocks in a container."]'
+			'button[aria-label="Group: Gather blocks in a container."]'
 		);
 
 		const groupAppender = await page.waitForSelector(
diff --git a/test/e2e/specs/editor/blocks/group.spec.js b/test/e2e/specs/editor/blocks/group.spec.js
index 4c25f48e1a5cd..aa93ace5038ba 100644
--- a/test/e2e/specs/editor/blocks/group.spec.js
+++ b/test/e2e/specs/editor/blocks/group.spec.js
@@ -30,7 +30,7 @@ test.describe( 'Group', () => {
 
 		// Select the default, selected Group layout from the variation picker.
 		await page.click(
-			'role=button[name="Gather blocks in a container."i]'
+			'role=button[name="Group: Gather blocks in a container."i]'
 		);
 
 		expect( await editor.getEditedPostContent() ).toMatchSnapshot();
@@ -49,7 +49,7 @@ test.describe( 'Group', () => {
 
 		// Select the default, selected Group layout from the variation picker.
 		await page.click(
-			'role=button[name="Gather blocks in a container."i]'
+			'role=button[name="Group: Gather blocks in a container."i]'
 		);
 
 		expect( await editor.getEditedPostContent() ).toMatchSnapshot();

From 896063591888d7071b8a2c3ef06d81fe86fac591 Mon Sep 17 00:00:00 2001
From: ramonjd <ramonjd@gmail.com>
Date: Wed, 2 Nov 2022 13:17:04 +1100
Subject: [PATCH 18/24] Removing the `isDefault` Group block attribute. It's a
 fragile solution to keep track of whether a variation has been selected since
 it adds a potentially useless attribute. In this iteration, we'll keep track
 of whether to show the placeholder via useState in the editor, and, more
 permanently, whether the block has innerblocks.

---
 packages/block-library/src/group/edit.js      | 27 ++++++++-----
 .../block-library/src/group/placeholder.js    | 39 ++++---------------
 .../test/__snapshots__/edit.native.js.snap    |  2 +-
 .../block-library/src/group/variations.js     |  2 +-
 4 files changed, 27 insertions(+), 43 deletions(-)

diff --git a/packages/block-library/src/group/edit.js b/packages/block-library/src/group/edit.js
index 2ee3764f68052..db41a01aba0ec 100644
--- a/packages/block-library/src/group/edit.js
+++ b/packages/block-library/src/group/edit.js
@@ -1,7 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { useSelect } from '@wordpress/data';
+import { useDispatch, useSelect } from '@wordpress/data';
 import {
 	InnerBlocks,
 	useBlockProps,
@@ -12,6 +12,7 @@ import {
 } from '@wordpress/block-editor';
 import { SelectControl } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
+import { useState, useCallback } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -89,14 +90,6 @@ function GroupEdit( {
 	);
 
 	const { tagName: TagName = 'div', templateLock, layout = {} } = attributes;
-	/*
-		Whether to show the variations placeholder.
-		`isDefault: true` only exists in the default layout attributes
-		in order to identify blocks that have been inserted, programmatically or otherwise, with no changes.
-		When a user selects a layout `isDefault` won't appear in the block's attributes.
-	 */
-	const { isDefault = false } = layout;
-	const showPlaceholder = isDefault && ! hasInnerBlocks;
 
 	// Layout settings.
 	const defaultLayout = useSetting( 'layout' ) || {};
@@ -105,6 +98,9 @@ function GroupEdit( {
 		: { ...defaultLayout, ...layout };
 	const { type = 'default' } = usedLayout;
 	const layoutSupportEnabled = themeSupportsLayout || type === 'flex';
+	const [ showPlaceholder, setShowPlaceholder ] = useState(
+		! hasInnerBlocks
+	);
 
 	// Hooks.
 	const blockProps = useBlockProps( {
@@ -125,6 +121,17 @@ 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 (
 		<>
 			<GroupEditControls
@@ -137,7 +144,7 @@ function GroupEdit( {
 				<GroupPlaceHolder
 					clientId={ clientId }
 					name={ name }
-					setAttributes={ setAttributes }
+					onSelect={ selectVariation }
 				/>
 			) }
 			{ layoutSupportEnabled && ! showPlaceholder && (
diff --git a/packages/block-library/src/group/placeholder.js b/packages/block-library/src/group/placeholder.js
index db2698fd28a9b..b80a4384164f0 100644
--- a/packages/block-library/src/group/placeholder.js
+++ b/packages/block-library/src/group/placeholder.js
@@ -1,12 +1,8 @@
 /**
  * WordPress dependencies
  */
-import { useSelect, useDispatch } from '@wordpress/data';
-import { useCallback } from '@wordpress/element';
-import {
-	useBlockProps,
-	store as blockEditorStore,
-} from '@wordpress/block-editor';
+import { useSelect } from '@wordpress/data';
+import { useBlockProps } from '@wordpress/block-editor';
 import { __ } from '@wordpress/i18n';
 import { store as blocksStore } from '@wordpress/blocks';
 import { Path, SVG, Button, Placeholder } from '@wordpress/components';
@@ -59,14 +55,13 @@ const getGroupPlaceholderIcons = ( name = 'group' ) => {
 /**
  * Display group variations if none is selected.
  *
- * @param {Object}   props               Component props.
- * @param {string}   props.clientId      The block's clientId.
- * @param {string}   props.name          The block's name.
- * @param {Function} props.setAttributes Function to set block's attributes.
+ * @param {Object}   props          Component props.
+ * @param {string}   props.name     The block's name.
+ * @param {Function} props.onSelect Function to set block's attributes.
  *
  * @return {JSX.Element}                The placeholder.
  */
-function GroupPlaceHolder( { clientId, name, setAttributes } ) {
+function GroupPlaceHolder( { name, onSelect } ) {
 	const { defaultVariation, variations } = useSelect(
 		( select ) => {
 			const { getBlockVariations, getDefaultBlockVariation } =
@@ -81,26 +76,8 @@ function GroupPlaceHolder( { clientId, name, setAttributes } ) {
 	const blockProps = useBlockProps( {
 		className: 'wp-block-group__placeholder',
 	} );
-	const { selectBlock } = useDispatch( blockEditorStore );
-	// Ensure that the inserted block is selected after a Group variation is selected.
-	const updateSelection = useCallback(
-		( newClientId ) => selectBlock( newClientId, -1 ),
-		[ selectBlock ]
-	);
-	const selectVariation = ( nextVariation = defaultVariation ) => {
-		/*
-		 * Remove layout.isDefault if present.
-		 * `isDefault` exists to identify blocks that have been inserted, programmatically or otherwise, with no changes.
-		 * When a user selects a layout `isDefault` should not appear in the block's attributes.
-		 */
-		const { isDefault, ...rest } = nextVariation.attributes?.layout;
-		const newAttributes = {
-			...nextVariation.attributes,
-			layout: rest,
-		};
-		setAttributes( newAttributes );
-		updateSelection( clientId );
-	};
+	const selectVariation = ( nextVariation = defaultVariation ) =>
+		onSelect( nextVariation.attributes );
 
 	return (
 		<div { ...blockProps }>
diff --git a/packages/block-library/src/group/test/__snapshots__/edit.native.js.snap b/packages/block-library/src/group/test/__snapshots__/edit.native.js.snap
index 8c0321a2a97f2..ee8488edf8864 100644
--- a/packages/block-library/src/group/test/__snapshots__/edit.native.js.snap
+++ b/packages/block-library/src/group/test/__snapshots__/edit.native.js.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Group block inserts block and adds a Heading block as an inner block 1`] = `
-"<!-- wp:group {\\"layout\\":{\\"type\\":\\"constrained\\",\\"isDefault\\":true}} -->
+"<!-- wp:group {\\"layout\\":{\\"type\\":\\"constrained\\"}} -->
 <div class=\\"wp-block-group\\"><!-- wp:heading -->
 <h2></h2>
 <!-- /wp:heading --></div>
diff --git a/packages/block-library/src/group/variations.js b/packages/block-library/src/group/variations.js
index cf08a79b2dae8..2b64d794dd4cc 100644
--- a/packages/block-library/src/group/variations.js
+++ b/packages/block-library/src/group/variations.js
@@ -9,7 +9,7 @@ const variations = [
 		name: 'group',
 		title: __( 'Group' ),
 		description: __( 'Gather blocks in a container.' ),
-		attributes: { layout: { type: 'constrained', isDefault: true } },
+		attributes: { layout: { type: 'constrained' } },
 		isDefault: true,
 		scope: [ 'block', 'inserter', 'transform' ],
 		isActive: ( blockAttributes ) =>

From af0be48bc2f4c62c501a67f2e507fff2a99eecda Mon Sep 17 00:00:00 2001
From: ramonjd <ramonjd@gmail.com>
Date: Wed, 2 Nov 2022 14:02:06 +1100
Subject: [PATCH 19/24] Ensure that we select the default group variation in
 the e2e tests.

---
 test/e2e/specs/editor/blocks/group.spec.js | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/test/e2e/specs/editor/blocks/group.spec.js b/test/e2e/specs/editor/blocks/group.spec.js
index aa93ace5038ba..4cf284a0cdf69 100644
--- a/test/e2e/specs/editor/blocks/group.spec.js
+++ b/test/e2e/specs/editor/blocks/group.spec.js
@@ -60,6 +60,9 @@ test.describe( 'Group', () => {
 		page,
 	} ) => {
 		await editor.insertBlock( { name: 'core/group' } );
+		await page.click(
+			'button[aria-label="Group: Gather blocks in a container."]'
+		);
 		await page.click( 'role=button[name="Add block"i]' );
 		await page.click(
 			'role=listbox[name="Blocks"i] >> role=option[name="Paragraph"i]'

From c84bf8e0642b18d272a7b02bad10859d20fbaf29 Mon Sep 17 00:00:00 2001
From: ramonjd <ramonjd@gmail.com>
Date: Thu, 3 Nov 2022 16:18:01 +1100
Subject: [PATCH 20/24] Creating custom hook for `showPlaceholder` Testing on
 the CI whether the changes to CPT are required :)

---
 packages/block-library/src/group/edit.js      | 13 ++--
 packages/block-library/src/group/editor.scss  |  8 +--
 .../block-library/src/group/placeholder.js    | 64 ++++++++++++++++++-
 packages/e2e-tests/plugins/cpt-locking.php    |  3 -
 .../__snapshots__/cpt-locking.test.js.snap    |  2 +-
 5 files changed, 72 insertions(+), 18 deletions(-)

diff --git a/packages/block-library/src/group/edit.js b/packages/block-library/src/group/edit.js
index db41a01aba0ec..ce40fbba9904b 100644
--- a/packages/block-library/src/group/edit.js
+++ b/packages/block-library/src/group/edit.js
@@ -12,12 +12,12 @@ import {
 } from '@wordpress/block-editor';
 import { SelectControl } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
-import { useState, useCallback } from '@wordpress/element';
+import { useCallback } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
-import GroupPlaceHolder from './placeholder';
+import GroupPlaceHolder, { useShouldShowPlaceHolder } from './placeholder';
 
 /**
  * Render inspector controls for the Group block.
@@ -98,15 +98,16 @@ function GroupEdit( {
 		: { ...defaultLayout, ...layout };
 	const { type = 'default' } = usedLayout;
 	const layoutSupportEnabled = themeSupportsLayout || type === 'flex';
-	const [ showPlaceholder, setShowPlaceholder ] = useState(
-		! hasInnerBlocks
-	);
 
 	// Hooks.
 	const blockProps = useBlockProps( {
 		className: ! layoutSupportEnabled ? layoutClassNames : null,
 	} );
-
+	const [ showPlaceholder, setShowPlaceholder ] = useShouldShowPlaceHolder( {
+		attributes,
+		usedLayout,
+		hasInnerBlocks,
+	} );
 	const innerBlocksProps = useInnerBlocksProps(
 		layoutSupportEnabled
 			? blockProps
diff --git a/packages/block-library/src/group/editor.scss b/packages/block-library/src/group/editor.scss
index 71c694dd347fa..ebc3253585547 100644
--- a/packages/block-library/src/group/editor.scss
+++ b/packages/block-library/src/group/editor.scss
@@ -75,7 +75,7 @@
 		fill: var(--wp-admin-theme-color) !important;
 	}
 	.wp-block-group-placeholder__variations > li {
-		margin: 0 $grid-unit-15;
+		margin: 0 $grid-unit-15 $grid-unit-15 $grid-unit-15;
 		width: auto;
 		display: flex;
 		flex-direction: column;
@@ -93,10 +93,4 @@
 		min-height: auto;
 		padding: $grid-unit-30;
 	}
-	.is-small,
-	.is-medium {
-		.wp-block-group-placeholder__variations li {
-			margin: $grid-unit-15;
-		}
-	}
 }
diff --git a/packages/block-library/src/group/placeholder.js b/packages/block-library/src/group/placeholder.js
index b80a4384164f0..a5cc1eeb13f84 100644
--- a/packages/block-library/src/group/placeholder.js
+++ b/packages/block-library/src/group/placeholder.js
@@ -6,7 +6,15 @@ import { useBlockProps } from '@wordpress/block-editor';
 import { __ } from '@wordpress/i18n';
 import { store as blocksStore } from '@wordpress/blocks';
 import { Path, SVG, Button, Placeholder } from '@wordpress/components';
+import { useState, useEffect } from '@wordpress/element';
 
+/**
+ * Returns a custom variation icon.
+ *
+ * @param {string} name The block variation name.
+ *
+ * @return {JSX.Element} The SVG element.
+ */
 const getGroupPlaceholderIcons = ( name = 'group' ) => {
 	const icons = {
 		group: (
@@ -52,6 +60,60 @@ const getGroupPlaceholderIcons = ( name = 'group' ) => {
 	return icons?.[ name ];
 };
 
+/**
+ * A custom hook to tell the Group block whether to show the variation placeholder.
+ *
+ * @param {Object}  props                  Arguments to pass to hook.
+ * @param {Object}  [props.attributes]     The block's attributes.
+ * @param {string}  [props.usedLayout]     The block's current layout type.
+ * @param {boolean} [props.hasInnerBlocks] Whether the block has inner blocks.
+ *
+ * @return {[boolean, Function]} A state value and setter function.
+ */
+export function useShouldShowPlaceHolder( {
+	attributes,
+	usedLayout,
+	hasInnerBlocks,
+} ) {
+	const { style, backgroundColor, textColor, fontSize } = attributes;
+	/*
+	 * Shows the placeholder when no known styles are set,
+	 * or when a non-default layout has been selected.
+	 * Should the Group block support more style presets in the
+	 * future, e.g., attributes.spacingSize, we can add them to the
+	 * condition.
+	 */
+	const [ showPlaceholder, setShowPlaceholder ] = useState(
+		! hasInnerBlocks &&
+			! backgroundColor &&
+			! fontSize &&
+			! textColor &&
+			! style &&
+			usedLayout.type !== 'flex'
+	);
+
+	useEffect( () => {
+		if (
+			!! hasInnerBlocks ||
+			!! backgroundColor ||
+			!! fontSize ||
+			!! style ||
+			usedLayout.type === 'flex'
+		) {
+			setShowPlaceholder( false );
+		}
+	}, [
+		backgroundColor,
+		fontSize,
+		textColor,
+		style,
+		usedLayout.type,
+		hasInnerBlocks,
+	] );
+
+	return [ showPlaceholder, setShowPlaceholder ];
+}
+
 /**
  * Display group variations if none is selected.
  *
@@ -77,7 +139,7 @@ function GroupPlaceHolder( { name, onSelect } ) {
 		className: 'wp-block-group__placeholder',
 	} );
 	const selectVariation = ( nextVariation = defaultVariation ) =>
-		onSelect( nextVariation.attributes );
+		onSelect( nextVariation );
 
 	return (
 		<div { ...blockProps }>
diff --git a/packages/e2e-tests/plugins/cpt-locking.php b/packages/e2e-tests/plugins/cpt-locking.php
index 0aa98f8d13d30..5ac97c9cfae52 100644
--- a/packages/e2e-tests/plugins/cpt-locking.php
+++ b/packages/e2e-tests/plugins/cpt-locking.php
@@ -69,9 +69,6 @@ function gutenberg_test_cpt_locking() {
 					'core/group',
 					array(
 						'templateLock' => false,
-						'layout'       => array(
-							'type' => 'constrained',
-						),
 					),
 					array(
 						array(
diff --git a/packages/e2e-tests/specs/editor/plugins/__snapshots__/cpt-locking.test.js.snap b/packages/e2e-tests/specs/editor/plugins/__snapshots__/cpt-locking.test.js.snap
index f12d66f3f2f33..b803af44ac965 100644
--- a/packages/e2e-tests/specs/editor/plugins/__snapshots__/cpt-locking.test.js.snap
+++ b/packages/e2e-tests/specs/editor/plugins/__snapshots__/cpt-locking.test.js.snap
@@ -41,7 +41,7 @@ exports[`cpt locking template_lock all should not error when deleting the cotent
 `;
 
 exports[`cpt locking template_lock all unlocked group should allow blocks to be moved 1`] = `
-"<!-- wp:group {\\"templateLock\\":false,\\"layout\\":{\\"type\\":\\"constrained\\"}} -->
+"<!-- wp:group {\\"templateLock\\":false} -->
 <div class=\\"wp-block-group\\"><!-- wp:paragraph {\\"placeholder\\":\\"Add a description\\"} -->
 <p>p1</p>
 <!-- /wp:paragraph -->

From 72d227c005cec4ee80dbdf8cb566815817eb800f Mon Sep 17 00:00:00 2001
From: ramonjd <ramonjd@gmail.com>
Date: Fri, 4 Nov 2022 10:49:58 +1100
Subject: [PATCH 21/24] Default selected layout type of Group variation is
 "constrained"

---
 packages/block-library/src/group/edit.js      |  2 +-
 packages/block-library/src/group/editor.scss  |  6 ++
 .../block-library/src/group/placeholder.js    | 36 +++------
 .../src/group/test/placeholder.js             | 78 +++++++++++++++++++
 ...t-using-the-button-appender-1-chromium.txt |  2 +-
 5 files changed, 97 insertions(+), 27 deletions(-)
 create mode 100644 packages/block-library/src/group/test/placeholder.js

diff --git a/packages/block-library/src/group/edit.js b/packages/block-library/src/group/edit.js
index ce40fbba9904b..7c324d76c587d 100644
--- a/packages/block-library/src/group/edit.js
+++ b/packages/block-library/src/group/edit.js
@@ -105,7 +105,7 @@ function GroupEdit( {
 	} );
 	const [ showPlaceholder, setShowPlaceholder ] = useShouldShowPlaceHolder( {
 		attributes,
-		usedLayout,
+		usedLayoutType: usedLayout?.type,
 		hasInnerBlocks,
 	} );
 	const innerBlocksProps = useInnerBlocksProps(
diff --git a/packages/block-library/src/group/editor.scss b/packages/block-library/src/group/editor.scss
index ebc3253585547..297658713f459 100644
--- a/packages/block-library/src/group/editor.scss
+++ b/packages/block-library/src/group/editor.scss
@@ -93,4 +93,10 @@
 		min-height: auto;
 		padding: $grid-unit-30;
 	}
+	.is-small,
+	.is-medium {
+		.wp-block-group-placeholder__variations > li {
+			margin: $grid-unit-15;
+		}
+	}
 }
diff --git a/packages/block-library/src/group/placeholder.js b/packages/block-library/src/group/placeholder.js
index a5cc1eeb13f84..5932df60a0b6a 100644
--- a/packages/block-library/src/group/placeholder.js
+++ b/packages/block-library/src/group/placeholder.js
@@ -6,7 +6,7 @@ import { useBlockProps } from '@wordpress/block-editor';
 import { __ } from '@wordpress/i18n';
 import { store as blocksStore } from '@wordpress/blocks';
 import { Path, SVG, Button, Placeholder } from '@wordpress/components';
-import { useState, useEffect } from '@wordpress/element';
+import { useState } from '@wordpress/element';
 
 /**
  * Returns a custom variation icon.
@@ -65,15 +65,20 @@ const getGroupPlaceholderIcons = ( name = 'group' ) => {
  *
  * @param {Object}  props                  Arguments to pass to hook.
  * @param {Object}  [props.attributes]     The block's attributes.
- * @param {string}  [props.usedLayout]     The block's current layout type.
+ * @param {string}  [props.usedLayoutType] The block's current layout type.
  * @param {boolean} [props.hasInnerBlocks] Whether the block has inner blocks.
  *
  * @return {[boolean, Function]} A state value and setter function.
  */
 export function useShouldShowPlaceHolder( {
-	attributes,
-	usedLayout,
-	hasInnerBlocks,
+	attributes = {
+		style: undefined,
+		backgroundColor: undefined,
+		textColor: undefined,
+		fontSize: undefined,
+	},
+	usedLayoutType = '',
+	hasInnerBlocks = false,
 } ) {
 	const { style, backgroundColor, textColor, fontSize } = attributes;
 	/*
@@ -89,28 +94,9 @@ export function useShouldShowPlaceHolder( {
 			! fontSize &&
 			! textColor &&
 			! style &&
-			usedLayout.type !== 'flex'
+			usedLayoutType !== 'flex'
 	);
 
-	useEffect( () => {
-		if (
-			!! hasInnerBlocks ||
-			!! backgroundColor ||
-			!! fontSize ||
-			!! style ||
-			usedLayout.type === 'flex'
-		) {
-			setShowPlaceholder( false );
-		}
-	}, [
-		backgroundColor,
-		fontSize,
-		textColor,
-		style,
-		usedLayout.type,
-		hasInnerBlocks,
-	] );
-
 	return [ showPlaceholder, setShowPlaceholder ];
 }
 
diff --git a/packages/block-library/src/group/test/placeholder.js b/packages/block-library/src/group/test/placeholder.js
new file mode 100644
index 0000000000000..d12104f39aca1
--- /dev/null
+++ b/packages/block-library/src/group/test/placeholder.js
@@ -0,0 +1,78 @@
+/**
+ * External dependencies
+ */
+import { render	 } from '@testing-library/react'
+
+/**
+ * Internal dependencies
+ */
+import { useShouldShowPlaceHolder } from '../placeholder';
+
+describe( 'useShouldShowPlaceHolder', () => {
+	function renderTestComponent( ...props ) {
+		let returnVal = [];
+		function TestComponent() {
+			returnVal = returnVal.concat(
+				useShouldShowPlaceHolder( ...props )
+			);
+			return null;
+		}
+		render( <TestComponent /> );
+		return returnVal;
+	}
+
+	test.each( [
+		{
+			attributes: {},
+			usedLayoutType: undefined,
+			hasInnerBlocks: undefined,
+			expectedValue: true,
+		},
+		{
+			attributes: { style: { something: 'something' } },
+			usedLayoutType: undefined,
+			hasInnerBlocks: undefined,
+			expectedValue: false,
+		},
+		{
+			attributes: { backgroundColor: 'red' },
+			usedLayoutType: undefined,
+			hasInnerBlocks: true,
+			expectedValue: false,
+		},
+		{
+			attributes: { fontSize: 'big' },
+			usedLayoutType: undefined,
+			hasInnerBlocks: true,
+			expectedValue: false,
+		},
+		{
+			attributes: { textColor: 'yellow' },
+			usedLayoutType: undefined,
+			hasInnerBlocks: true,
+			expectedValue: false,
+		},
+		{
+			attributes: undefined,
+			usedLayoutType: 'flex',
+			hasInnerBlocks: undefined,
+			expectedValue: false,
+		},
+		{
+			attributes: undefined,
+			usedLayoutType: undefined,
+			hasInnerBlocks: true,
+			expectedValue: false,
+		},
+	] )(
+		'should return $expectedValue for `showPlaceholder` when hasInnerBlocks is $hasInnerBlocks, usedLayoutType is $usedLayoutType and attributes is $attributes',
+		( { hasInnerBlocks, usedLayoutType, attributes, expectedValue } ) => {
+			const [ showPlaceholder ] = renderTestComponent( {
+				hasInnerBlocks,
+				usedLayoutType,
+				attributes,
+			} );
+			expect( showPlaceholder ).toBe( expectedValue );
+		}
+	);
+} );
diff --git a/test/e2e/specs/editor/blocks/__snapshots__/Group-can-have-other-blocks-appended-to-it-using-the-button-appender-1-chromium.txt b/test/e2e/specs/editor/blocks/__snapshots__/Group-can-have-other-blocks-appended-to-it-using-the-button-appender-1-chromium.txt
index 09839ec996353..64b6642785081 100644
--- a/test/e2e/specs/editor/blocks/__snapshots__/Group-can-have-other-blocks-appended-to-it-using-the-button-appender-1-chromium.txt
+++ b/test/e2e/specs/editor/blocks/__snapshots__/Group-can-have-other-blocks-appended-to-it-using-the-button-appender-1-chromium.txt
@@ -1,4 +1,4 @@
-<!-- wp:group -->
+<!-- wp:group {"layout":{"type":"constrained"}} -->
 <div class="wp-block-group"><!-- wp:paragraph -->
 <p>Group Block with a Paragraph</p>
 <!-- /wp:paragraph --></div>

From bdb8515a6f14c21c02ea18e7a7e7dbc584ab5e2c Mon Sep 17 00:00:00 2001
From: ramonjd <ramonjd@gmail.com>
Date: Fri, 4 Nov 2022 12:36:55 +1100
Subject: [PATCH 22/24] Am I pretty enough for you, linter?

---
 packages/block-library/src/group/test/placeholder.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/block-library/src/group/test/placeholder.js b/packages/block-library/src/group/test/placeholder.js
index d12104f39aca1..aebe938b70f5f 100644
--- a/packages/block-library/src/group/test/placeholder.js
+++ b/packages/block-library/src/group/test/placeholder.js
@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { render	 } from '@testing-library/react'
+import { render } from '@testing-library/react';
 
 /**
  * Internal dependencies

From 6d8bc19d60cedb5dfd6f08a834d3e1d4c93aab58 Mon Sep 17 00:00:00 2001
From: ramonjd <ramonjd@gmail.com>
Date: Fri, 4 Nov 2022 13:59:20 +1100
Subject: [PATCH 23/24] Reverted

---
 .../specs/editor/plugins/__snapshots__/cpt-locking.test.js.snap | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/e2e-tests/specs/editor/plugins/__snapshots__/cpt-locking.test.js.snap b/packages/e2e-tests/specs/editor/plugins/__snapshots__/cpt-locking.test.js.snap
index b803af44ac965..0acc31727beeb 100644
--- a/packages/e2e-tests/specs/editor/plugins/__snapshots__/cpt-locking.test.js.snap
+++ b/packages/e2e-tests/specs/editor/plugins/__snapshots__/cpt-locking.test.js.snap
@@ -55,7 +55,7 @@ exports[`cpt locking template_lock all unlocked group should allow blocks to be
 `;
 
 exports[`cpt locking template_lock all unlocked group should allow blocks to be removed 1`] = `
-"<!-- wp:group {\\"templateLock\\":false,\\"layout\\":{\\"type\\":\\"constrained\\"}} -->
+"<!-- wp:group {\\"templateLock\\":false} -->
 <div class=\\"wp-block-group\\"><!-- wp:quote -->
 <blockquote class=\\"wp-block-quote\\"><!-- wp:paragraph -->
 <p></p>

From 4f1fd81ece72efc7d4b07661ec973e37a5b95fee Mon Sep 17 00:00:00 2001
From: ramonjd <ramonjd@gmail.com>
Date: Wed, 9 Nov 2022 08:21:30 +1100
Subject: [PATCH 24/24] Reinstating `useEffect` so that we can react to changes
 in the style state.

---
 .../block-library/src/group/placeholder.js    | 22 ++++++++++++++++++-
 1 file changed, 21 insertions(+), 1 deletion(-)

diff --git a/packages/block-library/src/group/placeholder.js b/packages/block-library/src/group/placeholder.js
index 5932df60a0b6a..0f8fbc253c898 100644
--- a/packages/block-library/src/group/placeholder.js
+++ b/packages/block-library/src/group/placeholder.js
@@ -6,7 +6,7 @@ import { useBlockProps } from '@wordpress/block-editor';
 import { __ } from '@wordpress/i18n';
 import { store as blocksStore } from '@wordpress/blocks';
 import { Path, SVG, Button, Placeholder } from '@wordpress/components';
-import { useState } from '@wordpress/element';
+import { useState, useEffect } from '@wordpress/element';
 
 /**
  * Returns a custom variation icon.
@@ -97,6 +97,26 @@ export function useShouldShowPlaceHolder( {
 			usedLayoutType !== 'flex'
 	);
 
+	useEffect( () => {
+		if (
+			!! hasInnerBlocks ||
+			!! backgroundColor ||
+			!! fontSize ||
+			!! textColor ||
+			!! style ||
+			usedLayoutType === 'flex'
+		) {
+			setShowPlaceholder( false );
+		}
+	}, [
+		backgroundColor,
+		fontSize,
+		textColor,
+		style,
+		usedLayoutType,
+		hasInnerBlocks,
+	] );
+
 	return [ showPlaceholder, setShowPlaceholder ];
 }