From c80a0089cc3d24c4a01e693e2fc209279a74f45a Mon Sep 17 00:00:00 2001 From: Kjell Reigstad Date: Mon, 17 Jun 2019 08:55:00 -0400 Subject: [PATCH] Try adding an inner container to the Group block. (#15210) * Add a inner container to the Group block. To make theme styling easier. * Update test fixtures * Update snapshot. * Add deprecation for group block --- .../block-library/src/group/deprecated.js | 48 +++++++++++++++++++ packages/block-library/src/group/edit.js | 8 ++-- packages/block-library/src/group/editor.scss | 12 ++--- packages/block-library/src/group/index.js | 2 + packages/block-library/src/group/save.js | 4 +- .../fixtures/blocks/core__group.html | 14 +++--- .../fixtures/blocks/core__group.json | 2 +- .../fixtures/blocks/core__group.parsed.json | 16 +++---- .../blocks/core__group.serialized.html | 4 +- .../blocks/core__group__deprecated.html | 7 +++ .../blocks/core__group__deprecated.json | 25 ++++++++++ .../core__group__deprecated.parsed.json | 35 ++++++++++++++ .../core__group__deprecated.serialized.html | 5 ++ .../blocks/__snapshots__/group.test.js.snap | 8 ++-- 14 files changed, 159 insertions(+), 31 deletions(-) create mode 100644 packages/block-library/src/group/deprecated.js create mode 100644 packages/e2e-tests/fixtures/blocks/core__group__deprecated.html create mode 100644 packages/e2e-tests/fixtures/blocks/core__group__deprecated.json create mode 100644 packages/e2e-tests/fixtures/blocks/core__group__deprecated.parsed.json create mode 100644 packages/e2e-tests/fixtures/blocks/core__group__deprecated.serialized.html 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": "
\n\t
\n\t\t\n\n\t\t
\n\t
" } ] 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\t

This is a group block.

\n\t", + "innerHTML": "\n\t\t

This is a group block.

\n\t\t", "innerContent": [ - "\n\t

This is a group block.

\n\t" + "\n\t\t

This is a group block.

\n\t\t" ] }, { "blockName": "core/paragraph", "attrs": {}, "innerBlocks": [], - "innerHTML": "\n\t

Group block content.

\n\t", + "innerHTML": "\n\t\t

Group block content.

\n\t\t", "innerContent": [ - "\n\t

Group block content.

\n\t" + "\n\t\t

Group block content.

\n\t\t" ] } ], - "innerHTML": "\n
\n\t\n\n\t
\n", + "innerHTML": "\n
\n\t
\n\t\t\n\n\t\t
\n\t
\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 @@ + +
+ +

test

+ +
+ 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\t

test

\n\t", + "innerContent": [ + "\n\t

test

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

test

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

-
+
" `;