diff --git a/packages/block-library/src/group/deprecated.js b/packages/block-library/src/group/deprecated.js
new file mode 100644
index 0000000000000..ced2cfca58b99
--- /dev/null
+++ b/packages/block-library/src/group/deprecated.js
@@ -0,0 +1,48 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
+/**
+ * WordPress dependencies
+ */
+import { InnerBlocks, getColorClassName } from '@wordpress/block-editor';
+
+const deprecated = [
+ // v1 of group block. Deprecated to add an inner-container div around `InnerBlocks.Content`.
+ {
+ attributes: {
+ backgroundColor: {
+ type: 'string',
+ },
+ customBackgroundColor: {
+ type: 'string',
+ },
+ },
+ supports: {
+ align: [ 'wide', 'full' ],
+ anchor: true,
+ html: false,
+ },
+ save( { attributes } ) {
+ const { backgroundColor, customBackgroundColor } = attributes;
+
+ const backgroundClass = getColorClassName( 'background-color', backgroundColor );
+ const className = classnames( backgroundClass, {
+ 'has-background': backgroundColor || customBackgroundColor,
+ } );
+
+ const styles = {
+ backgroundColor: backgroundClass ? undefined : customBackgroundColor,
+ };
+
+ return (
+
+
+
+ );
+ },
+ },
+];
+
+export default deprecated;
diff --git a/packages/block-library/src/group/edit.js b/packages/block-library/src/group/edit.js
index f6756a7750c22..1e7445a20cc95 100644
--- a/packages/block-library/src/group/edit.js
+++ b/packages/block-library/src/group/edit.js
@@ -45,9 +45,11 @@ function GroupEdit( {
/>
>
);
diff --git a/packages/block-library/src/group/editor.scss b/packages/block-library/src/group/editor.scss
index d3b83213bff0a..68bfde8888604 100644
--- a/packages/block-library/src/group/editor.scss
+++ b/packages/block-library/src/group/editor.scss
@@ -11,14 +11,14 @@
}
// Only applied when background is added to cancel out padding
- > .editor-block-list__block-edit > div > .wp-block-group.has-background > .editor-inner-blocks {
+ > .editor-block-list__block-edit > div > .wp-block-group.has-background > .wp-block-group__inner-container > .editor-inner-blocks {
margin-top: -#{$block-padding*2 + $block-spacing};
margin-bottom: -#{$block-padding*2 + $block-spacing};
}
// Full Width Blocks
// specificity required to only target immediate child Blocks of a Group
- > .editor-block-list__block-edit > div > .wp-block-group > .editor-inner-blocks > .editor-block-list__layout > .wp-block[data-align="full"] {
+ > .editor-block-list__block-edit > div > .wp-block-group > .wp-block-group__inner-container > .editor-inner-blocks > .editor-block-list__layout > .wp-block[data-align="full"] {
margin-left: auto;
margin-right: auto;
padding-left: $block-padding*2;
@@ -31,7 +31,7 @@
}
// Full Width Blocks with a background (ie: has padding)
- > .editor-block-list__block-edit > div > .wp-block-group.has-background > .editor-inner-blocks > .editor-block-list__layout > .wp-block[data-align="full"] {
+ > .editor-block-list__block-edit > div > .wp-block-group.has-background > .wp-block-group__inner-container > .editor-inner-blocks > .editor-block-list__layout > .wp-block[data-align="full"] {
// note: using position `left` causes hoz scrollbars so
// we opt to use margin instead
// the 30px matches the hoz padding applied in `theme.scss`
@@ -51,7 +51,7 @@
.wp-block[data-type="core/group"][data-align="full"] {
// First tier of InnerBlocks must act like the container of the standard canvas
- > .editor-block-list__block-edit > div > .wp-block-group > .editor-inner-blocks {
+ > .editor-block-list__block-edit > div > .wp-block-group > .wp-block-group__inner-container > .editor-inner-blocks {
margin-left: auto;
margin-right: auto;
padding-left: 0;
@@ -65,7 +65,7 @@
// Full Width Blocks
// specificity required to only target immediate child Blocks of Group
- > .editor-block-list__block-edit > div > .wp-block-group > .editor-inner-blocks > .editor-block-list__layout > .wp-block[data-align="full"] {
+ > .editor-block-list__block-edit > div > .wp-block-group > .wp-block-group__inner-container > .editor-inner-blocks > .editor-block-list__layout > .wp-block[data-align="full"] {
padding-right: 0;
padding-left: 0;
left: 0;
@@ -81,7 +81,7 @@
// Full Width Blocks with a background (ie: has padding)
// note: also duplicated above for all Group widths
- > .editor-block-list__block-edit > div > .wp-block-group.has-background > .editor-inner-blocks > .editor-block-list__layout > .wp-block[data-align="full"] {
+ > .editor-block-list__block-edit > div > .wp-block-group.has-background > .wp-block-group__inner-container > .editor-inner-blocks > .editor-block-list__layout > .wp-block[data-align="full"] {
width: calc(100% + 60px);
}
}
diff --git a/packages/block-library/src/group/index.js b/packages/block-library/src/group/index.js
index 844ddd8c82160..530dc210865ba 100644
--- a/packages/block-library/src/group/index.js
+++ b/packages/block-library/src/group/index.js
@@ -7,6 +7,7 @@ import { createBlock } from '@wordpress/blocks';
/**
* Internal dependencies
*/
+import deprecated from './deprecated';
import edit from './edit';
import icon from './icon';
import metadata from './block.json';
@@ -67,4 +68,5 @@ export const settings = {
edit,
save,
+ deprecated,
};
diff --git a/packages/block-library/src/group/save.js b/packages/block-library/src/group/save.js
index a0ee8246c69a8..c2c56221766b1 100644
--- a/packages/block-library/src/group/save.js
+++ b/packages/block-library/src/group/save.js
@@ -22,7 +22,9 @@ export default function save( { attributes } ) {
return (
);
}
diff --git a/packages/e2e-tests/fixtures/blocks/core__group.html b/packages/e2e-tests/fixtures/blocks/core__group.html
index 2c8055434700d..09fd95cfc9d5a 100644
--- a/packages/e2e-tests/fixtures/blocks/core__group.html
+++ b/packages/e2e-tests/fixtures/blocks/core__group.html
@@ -1,10 +1,12 @@
-
-
This is a group block.
-
+
+
+
This is a group block.
+
-
-
Group block content.
-
+
+
Group block content.
+
+
diff --git a/packages/e2e-tests/fixtures/blocks/core__group.json b/packages/e2e-tests/fixtures/blocks/core__group.json
index ec8f4ca9ad64d..71d94f926dccc 100644
--- a/packages/e2e-tests/fixtures/blocks/core__group.json
+++ b/packages/e2e-tests/fixtures/blocks/core__group.json
@@ -31,6 +31,6 @@
"originalContent": "Group block content.
"
}
],
- "originalContent": "\n\t\n\n\t
"
+ "originalContent": ""
}
]
diff --git a/packages/e2e-tests/fixtures/blocks/core__group.parsed.json b/packages/e2e-tests/fixtures/blocks/core__group.parsed.json
index 06718c82d85f1..bf2b50feb5fd1 100644
--- a/packages/e2e-tests/fixtures/blocks/core__group.parsed.json
+++ b/packages/e2e-tests/fixtures/blocks/core__group.parsed.json
@@ -10,28 +10,28 @@
"blockName": "core/paragraph",
"attrs": {},
"innerBlocks": [],
- "innerHTML": "\n\tThis is a group block.
\n\t",
+ "innerHTML": "\n\t\tThis is a group block.
\n\t\t",
"innerContent": [
- "\n\tThis is a group block.
\n\t"
+ "\n\t\tThis is a group block.
\n\t\t"
]
},
{
"blockName": "core/paragraph",
"attrs": {},
"innerBlocks": [],
- "innerHTML": "\n\tGroup block content.
\n\t",
+ "innerHTML": "\n\t\tGroup block content.
\n\t\t",
"innerContent": [
- "\n\tGroup block content.
\n\t"
+ "\n\t\tGroup block content.
\n\t\t"
]
}
],
- "innerHTML": "\n\n\t\n\n\t
\n",
+ "innerHTML": "\n\n",
"innerContent": [
- "\n\n\t",
+ "\n
\n\t
\n\t\t",
null,
- "\n\n\t",
+ "\n\n\t\t",
null,
- "
\n"
+ "
\n\t
\n"
]
},
{
diff --git a/packages/e2e-tests/fixtures/blocks/core__group.serialized.html b/packages/e2e-tests/fixtures/blocks/core__group.serialized.html
index bcc69c0e89009..2c398b530dedc 100644
--- a/packages/e2e-tests/fixtures/blocks/core__group.serialized.html
+++ b/packages/e2e-tests/fixtures/blocks/core__group.serialized.html
@@ -1,9 +1,9 @@
-
+
This is a group block.
Group block content.
-
+
diff --git a/packages/e2e-tests/fixtures/blocks/core__group__deprecated.html b/packages/e2e-tests/fixtures/blocks/core__group__deprecated.html
new file mode 100644
index 0000000000000..e57b273d388e5
--- /dev/null
+++ b/packages/e2e-tests/fixtures/blocks/core__group__deprecated.html
@@ -0,0 +1,7 @@
+
+
+
diff --git a/packages/e2e-tests/fixtures/blocks/core__group__deprecated.json b/packages/e2e-tests/fixtures/blocks/core__group__deprecated.json
new file mode 100644
index 0000000000000..89116067ef6f6
--- /dev/null
+++ b/packages/e2e-tests/fixtures/blocks/core__group__deprecated.json
@@ -0,0 +1,25 @@
+[
+ {
+ "clientId": "_clientId_0",
+ "name": "core/group",
+ "isValid": true,
+ "attributes": {
+ "backgroundColor": "lighter-blue",
+ "className": "alignfull"
+ },
+ "innerBlocks": [
+ {
+ "clientId": "_clientId_0",
+ "name": "core/paragraph",
+ "isValid": true,
+ "attributes": {
+ "content": "test",
+ "dropCap": false
+ },
+ "innerBlocks": [],
+ "originalContent": "test
"
+ }
+ ],
+ "originalContent": "\n\t\n
"
+ }
+]
diff --git a/packages/e2e-tests/fixtures/blocks/core__group__deprecated.parsed.json b/packages/e2e-tests/fixtures/blocks/core__group__deprecated.parsed.json
new file mode 100644
index 0000000000000..38723b5e2457a
--- /dev/null
+++ b/packages/e2e-tests/fixtures/blocks/core__group__deprecated.parsed.json
@@ -0,0 +1,35 @@
+[
+ {
+ "blockName": "core/group",
+ "attrs": {
+ "backgroundColor": "lighter-blue",
+ "align": "full"
+ },
+ "innerBlocks": [
+ {
+ "blockName": "core/paragraph",
+ "attrs": {},
+ "innerBlocks": [],
+ "innerHTML": "\n\ttest
\n\t",
+ "innerContent": [
+ "\n\ttest
\n\t"
+ ]
+ }
+ ],
+ "innerHTML": "\n\n\t\n
\n",
+ "innerContent": [
+ "\n\n\t",
+ null,
+ "\n
\n"
+ ]
+ },
+ {
+ "blockName": null,
+ "attrs": {},
+ "innerBlocks": [],
+ "innerHTML": "\n",
+ "innerContent": [
+ "\n"
+ ]
+ }
+]
diff --git a/packages/e2e-tests/fixtures/blocks/core__group__deprecated.serialized.html b/packages/e2e-tests/fixtures/blocks/core__group__deprecated.serialized.html
new file mode 100644
index 0000000000000..58aca8fd2e350
--- /dev/null
+++ b/packages/e2e-tests/fixtures/blocks/core__group__deprecated.serialized.html
@@ -0,0 +1,5 @@
+
+
+
diff --git a/packages/e2e-tests/specs/blocks/__snapshots__/group.test.js.snap b/packages/e2e-tests/specs/blocks/__snapshots__/group.test.js.snap
index df7b3f6419f15..49ddf4c41946d 100644
--- a/packages/e2e-tests/specs/blocks/__snapshots__/group.test.js.snap
+++ b/packages/e2e-tests/specs/blocks/__snapshots__/group.test.js.snap
@@ -2,20 +2,20 @@
exports[`Group can be created using the block inserter 1`] = `
"
-
+
"
`;
exports[`Group can be created using the slash inserter 1`] = `
"
-
+
"
`;
exports[`Group can have other blocks appended to it using the button appender 1`] = `
"
-
+
Group Block with a Paragraph
-
+
"
`;