From 58fbfef965cb42824368e18dd74b461538cad651 Mon Sep 17 00:00:00 2001 From: tellthemachines Date: Fri, 16 Sep 2022 16:45:24 +1000 Subject: [PATCH] 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. --- docs/reference-guides/core-blocks.md | 2 +- .../components/convert-to-group-buttons/toolbar.js | 8 ++++++-- packages/block-library/src/group/block.json | 6 ------ packages/block-library/src/group/edit.js | 14 ++------------ packages/block-library/src/group/transforms.js | 1 + packages/block-library/src/group/variations.js | 3 ++- .../plugins/__snapshots__/cpt-locking.test.js.snap | 4 ++-- .../__snapshots__/block-grouping.test.js.snap | 2 +- ...-to-it-using-the-button-appender-1-chromium.txt | 2 +- .../fixtures/blocks/core__comments.json | 6 +++--- .../fixtures/blocks/core__comments.serialized.html | 2 +- .../blocks/core__comments__deprecated-1.json | 6 +++--- .../core__comments__deprecated-1.serialized.html | 2 +- .../blocks/core__group-layout-content-size.json | 6 +++--- ...core__group-layout-content-size.serialized.html | 2 +- ...layout-content-size__deprecated.serialized.html | 2 +- test/integration/fixtures/blocks/core__group.json | 6 +++--- .../fixtures/blocks/core__group.serialized.html | 2 +- .../fixtures/blocks/core__navigation.json | 2 +- .../fixtures/blocks/core__post-featured-image.json | 4 ++-- ...re__pullquote__custom-colors__deprecated-4.json | 2 +- .../blocks/core__pullquote__deprecated-4.json | 2 +- .../core__pullquote__deprecated-main-color.json | 2 +- 23 files changed, 39 insertions(+), 49 deletions(-) diff --git a/docs/reference-guides/core-blocks.md b/docs/reference-guides/core-blocks.md index 48de4f311f4b0d..87d57f14f08724 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:** 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 index 359af1ff367af1..38405fe3ee6abb 100644 --- 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 index 5e44488732703c..968f00cb1c5cbf 100644 --- 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 index 6f1b45462dd926..e9e318b6b10a7a 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, 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 ( <> diff --git a/packages/block-library/src/group/transforms.js b/packages/block-library/src/group/transforms.js index 4c838c1c3de79e..5649529c6501d2 100644 --- 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 index 862a77d364c740..777e8e76d9b4c3 100644 --- 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 index f12d66f3f2f335..0acc31727beeb5 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`] = ` -" +"

p1

@@ -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`] = ` -" +"

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 index ff3a356078f28e..12a32b4e61bd73 100644 --- 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`] = ` -" +"

Group Heading

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 64b66427850811..09839ec9963532 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 @@ - +

Group Block with a Paragraph

diff --git a/test/integration/fixtures/blocks/core__comments.json b/test/integration/fixtures/blocks/core__comments.json index 3eacd7349eda86..1ea7dcae007f65 100644 --- a/test/integration/fixtures/blocks/core__comments.json +++ b/test/integration/fixtures/blocks/core__comments.json @@ -74,9 +74,6 @@ "isValid": true, "attributes": { "tagName": "div", - "layout": { - "type": "flex" - }, "style": { "spacing": { "margin": { @@ -84,6 +81,9 @@ "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 index dc37e5ec933708..6a4e6c09df37da 100644 --- a/test/integration/fixtures/blocks/core__comments.serialized.html +++ b/test/integration/fixtures/blocks/core__comments.serialized.html @@ -10,7 +10,7 @@
- +
diff --git a/test/integration/fixtures/blocks/core__comments__deprecated-1.json b/test/integration/fixtures/blocks/core__comments__deprecated-1.json index abde5c6008aa8b..ff97b76a5f3838 100644 --- a/test/integration/fixtures/blocks/core__comments__deprecated-1.json +++ b/test/integration/fixtures/blocks/core__comments__deprecated-1.json @@ -74,9 +74,6 @@ "isValid": true, "attributes": { "tagName": "div", - "layout": { - "type": "flex" - }, "style": { "spacing": { "margin": { @@ -84,6 +81,9 @@ "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 index 9cf437715f0f72..33d5b11b2b9e04 100644 --- 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 @@
- +
diff --git a/test/integration/fixtures/blocks/core__group-layout-content-size.json b/test/integration/fixtures/blocks/core__group-layout-content-size.json index 8bc6a699a3b99c..ebc317f895e148 100644 --- 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 index d75a5324df28f3..a06c265518ee56 100644 --- 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 @@ - +

This is a group block.

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 index 11749e1e2cfac7..233c1d529a0b88 100644 --- 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 @@ - +

This is a group block.

diff --git a/test/integration/fixtures/blocks/core__group.json b/test/integration/fixtures/blocks/core__group.json index 3d2cc933d79574..7abd6688a7eb80 100644 --- 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 index 06deee13878095..a82c110ccd6119 100644 --- a/test/integration/fixtures/blocks/core__group.serialized.html +++ b/test/integration/fixtures/blocks/core__group.serialized.html @@ -1,4 +1,4 @@ - +

This is a group block.

diff --git a/test/integration/fixtures/blocks/core__navigation.json b/test/integration/fixtures/blocks/core__navigation.json index 97d4f8b0321c60..340cdf3fdbe599 100644 --- 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 index 29a7ccbe5c65ab..158007533a3f2b 100644 --- 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 index f66461afecbc1d..f8b0e72914ac47 100644 --- 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 index 5a9ebaed5c3568..67bcab0bc07fc1 100644 --- 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 index 3e1cf19a8d5dbb..60d94c9d1fbe06 100644 --- 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" },