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

Add initial draft of container block #10562

Closed
wants to merge 8 commits into from
Closed
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
5 changes: 5 additions & 0 deletions packages/block-library/src/container/editor.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
.wp-block-container .editor-block-list__block {
// We need to enforce a cascade by telling nested blocks to inherit
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Where is there a color otherwise being assigned that is breaking the default cascade? It's not clear to me that this should be needed.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@aduth See my comment here: #10067 (comment)

We map body to .editor-block-list__block inside editor-styles.scss which means each block resets the cascade for these properties.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

That's a bit unfortunate 😕 But OK 👍

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Agreed we should refactor the editor styles to apply to the editor container. The downside though is that it can affect the UI bits (toolbars, movers...) so we need to be careful there.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I almost wonder if there's a way to do a forced reset for Gutenberg chrome? Something to ponder for the future but for now this works :)

// their text color from the container block.
color: inherit;
}
158 changes: 158 additions & 0 deletions packages/block-library/src/container/index.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,158 @@
/**
* External dependencies
*/
import classnames from 'classnames';

/**
* WordPress dependencies
*/
import { withFallbackStyles } from '@wordpress/components';
import { compose } from '@wordpress/compose';
import { __ } from '@wordpress/i18n';
import {
getColorClassName,
withColors,
ContrastChecker,
InnerBlocks,
InspectorControls,
PanelColorSettings,
} from '@wordpress/editor';
import { Fragment } from '@wordpress/element';

const applyFallbackStyles = withFallbackStyles( ( node, ownProps ) => {
const { textColor, backgroundColor } = ownProps.attributes;

return {
fallbackBackgroundColor: backgroundColor,
fallbackTextColor: textColor,
};
} );

export const name = 'core/container';

