Change group block approach

WordPress · Aug 4, 2022 · fe65860 · fe65860
1 parent 0dc40da
commit fe65860
Show file tree

Hide file tree

Showing 5 changed files with 24 additions and 15 deletions.
diff --git 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
@@ -15,6 +15,12 @@
 		"templateLock": {
 			"type": [ "string", "boolean" ],
 			"enum": [ "all", "insert", false ]
+		},
+		"layout": {
+			"type": "object",
+			"default": {
+				"type": "column"
+			}
 		}
 	},
 	"supports": {
@@ -64,11 +70,7 @@
 				"fontSize": true
 			}
 		},
-		"__experimentalLayout": {
-			"default": {
-				"type": "column"
-			}
-		}
+		"__experimentalLayout": true
 	},
 	"editorStyle": "wp-block-group-editor",
 	"style": "wp-block-group"

diff --git a/packages/block-library/src/group/deprecated.js b/packages/block-library/src/group/deprecated.js
@@ -109,12 +109,7 @@ const deprecated = [
 		migrate: ( attributes ) => {
 			const { layout = null } = attributes;
 			if ( ! layout ) {
-				return {
-					...attributes,
-					layout: {
-						type: 'default',
-					},
-				};
+				return attributes;
 			}
 			if ( layout.inherit || layout.contentSize ) {
 				return {

diff --git 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,
@@ -70,6 +71,16 @@ function GroupEdit( { attributes, setAttributes, clientId } ) {
 		}
 	);
 
+	const { __unstableMarkNextChangeAsNotPersistent } =
+		useDispatch( blockEditorStore );
+	const { type: layoutType = null } = layout;
+	useEffect( () => {
+		if ( layoutType ) {
+			__unstableMarkNextChangeAsNotPersistent();
+			setAttributes( { layout: { type: layoutType } } );
+		}
+	}, [ layoutType ] );
+
 	return (
 		<>
 			<InspectorControls __experimentalGroup="advanced">

diff --git a/packages/block-library/src/group/variations.js b/packages/block-library/src/group/variations.js
@@ -9,12 +9,13 @@ const variations = [
 		name: 'group',
 		title: __( 'Group' ),
 		description: __( 'Gather blocks in a layout container.' ),
-		attributes: { layout: { type: 'default' } },
+		attributes: { layout: { type: 'column' } },
 		scope: [ 'transform' ],
 		isActive: ( blockAttributes ) =>
 			! blockAttributes.layout ||
 			! blockAttributes.layout?.type ||
-			blockAttributes.layout?.type === 'default',
+			blockAttributes.layout?.type === 'default' ||
+			blockAttributes.layout?.type === 'column',
 		icon: group,
 	},
 	{