Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Change Group block default variation in inserter. #44176

Merged
merged 6 commits into from
Sep 16, 2022
Merged

Change Group block default variation in inserter. #44176

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
d716fc7
Change Group block default variation in inserter.
tellthemachines Sep 15, 2022
44bd166
Remove unnecessary variation
tellthemachines Sep 15, 2022
08d7970
Add back check for default layout Groups
tellthemachines Sep 15, 2022
a061f74
Multi-block transforms should also have constrained layout.
tellthemachines Sep 15, 2022
5dab34a
Update failing snapshots.
tellthemachines Sep 15, 2022
f797208
Grouping paragraphs should add constrained layout.
tellthemachines Sep 16, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion docs/reference-guides/core-blocks.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down
8 changes: 6 additions & 2 deletions packages/block-editor/src/components/convert-to-group-buttons/toolbar.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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' },
};
Expand All @@ -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.
Expand Down
6 changes: 0 additions & 6 deletions packages/block-library/src/group/block.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,12 +15,6 @@
"templateLock": {
"type": [ "string", "boolean" ],
"enum": [ "all", "insert", "contentOnly", false ]
},
"layout": {
"type": "object",
"default": {
"type": "constrained"
}
}
},
"supports": {
Expand Down
14 changes: 2 additions & 12 deletions packages/block-library/src/group/edit.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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,
Expand Down Expand Up @@ -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">
Expand Down
1 change: 1 addition & 0 deletions packages/block-library/src/group/transforms.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,6 +41,7 @@ const transforms = {
'core/group',
{
align: widestAlignment,
layout: { type: 'constrained' },
},
groupInnerBlocks
);
Expand Down
3 changes: 2 additions & 1 deletion packages/block-library/src/group/variations.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 ||
Expand Down
4 changes: 2 additions & 2 deletions packages/e2e-tests/specs/editor/plugins/__snapshots__/cpt-locking.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 -->
Expand All @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion packages/e2e-tests/specs/editor/various/__snapshots__/block-grouping.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 -->
Expand Down
2 changes: 1 addition & 1 deletion ...ots__/Group-can-have-other-blocks-appended-to-it-using-the-button-appender-1-chromium.txt
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
Expand Down
6 changes: 3 additions & 3 deletions test/integration/fixtures/blocks/core__comments.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -74,16 +74,16 @@
"isValid": true,
"attributes": {
"tagName": "div",
"layout": {
"type": "flex"
},
"style": {
"spacing": {
"margin": {
"top": "0px",
"bottom": "0px"
}
}
},
"layout": {
"type": "flex"
}
},
"innerBlocks": [
Expand Down
2 changes: 1 addition & 1 deletion test/integration/fixtures/blocks/core__comments.serialized.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
6 changes: 3 additions & 3 deletions test/integration/fixtures/blocks/core__comments__deprecated-1.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -74,16 +74,16 @@
"isValid": true,
"attributes": {
"tagName": "div",
"layout": {
"type": "flex"
},
"style": {
"spacing": {
"margin": {
"top": "0px",
"bottom": "0px"
}
}
},
"layout": {
"type": "flex"
}
},
"innerBlocks": [
Expand Down
2 changes: 1 addition & 1 deletion test/integration/fixtures/blocks/core__comments__deprecated-1.serialized.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
6 changes: 3 additions & 3 deletions test/integration/fixtures/blocks/core__group-layout-content-size.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,11 +4,11 @@
"isValid": true,
"attributes": {
"tagName": "div",
"align": "full",
"backgroundColor": "secondary",
"layout": {
"type": "constrained"
},
"align": "full",
"backgroundColor": "secondary"
}
},
"innerBlocks": [
{
Expand Down
2 changes: 1 addition & 1 deletion test/integration/fixtures/blocks/core__group-layout-content-size.serialized.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 -->
Expand Down
2 changes: 1 addition & 1 deletion test/integration/fixtures/blocks/core__group-layout-content-size__deprecated.serialized.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 -->
Expand Down
6 changes: 3 additions & 3 deletions test/integration/fixtures/blocks/core__group.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,11 +4,11 @@
"isValid": true,
"attributes": {
"tagName": "div",
"align": "full",
"backgroundColor": "secondary",
"layout": {
"type": "default"
},
"align": "full",
"backgroundColor": "secondary"
}
},
"innerBlocks": [
{
Expand Down
2 changes: 1 addition & 1 deletion test/integration/fixtures/blocks/core__group.serialized.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 -->
Expand Down
2 changes: 1 addition & 1 deletion test/integration/fixtures/blocks/core__navigation.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,8 @@
"showSubmenuIcon": true,
"openSubmenusOnClick": false,
"overlayMenu": "mobile",
"hasIcon": true,
"icon": "handle",
"hasIcon": true,
"maxNestingLevel": 5
},
"innerBlocks": []
Expand Down
4 changes: 2 additions & 2 deletions test/integration/fixtures/blocks/core__post-featured-image.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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": []
}
Expand Down
2 changes: 1 addition & 1 deletion test/integration/fixtures/blocks/core__pullquote__custom-colors__deprecated-4.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
},
Expand Down
2 changes: 1 addition & 1 deletion test/integration/fixtures/blocks/core__pullquote__deprecated-4.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
},
Expand Down
2 changes: 1 addition & 1 deletion test/integration/fixtures/blocks/core__pullquote__deprecated-main-color.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
},
Expand Down