Change Group block default variation in inserter. (#44176)

* Change Group block default variation in inserter. * Remove unnecessary variation * Add back check for default layout Groups * Multi-block transforms should also have constrained layout. * Update failing snapshots. * Grouping paragraphs should add constrained layout.
WordPress · Sep 16, 2022 · 58fbfef · 58fbfef
1 parent 16b3a82
commit 58fbfef
Show file tree

Hide file tree

Showing 23 changed files with 39 additions and 49 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:** layout, tagName, templateLock
+-	**Attributes:** tagName, templateLock
 
 ## Heading
 

diff --git a/packages/block-editor/src/components/convert-to-group-buttons/toolbar.js b/packages/block-editor/src/components/convert-to-group-buttons/toolbar.js
@@ -14,7 +14,7 @@ import { useConvertToGroupButtonProps } from '../convert-to-group-buttons';
 import { store as blockEditorStore } from '../../store';
 
 const layouts = {
-	group: undefined,
+	group: { type: 'constrained' },
 	row: { type: 'flex', flexWrap: 'nowrap' },
 	stack: { type: 'flex', orientation: 'vertical' },
 };
@@ -40,12 +40,16 @@ function BlockGroupToolbar() {
 		[ clientIds, groupingBlockName ]
 	);
 
-	const onConvertToGroup = ( layout = 'group' ) => {
+	const onConvertToGroup = ( layout ) => {
 		const newBlocks = switchToBlockType(
 			blocksSelection,
 			groupingBlockName
 		);
 
+		if ( typeof layout !== 'string' ) {
+			layout = 'group';
+		}
+
 		if ( newBlocks && newBlocks.length > 0 ) {
 			// Because the block is not in the store yet we can't use
 			// updateBlockAttributes so need to manually update attributes.

diff --git a/packages/block-library/src/group/block.json b/packages/block-library/src/group/block.json
@@ -15,12 +15,6 @@
 		"templateLock": {
 			"type": [ "string", "boolean" ],
 			"enum": [ "all", "insert", "contentOnly", false ]
-		},
-		"layout": {
-			"type": "object",
-			"default": {
-				"type": "constrained"
-			}
 		}
 	},
 	"supports": {

diff --git a/packages/block-library/src/group/edit.js b/packages/block-library/src/group/edit.js
@@ -1,8 +1,8 @@
 /**
  * WordPress dependencies
  */
-import { useSelect, useDispatch } from '@wordpress/data';
-import { useEffect } from '@wordpress/element';
+import { useSelect } from '@wordpress/data';
+
 import {
 	InnerBlocks,
 	useBlockProps,
@@ -70,16 +70,6 @@ function GroupEdit( { attributes, setAttributes, clientId } ) {
 		}
 	);
 
-	const { __unstableMarkNextChangeAsNotPersistent } =
-		useDispatch( blockEditorStore );
-	const { type: layoutType = null } = layout;
-	useEffect( () => {
-		if ( layoutType ) {
-			__unstableMarkNextChangeAsNotPersistent();
-			setAttributes( { layout: { ...layout, type: layoutType } } );
-		}
-	}, [ layoutType ] );
-
 	return (
 		<>
 			<InspectorControls __experimentalGroup="advanced">

diff --git a/packages/block-library/src/group/transforms.js b/packages/block-library/src/group/transforms.js
@@ -41,6 +41,7 @@ const transforms = {
 					'core/group',
 					{
 						align: widestAlignment,
+						layout: { type: 'constrained' },
 					},
 					groupInnerBlocks
 				);

diff --git a/packages/block-library/src/group/variations.js b/packages/block-library/src/group/variations.js
@@ -10,7 +10,8 @@ const variations = [
 		title: __( 'Group' ),
 		description: __( 'Gather blocks in a container.' ),
 		attributes: { layout: { type: 'constrained' } },
-		scope: [ 'transform' ],
+		isDefault: true,
+		scope: [ 'inserter', 'transform' ],
 		isActive: ( blockAttributes ) =>
 			! blockAttributes.layout ||
 			! blockAttributes.layout?.type ||

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
@@ -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 -->
@@ -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>

diff --git a/packages/e2e-tests/specs/editor/various/__snapshots__/block-grouping.test.js.snap b/packages/e2e-tests/specs/editor/various/__snapshots__/block-grouping.test.js.snap
@@ -79,7 +79,7 @@ exports[`Block Grouping Group creation groups and ungroups multiple blocks of di
 `;
 
 exports[`Block Grouping Preserving selected blocks attributes preserves width alignment settings of selected blocks 1`] = `
-"<!-- wp:group {\\"layout\\":{\\"type\\":\\"constrained\\"},\\"align\\":\\"full\\"} -->
+"<!-- wp:group {\\"align\\":\\"full\\",\\"layout\\":{\\"type\\":\\"constrained\\"}} -->
 <div class=\\"wp-block-group alignfull\\"><!-- wp:heading -->
 <h2>Group Heading</h2>
 <!-- /wp:heading -->

diff --git a/...ots__/Group-can-have-other-blocks-appended-to-it-using-the-button-appender-1-chromium.txt b/...ots__/Group-can-have-other-blocks-appended-to-it-using-the-button-appender-1-chromium.txt
@@ -1,4 +1,4 @@
-<!-- wp:group {"layout":{"type":"constrained"}} -->
+<!-- wp:group -->
 <div class="wp-block-group"><!-- wp:paragraph -->
 <p>Group Block with a Paragraph</p>
 <!-- /wp:paragraph --></div>

diff --git a/test/integration/fixtures/blocks/core__comments.json b/test/integration/fixtures/blocks/core__comments.json
@@ -74,16 +74,16 @@
 										"isValid": true,
 										"attributes": {
 											"tagName": "div",
-											"layout": {
-												"type": "flex"
-											},
 											"style": {
 												"spacing": {
 													"margin": {
 														"top": "0px",
 														"bottom": "0px"
 													}
 												}
+											},
+											"layout": {
+												"type": "flex"
 											}
 										},
 										"innerBlocks": [

diff --git a/test/integration/fixtures/blocks/core__comments.serialized.html b/test/integration/fixtures/blocks/core__comments.serialized.html
@@ -10,7 +10,7 @@
 <!-- wp:column -->
 <div class="wp-block-column"><!-- wp:comment-author-name {"fontSize":"small"} /-->
 
-<!-- wp:group {"layout":{"type":"flex"},"style":{"spacing":{"margin":{"top":"0px","bottom":"0px"}}}} -->
+<!-- wp:group {"style":{"spacing":{"margin":{"top":"0px","bottom":"0px"}}},"layout":{"type":"flex"}} -->
 <div class="wp-block-group" style="margin-top:0px;margin-bottom:0px"><!-- wp:comment-date {"fontSize":"small"} /-->
 
 <!-- wp:comment-edit-link {"fontSize":"small"} /--></div>

diff --git a/test/integration/fixtures/blocks/core__comments__deprecated-1.json b/test/integration/fixtures/blocks/core__comments__deprecated-1.json
@@ -74,16 +74,16 @@
 										"isValid": true,
 										"attributes": {
 											"tagName": "div",
-											"layout": {
-												"type": "flex"
-											},
 											"style": {
 												"spacing": {
 													"margin": {
 														"top": "0px",
 														"bottom": "0px"
 													}
 												}
+											},
+											"layout": {
+												"type": "flex"
 											}
 										},
 										"innerBlocks": [

diff --git a/test/integration/fixtures/blocks/core__comments__deprecated-1.serialized.html b/test/integration/fixtures/blocks/core__comments__deprecated-1.serialized.html
@@ -10,7 +10,7 @@
 <!-- wp:column -->
 <div class="wp-block-column"><!-- wp:comment-author-name {"fontSize":"small"} /-->
 
-<!-- wp:group {"layout":{"type":"flex"},"style":{"spacing":{"margin":{"top":"0px","bottom":"0px"}}}} -->
+<!-- wp:group {"style":{"spacing":{"margin":{"top":"0px","bottom":"0px"}}},"layout":{"type":"flex"}} -->
 <div class="wp-block-group" style="margin-top:0px;margin-bottom:0px"><!-- wp:comment-date {"fontSize":"small"} /-->
 
 <!-- wp:comment-edit-link {"fontSize":"small"} /--></div>

diff --git a/test/integration/fixtures/blocks/core__group-layout-content-size.json b/test/integration/fixtures/blocks/core__group-layout-content-size.json
@@ -4,11 +4,11 @@
 		"isValid": true,
 		"attributes": {
 			"tagName": "div",
+			"align": "full",
+			"backgroundColor": "secondary",
 			"layout": {
 				"type": "constrained"
-			},
-			"align": "full",
-			"backgroundColor": "secondary"
+			}
 		},
 		"innerBlocks": [
 			{

diff --git a/test/integration/fixtures/blocks/core__group-layout-content-size.serialized.html b/test/integration/fixtures/blocks/core__group-layout-content-size.serialized.html
@@ -1,4 +1,4 @@
-<!-- wp:group {"layout":{"type":"constrained"},"align":"full","backgroundColor":"secondary"} -->
+<!-- wp:group {"align":"full","backgroundColor":"secondary","layout":{"type":"constrained"}} -->
 <div class="wp-block-group alignfull has-secondary-background-color has-background"><!-- wp:paragraph -->
 <p>This is a group block.</p>
 <!-- /wp:paragraph -->

diff --git a/test/integration/fixtures/blocks/core__group-layout-content-size__deprecated.serialized.html b/test/integration/fixtures/blocks/core__group-layout-content-size__deprecated.serialized.html
@@ -1,4 +1,4 @@
-<!-- wp:group {"layout":{"inherit":true,"type":"constrained"},"align":"full","backgroundColor":"secondary"} -->
+<!-- wp:group {"align":"full","backgroundColor":"secondary","layout":{"inherit":true,"type":"constrained"}} -->
 <div class="wp-block-group alignfull has-secondary-background-color has-background"><!-- wp:paragraph -->
 <p>This is a group block.</p>
 <!-- /wp:paragraph -->

diff --git a/test/integration/fixtures/blocks/core__group.json b/test/integration/fixtures/blocks/core__group.json
@@ -4,11 +4,11 @@
 		"isValid": true,
 		"attributes": {
 			"tagName": "div",
+			"align": "full",
+			"backgroundColor": "secondary",
 			"layout": {
 				"type": "default"
-			},
-			"align": "full",
-			"backgroundColor": "secondary"
+			}
 		},
 		"innerBlocks": [
 			{

diff --git a/test/integration/fixtures/blocks/core__group.serialized.html b/test/integration/fixtures/blocks/core__group.serialized.html
@@ -1,4 +1,4 @@
-<!-- wp:group {"layout":{"type":"default"},"align":"full","backgroundColor":"secondary"} -->
+<!-- wp:group {"align":"full","backgroundColor":"secondary","layout":{"type":"default"}} -->
 <div class="wp-block-group alignfull has-secondary-background-color has-background"><!-- wp:paragraph -->
 <p>This is a group block.</p>
 <!-- /wp:paragraph -->

diff --git a/test/integration/fixtures/blocks/core__navigation.json b/test/integration/fixtures/blocks/core__navigation.json
@@ -6,8 +6,8 @@
 			"showSubmenuIcon": true,
 			"openSubmenusOnClick": false,
 			"overlayMenu": "mobile",
-			"hasIcon": true,
 			"icon": "handle",
+			"hasIcon": true,
 			"maxNestingLevel": 5
 		},
 		"innerBlocks": []

diff --git a/test/integration/fixtures/blocks/core__post-featured-image.json b/test/integration/fixtures/blocks/core__post-featured-image.json
@@ -3,11 +3,11 @@
 		"name": "core/post-featured-image",
 		"isValid": true,
 		"attributes": {
-			"dimRatio": 0,
 			"isLink": false,
 			"scale": "cover",
 			"rel": "",
-			"linkTarget": "_self"
+			"linkTarget": "_self",
+			"dimRatio": 0
 		},
 		"innerBlocks": []
 	}

diff --git a/test/integration/fixtures/blocks/core__pullquote__custom-colors__deprecated-4.json b/test/integration/fixtures/blocks/core__pullquote__custom-colors__deprecated-4.json
@@ -3,13 +3,13 @@
 		"name": "core/pullquote",
 		"isValid": true,
 		"attributes": {
+			"value": "Pullquote custom color",
 			"className": "has-background is-style-default",
 			"style": {
 				"border": {
 					"color": "#2207d0"
 				}
 			},
-			"value": "Pullquote custom color",
 			"citation": "my citation",
 			"textColor": "subtle-background"
 		},

diff --git a/test/integration/fixtures/blocks/core__pullquote__deprecated-4.json b/test/integration/fixtures/blocks/core__pullquote__deprecated-4.json
@@ -3,10 +3,10 @@
 		"name": "core/pullquote",
 		"isValid": true,
 		"attributes": {
+			"value": "pullquote",
 			"className": "is-style-solid-color",
 			"backgroundColor": "black",
 			"textAlign": "left",
-			"value": "pullquote",
 			"citation": "before block supports",
 			"textColor": "white"
 		},

diff --git a/test/integration/fixtures/blocks/core__pullquote__deprecated-main-color.json b/test/integration/fixtures/blocks/core__pullquote__deprecated-main-color.json
@@ -3,13 +3,13 @@
 		"name": "core/pullquote",
 		"isValid": true,
 		"attributes": {
+			"value": "Pullquote custom color",
 			"className": "is-style-default",
 			"style": {
 				"border": {
 					"color": "#2207d0"
 				}
 			},
-			"value": "Pullquote custom color",
 			"citation": "my citation",
 			"textColor": "subtle-background"
 		},