-
Notifications
You must be signed in to change notification settings - Fork 4.3k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
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
- Loading branch information
Showing
14 changed files
with
159 additions
and
31 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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 ( | ||
| <div className={ className } style={ styles }> | ||
| <InnerBlocks.Content /> | ||
| </div> | ||
| ); | ||
| }, | ||
| }, | ||
| ]; | ||
|
|
||
| export default deprecated; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,10 +1,12 @@ | ||
| <!-- wp:group {"backgroundColor":"secondary","align":"full"} --> | ||
| <div class="wp-block-group alignfull has-secondary-background-color has-background"> | ||
| <!-- wp:paragraph --> | ||
| <p>This is a group block.</p> | ||
| <!-- /wp:paragraph --> | ||
| <div class="wp-block-group__inner-container"> | ||
| <!-- wp:paragraph --> | ||
| <p>This is a group block.</p> | ||
| <!-- /wp:paragraph --> | ||
|
|
||
| <!-- wp:paragraph --> | ||
| <p>Group block content.</p> | ||
| <!-- /wp:paragraph --></div> | ||
| <!-- wp:paragraph --> | ||
| <p>Group block content.</p> | ||
| <!-- /wp:paragraph --></div> | ||
| </div> | ||
| <!-- /wp:group --> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
4 changes: 2 additions & 2 deletions
4
packages/e2e-tests/fixtures/blocks/core__group.serialized.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,9 +1,9 @@ | ||
| <!-- wp:group {"backgroundColor":"secondary","align":"full"} --> | ||
| <div class="wp-block-group alignfull has-secondary-background-color has-background"><!-- wp:paragraph --> | ||
| <div class="wp-block-group alignfull has-secondary-background-color has-background"><div class="wp-block-group__inner-container"><!-- wp:paragraph --> | ||
| <p>This is a group block.</p> | ||
| <!-- /wp:paragraph --> | ||
|
|
||
| <!-- wp:paragraph --> | ||
| <p>Group block content.</p> | ||
| <!-- /wp:paragraph --></div> | ||
| <!-- /wp:paragraph --></div></div> | ||
| <!-- /wp:group --> |
7 changes: 7 additions & 0 deletions
7
packages/e2e-tests/fixtures/blocks/core__group__deprecated.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,7 @@ | ||
| <!-- wp:group {"backgroundColor":"lighter-blue","align":"full"} --> | ||
| <div class="wp-block-group alignfull has-lighter-blue-background-color has-background"> | ||
| <!-- wp:paragraph --> | ||
| <p>test</p> | ||
| <!-- /wp:paragraph --> | ||
| </div> | ||
| <!-- /wp:group --> |
25 changes: 25 additions & 0 deletions
25
packages/e2e-tests/fixtures/blocks/core__group__deprecated.json
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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": "<p>test</p>" | ||
| } | ||
| ], | ||
| "originalContent": "<div class=\"wp-block-group alignfull has-lighter-blue-background-color has-background\">\n\t\n</div>" | ||
| } | ||
| ] |
35 changes: 35 additions & 0 deletions
35
packages/e2e-tests/fixtures/blocks/core__group__deprecated.parsed.json
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,35 @@ | ||
| [ | ||
| { | ||
| "blockName": "core/group", | ||
| "attrs": { | ||
| "backgroundColor": "lighter-blue", | ||
| "align": "full" | ||
| }, | ||
| "innerBlocks": [ | ||
| { | ||
| "blockName": "core/paragraph", | ||
| "attrs": {}, | ||
| "innerBlocks": [], | ||
| "innerHTML": "\n\t<p>test</p>\n\t", | ||
| "innerContent": [ | ||
| "\n\t<p>test</p>\n\t" | ||
| ] | ||
| } | ||
| ], | ||
| "innerHTML": "\n<div class=\"wp-block-group alignfull has-lighter-blue-background-color has-background\">\n\t\n</div>\n", | ||
| "innerContent": [ | ||
| "\n<div class=\"wp-block-group alignfull has-lighter-blue-background-color has-background\">\n\t", | ||
| null, | ||
| "\n</div>\n" | ||
| ] | ||
| }, | ||
| { | ||
| "blockName": null, | ||
| "attrs": {}, | ||
| "innerBlocks": [], | ||
| "innerHTML": "\n", | ||
| "innerContent": [ | ||
| "\n" | ||
| ] | ||
| } | ||
| ] |
5 changes: 5 additions & 0 deletions
5
packages/e2e-tests/fixtures/blocks/core__group__deprecated.serialized.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,5 @@ | ||
| <!-- wp:group {"backgroundColor":"lighter-blue","className":"alignfull"} --> | ||
| <div class="wp-block-group has-lighter-blue-background-color has-background alignfull"><div class="wp-block-group__inner-container"><!-- wp:paragraph --> | ||
| <p>test</p> | ||
| <!-- /wp:paragraph --></div></div> | ||
| <!-- /wp:group --> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters