From dd59a18c517f8111be1ba83b84f7711150cf51f2 Mon Sep 17 00:00:00 2001
From: tellthemachines <isabel@tellthemachines.com>
Date: Thu, 21 Jul 2022 15:57:34 +1000
Subject: [PATCH] Add content width to Group block with by default

---
 docs/reference-guides/core-blocks.md          |  2 +-
 packages/block-library/src/group/block.json   |  6 ++
 .../block-library/src/group/deprecated.js     | 74 +++++++++++++++++++
 packages/block-library/src/group/edit.js      | 13 +++-
 .../block-library/src/group/variations.js     |  3 +-
 5 files changed, 95 insertions(+), 3 deletions(-)

diff --git a/docs/reference-guides/core-blocks.md b/docs/reference-guides/core-blocks.md
index eb132d03c1d186..84f468a346b473 100644
--- a/docs/reference-guides/core-blocks.md
+++ b/docs/reference-guides/core-blocks.md
@@ -276,7 +276,7 @@ Gather blocks in a layout container. ([Source](https://github.com/WordPress/gute
 -	**Name:** core/group
 -	**Category:** design
 -	**Supports:** align (full, wide), anchor, ariaLabel, color (background, gradients, link, text), spacing (blockGap, margin, padding), typography (fontSize, lineHeight), ~~html~~
--	**Attributes:** tagName, templateLock
+-	**Attributes:** layout, tagName, templateLock
 
 ## Heading
 
diff --git a/packages/block-library/src/group/block.json b/packages/block-library/src/group/block.json
index 99cbbdf22b6d12..2d712168e1dfee 100644
--- a/packages/block-library/src/group/block.json
+++ b/packages/block-library/src/group/block.json
@@ -15,6 +15,12 @@
 		"templateLock": {
 			"type": [ "string", "boolean" ],
 			"enum": [ "all", "insert", false ]
+		},
+		"layout": {
+			"type": "object",
+			"default": {
+				"inherit": true
+			}
 		}
 	},
 	"supports": {
diff --git a/packages/block-library/src/group/deprecated.js b/packages/block-library/src/group/deprecated.js
index 337e498b0bdedd..3025c08d8f22ec 100644
--- a/packages/block-library/src/group/deprecated.js
+++ b/packages/block-library/src/group/deprecated.js
@@ -11,6 +11,7 @@ import {
 	InnerBlocks,
 	getColorClassName,
 	useBlockProps,
+	useInnerBlocksProps,
 } from '@wordpress/block-editor';
 
 const migrateAttributes = ( attributes ) => {
@@ -38,6 +39,79 @@ const migrateAttributes = ( attributes ) => {
 };
 
 const deprecated = [
+	// Version with no default content width.
+	{
+		attributes: {
+			tagName: {
+				type: 'string',
+				default: 'div',
+			},
+			templateLock: {
+				type: [ 'string', 'boolean' ],
+				enum: [ 'all', 'insert', false ],
+			},
+		},
+		supports: {
+			__experimentalOnEnter: true,
+			__experimentalSettings: true,
+			align: [ 'wide', 'full' ],
+			anchor: true,
+			ariaLabel: true,
+			html: false,
+			color: {
+				gradients: true,
+				link: true,
+				__experimentalDefaultControls: {
+					background: true,
+					text: true,
+				},
+			},
+			spacing: {
+				margin: [ 'top', 'bottom' ],
+				padding: true,
+				blockGap: true,
+				__experimentalDefaultControls: {
+					padding: true,
+					blockGap: true,
+				},
+			},
+			__experimentalBorder: {
+				color: true,
+				radius: true,
+				style: true,
+				width: true,
+				__experimentalDefaultControls: {
+					color: true,
+					radius: true,
+					style: true,
+					width: true,
+				},
+			},
+			typography: {
+				fontSize: true,
+				lineHeight: true,
+				__experimentalFontStyle: true,
+				__experimentalFontWeight: true,
+				__experimentalLetterSpacing: true,
+				__experimentalTextTransform: true,
+				__experimentalDefaultControls: {
+					fontSize: true,
+				},
+			},
+			__experimentalLayout: true,
+		},
+		isEligible: ( { layout } ) => ! layout,
+		migrate: ( attributes ) => {
+			if ( ! attributes.layout ) {
+				return attributes;
+			}
+		},
+		save( { attributes: { tagName: Tag } } ) {
+			return (
+				<Tag { ...useInnerBlocksProps.save( useBlockProps.save() ) } />
+			);
+		},
+	},
 	// Version of the block with the double div.
 	{
 		attributes: {
diff --git a/packages/block-library/src/group/edit.js b/packages/block-library/src/group/edit.js
index e45613bbba25d3..c3689d66ed517b 100644
--- a/packages/block-library/src/group/edit.js
+++ b/packages/block-library/src/group/edit.js
@@ -1,7 +1,8 @@
 /**
  * WordPress dependencies
  */
-import { useSelect } from '@wordpress/data';
+import { useSelect, useDispatch } from '@wordpress/data';
+import { useEffect } from '@wordpress/element';
 import {
 	InnerBlocks,
 	useBlockProps,
@@ -67,6 +68,16 @@ function GroupEdit( { attributes, setAttributes, clientId } ) {
 		}
 	);
 
+	const { __unstableMarkNextChangeAsNotPersistent } =
+		useDispatch( blockEditorStore );
+	const { inherit = false } = layout;
+	useEffect( () => {
+		if ( inherit ) {
+			__unstableMarkNextChangeAsNotPersistent();
+			setAttributes( { layout: { inherit } } );
+		}
+	}, [ inherit ] );
+
 	return (
 		<>
 			<InspectorControls __experimentalGroup="advanced">
diff --git a/packages/block-library/src/group/variations.js b/packages/block-library/src/group/variations.js
index 7ed4477cec0672..a1f319a09271a4 100644
--- a/packages/block-library/src/group/variations.js
+++ b/packages/block-library/src/group/variations.js
@@ -9,11 +9,12 @@ const variations = [
 		name: 'group',
 		title: __( 'Group' ),
 		description: __( 'Gather blocks in a layout container.' ),
-		attributes: { layout: { type: 'default' } },
+		attributes: { layout: { inherit: true } },
 		scope: [ 'transform' ],
 		isActive: ( blockAttributes ) =>
 			! blockAttributes.layout ||
 			! blockAttributes.layout?.type ||
+			blockAttributes.layout?.inherit === true ||
 			blockAttributes.layout?.type === 'default',
 		icon: group,
 	},