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.

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

Try adding an inner container to the Group block. #15210

Merged
merged 4 commits into from
Jun 17, 2019
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
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
48 changes: 48 additions & 0 deletions packages/block-library/src/group/deprecated.js
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;
8 changes: 5 additions & 3 deletions packages/block-library/src/group/edit.js
Original file line number Diff line number Diff line change
Expand Up @@ -45,9 +45,11 @@ function GroupEdit( {
/>
</InspectorControls>
<div className={ classes } style={ styles }>
<InnerBlocks
renderAppender={ ! hasInnerBlocks && InnerBlocks.ButtonBlockAppender }
/>
<div className="wp-block-group__inner-container">
<InnerBlocks
renderAppender={ ! hasInnerBlocks && InnerBlocks.ButtonBlockAppender }
/>
</div>
</div>
</>
);
Expand Down
12 changes: 6 additions & 6 deletions packages/block-library/src/group/editor.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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`
Expand All @@ -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;
Expand All @@ -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;
Expand All @@ -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);
}
}
2 changes: 2 additions & 0 deletions packages/block-library/src/group/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -27,4 +28,5 @@ export const settings = {
},
edit,
save,
deprecated,
};
4 changes: 3 additions & 1 deletion packages/block-library/src/group/save.js
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,9 @@ export default function save( { attributes } ) {

return (
<div className={ className } style={ styles }>
<InnerBlocks.Content />
<div className="wp-block-group__inner-container">
<InnerBlocks.Content />
</div>
</div>
);
}
14 changes: 8 additions & 6 deletions packages/e2e-tests/fixtures/blocks/core__group.html
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 -->
2 changes: 1 addition & 1 deletion packages/e2e-tests/fixtures/blocks/core__group.json
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,6 @@
"originalContent": "<p>Group block content.</p>"
}
],
"originalContent": "<div class=\"wp-block-group alignfull has-secondary-background-color has-background\">\n\t\n\n\t</div>"
"originalContent": "<div class=\"wp-block-group alignfull has-secondary-background-color has-background\">\n\t<div class=\"wp-block-group__inner-container\">\n\t\t\n\n\t\t</div>\n\t</div>"
}
]
16 changes: 8 additions & 8 deletions packages/e2e-tests/fixtures/blocks/core__group.parsed.json
Original file line number Diff line number Diff line change
Expand Up @@ -10,28 +10,28 @@
"blockName": "core/paragraph",
"attrs": {},
"innerBlocks": [],
"innerHTML": "\n\t<p>This is a group block.</p>\n\t",
"innerHTML": "\n\t\t<p>This is a group block.</p>\n\t\t",
"innerContent": [
"\n\t<p>This is a group block.</p>\n\t"
"\n\t\t<p>This is a group block.</p>\n\t\t"
]
},
{
"blockName": "core/paragraph",
"attrs": {},
"innerBlocks": [],
"innerHTML": "\n\t<p>Group block content.</p>\n\t",
"innerHTML": "\n\t\t<p>Group block content.</p>\n\t\t",
"innerContent": [
"\n\t<p>Group block content.</p>\n\t"
"\n\t\t<p>Group block content.</p>\n\t\t"
]
}
],
"innerHTML": "\n<div class=\"wp-block-group alignfull has-secondary-background-color has-background\">\n\t\n\n\t</div>\n",
"innerHTML": "\n<div class=\"wp-block-group alignfull has-secondary-background-color has-background\">\n\t<div class=\"wp-block-group__inner-container\">\n\t\t\n\n\t\t</div>\n\t</div>\n",
"innerContent": [
"\n<div class=\"wp-block-group alignfull has-secondary-background-color has-background\">\n\t",
"\n<div class=\"wp-block-group alignfull has-secondary-background-color has-background\">\n\t<div class=\"wp-block-group__inner-container\">\n\t\t",
null,
"\n\n\t",
"\n\n\t\t",
null,
"</div>\n"
"</div>\n\t</div>\n"
]
},
{
Expand Down
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 -->
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 packages/e2e-tests/fixtures/blocks/core__group__deprecated.json
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>"
}
]
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"
]
}
]
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 -->
Original file line number Diff line number Diff line change
Expand Up @@ -2,20 +2,20 @@

exports[`Group can be created using the block inserter 1`] = `
"<!-- wp:group -->
<div class=\\"wp-block-group\\"></div>
<div class=\\"wp-block-group\\"><div class=\\"wp-block-group__inner-container\\"></div></div>
<!-- /wp:group -->"
`;

exports[`Group can be created using the slash inserter 1`] = `
"<!-- wp:group -->
<div class=\\"wp-block-group\\"></div>
<div class=\\"wp-block-group\\"><div class=\\"wp-block-group__inner-container\\"></div></div>
<!-- /wp:group -->"
`;

exports[`Group can have other blocks appended to it using the button appender 1`] = `
"<!-- wp:group -->
<div class=\\"wp-block-group\\"><!-- wp:paragraph -->
<div class=\\"wp-block-group\\"><div class=\\"wp-block-group__inner-container\\"><!-- wp:paragraph -->
<p>Group Block with a Paragraph</p>
<!-- /wp:paragraph --></div>
<!-- /wp:paragraph --></div></div>
<!-- /wp:group -->"
`;