From 3cee715dba692bcf15f8918178ca8874342d0c4e Mon Sep 17 00:00:00 2001 From: Chris Van Patten Date: Fri, 12 Oct 2018 14:12:15 -0400 Subject: [PATCH 1/8] Add initial draft of section block; fixes #4900 --- packages/block-library/src/index.js | 2 + packages/block-library/src/section/index.js | 107 ++++++++++++++++++++ 2 files changed, 109 insertions(+) create mode 100644 packages/block-library/src/section/index.js diff --git a/packages/block-library/src/index.js b/packages/block-library/src/index.js index 470ad4aea9feb..f148176abeabd 100644 --- a/packages/block-library/src/index.js +++ b/packages/block-library/src/index.js @@ -38,6 +38,7 @@ import * as preformatted from './preformatted'; import * as pullquote from './pullquote'; import * as reusableBlock from './block'; import * as separator from './separator'; +import * as section from './section'; import * as shortcode from './shortcode'; import * as spacer from './spacer'; import * as subhead from './subhead'; @@ -83,6 +84,7 @@ export const registerCoreBlocks = () => { nextpage, preformatted, pullquote, + section, separator, reusableBlock, spacer, diff --git a/packages/block-library/src/section/index.js b/packages/block-library/src/section/index.js new file mode 100644 index 0000000000000..4f2634b6dd9b3 --- /dev/null +++ b/packages/block-library/src/section/index.js @@ -0,0 +1,107 @@ +/** + * External dependencies + */ +import classnames from 'classnames'; + +/** + * WordPress dependencies + */ +import { __, sprintf } from '@wordpress/i18n'; +import { Fragment } from '@wordpress/element'; +import { + getColorClassName, + withColors, + InspectorControls, + InnerBlocks, + PanelColorSettings, +} from '@wordpress/editor'; + +export const name = 'core/section'; + +export const settings = { + title: sprintf( + /* translators: Block title modifier */ + __( '%1$s (%2$s)' ), + __( 'Section' ), + __( 'beta' ) + ), + + icon: , + + category: 'layout', + + attributes: { + align: { + type: 'string', + }, + backgroundColor: { + type: 'string', + }, + customBackgroundColor: { + type: 'string', + }, + }, + + description: __( 'Group a selection of blocks into a container.' ), + + supports: { + align: [ 'wide', 'full' ], + }, + + edit: withColors( 'backgroundColor' )( ( props ) => { + const { + backgroundColor, + className, + setBackgroundColor, + } = props; + + return ( + + + + +
+ +
+ + ); + } ), + + save( { attributes } ) { + const { + backgroundColor, + customBackgroundColor, + } = attributes; + + const backgroundClass = getColorClassName( 'background-color', backgroundColor ); + + const className = classnames( { + 'has-background': backgroundColor || customBackgroundColor, + [ backgroundClass ]: backgroundClass, + } ); + + return ( +
+ +
+ ); + }, +}; From 4a46fdcb089fa8291a43d9d7fd771c936b47b0d3 Mon Sep 17 00:00:00 2001 From: Chris Van Patten Date: Sun, 14 Oct 2018 14:13:52 -0400 Subject: [PATCH 2/8] Rename section as "container", add icon --- .../block-library/src/{section => container}/index.js | 11 ++++++----- packages/block-library/src/index.js | 4 ++-- 2 files changed, 8 insertions(+), 7 deletions(-) rename packages/block-library/src/{section => container}/index.js (80%) diff --git a/packages/block-library/src/section/index.js b/packages/block-library/src/container/index.js similarity index 80% rename from packages/block-library/src/section/index.js rename to packages/block-library/src/container/index.js index 4f2634b6dd9b3..37f36c801b7de 100644 --- a/packages/block-library/src/section/index.js +++ b/packages/block-library/src/container/index.js @@ -16,17 +16,17 @@ import { PanelColorSettings, } from '@wordpress/editor'; -export const name = 'core/section'; +export const name = 'core/container'; export const settings = { title: sprintf( /* translators: Block title modifier */ __( '%1$s (%2$s)' ), - __( 'Section' ), + __( 'Container' ), __( 'beta' ) ), - icon: , + icon: , category: 'layout', @@ -42,10 +42,11 @@ export const settings = { }, }, - description: __( 'Group a selection of blocks into a container.' ), + description: __( 'Group blocks into a container.' ), supports: { align: [ 'wide', 'full' ], + anchor: true, }, edit: withColors( 'backgroundColor' )( ( props ) => { @@ -71,7 +72,7 @@ export const settings = { />
{ code, columns, column, + container, coverImage, embed, ...embed.common, @@ -84,7 +85,6 @@ export const registerCoreBlocks = () => { nextpage, preformatted, pullquote, - section, separator, reusableBlock, spacer, From 83a970418a8b50bded4a5266a06e3bded65600e2 Mon Sep 17 00:00:00 2001 From: Chris Van Patten Date: Tue, 16 Oct 2018 11:08:18 -0400 Subject: [PATCH 3/8] Add inline style, text colors, and contrast support --- packages/block-library/src/container/index.js | 73 ++++++++++++++++--- .../block-library/src/container/style.scss | 5 ++ packages/block-library/src/style.scss | 1 + 3 files changed, 68 insertions(+), 11 deletions(-) create mode 100644 packages/block-library/src/container/style.scss diff --git a/packages/block-library/src/container/index.js b/packages/block-library/src/container/index.js index 37f36c801b7de..79d7ffe081a64 100644 --- a/packages/block-library/src/container/index.js +++ b/packages/block-library/src/container/index.js @@ -6,15 +6,27 @@ import classnames from 'classnames'; /** * WordPress dependencies */ +import { withFallbackStyles } from '@wordpress/components'; +import { compose } from '@wordpress/compose'; import { __, sprintf } from '@wordpress/i18n'; -import { Fragment } from '@wordpress/element'; import { getColorClassName, withColors, - InspectorControls, + 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'; @@ -40,6 +52,12 @@ export const settings = { customBackgroundColor: { type: 'string', }, + textColor: { + type: 'string', + }, + customTextColor: { + type: 'string', + }, }, description: __( 'Group blocks into a container.' ), @@ -49,11 +67,18 @@ export const settings = { anchor: true, }, - edit: withColors( 'backgroundColor' )( ( props ) => { + edit: compose( [ + withColors( 'backgroundColor', { textColor: 'color' } ), + applyFallbackStyles, + ] )( ( props ) => { const { backgroundColor, className, + fallbackBackgroundColor, + fallbackTextColor, setBackgroundColor, + setTextColor, + textColor, } = props; return ( @@ -68,16 +93,33 @@ export const settings = { onChange: setBackgroundColor, label: __( 'Background Color' ), }, + { + value: textColor.color, + onChange: setTextColor, + label: __( 'Text Color' ), + }, ] } - /> + > + +
@@ -90,17 +132,26 @@ export const settings = { const { backgroundColor, customBackgroundColor, + customTextColor, + textColor, } = attributes; - const backgroundClass = getColorClassName( 'background-color', backgroundColor ); - - const className = classnames( { - 'has-background': backgroundColor || customBackgroundColor, - [ backgroundClass ]: backgroundClass, - } ); + const backgroundColorClass = getColorClassName( 'background-color', backgroundColor ); + const textColorClass = getColorClassName( 'color', textColor ); return ( -
+
); diff --git a/packages/block-library/src/container/style.scss b/packages/block-library/src/container/style.scss new file mode 100644 index 0000000000000..71116b0b96319 --- /dev/null +++ b/packages/block-library/src/container/style.scss @@ -0,0 +1,5 @@ +.wp-block-container { + // 1px top/bottom padding allows us to prevent margin collapsing while + // not having excessive top/bottom margins. + padding: 1px 1em; +} diff --git a/packages/block-library/src/style.scss b/packages/block-library/src/style.scss index 8ca793de2c055..6d2ddb6c82ed5 100644 --- a/packages/block-library/src/style.scss +++ b/packages/block-library/src/style.scss @@ -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"; From dee2ba204bebee945b3a3d7f996f7098193b67f5 Mon Sep 17 00:00:00 2001 From: Chris Van Patten Date: Tue, 16 Oct 2018 11:25:16 -0400 Subject: [PATCH 4/8] Tweak CSS comments and add editor style to enforce the cascade --- packages/block-library/src/container/editor.scss | 5 +++++ packages/block-library/src/container/style.scss | 2 +- packages/block-library/src/editor.scss | 1 + 3 files changed, 7 insertions(+), 1 deletion(-) create mode 100644 packages/block-library/src/container/editor.scss diff --git a/packages/block-library/src/container/editor.scss b/packages/block-library/src/container/editor.scss new file mode 100644 index 0000000000000..3d78e8f7e2369 --- /dev/null +++ b/packages/block-library/src/container/editor.scss @@ -0,0 +1,5 @@ +.wp-block-container .editor-block-list__block { + // We need to enforce a cascade by telling nested blocks to inherit + // their text color from the container block. + color: inherit; +} diff --git a/packages/block-library/src/container/style.scss b/packages/block-library/src/container/style.scss index 71116b0b96319..587560c19774f 100644 --- a/packages/block-library/src/container/style.scss +++ b/packages/block-library/src/container/style.scss @@ -1,5 +1,5 @@ .wp-block-container { // 1px top/bottom padding allows us to prevent margin collapsing while - // not having excessive top/bottom margins. + // avoiding excessive top/bottom margins. padding: 1px 1em; } diff --git a/packages/block-library/src/editor.scss b/packages/block-library/src/editor.scss index 70aa75c35b7f0..86a41cf8c653e 100644 --- a/packages/block-library/src/editor.scss +++ b/packages/block-library/src/editor.scss @@ -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"; From 872d6feaf283741c08904b98aadac60e8876ba58 Mon Sep 17 00:00:00 2001 From: Chris Van Patten Date: Tue, 16 Oct 2018 11:53:05 -0400 Subject: [PATCH 5/8] Remove "beta" designation --- packages/block-library/src/container/index.js | 9 ++------- 1 file changed, 2 insertions(+), 7 deletions(-) diff --git a/packages/block-library/src/container/index.js b/packages/block-library/src/container/index.js index 79d7ffe081a64..79b9a16d6aba9 100644 --- a/packages/block-library/src/container/index.js +++ b/packages/block-library/src/container/index.js @@ -8,7 +8,7 @@ import classnames from 'classnames'; */ import { withFallbackStyles } from '@wordpress/components'; import { compose } from '@wordpress/compose'; -import { __, sprintf } from '@wordpress/i18n'; +import { __ } from '@wordpress/i18n'; import { getColorClassName, withColors, @@ -31,12 +31,7 @@ const applyFallbackStyles = withFallbackStyles( ( node, ownProps ) => { export const name = 'core/container'; export const settings = { - title: sprintf( - /* translators: Block title modifier */ - __( '%1$s (%2$s)' ), - __( 'Container' ), - __( 'beta' ) - ), + title: __( 'Container' ), icon: , From b524cd57ff49af486f6f529061f28832bcb24e63 Mon Sep 17 00:00:00 2001 From: Chris Van Patten Date: Tue, 16 Oct 2018 11:54:22 -0400 Subject: [PATCH 6/8] Add test fixtures --- .../fixtures/core__container.html | 10 +++++++ .../fixtures/core__container.json | 1 + .../fixtures/core__container.parsed.json | 27 +++++++++++++++++++ .../fixtures/core__container.serialized.html | 1 + 4 files changed, 39 insertions(+) create mode 100644 test/integration/full-content/fixtures/core__container.html create mode 100644 test/integration/full-content/fixtures/core__container.json create mode 100644 test/integration/full-content/fixtures/core__container.parsed.json create mode 100644 test/integration/full-content/fixtures/core__container.serialized.html diff --git a/test/integration/full-content/fixtures/core__container.html b/test/integration/full-content/fixtures/core__container.html new file mode 100644 index 0000000000000..2dcd8624b4ab2 --- /dev/null +++ b/test/integration/full-content/fixtures/core__container.html @@ -0,0 +1,10 @@ + +
+ +

Container, Paragraph One

+ + +

Container, Paragraph Two

+ +
+ diff --git a/test/integration/full-content/fixtures/core__container.json b/test/integration/full-content/fixtures/core__container.json new file mode 100644 index 0000000000000..fe51488c7066f --- /dev/null +++ b/test/integration/full-content/fixtures/core__container.json @@ -0,0 +1 @@ +[] diff --git a/test/integration/full-content/fixtures/core__container.parsed.json b/test/integration/full-content/fixtures/core__container.parsed.json new file mode 100644 index 0000000000000..e6cba1aab63eb --- /dev/null +++ b/test/integration/full-content/fixtures/core__container.parsed.json @@ -0,0 +1,27 @@ +[ + { + "blockName": "core/container", + "attrs": {}, + "innerBlocks": [ + { + "blockName": "core/paragraph", + "attrs": {}, + "innerBlocks": [], + "innerHTML": "\n\t

Container, Paragraph One

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

Container, Paragraph Two

\n\t" + } + ], + "innerHTML": "\n
\n\t\n\t\n
\n" + }, + { + "blockName": null, + "attrs": {}, + "innerBlocks": [], + "innerHTML": "\n" + } +] diff --git a/test/integration/full-content/fixtures/core__container.serialized.html b/test/integration/full-content/fixtures/core__container.serialized.html new file mode 100644 index 0000000000000..8b137891791fe --- /dev/null +++ b/test/integration/full-content/fixtures/core__container.serialized.html @@ -0,0 +1 @@ + From 5acc4e6d0b1fe0414f8e7e7905a7bf81f687f1a1 Mon Sep 17 00:00:00 2001 From: Chris Van Patten Date: Tue, 16 Oct 2018 12:11:13 -0400 Subject: [PATCH 7/8] Only output inline `style` when custom colors are selected --- packages/block-library/src/container/index.js | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/packages/block-library/src/container/index.js b/packages/block-library/src/container/index.js index 79b9a16d6aba9..4f5d75ec31647 100644 --- a/packages/block-library/src/container/index.js +++ b/packages/block-library/src/container/index.js @@ -67,6 +67,10 @@ export const settings = { applyFallbackStyles, ] )( ( props ) => { const { + attributes: { + customBackgroundColor, + customTextColor, + }, backgroundColor, className, fallbackBackgroundColor, @@ -113,8 +117,8 @@ export const settings = { [ textColor.class ]: textColor.class, } ) } style={ { - backgroundColor: backgroundColor.color, - color: textColor.color, + backgroundColor: customBackgroundColor && backgroundColor.color, + color: customTextColor && textColor.color, } } > From 3d3368554c4a99b5c84c8eced054996fbe2f0c81 Mon Sep 17 00:00:00 2001 From: Chris Van Patten Date: Tue, 16 Oct 2018 12:19:20 -0400 Subject: [PATCH 8/8] Add container fixtures again --- .../fixtures/core__container.json | 34 ++++++++++++++++++- .../fixtures/core__container.serialized.html | 8 +++++ 2 files changed, 41 insertions(+), 1 deletion(-) diff --git a/test/integration/full-content/fixtures/core__container.json b/test/integration/full-content/fixtures/core__container.json index fe51488c7066f..2077efe1ffc9d 100644 --- a/test/integration/full-content/fixtures/core__container.json +++ b/test/integration/full-content/fixtures/core__container.json @@ -1 +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": "

Container, Paragraph One

" + }, + { + "clientId": "_clientId_1", + "name": "core/paragraph", + "isValid": true, + "attributes": { + "content": "Container, Paragraph Two", + "dropCap": false + }, + "innerBlocks": [], + "originalContent": "

Container, Paragraph Two

" + } + ], + "originalContent": "
\n\t\n\t\n
" + } +] diff --git a/test/integration/full-content/fixtures/core__container.serialized.html b/test/integration/full-content/fixtures/core__container.serialized.html index 8b137891791fe..cf18a4faee699 100644 --- a/test/integration/full-content/fixtures/core__container.serialized.html +++ b/test/integration/full-content/fixtures/core__container.serialized.html @@ -1 +1,9 @@ + +
+

Container, Paragraph One

+ + +

Container, Paragraph Two

+
+