export const settings = {
title: __( 'Container' ),

icon: <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M19 12h-2v3h-3v2h5v-5zM7 9h3V7H5v5h2V9zm14-6H3c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h18c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16.01H3V4.99h18v14.02z" /><path d="M0 0h24v24H0z" fill="none" /></svg>,

category: 'layout',

attributes: {
align: {
type: 'string',
},
backgroundColor: {
type: 'string',
},
customBackgroundColor: {
type: 'string',
},
textColor: {
type: 'string',
},
customTextColor: {
type: 'string',
},
},

description: __( 'Group blocks into a container.' ),

supports: {
align: [ 'wide', 'full' ],
anchor: true,
},

edit: compose( [
withColors( 'backgroundColor', { textColor: 'color' } ),
applyFallbackStyles,
] )( ( props ) => {
const {
attributes: {
customBackgroundColor,
customTextColor,
},
backgroundColor,
className,
fallbackBackgroundColor,
fallbackTextColor,
setBackgroundColor,
setTextColor,
textColor,
} = props;

return (
<Fragment>
<InspectorControls>
<PanelColorSettings
title={ __( 'Color Settings' ) }
initialOpen={ false }
colorSettings={ [
{
value: backgroundColor.color,
onChange: setBackgroundColor,
label: __( 'Background Color' ),
},
{
value: textColor.color,
onChange: setTextColor,
label: __( 'Text Color' ),
},
] }
>
<ContrastChecker
{ ...{
textColor: textColor.color,
backgroundColor: backgroundColor.color,
fallbackTextColor,
fallbackBackgroundColor,
} }
/>
</PanelColorSettings>
</InspectorControls>
<div
className={ classnames( className, {
'has-background': backgroundColor.color,
'has-text-color': textColor.color,
[ backgroundColor.class ]: backgroundColor.class,
[ textColor.class ]: textColor.class,
} ) }
style={ {
backgroundColor: customBackgroundColor && backgroundColor.color,
color: customTextColor && textColor.color,
} }
>
<InnerBlocks />
</div>
</Fragment>
);
} ),

save( { attributes } ) {
const {
backgroundColor,
customBackgroundColor,
customTextColor,
textColor,
} = attributes;

const backgroundColorClass = getColorClassName( 'background-color', backgroundColor );
const textColorClass = getColorClassName( 'color', textColor );

return (
<div
className={ classnames( {
'has-background': backgroundColor || customBackgroundColor,
'has-text-color': textColor || customTextColor,
[ backgroundColorClass ]: backgroundColorClass,
[ textColorClass ]: textColorClass,
} ) }
style={ {
backgroundColor: backgroundColorClass ? undefined : customBackgroundColor,
color: textColorClass ? undefined : customTextColor,
} }
>
<InnerBlocks.Content />
</div>
);
},
};
5 changes: 5 additions & 0 deletions packages/block-library/src/container/style.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
.wp-block-container {
// 1px top/bottom padding allows us to prevent margin collapsing while
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Does margin collapse happen on the front-end, or is this meant to offset the editor styles? If the latter, should we then include this only in an editor-specific stylesheet?

Copy link
Contributor Author

@chrisvanpatten chrisvanpatten Oct 16, 2018

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Front and back-end, but in my testing it was good/necessary for both cases.

// avoiding excessive top/bottom margins.
padding: 1px 1em;
}
1 change: 1 addition & 0 deletions packages/block-library/src/editor.scss
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@
@import "./categories/editor.scss";
@import "./code/editor.scss";
@import "./columns/editor.scss";
@import "./container/editor.scss";
@import "./cover-image/editor.scss";
@import "./embed/editor.scss";
@import "./file/editor.scss";
Expand Down
2 changes: 2 additions & 0 deletions packages/block-library/src/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,7 @@ import * as categories from './categories';
import * as code from './code';
import * as columns from './columns';
import * as column from './columns/column';
import * as container from './container';
import * as coverImage from './cover-image';
import * as embed from './embed';
import * as file from './file';
Expand Down Expand Up @@ -69,6 +70,7 @@ export const registerCoreBlocks = () => {
code,
columns,
column,
container,
coverImage,
embed,
...embed.common,
Expand Down
1 change: 1 addition & 0 deletions packages/block-library/src/style.scss
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@
@import "./button/style.scss";
@import "./categories/style.scss";
@import "./columns/style.scss";
@import "./container/style.scss";
@import "./cover-image/style.scss";
@import "./embed/style.scss";
@import "./file/style.scss";
Expand Down
10 changes: 10 additions & 0 deletions test/integration/full-content/fixtures/core__container.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
<!-- wp:container -->
<div class="wp-block-container">
<!-- wp:paragraph -->
<p>Container, Paragraph One</p>
<!-- /wp:paragraph -->
<!-- wp:paragraph -->
<p>Container, Paragraph Two</p>
<!-- /wp:paragraph -->
</div>
<!-- /wp:container -->
33 changes: 33 additions & 0 deletions test/integration/full-content/fixtures/core__container.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
[
{
"clientId": "_clientId_0",
"name": "core/container",
"isValid": true,
"attributes": {},
"innerBlocks": [
{
"clientId": "_clientId_0",
"name": "core/paragraph",
"isValid": true,
"attributes": {
"content": "Container, Paragraph One",
"dropCap": false
},
"innerBlocks": [],
"originalContent": "<p>Container, Paragraph One</p>"
},
{
"clientId": "_clientId_1",
"name": "core/paragraph",
"isValid": true,
"attributes": {
"content": "Container, Paragraph Two",
"dropCap": false
},
"innerBlocks": [],
"originalContent": "<p>Container, Paragraph Two</p>"
}
],
"originalContent": "<div class=\"wp-block-container\">\n\t\n\t\n</div>"
}
]
27 changes: 27 additions & 0 deletions test/integration/full-content/fixtures/core__container.parsed.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
[
{
"blockName": "core/container",
"attrs": {},
"innerBlocks": [
{
"blockName": "core/paragraph",
"attrs": {},
"innerBlocks": [],
"innerHTML": "\n\t<p>Container, Paragraph One</p>\n\t"
},
{
"blockName": "core/paragraph",
"attrs": {},
"innerBlocks": [],
"innerHTML": "\n\t<p>Container, Paragraph Two</p>\n\t"
}
],
"innerHTML": "\n<div class=\"wp-block-container\">\n\t\n\t\n</div>\n"
},
{
"blockName": null,
"attrs": {},
"innerBlocks": [],
"innerHTML": "\n"
}
]
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
<!-- wp:container -->
<div class="wp-block-container"><!-- wp:paragraph -->
<p>Container, Paragraph One</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Container, Paragraph Two</p>
<!-- /wp:paragraph --></div>
<!-- /wp:container -->