From b4c2934c6d2de02cf64031596928a4f586c489a6 Mon Sep 17 00:00:00 2001 From: Kjell Reigstad Date: Fri, 26 Apr 2019 09:05:56 -0400 Subject: [PATCH 1/4] Add a inner container to the Group block. To make theme styling easier. --- packages/block-library/src/group/edit.js | 8 +++++--- packages/block-library/src/group/editor.scss | 12 ++++++------ packages/block-library/src/group/save.js | 4 +++- 3 files changed, 14 insertions(+), 10 deletions(-) diff --git a/packages/block-library/src/group/edit.js b/packages/block-library/src/group/edit.js index f6756a7750c223..1e7445a20cc954 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 d3b83213bff0ae..68bfde8888604d 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/save.js b/packages/block-library/src/group/save.js index a0ee8246c69a8d..c2c56221766b1a 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 (
- +
+ +
); } From 1d5cfade1975bae802225bd2f0eb607af930edd4 Mon Sep 17 00:00:00 2001 From: Kjell Reigstad Date: Tue, 7 May 2019 15:07:32 -0400 Subject: [PATCH 2/4] Update test fixtures --- .../e2e-tests/fixtures/blocks/core__group.html | 14 ++++++++------ .../e2e-tests/fixtures/blocks/core__group.json | 2 +- .../fixtures/blocks/core__group.parsed.json | 16 ++++++++-------- .../fixtures/blocks/core__group.serialized.html | 4 ++-- 4 files changed, 19 insertions(+), 17 deletions(-) diff --git a/packages/e2e-tests/fixtures/blocks/core__group.html b/packages/e2e-tests/fixtures/blocks/core__group.html index 2c8055434700de..09fd95cfc9d5a4 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 ec8f4ca9ad64da..71d94f926dcccf 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 06718c82d85f16..bf2b50feb5fd1f 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 bcc69c0e890098..2c398b530dedc5 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.

-
+
From 2a6214a98b54b1c4ea924a1cc3ba47e8a2699eb3 Mon Sep 17 00:00:00 2001 From: Kjell Reigstad Date: Tue, 7 May 2019 15:13:25 -0400 Subject: [PATCH 3/4] Update snapshot. --- .../specs/blocks/__snapshots__/group.test.js.snap | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) 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 df7b3f6419f155..49ddf4c41946de 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

-
+
" `; From aa1646282debdc0e1327219428b316b048771126 Mon Sep 17 00:00:00 2001 From: Daniel Richards Date: Fri, 10 May 2019 17:48:01 +0800 Subject: [PATCH 4/4] Add deprecation for group block --- .../block-library/src/group/deprecated.js | 48 +++++++++++++++++++ packages/block-library/src/group/index.js | 2 + .../blocks/core__group__deprecated.html | 7 +++ .../blocks/core__group__deprecated.json | 25 ++++++++++ .../core__group__deprecated.parsed.json | 35 ++++++++++++++ .../core__group__deprecated.serialized.html | 5 ++ 6 files changed, 122 insertions(+) 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 00000000000000..ced2cfca58b993 --- /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/index.js b/packages/block-library/src/group/index.js index 9bab779f5863b5..b2b848cd49de30 100644 --- a/packages/block-library/src/group/index.js +++ b/packages/block-library/src/group/index.js @@ -6,6 +6,7 @@ import { __ } from '@wordpress/i18n'; /** * Internal dependencies */ +import deprecated from './deprecated'; import edit from './edit'; import icon from './icon'; import metadata from './block.json'; @@ -27,4 +28,5 @@ export const settings = { }, edit, save, + deprecated, }; 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 00000000000000..e57b273d388e51 --- /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 00000000000000..89116067ef6f6b --- /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 00000000000000..38723b5e2457a5 --- /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 00000000000000..58aca8fd2e3508 --- /dev/null +++ b/packages/e2e-tests/fixtures/blocks/core__group__deprecated.serialized.html @@ -0,0 +1,5 @@ + +
+

test

+
+