Group: Update block example (#63114)

Co-authored-by: aaronrobertshaw <aaronrobertshaw@git.wordpress.org>
Co-authored-by: richtabor <richtabor@git.wordpress.org>
Co-authored-by: ramonjd <ramonopoly@git.wordpress.org>
Co-authored-by: bgardner <bgardner@git.wordpress.org>
Co-authored-by: annezazu <annezazu@git.wordpress.org>

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

@@ -22,56 +22,53 @@ export { metadata, name };
 export const settings = {
 	icon,
 	example: {
-		innerBlocks: [
-			{
-				name: 'core/paragraph',
-				attributes: {
-					customTextColor: '#cf2e2e',
-					fontSize: 'large',
-					content: __( 'One.' ),
-				},
+		attributes: {
+			layout: {
+				type: 'constrained',
+				justifyContent: 'center',
 			},
-			{
-				name: 'core/paragraph',
-				attributes: {
-					customTextColor: '#ff6900',
-					fontSize: 'large',
-					content: __( 'Two.' ),
+			style: {
+				spacing: {
+					padding: {
+						top: '4em',
+						right: '3em',
+						bottom: '4em',
+						left: '3em',
+					},
 				},
 			},
+		},
+		innerBlocks: [
 			{
-				name: 'core/paragraph',
+				name: 'core/heading',
 				attributes: {
-					customTextColor: '#fcb900',
-					fontSize: 'large',
-					content: __( 'Three.' ),
+					content: __( 'La Mancha' ),
+					textAlign: 'center',
 				},
 			},
 			{
 				name: 'core/paragraph',
 				attributes: {
-					customTextColor: '#00d084',
-					fontSize: 'large',
-					content: __( 'Four.' ),
+					align: 'center',
+					content: __(
+						'In a village of La Mancha, the name of which I have no desire to call to mind, there lived not long since one of those gentlemen that keep a lance in the lance-rack, an old buckler, a lean hack, and a greyhound for coursing.'
+					),
 				},
 			},
 			{
-				name: 'core/paragraph',
+				name: 'core/spacer',
 				attributes: {
-					customTextColor: '#0693e3',
-					fontSize: 'large',
-					content: __( 'Five.' ),
+					height: '10px',
 				},
 			},
 			{
-				name: 'core/paragraph',
+				name: 'core/button',
 				attributes: {
-					customTextColor: '#9b51e0',
-					fontSize: 'large',
-					content: __( 'Six.' ),
+					text: __( 'Read more' ),
 				},
 			},
 		],
+		viewportWidth: 600,
 	},
 	transforms,
 	edit,

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

@@ -4,6 +4,59 @@
 import { __, _x } from '@wordpress/i18n';
 import { group, row, stack, grid } from '@wordpress/icons';
 
+const example = {
+	innerBlocks: [
+		{
+			name: 'core/paragraph',
+			attributes: {
+				customTextColor: '#cf2e2e',
+				fontSize: 'large',
+				content: __( 'One.' ),
+			},
+		},
+		{
+			name: 'core/paragraph',
+			attributes: {
+				customTextColor: '#ff6900',
+				fontSize: 'large',
+				content: __( 'Two.' ),
+			},
+		},
+		{
+			name: 'core/paragraph',
+			attributes: {
+				customTextColor: '#fcb900',
+				fontSize: 'large',
+				content: __( 'Three.' ),
+			},
+		},
+		{
+			name: 'core/paragraph',
+			attributes: {
+				customTextColor: '#00d084',
+				fontSize: 'large',
+				content: __( 'Four.' ),
+			},
+		},
+		{
+			name: 'core/paragraph',
+			attributes: {
+				customTextColor: '#0693e3',
+				fontSize: 'large',
+				content: __( 'Five.' ),
+			},
+		},
+		{
+			name: 'core/paragraph',
+			attributes: {
+				customTextColor: '#9b51e0',
+				fontSize: 'large',
+				content: __( 'Six.' ),
+			},
+		},
+	],
+};
+
 const variations = [
 	{
 		name: 'group',
@@ -30,6 +83,7 @@ const variations = [
 			( ! blockAttributes.layout?.orientation ||
 				blockAttributes.layout?.orientation === 'horizontal' ),
 		icon: row,
+		example,
 	},
 	{
 		name: 'group-stack',
@@ -41,6 +95,7 @@ const variations = [
 			blockAttributes.layout?.type === 'flex' &&
 			blockAttributes.layout?.orientation === 'vertical',
 		icon: stack,
+		example,
 	},
 	{
 		name: 'group-grid',
@@ -51,6 +106,7 @@ const variations = [
 		isActive: ( blockAttributes ) =>
 			blockAttributes.layout?.type === 'grid',
 		icon: grid,
+		example,
 	},
 ];