From 6aebbbaed091926985aeea58ece75783f0f06f62 Mon Sep 17 00:00:00 2001 From: Daniel Richards Date: Thu, 14 Feb 2019 17:19:02 +0800 Subject: [PATCH 01/52] Add initial container block Co-authored-by: Andrei Draganescu --- packages/block-library/src/container/edit.js | 18 ++++++++++ packages/block-library/src/container/index.js | 35 +++++++++++++++++++ packages/block-library/src/index.js | 2 ++ 3 files changed, 55 insertions(+) create mode 100644 packages/block-library/src/container/edit.js create mode 100644 packages/block-library/src/container/index.js diff --git a/packages/block-library/src/container/edit.js b/packages/block-library/src/container/edit.js new file mode 100644 index 0000000000000..016ca36b44efa --- /dev/null +++ b/packages/block-library/src/container/edit.js @@ -0,0 +1,18 @@ + +/** + * WordPress dependencies + */ +import { Fragment } from '@wordpress/element'; +import { + InspectorControls, + InnerBlocks, +} from '@wordpress/editor'; + +export default function edit() { + return ( + + + + + ); +} diff --git a/packages/block-library/src/container/index.js b/packages/block-library/src/container/index.js new file mode 100644 index 0000000000000..b9a1f79022e26 --- /dev/null +++ b/packages/block-library/src/container/index.js @@ -0,0 +1,35 @@ +/** + * WordPress dependencies + */ +import { Path, SVG } from '@wordpress/components'; +import { __ } from '@wordpress/i18n'; +import { InnerBlocks } from '@wordpress/editor'; + +/** + * Internal dependencies + */ +import edit from './edit'; + +export const name = 'core/container'; + +export const settings = { + title: __( 'Container' ), + + icon: , + + category: 'layout', + + description: __( 'A container for other blocks.' ), + + supports: { + reusable: false, + html: false, + align: [ 'wide', 'full' ], + }, + + edit, + + save() { + return
; + }, +}; diff --git a/packages/block-library/src/index.js b/packages/block-library/src/index.js index 81a0e9bec632b..d0ec6538bece2 100644 --- a/packages/block-library/src/index.js +++ b/packages/block-library/src/index.js @@ -27,6 +27,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 cover from './cover'; import * as embed from './embed'; import * as file from './file'; @@ -88,6 +89,7 @@ export const registerCoreBlocks = () => { code, columns, column, + container, cover, embed, ...embed.common, From 9ca4d46b324614639860d128f73eb897a57fa625 Mon Sep 17 00:00:00 2001 From: Daniel Richards Date: Thu, 14 Feb 2019 18:10:19 +0800 Subject: [PATCH 02/52] Add background color controls to the container block Co-authored-by: Andrei Draganescu --- packages/block-library/src/container/edit.js | 36 +++++++++++++++++-- packages/block-library/src/container/index.js | 32 +++++++++++++++-- 2 files changed, 62 insertions(+), 6 deletions(-) diff --git a/packages/block-library/src/container/edit.js b/packages/block-library/src/container/edit.js index 016ca36b44efa..bceaead750ab8 100644 --- a/packages/block-library/src/container/edit.js +++ b/packages/block-library/src/container/edit.js @@ -1,18 +1,48 @@ +/** + * External dependencies + */ +import classnames from 'classnames'; /** * WordPress dependencies */ import { Fragment } from '@wordpress/element'; +import { __ } from '@wordpress/i18n'; import { InspectorControls, InnerBlocks, + PanelColorSettings, + withColors, } from '@wordpress/editor'; -export default function edit() { +function ContainerEdit( { setBackgroundColor, backgroundColor } ) { + const className = classnames( backgroundColor.class, { + 'has-background': backgroundColor.color, + } ); + + const styles = { + backgroundColor: backgroundColor.color, + }; + return ( - - + + + +
+ +
); } + +export default withColors( 'backgroundColor' )( ContainerEdit ); diff --git a/packages/block-library/src/container/index.js b/packages/block-library/src/container/index.js index b9a1f79022e26..93ffb621fa164 100644 --- a/packages/block-library/src/container/index.js +++ b/packages/block-library/src/container/index.js @@ -1,9 +1,14 @@ +/** + * External dependencies + */ +import classnames from 'classnames'; + /** * WordPress dependencies */ import { Path, SVG } from '@wordpress/components'; import { __ } from '@wordpress/i18n'; -import { InnerBlocks } from '@wordpress/editor'; +import { InnerBlocks, getColorClassName } from '@wordpress/editor'; /** * Internal dependencies @@ -27,9 +32,30 @@ export const settings = { align: [ 'wide', 'full' ], }, + attributes: { + backgroundColor: { + type: 'string', + }, + }, + edit, - save() { - return
; + 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 ( +
+ +
+ ); }, }; From e806dc1ce9271ae2c143f62786a7d5b5901f4ddb Mon Sep 17 00:00:00 2001 From: Daniel Richards Date: Fri, 15 Feb 2019 15:51:09 +0800 Subject: [PATCH 03/52] Add `anchor` support to container block Co-authored-by: Andrei Draganescu --- packages/block-library/src/container/index.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/packages/block-library/src/container/index.js b/packages/block-library/src/container/index.js index 93ffb621fa164..c6f8d1111215c 100644 --- a/packages/block-library/src/container/index.js +++ b/packages/block-library/src/container/index.js @@ -27,9 +27,10 @@ export const settings = { description: __( 'A container for other blocks.' ), supports: { - reusable: false, - html: false, align: [ 'wide', 'full' ], + anchor: true, + html: false, + reusable: false, }, attributes: { From d90b5956b0ecf5359ba9e888ff9aa70d0974b04d Mon Sep 17 00:00:00 2001 From: Daniel Richards Date: Mon, 18 Feb 2019 16:41:12 +0800 Subject: [PATCH 04/52] Add option for editing container block padding Co-authored-by: Andrei Draganescu --- packages/block-library/src/container/edit.js | 32 +++++++++++++------ packages/block-library/src/container/index.js | 7 +++- 2 files changed, 29 insertions(+), 10 deletions(-) diff --git a/packages/block-library/src/container/edit.js b/packages/block-library/src/container/edit.js index bceaead750ab8..2b949620429de 100644 --- a/packages/block-library/src/container/edit.js +++ b/packages/block-library/src/container/edit.js @@ -1,13 +1,12 @@ -/** - * External dependencies - */ -import classnames from 'classnames'; - /** * WordPress dependencies */ import { Fragment } from '@wordpress/element'; import { __ } from '@wordpress/i18n'; +import { + PanelBody, + RangeControl, +} from '@wordpress/components'; import { InspectorControls, InnerBlocks, @@ -15,13 +14,15 @@ import { withColors, } from '@wordpress/editor'; -function ContainerEdit( { setBackgroundColor, backgroundColor } ) { - const className = classnames( backgroundColor.class, { - 'has-background': backgroundColor.color, - } ); +const MIN_PADDING = 0; +const MAX_PADDING = 50; + +function ContainerEdit( { className, setBackgroundColor, backgroundColor, setAttributes, attributes } ) { + const { padding } = attributes; const styles = { backgroundColor: backgroundColor.color, + padding: padding ? `${ padding }%` : undefined, }; return ( @@ -37,6 +38,19 @@ function ContainerEdit( { setBackgroundColor, backgroundColor } ) { }, ] } /> + + { + setAttributes( { + padding: newPadding, + } ); + } } + min={ MIN_PADDING } + max={ MAX_PADDING } + /> +
diff --git a/packages/block-library/src/container/index.js b/packages/block-library/src/container/index.js index c6f8d1111215c..4fce4fa4fee26 100644 --- a/packages/block-library/src/container/index.js +++ b/packages/block-library/src/container/index.js @@ -37,12 +37,16 @@ export const settings = { backgroundColor: { type: 'string', }, + padding: { + type: 'number', + default: 0, + }, }, edit, save( { attributes } ) { - const { backgroundColor, customBackgroundColor } = attributes; + const { backgroundColor, customBackgroundColor, padding } = attributes; const backgroundClass = getColorClassName( 'background-color', backgroundColor ); const className = classnames( backgroundClass, { @@ -51,6 +55,7 @@ export const settings = { const styles = { backgroundColor: backgroundClass ? undefined : customBackgroundColor, + padding: padding ? `${ padding }%` : undefined, }; return ( From aeb77398781775ec0418ea2731ab5be5545fa315 Mon Sep 17 00:00:00 2001 From: Daniel Richards Date: Mon, 18 Feb 2019 17:19:54 +0800 Subject: [PATCH 05/52] Add padding with preset narrow and wide options Co-authored-by: Andrei Draganescu --- packages/block-library/src/container/edit.js | 36 ++++++++++--------- packages/block-library/src/container/index.js | 11 +++--- .../block-library/src/container/theme.scss | 9 +++++ 3 files changed, 33 insertions(+), 23 deletions(-) create mode 100644 packages/block-library/src/container/theme.scss diff --git a/packages/block-library/src/container/edit.js b/packages/block-library/src/container/edit.js index 2b949620429de..0d46b526935b6 100644 --- a/packages/block-library/src/container/edit.js +++ b/packages/block-library/src/container/edit.js @@ -1,3 +1,8 @@ +/** + * External dependencies + */ +import classnames from 'classnames'; + /** * WordPress dependencies */ @@ -5,7 +10,7 @@ import { Fragment } from '@wordpress/element'; import { __ } from '@wordpress/i18n'; import { PanelBody, - RangeControl, + SelectControl, } from '@wordpress/components'; import { InspectorControls, @@ -14,17 +19,15 @@ import { withColors, } from '@wordpress/editor'; -const MIN_PADDING = 0; -const MAX_PADDING = 50; - function ContainerEdit( { className, setBackgroundColor, backgroundColor, setAttributes, attributes } ) { - const { padding } = attributes; + const { paddingClassName } = attributes; const styles = { backgroundColor: backgroundColor.color, - padding: padding ? `${ padding }%` : undefined, }; + const classes = classnames( className, paddingClassName ); + return ( @@ -38,21 +41,20 @@ function ContainerEdit( { className, setBackgroundColor, backgroundColor, setAtt }, ] } /> - - + { - setAttributes( { - padding: newPadding, - } ); - } } - min={ MIN_PADDING } - max={ MAX_PADDING } + value={ paddingClassName } + options={ [ + { value: '', label: __( 'None' ) }, + { value: 'is-narrow-padding', label: __( 'Narrow' ) }, + { value: 'is-wide-padding', label: __( 'Wide' ) }, + ] } + onChange={ ( newClassName ) => setAttributes( { paddingClassName: newClassName } ) } /> -
+
diff --git a/packages/block-library/src/container/index.js b/packages/block-library/src/container/index.js index 4fce4fa4fee26..e14b6ef9eddb8 100644 --- a/packages/block-library/src/container/index.js +++ b/packages/block-library/src/container/index.js @@ -37,25 +37,24 @@ export const settings = { backgroundColor: { type: 'string', }, - padding: { - type: 'number', - default: 0, + paddingClassName: { + type: 'string', + default: '', }, }, edit, save( { attributes } ) { - const { backgroundColor, customBackgroundColor, padding } = attributes; + const { backgroundColor, customBackgroundColor, paddingClassName } = attributes; const backgroundClass = getColorClassName( 'background-color', backgroundColor ); - const className = classnames( backgroundClass, { + const className = classnames( backgroundClass, paddingClassName, { 'has-background': backgroundColor || customBackgroundColor, } ); const styles = { backgroundColor: backgroundClass ? undefined : customBackgroundColor, - padding: padding ? `${ padding }%` : undefined, }; return ( diff --git a/packages/block-library/src/container/theme.scss b/packages/block-library/src/container/theme.scss new file mode 100644 index 0000000000000..f931eea94133f --- /dev/null +++ b/packages/block-library/src/container/theme.scss @@ -0,0 +1,9 @@ +.wp-block-container { + &.is-narrow-padding { + padding: 0 1rem; + } + + &.is-wide-padding { + padding: 0 5rem; + } +} From d4a073e95c466c55129b359bb8553dd56fa12f49 Mon Sep 17 00:00:00 2001 From: Daniel Richards Date: Mon, 18 Feb 2019 17:59:26 +0800 Subject: [PATCH 06/52] Add padding toggle Co-authored-by: Andrei Draganescu --- packages/block-library/src/container/edit.js | 21 ++++++++----------- packages/block-library/src/container/index.js | 11 +++++----- .../block-library/src/container/theme.scss | 8 ++----- 3 files changed, 17 insertions(+), 23 deletions(-) diff --git a/packages/block-library/src/container/edit.js b/packages/block-library/src/container/edit.js index 0d46b526935b6..616f3b2735f79 100644 --- a/packages/block-library/src/container/edit.js +++ b/packages/block-library/src/container/edit.js @@ -10,7 +10,7 @@ import { Fragment } from '@wordpress/element'; import { __ } from '@wordpress/i18n'; import { PanelBody, - SelectControl, + ToggleControl, } from '@wordpress/components'; import { InspectorControls, @@ -20,13 +20,15 @@ import { } from '@wordpress/editor'; function ContainerEdit( { className, setBackgroundColor, backgroundColor, setAttributes, attributes } ) { - const { paddingClassName } = attributes; + const { hasPadding } = attributes; const styles = { backgroundColor: backgroundColor.color, }; - const classes = classnames( className, paddingClassName ); + const classes = classnames( className, { + 'has-padding': hasPadding, + } ); return ( @@ -42,15 +44,10 @@ function ContainerEdit( { className, setBackgroundColor, backgroundColor, setAtt ] } /> - setAttributes( { paddingClassName: newClassName } ) } + setAttributes( { hasPadding: value } ) } + checked={ hasPadding } /> diff --git a/packages/block-library/src/container/index.js b/packages/block-library/src/container/index.js index e14b6ef9eddb8..8fedc25c5c20f 100644 --- a/packages/block-library/src/container/index.js +++ b/packages/block-library/src/container/index.js @@ -37,20 +37,21 @@ export const settings = { backgroundColor: { type: 'string', }, - paddingClassName: { - type: 'string', - default: '', + hasPadding: { + type: 'boolean', + default: false, }, }, edit, save( { attributes } ) { - const { backgroundColor, customBackgroundColor, paddingClassName } = attributes; + const { backgroundColor, customBackgroundColor, hasPadding } = attributes; const backgroundClass = getColorClassName( 'background-color', backgroundColor ); - const className = classnames( backgroundClass, paddingClassName, { + const className = classnames( backgroundClass, { 'has-background': backgroundColor || customBackgroundColor, + 'has-padding': hasPadding, } ); const styles = { diff --git a/packages/block-library/src/container/theme.scss b/packages/block-library/src/container/theme.scss index f931eea94133f..9af9d071bd126 100644 --- a/packages/block-library/src/container/theme.scss +++ b/packages/block-library/src/container/theme.scss @@ -1,9 +1,5 @@ .wp-block-container { - &.is-narrow-padding { - padding: 0 1rem; - } - - &.is-wide-padding { - padding: 0 5rem; + &.has-padding { + padding: 0 2rem; } } From 1c3382c1f9d3883178a5d5e879217cb3ff9deae2 Mon Sep 17 00:00:00 2001 From: Daniel Richards Date: Mon, 18 Feb 2019 18:02:32 +0800 Subject: [PATCH 07/52] Ensure background color class name is set in block edit Co-authored-by: Andrei Draganescu --- packages/block-library/src/container/edit.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-library/src/container/edit.js b/packages/block-library/src/container/edit.js index 616f3b2735f79..65b619b92a917 100644 --- a/packages/block-library/src/container/edit.js +++ b/packages/block-library/src/container/edit.js @@ -26,7 +26,7 @@ function ContainerEdit( { className, setBackgroundColor, backgroundColor, setAtt backgroundColor: backgroundColor.color, }; - const classes = classnames( className, { + const classes = classnames( className, backgroundColor.class, { 'has-padding': hasPadding, } ); From 5c74f05f17dbc3816e93cfe83beb6224f964edfd Mon Sep 17 00:00:00 2001 From: Daniel Richards Date: Wed, 20 Feb 2019 16:11:17 +0800 Subject: [PATCH 08/52] Switch padding option to disable padding instead of enabling Co-authored-by: Andrei Draganescu --- packages/block-library/src/container/edit.js | 10 +++++----- packages/block-library/src/container/theme.scss | 6 ++++-- 2 files changed, 9 insertions(+), 7 deletions(-) diff --git a/packages/block-library/src/container/edit.js b/packages/block-library/src/container/edit.js index 65b619b92a917..7dcc10b2fcfed 100644 --- a/packages/block-library/src/container/edit.js +++ b/packages/block-library/src/container/edit.js @@ -20,14 +20,14 @@ import { } from '@wordpress/editor'; function ContainerEdit( { className, setBackgroundColor, backgroundColor, setAttributes, attributes } ) { - const { hasPadding } = attributes; + const { isWithoutPadding } = attributes; const styles = { backgroundColor: backgroundColor.color, }; const classes = classnames( className, backgroundColor.class, { - 'has-padding': hasPadding, + 'is-without-padding': isWithoutPadding, } ); return ( @@ -45,9 +45,9 @@ function ContainerEdit( { className, setBackgroundColor, backgroundColor, setAtt /> setAttributes( { hasPadding: value } ) } - checked={ hasPadding } + label={ isWithoutPadding ? __( 'No Padding' ) : __( 'Default Padding' ) } + onChange={ ( value ) => setAttributes( { isWithoutPadding: value } ) } + checked={ isWithoutPadding } /> diff --git a/packages/block-library/src/container/theme.scss b/packages/block-library/src/container/theme.scss index 9af9d071bd126..d7421ee4860d7 100644 --- a/packages/block-library/src/container/theme.scss +++ b/packages/block-library/src/container/theme.scss @@ -1,5 +1,7 @@ .wp-block-container { - &.has-padding { - padding: 0 2rem; + padding: 1rem 2rem; + + &.is-without-padding { + padding: 0; } } From e3bb63c0fa1620387b60377c8e4065691f5303c3 Mon Sep 17 00:00:00 2001 From: Daniel Richards Date: Wed, 20 Feb 2019 16:11:56 +0800 Subject: [PATCH 09/52] Set a default background color Co-authored-by: Andrei Draganescu --- packages/block-library/src/container/index.js | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/block-library/src/container/index.js b/packages/block-library/src/container/index.js index 8fedc25c5c20f..ee723c8495aea 100644 --- a/packages/block-library/src/container/index.js +++ b/packages/block-library/src/container/index.js @@ -36,6 +36,7 @@ export const settings = { attributes: { backgroundColor: { type: 'string', + default: 'primary', }, hasPadding: { type: 'boolean', From e4ff53335c1c4a6a0a4a982f8d0aacd8826790e6 Mon Sep 17 00:00:00 2001 From: Daniel Richards Date: Wed, 20 Feb 2019 17:05:37 +0800 Subject: [PATCH 10/52] Add e2e test for adding container block --- .../__snapshots__/container.test.js.snap | 9 ++++++++ .../e2e-tests/specs/blocks/container.test.js | 22 +++++++++++++++++++ 2 files changed, 31 insertions(+) create mode 100644 packages/e2e-tests/specs/blocks/__snapshots__/container.test.js.snap create mode 100644 packages/e2e-tests/specs/blocks/container.test.js diff --git a/packages/e2e-tests/specs/blocks/__snapshots__/container.test.js.snap b/packages/e2e-tests/specs/blocks/__snapshots__/container.test.js.snap new file mode 100644 index 0000000000000..8d341532e2364 --- /dev/null +++ b/packages/e2e-tests/specs/blocks/__snapshots__/container.test.js.snap @@ -0,0 +1,9 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Container can be created by using the block inserter 1`] = ` +" +
+

Container block

+
+" +`; diff --git a/packages/e2e-tests/specs/blocks/container.test.js b/packages/e2e-tests/specs/blocks/container.test.js new file mode 100644 index 0000000000000..b0ae7feca823c --- /dev/null +++ b/packages/e2e-tests/specs/blocks/container.test.js @@ -0,0 +1,22 @@ +/** + * WordPress dependencies + */ +import { + searchForBlock, + getEditedPostContent, + createNewPost, +} from '@wordpress/e2e-test-utils'; + +describe( 'Container', () => { + beforeEach( async () => { + await createNewPost(); + } ); + + it( 'can be created by using the block inserter', async () => { + await searchForBlock( 'Container' ); + await page.click( '.editor-block-list-item-container' ); + await page.keyboard.type( 'Container block' ); + + expect( await getEditedPostContent() ).toMatchSnapshot(); + } ); +} ); From 2ad9ee42ddba88bfc7b31b0ecd154f7c0447f500 Mon Sep 17 00:00:00 2001 From: Daniel Richards Date: Wed, 20 Feb 2019 17:09:28 +0800 Subject: [PATCH 11/52] Add e2e tests for the container block --- .../blocks/__snapshots__/container.test.js.snap | 10 +++++++++- packages/e2e-tests/specs/blocks/container.test.js | 12 +++++++++++- 2 files changed, 20 insertions(+), 2 deletions(-) diff --git a/packages/e2e-tests/specs/blocks/__snapshots__/container.test.js.snap b/packages/e2e-tests/specs/blocks/__snapshots__/container.test.js.snap index 8d341532e2364..990efd7de06d8 100644 --- a/packages/e2e-tests/specs/blocks/__snapshots__/container.test.js.snap +++ b/packages/e2e-tests/specs/blocks/__snapshots__/container.test.js.snap @@ -1,6 +1,14 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`Container can be created by using the block inserter 1`] = ` +exports[`Container can be created using the block inserter 1`] = ` +" +
+

Container block

+
+" +`; + +exports[`Container can be created using the slash inserter 1`] = ` "

Container block

diff --git a/packages/e2e-tests/specs/blocks/container.test.js b/packages/e2e-tests/specs/blocks/container.test.js index b0ae7feca823c..2418709d2432c 100644 --- a/packages/e2e-tests/specs/blocks/container.test.js +++ b/packages/e2e-tests/specs/blocks/container.test.js @@ -2,6 +2,7 @@ * WordPress dependencies */ import { + clickBlockAppender, searchForBlock, getEditedPostContent, createNewPost, @@ -12,11 +13,20 @@ describe( 'Container', () => { await createNewPost(); } ); - it( 'can be created by using the block inserter', async () => { + it( 'can be created using the block inserter', async () => { await searchForBlock( 'Container' ); await page.click( '.editor-block-list-item-container' ); await page.keyboard.type( 'Container block' ); expect( await getEditedPostContent() ).toMatchSnapshot(); } ); + + it( 'can be created using the slash inserter', async () => { + await clickBlockAppender(); + await page.keyboard.type( '/container' ); + await page.keyboard.press( 'Enter' ); + await page.keyboard.type( 'Container block' ); + + expect( await getEditedPostContent() ).toMatchSnapshot(); + } ); } ); From d31a55e202dc7dafbe5c7e93c7e643df7d3228d7 Mon Sep 17 00:00:00 2001 From: Andrei Draganescu Date: Wed, 20 Feb 2019 17:18:21 +0200 Subject: [PATCH 12/52] updated the default toggle text and behaviour for the container's padding and fixed a class naming problem on the front end --- packages/block-library/src/container/edit.js | 10 +++++----- packages/block-library/src/container/index.js | 8 ++++---- packages/block-library/src/container/theme.scss | 6 +++--- 3 files changed, 12 insertions(+), 12 deletions(-) diff --git a/packages/block-library/src/container/edit.js b/packages/block-library/src/container/edit.js index 7dcc10b2fcfed..3ca9f12d222d8 100644 --- a/packages/block-library/src/container/edit.js +++ b/packages/block-library/src/container/edit.js @@ -20,14 +20,14 @@ import { } from '@wordpress/editor'; function ContainerEdit( { className, setBackgroundColor, backgroundColor, setAttributes, attributes } ) { - const { isWithoutPadding } = attributes; + const { isWithPadding } = attributes; const styles = { backgroundColor: backgroundColor.color, }; const classes = classnames( className, backgroundColor.class, { - 'is-without-padding': isWithoutPadding, + 'is-with-padding': isWithPadding, } ); return ( @@ -45,9 +45,9 @@ function ContainerEdit( { className, setBackgroundColor, backgroundColor, setAtt /> setAttributes( { isWithoutPadding: value } ) } - checked={ isWithoutPadding } + label={ isWithPadding ? __( 'Use default padding' ) : __( 'Use no padding' ) } + onChange={ ( value ) => setAttributes( { isWithPadding: value } ) } + checked={ isWithPadding } /> diff --git a/packages/block-library/src/container/index.js b/packages/block-library/src/container/index.js index ee723c8495aea..816bf2fc831ae 100644 --- a/packages/block-library/src/container/index.js +++ b/packages/block-library/src/container/index.js @@ -38,21 +38,21 @@ export const settings = { type: 'string', default: 'primary', }, - hasPadding: { + isWithPadding: { type: 'boolean', - default: false, + default: true, }, }, edit, save( { attributes } ) { - const { backgroundColor, customBackgroundColor, hasPadding } = attributes; + const { backgroundColor, customBackgroundColor, isWithPadding } = attributes; const backgroundClass = getColorClassName( 'background-color', backgroundColor ); const className = classnames( backgroundClass, { 'has-background': backgroundColor || customBackgroundColor, - 'has-padding': hasPadding, + 'is-with-padding': isWithPadding, } ); const styles = { diff --git a/packages/block-library/src/container/theme.scss b/packages/block-library/src/container/theme.scss index d7421ee4860d7..6c532a9d9faef 100644 --- a/packages/block-library/src/container/theme.scss +++ b/packages/block-library/src/container/theme.scss @@ -1,7 +1,7 @@ .wp-block-container { - padding: 1rem 2rem; + padding: 0; - &.is-without-padding { - padding: 0; + &.is-with-padding { + padding: 1rem 2rem; } } From dc253f91f749e54d9234ed3950815b7d976043e8 Mon Sep 17 00:00:00 2001 From: Andrei Draganescu Date: Fri, 22 Feb 2019 11:34:11 +0200 Subject: [PATCH 13/52] removed the padding toogle and added default padding to the container block wrapper class --- packages/block-library/src/container/edit.js | 19 ++----------------- packages/block-library/src/container/index.js | 7 +------ .../block-library/src/container/theme.scss | 6 +----- 3 files changed, 4 insertions(+), 28 deletions(-) diff --git a/packages/block-library/src/container/edit.js b/packages/block-library/src/container/edit.js index 3ca9f12d222d8..882a592618678 100644 --- a/packages/block-library/src/container/edit.js +++ b/packages/block-library/src/container/edit.js @@ -8,10 +8,6 @@ import classnames from 'classnames'; */ import { Fragment } from '@wordpress/element'; import { __ } from '@wordpress/i18n'; -import { - PanelBody, - ToggleControl, -} from '@wordpress/components'; import { InspectorControls, InnerBlocks, @@ -19,16 +15,12 @@ import { withColors, } from '@wordpress/editor'; -function ContainerEdit( { className, setBackgroundColor, backgroundColor, setAttributes, attributes } ) { - const { isWithPadding } = attributes; - +function ContainerEdit( { className, setBackgroundColor, backgroundColor } ) { const styles = { backgroundColor: backgroundColor.color, }; - const classes = classnames( className, backgroundColor.class, { - 'is-with-padding': isWithPadding, - } ); + const classes = classnames( className, backgroundColor.class ); return ( @@ -43,13 +35,6 @@ function ContainerEdit( { className, setBackgroundColor, backgroundColor, setAtt }, ] } /> - - setAttributes( { isWithPadding: value } ) } - checked={ isWithPadding } - /> -
diff --git a/packages/block-library/src/container/index.js b/packages/block-library/src/container/index.js index 816bf2fc831ae..a03b899864181 100644 --- a/packages/block-library/src/container/index.js +++ b/packages/block-library/src/container/index.js @@ -38,21 +38,16 @@ export const settings = { type: 'string', default: 'primary', }, - isWithPadding: { - type: 'boolean', - default: true, - }, }, edit, save( { attributes } ) { - const { backgroundColor, customBackgroundColor, isWithPadding } = attributes; + const { backgroundColor, customBackgroundColor } = attributes; const backgroundClass = getColorClassName( 'background-color', backgroundColor ); const className = classnames( backgroundClass, { 'has-background': backgroundColor || customBackgroundColor, - 'is-with-padding': isWithPadding, } ); const styles = { diff --git a/packages/block-library/src/container/theme.scss b/packages/block-library/src/container/theme.scss index 6c532a9d9faef..01977fe6e5460 100644 --- a/packages/block-library/src/container/theme.scss +++ b/packages/block-library/src/container/theme.scss @@ -1,7 +1,3 @@ .wp-block-container { - padding: 0; - - &.is-with-padding { - padding: 1rem 2rem; - } + padding: 1rem 2rem; } From b691d94b546410c7b9c326c93308b99aaf44d76a Mon Sep 17 00:00:00 2001 From: Daniel Richards Date: Mon, 25 Feb 2019 12:02:06 +0800 Subject: [PATCH 14/52] Remove container block margin when a background is set. Allows consecutive container blocks to have no gap between them --- packages/block-library/src/container/theme.scss | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/packages/block-library/src/container/theme.scss b/packages/block-library/src/container/theme.scss index 01977fe6e5460..716583851acbb 100644 --- a/packages/block-library/src/container/theme.scss +++ b/packages/block-library/src/container/theme.scss @@ -1,3 +1,8 @@ .wp-block-container { padding: 1rem 2rem; + + &.has-background { + margin-top: 0; + margin-bottom: 0; + } } From 36efebaf2098dc4befb254e994203914347cc2bb Mon Sep 17 00:00:00 2001 From: Dave Smith Date: Fri, 1 Mar 2019 14:47:18 +0000 Subject: [PATCH 15/52] Adds keywords to aid in discoverability --- packages/block-library/src/container/index.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/block-library/src/container/index.js b/packages/block-library/src/container/index.js index a03b899864181..5e68e5ae2c55f 100644 --- a/packages/block-library/src/container/index.js +++ b/packages/block-library/src/container/index.js @@ -26,6 +26,8 @@ export const settings = { description: __( 'A container for other blocks.' ), + keywords: [ __( 'container' ), __( 'section' ), __( 'wrapper' ) ], + supports: { align: [ 'wide', 'full' ], anchor: true, From 551f5e95c7d4fa68eb41bd63fc52c6cb54a3e3eb Mon Sep 17 00:00:00 2001 From: Dave Smith Date: Wed, 13 Mar 2019 17:01:36 +0000 Subject: [PATCH 16/52] Removes default background As discussed this imposes on the Theme choices. We will make the Block more perceivable via: * https://github.com/WordPress/gutenberg/pull/14241 * https://github.com/WordPress/gutenberg/pull/14145 --- packages/block-library/src/container/index.js | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/block-library/src/container/index.js b/packages/block-library/src/container/index.js index 5e68e5ae2c55f..db7b5538ba010 100644 --- a/packages/block-library/src/container/index.js +++ b/packages/block-library/src/container/index.js @@ -38,7 +38,6 @@ export const settings = { attributes: { backgroundColor: { type: 'string', - default: 'primary', }, }, From 630881272a31c7cedbe0fb3bbd903acfc622ce08 Mon Sep 17 00:00:00 2001 From: Dave Smith Date: Wed, 13 Mar 2019 17:11:51 +0000 Subject: [PATCH 17/52] Renames Block from Container to Section MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit This is in response to the wealth of feedback (particularly from the Design team) that “Container” is not a good reflection of the purpose. Rather Section is the prefered option. See https://github.com/WordPress/gutenberg/pull/13964#issuecomment-471588969 --- packages/block-library/src/index.js | 4 ++-- packages/block-library/src/{container => section}/edit.js | 4 ++-- .../block-library/src/{container => section}/index.js | 8 ++++---- .../block-library/src/{container => section}/theme.scss | 2 +- packages/block-library/src/theme.scss | 1 + 5 files changed, 10 insertions(+), 9 deletions(-) rename packages/block-library/src/{container => section}/edit.js (85%) rename packages/block-library/src/{container => section}/index.js (89%) rename packages/block-library/src/{container => section}/theme.scss (79%) diff --git a/packages/block-library/src/index.js b/packages/block-library/src/index.js index d0ec6538bece2..23b8bb52d33f4 100644 --- a/packages/block-library/src/index.js +++ b/packages/block-library/src/index.js @@ -27,7 +27,6 @@ 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 cover from './cover'; import * as embed from './embed'; import * as file from './file'; @@ -45,6 +44,7 @@ import * as pullquote from './pullquote'; import * as reusableBlock from './block'; import * as rss from './rss'; import * as search from './search'; +import * as section from './section'; import * as separator from './separator'; import * as shortcode from './shortcode'; import * as spacer from './spacer'; @@ -89,7 +89,6 @@ export const registerCoreBlocks = () => { code, columns, column, - container, cover, embed, ...embed.common, @@ -108,6 +107,7 @@ export const registerCoreBlocks = () => { pullquote, rss, search, + section, separator, reusableBlock, spacer, diff --git a/packages/block-library/src/container/edit.js b/packages/block-library/src/section/edit.js similarity index 85% rename from packages/block-library/src/container/edit.js rename to packages/block-library/src/section/edit.js index 882a592618678..682218e0c9396 100644 --- a/packages/block-library/src/container/edit.js +++ b/packages/block-library/src/section/edit.js @@ -15,7 +15,7 @@ import { withColors, } from '@wordpress/editor'; -function ContainerEdit( { className, setBackgroundColor, backgroundColor } ) { +function SectionEdit( { className, setBackgroundColor, backgroundColor } ) { const styles = { backgroundColor: backgroundColor.color, }; @@ -43,4 +43,4 @@ function ContainerEdit( { className, setBackgroundColor, backgroundColor } ) { ); } -export default withColors( 'backgroundColor' )( ContainerEdit ); +export default withColors( 'backgroundColor' )( SectionEdit ); diff --git a/packages/block-library/src/container/index.js b/packages/block-library/src/section/index.js similarity index 89% rename from packages/block-library/src/container/index.js rename to packages/block-library/src/section/index.js index db7b5538ba010..ee6191e1df241 100644 --- a/packages/block-library/src/container/index.js +++ b/packages/block-library/src/section/index.js @@ -15,18 +15,18 @@ import { InnerBlocks, getColorClassName } from '@wordpress/editor'; */ import edit from './edit'; -export const name = 'core/container'; +export const name = 'core/section'; export const settings = { - title: __( 'Container' ), + title: __( 'Section' ), icon: , category: 'layout', - description: __( 'A container for other blocks.' ), + description: __( 'A wrapping section acting as a container for other blocks.' ), - keywords: [ __( 'container' ), __( 'section' ), __( 'wrapper' ) ], + keywords: [ __( 'container' ), __( 'section' ), __( 'wrapper' ), __( 'row' ) ], supports: { align: [ 'wide', 'full' ], diff --git a/packages/block-library/src/container/theme.scss b/packages/block-library/src/section/theme.scss similarity index 79% rename from packages/block-library/src/container/theme.scss rename to packages/block-library/src/section/theme.scss index 716583851acbb..6ef299c0c793d 100644 --- a/packages/block-library/src/container/theme.scss +++ b/packages/block-library/src/section/theme.scss @@ -1,4 +1,4 @@ -.wp-block-container { +.wp-block-section { padding: 1rem 2rem; &.has-background { diff --git a/packages/block-library/src/theme.scss b/packages/block-library/src/theme.scss index 5aa1b7281537c..501240a4a9bbd 100644 --- a/packages/block-library/src/theme.scss +++ b/packages/block-library/src/theme.scss @@ -6,6 +6,7 @@ @import "./pullquote/theme.scss"; @import "./quote/theme.scss"; @import "./search/theme.scss"; +@import "./section/theme.scss"; @import "./separator/theme.scss"; @import "./table/theme.scss"; @import "./video/theme.scss"; From 600e963290a97d54dae021fcf8cb72e7d94eaa67 Mon Sep 17 00:00:00 2001 From: Dave Smith Date: Thu, 14 Mar 2019 11:18:19 +0000 Subject: [PATCH 18/52] Utilise correct spacing variable for consistency --- packages/block-library/src/section/theme.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-library/src/section/theme.scss b/packages/block-library/src/section/theme.scss index 6ef299c0c793d..b44d32a8e3ff5 100644 --- a/packages/block-library/src/section/theme.scss +++ b/packages/block-library/src/section/theme.scss @@ -1,5 +1,5 @@ .wp-block-section { - padding: 1rem 2rem; + padding: $block-padding; &.has-background { margin-top: 0; From 99ea32f4740ddf07e72295d2c9c363babd6a79a3 Mon Sep 17 00:00:00 2001 From: Daniel Richards Date: Tue, 12 Mar 2019 17:53:27 +0900 Subject: [PATCH 19/52] Implement same padding rules as used in columns block for container block. Ensures block mover controls remain visible. --- packages/block-library/src/editor.scss | 1 + packages/block-library/src/section/editor.scss | 12 ++++++++++++ 2 files changed, 13 insertions(+) create mode 100644 packages/block-library/src/section/editor.scss diff --git a/packages/block-library/src/editor.scss b/packages/block-library/src/editor.scss index 8422d2c82571d..bc8bbd83911ad 100644 --- a/packages/block-library/src/editor.scss +++ b/packages/block-library/src/editor.scss @@ -25,6 +25,7 @@ @import "./quote/editor.scss"; @import "./rss/editor.scss"; @import "./search/editor.scss"; +@import "./section/editor.scss"; @import "./shortcode/editor.scss"; @import "./spacer/editor.scss"; @import "./subhead/editor.scss"; diff --git a/packages/block-library/src/section/editor.scss b/packages/block-library/src/section/editor.scss new file mode 100644 index 0000000000000..71f17372d6302 --- /dev/null +++ b/packages/block-library/src/section/editor.scss @@ -0,0 +1,12 @@ + +// These padding rules are similar to those defined in the columns block and ensure that +// block mover controls are on-screen when the block is full-width. +.editor-block-list__block[data-align="full"] .wp-block-section > .editor-inner-blocks { + padding-left: $block-padding; + padding-right: $block-padding; + + @include break-small() { + padding-left: $block-padding + $block-side-ui-width + $block-side-ui-clearance + $block-side-ui-clearance; + padding-right: $block-padding + $block-side-ui-width + $block-side-ui-clearance + $block-side-ui-clearance; + } +} From 3535363c80ec78af4b6487fa4169dfbf0931412b Mon Sep 17 00:00:00 2001 From: Daniel Richards Date: Fri, 15 Mar 2019 11:39:00 +0900 Subject: [PATCH 20/52] Resolve block validation error when custom background color used. Caused by customBackgroundColor not being defined as an attribute. --- packages/block-library/src/section/index.js | 3 +++ 1 file changed, 3 insertions(+) diff --git a/packages/block-library/src/section/index.js b/packages/block-library/src/section/index.js index ee6191e1df241..e42d6ce39763e 100644 --- a/packages/block-library/src/section/index.js +++ b/packages/block-library/src/section/index.js @@ -39,6 +39,9 @@ export const settings = { backgroundColor: { type: 'string', }, + customBackgroundColor: { + type: 'string', + }, }, edit, From 61234309030745e08de7bc8d4a4f9d925d680c48 Mon Sep 17 00:00:00 2001 From: Daniel Richards Date: Fri, 15 Mar 2019 11:47:55 +0900 Subject: [PATCH 21/52] Feature flag the section block --- packages/block-library/src/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-library/src/index.js b/packages/block-library/src/index.js index 23b8bb52d33f4..a116cac1ad631 100644 --- a/packages/block-library/src/index.js +++ b/packages/block-library/src/index.js @@ -107,7 +107,7 @@ export const registerCoreBlocks = () => { pullquote, rss, search, - section, + process.env.GUTENBERG_PHASE === 2 ? section : null, separator, reusableBlock, spacer, From 2ccfd83a0c2ece5c86f402939ec22069f71449a8 Mon Sep 17 00:00:00 2001 From: Daniel Richards Date: Fri, 15 Mar 2019 12:25:47 +0900 Subject: [PATCH 22/52] Update e2e tests with renamed section block --- .../blocks/__snapshots__/container.test.js.snap | 17 ----------------- .../blocks/__snapshots__/section.test.js.snap | 17 +++++++++++++++++ .../{container.test.js => section.test.js} | 12 ++++++------ 3 files changed, 23 insertions(+), 23 deletions(-) delete mode 100644 packages/e2e-tests/specs/blocks/__snapshots__/container.test.js.snap create mode 100644 packages/e2e-tests/specs/blocks/__snapshots__/section.test.js.snap rename packages/e2e-tests/specs/blocks/{container.test.js => section.test.js} (66%) diff --git a/packages/e2e-tests/specs/blocks/__snapshots__/container.test.js.snap b/packages/e2e-tests/specs/blocks/__snapshots__/container.test.js.snap deleted file mode 100644 index 990efd7de06d8..0000000000000 --- a/packages/e2e-tests/specs/blocks/__snapshots__/container.test.js.snap +++ /dev/null @@ -1,17 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`Container can be created using the block inserter 1`] = ` -" -
-

Container block

-
-" -`; - -exports[`Container can be created using the slash inserter 1`] = ` -" -
-

Container block

-
-" -`; diff --git a/packages/e2e-tests/specs/blocks/__snapshots__/section.test.js.snap b/packages/e2e-tests/specs/blocks/__snapshots__/section.test.js.snap new file mode 100644 index 0000000000000..1e36e894ba469 --- /dev/null +++ b/packages/e2e-tests/specs/blocks/__snapshots__/section.test.js.snap @@ -0,0 +1,17 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Section can be created using the block inserter 1`] = ` +" +
+

Section block

+
+" +`; + +exports[`Section can be created using the slash inserter 1`] = ` +" +
+

Section block

+
+" +`; diff --git a/packages/e2e-tests/specs/blocks/container.test.js b/packages/e2e-tests/specs/blocks/section.test.js similarity index 66% rename from packages/e2e-tests/specs/blocks/container.test.js rename to packages/e2e-tests/specs/blocks/section.test.js index 2418709d2432c..90ae574d0fcbe 100644 --- a/packages/e2e-tests/specs/blocks/container.test.js +++ b/packages/e2e-tests/specs/blocks/section.test.js @@ -8,24 +8,24 @@ import { createNewPost, } from '@wordpress/e2e-test-utils'; -describe( 'Container', () => { +describe( 'Section', () => { beforeEach( async () => { await createNewPost(); } ); it( 'can be created using the block inserter', async () => { - await searchForBlock( 'Container' ); - await page.click( '.editor-block-list-item-container' ); - await page.keyboard.type( 'Container block' ); + await searchForBlock( 'Section' ); + await page.click( '.editor-block-list-item-section' ); + await page.keyboard.type( 'Section block' ); expect( await getEditedPostContent() ).toMatchSnapshot(); } ); it( 'can be created using the slash inserter', async () => { await clickBlockAppender(); - await page.keyboard.type( '/container' ); + await page.keyboard.type( '/section' ); await page.keyboard.press( 'Enter' ); - await page.keyboard.type( 'Container block' ); + await page.keyboard.type( 'Section block' ); expect( await getEditedPostContent() ).toMatchSnapshot(); } ); From 7acf0bf6f3751e4fe17b41d521c7d7f30a1f9579 Mon Sep 17 00:00:00 2001 From: Daniel Richards Date: Fri, 15 Mar 2019 12:38:35 +0900 Subject: [PATCH 23/52] Add fixture for section block for full content test --- .../fixtures/blocks/core__section.html | 10 ++++ .../fixtures/blocks/core__section.json | 36 +++++++++++++++ .../fixtures/blocks/core__section.parsed.json | 46 +++++++++++++++++++ .../blocks/core__section.serialized.html | 9 ++++ 4 files changed, 101 insertions(+) create mode 100644 packages/e2e-tests/fixtures/blocks/core__section.html create mode 100644 packages/e2e-tests/fixtures/blocks/core__section.json create mode 100644 packages/e2e-tests/fixtures/blocks/core__section.parsed.json create mode 100644 packages/e2e-tests/fixtures/blocks/core__section.serialized.html diff --git a/packages/e2e-tests/fixtures/blocks/core__section.html b/packages/e2e-tests/fixtures/blocks/core__section.html new file mode 100644 index 0000000000000..cf21a46b87991 --- /dev/null +++ b/packages/e2e-tests/fixtures/blocks/core__section.html @@ -0,0 +1,10 @@ + +
+ +

This is a section block.

+ + + +

Section block content.

+
+ diff --git a/packages/e2e-tests/fixtures/blocks/core__section.json b/packages/e2e-tests/fixtures/blocks/core__section.json new file mode 100644 index 0000000000000..7f27655f472cd --- /dev/null +++ b/packages/e2e-tests/fixtures/blocks/core__section.json @@ -0,0 +1,36 @@ +[ + { + "clientId": "_clientId_0", + "name": "core/section", + "isValid": true, + "attributes": { + "backgroundColor": "secondary", + "align": "full" + }, + "innerBlocks": [ + { + "clientId": "_clientId_0", + "name": "core/paragraph", + "isValid": true, + "attributes": { + "content": "This is a section block.", + "dropCap": false + }, + "innerBlocks": [], + "originalContent": "

This is a section block.

" + }, + { + "clientId": "_clientId_1", + "name": "core/paragraph", + "isValid": true, + "attributes": { + "content": "Section block content.", + "dropCap": false + }, + "innerBlocks": [], + "originalContent": "

Section block content.

" + } + ], + "originalContent": "
\n\t\n\n\t
" + } +] diff --git a/packages/e2e-tests/fixtures/blocks/core__section.parsed.json b/packages/e2e-tests/fixtures/blocks/core__section.parsed.json new file mode 100644 index 0000000000000..7cdcbf0c9c6ec --- /dev/null +++ b/packages/e2e-tests/fixtures/blocks/core__section.parsed.json @@ -0,0 +1,46 @@ +[ + { + "blockName": "core/section", + "attrs": { + "backgroundColor": "secondary", + "align": "full" + }, + "innerBlocks": [ + { + "blockName": "core/paragraph", + "attrs": {}, + "innerBlocks": [], + "innerHTML": "\n\t

This is a section block.

\n\t", + "innerContent": [ + "\n\t

This is a section block.

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

Section block content.

\n\t", + "innerContent": [ + "\n\t

Section block content.

\n\t" + ] + } + ], + "innerHTML": "\n
\n\t\n\n\t
\n", + "innerContent": [ + "\n
\n\t", + null, + "\n\n\t", + null, + "
\n" + ] + }, + { + "blockName": null, + "attrs": {}, + "innerBlocks": [], + "innerHTML": "\n", + "innerContent": [ + "\n" + ] + } +] diff --git a/packages/e2e-tests/fixtures/blocks/core__section.serialized.html b/packages/e2e-tests/fixtures/blocks/core__section.serialized.html new file mode 100644 index 0000000000000..79f0c5eb54cc1 --- /dev/null +++ b/packages/e2e-tests/fixtures/blocks/core__section.serialized.html @@ -0,0 +1,9 @@ + +
+

This is a section block.

+ + + +

Section block content.

+
+ From f1dc3a9463663dd8767f99e0d45600ceb66f5be8 Mon Sep 17 00:00:00 2001 From: Dave Smith Date: Fri, 15 Mar 2019 19:32:11 +0000 Subject: [PATCH 24/52] Adds alignment for inner blocks that support alignment controls As per this comment https://github.com/WordPress/gutenberg/pull/13964#issuecomment-472912261 the Block needs the ability to align the blocks within the Section. Currently only a few Blocks support this but a wider change can be added that will enable all inner blocks to be aligned. The alignment rules are tested against the [Gutenberg Starter Theme](https://github.com/WordPress/gutenberg-starter-theme) as this enqueues no editor styles and conforms to the guidlines laid out [here](https://github.com/WordPress/gutenberg/pull/13964#issuecomment-472562800). @kjell has noted that Twenty Nineteen will need a patch for this, the styles for which have already been scoped out. Note that this removes the previous fix for the block mover controls which are now (again) hidden when Blocks are full width. @kjell has confirmed this is a known issue that needs to be solved globally and should not be addressed in this PR. --- .../block-library/src/section/editor.scss | 109 ++++++++++++++++-- 1 file changed, 101 insertions(+), 8 deletions(-) diff --git a/packages/block-library/src/section/editor.scss b/packages/block-library/src/section/editor.scss index 71f17372d6302..0e8e3793575a7 100644 --- a/packages/block-library/src/section/editor.scss +++ b/packages/block-library/src/section/editor.scss @@ -1,12 +1,105 @@ +$block-name: "section"; -// These padding rules are similar to those defined in the columns block and ensure that -// block mover controls are on-screen when the block is full-width. -.editor-block-list__block[data-align="full"] .wp-block-section > .editor-inner-blocks { - padding-left: $block-padding; - padding-right: $block-padding; +/** + * All Alignment Settings + */ +.wp-block[data-type="core/#{$block-name}"] { + + // Child: Wide Alignment + .wp-block[data-align="wide"] { + @include break-small() { + padding-left: $block-padding*2; + padding-right: $block-padding*2; + } + } + + // Child: Full Alignment + .editor-block-list__layout > .wp-block[data-align="full"] { + left: auto; + max-width: 100%; + margin-left: 0; + margin-right: 0; + padding-left: 0; + padding-right: 0; + + .editor-block-list__block-edit { + margin-left: 0; + margin-right: 0; + } + } +} + + +/** + * Section Wide Alignment + */ +.wp-block[data-type="core/#{$block-name}"][data-align="wide"] { + + // Wide + .wp-block[data-align="wide"] { + padding-left: $block-padding*2 + 2px; + padding-right: $block-padding*2 + 2px; + + @include break-medium() { + padding-left: $block-padding*2; + padding-right: $block-padding*2; + } + } +} + + +/** + * Section Full Alignment + */ +.wp-block[data-type="core/#{$block-name}"][data-align="full"] { + + .editor-inner-blocks { + padding-left: 46px; + padding-right: 46px; + } + + // Cancel edge padding when filling the viewport + .wp-block-#{$block-name} { + padding-left: 0; + padding-right: 0; + } + + // Standard + .wp-block:not([data-align="wide"]):not([data-align="full"]) { + @include break-wide() { + padding-left: 42px; + padding-right: 45px; + } + + @include break-xlarge() { + width: 100%; + } + } + + // Wide + .wp-block[data-align="wide"] { + width: 100%; + + @include break-small() { + padding-right: $block-padding*4 + 1px; + padding-left: $block-padding*4 + 1px; + } + + @include break-huge() { + padding-right: $block-padding*3 + 1px; + padding-left: $block-padding*3 + 1px; + } + + } + + // Full + .wp-block[data-align="full"] { + padding-right: 0; + padding-left: 0; + + width: calc(100% + 64px); + left: -32px; + max-width: none; - @include break-small() { - padding-left: $block-padding + $block-side-ui-width + $block-side-ui-clearance + $block-side-ui-clearance; - padding-right: $block-padding + $block-side-ui-width + $block-side-ui-clearance + $block-side-ui-clearance; } } From 1cd84d10cb4f6f56091571566f30295ae8dafbc4 Mon Sep 17 00:00:00 2001 From: Dave Smith Date: Tue, 19 Mar 2019 14:48:17 +0000 Subject: [PATCH 25/52] Fixes width of wide Media text Block within full width Section Block --- packages/block-library/src/section/editor.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/block-library/src/section/editor.scss b/packages/block-library/src/section/editor.scss index 0e8e3793575a7..2a848bf20db74 100644 --- a/packages/block-library/src/section/editor.scss +++ b/packages/block-library/src/section/editor.scss @@ -67,8 +67,8 @@ $block-name: "section"; // Standard .wp-block:not([data-align="wide"]):not([data-align="full"]) { @include break-wide() { - padding-left: 42px; - padding-right: 45px; + padding-left: $block-padding*3; + padding-right: $block-padding*3; } @include break-xlarge() { From ceebdbce50730ad502dde75cd1bec2977d86020f Mon Sep 17 00:00:00 2001 From: Dave Smith Date: Wed, 20 Mar 2019 13:53:15 +0000 Subject: [PATCH 26/52] Removes Block default padding Remove padding to ensure alignment is consistent with canvas by default. Plan to introduce an attribute to control this later. --- packages/block-library/src/section/theme.scss | 2 -- 1 file changed, 2 deletions(-) diff --git a/packages/block-library/src/section/theme.scss b/packages/block-library/src/section/theme.scss index b44d32a8e3ff5..fffc1a24df6cd 100644 --- a/packages/block-library/src/section/theme.scss +++ b/packages/block-library/src/section/theme.scss @@ -1,6 +1,4 @@ .wp-block-section { - padding: $block-padding; - &.has-background { margin-top: 0; margin-bottom: 0; From 5eb9b7c09209888d69a2ab34404e7dd7614b61a6 Mon Sep 17 00:00:00 2001 From: Dave Smith Date: Wed, 20 Mar 2019 13:54:47 +0000 Subject: [PATCH 27/52] Fixes alignment layout within Seciton Blocks for all alignable Block types Previously alignment CSS was too focused on images and had too many edge cases. Refactor to cater for all Block types and in turn simplified the CSS. --- .../block-library/src/columns/editor.scss | 14 --- .../block-library/src/section/editor.scss | 109 +++++------------- 2 files changed, 26 insertions(+), 97 deletions(-) diff --git a/packages/block-library/src/columns/editor.scss b/packages/block-library/src/columns/editor.scss index 4e8905f9bbca1..20897dd6aba62 100644 --- a/packages/block-library/src/columns/editor.scss +++ b/packages/block-library/src/columns/editor.scss @@ -19,20 +19,6 @@ } } -// Fullwide: show margin left/right to ensure there's room for the side UI. -// This is not a 1:1 preview with the front-end where these margins would presumably be zero. -// @todo This could be revisited, by for example showing this margin only when the parent block was selected first. -// Then at least an unselected columns block would be an accurate preview. -.editor-block-list__block[data-align="full"] .wp-block-columns > .editor-inner-blocks { - padding-left: $block-padding; - padding-right: $block-padding; - - @include break-small() { - padding-left: $block-padding + $block-padding + $block-side-ui-width + $block-side-ui-clearance + $block-side-ui-clearance; - padding-right: $block-padding + $block-padding + $block-side-ui-width + $block-side-ui-clearance + $block-side-ui-clearance; - } -} - .wp-block-columns { display: block; diff --git a/packages/block-library/src/section/editor.scss b/packages/block-library/src/section/editor.scss index 2a848bf20db74..3660862e9e5ec 100644 --- a/packages/block-library/src/section/editor.scss +++ b/packages/block-library/src/section/editor.scss @@ -1,105 +1,48 @@ $block-name: "section"; /** - * All Alignment Settings + * Section: All Alignment Settings */ .wp-block[data-type="core/#{$block-name}"] { + padding-left: 42px; + padding-right: 42px; - // Child: Wide Alignment - .wp-block[data-align="wide"] { - @include break-small() { - padding-left: $block-padding*2; - padding-right: $block-padding*2; - } - } - - // Child: Full Alignment - .editor-block-list__layout > .wp-block[data-align="full"] { - left: auto; - max-width: 100%; - margin-left: 0; - margin-right: 0; - padding-left: 0; - padding-right: 0; - - .editor-block-list__block-edit { - margin-left: 0; - margin-right: 0; - } - } -} - - -/** - * Section Wide Alignment - */ -.wp-block[data-type="core/#{$block-name}"][data-align="wide"] { - - // Wide - .wp-block[data-align="wide"] { - padding-left: $block-padding*2 + 2px; - padding-right: $block-padding*2 + 2px; - - @include break-medium() { - padding-left: $block-padding*2; - padding-right: $block-padding*2; - } + // Full Width Blocks + .wp-block[data-align="full"] { + padding-left: 58px; + padding-right: 58px; + margin-left: auto; + margin-right: auto; } } - /** - * Section Full Alignment + * Section: Full Width Alignment */ .wp-block[data-type="core/#{$block-name}"][data-align="full"] { - .editor-inner-blocks { - padding-left: 46px; - padding-right: 46px; + // First tier of InnerBlocks must act like the container of the standard canvas + > .editor-block-list__block-edit > div > .wp-block-section > .editor-inner-blocks { + padding-left: 56px; + padding-right: 56px; + margin-left: auto; + margin-right: auto; } - // Cancel edge padding when filling the viewport - .wp-block-#{$block-name} { - padding-left: 0; - padding-right: 0; - } - - // Standard - .wp-block:not([data-align="wide"]):not([data-align="full"]) { - @include break-wide() { - padding-left: $block-padding*3; - padding-right: $block-padding*3; - } - - @include break-xlarge() { - width: 100%; - } - } - - // Wide - .wp-block[data-align="wide"] { - width: 100%; - - @include break-small() { - padding-right: $block-padding*4 + 1px; - padding-left: $block-padding*4 + 1px; - } - - @include break-huge() { - padding-right: $block-padding*3 + 1px; - padding-left: $block-padding*3 + 1px; - } - - } - - // Full + // Full Width Blocks .wp-block[data-align="full"] { + + // we "pull" full width blocks out a little further when within a full width section padding-right: 0; padding-left: 0; - - width: calc(100% + 64px); - left: -32px; + width: calc(100% + 81px); + left: -41px; max-width: none; + // Allow to abutt the edges of the canvas + > .editor-block-list__block-edit { + margin-left: 0; + margin-right: 0; + } } } From 16716b9d7e854d96d00dc289cfed265fc8ed55c8 Mon Sep 17 00:00:00 2001 From: Dave Smith Date: Thu, 21 Mar 2019 10:33:49 +0000 Subject: [PATCH 28/52] Adds specificity required to only target immediate child Blocks of Section --- packages/block-library/src/section/editor.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/block-library/src/section/editor.scss b/packages/block-library/src/section/editor.scss index 3660862e9e5ec..83b216c94a861 100644 --- a/packages/block-library/src/section/editor.scss +++ b/packages/block-library/src/section/editor.scss @@ -8,7 +8,7 @@ $block-name: "section"; padding-right: 42px; // Full Width Blocks - .wp-block[data-align="full"] { + > .editor-block-list__block-edit > div > .wp-block-section > .editor-inner-blocks > .editor-block-list__layout > .wp-block[data-align="full"] { padding-left: 58px; padding-right: 58px; margin-left: auto; @@ -30,7 +30,7 @@ $block-name: "section"; } // Full Width Blocks - .wp-block[data-align="full"] { + > .editor-block-list__block-edit > div > .wp-block-section > .editor-inner-blocks > .editor-block-list__layout > .wp-block[data-align="full"] { // we "pull" full width blocks out a little further when within a full width section padding-right: 0; From 4e0cb9cbe421e5c18df039a3d332ee36ba50655b Mon Sep 17 00:00:00 2001 From: Dave Smith Date: Thu, 21 Mar 2019 10:35:09 +0000 Subject: [PATCH 29/52] Reintroduces padding on request --- packages/block-library/src/section/theme.scss | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/block-library/src/section/theme.scss b/packages/block-library/src/section/theme.scss index fffc1a24df6cd..b44d32a8e3ff5 100644 --- a/packages/block-library/src/section/theme.scss +++ b/packages/block-library/src/section/theme.scss @@ -1,4 +1,6 @@ .wp-block-section { + padding: $block-padding; + &.has-background { margin-top: 0; margin-bottom: 0; From 473ab59c70afba4f1d2113f9e8b5dc98d0451c88 Mon Sep 17 00:00:00 2001 From: Dave Smith Date: Thu, 21 Mar 2019 10:36:08 +0000 Subject: [PATCH 30/52] Adds fix to images as edge case Previously a 1px gap was seen on the sides of images nested within Section. --- packages/block-library/src/image/editor.scss | 6 ++++++ packages/block-library/src/section/editor.scss | 2 ++ 2 files changed, 8 insertions(+) diff --git a/packages/block-library/src/image/editor.scss b/packages/block-library/src/image/editor.scss index 86090e85eccbe..d49aeddd285e8 100644 --- a/packages/block-library/src/image/editor.scss +++ b/packages/block-library/src/image/editor.scss @@ -124,3 +124,9 @@ caption-side: bottom; } } + +// Edge case to spacing required for images when displayed within Section Block +.wp-block-section .editor-block-list__layout [data-type="core/image"] { + padding-left: $block-padding*3; + padding-right: $block-padding*3; +} diff --git a/packages/block-library/src/section/editor.scss b/packages/block-library/src/section/editor.scss index 83b216c94a861..04c61b960b52b 100644 --- a/packages/block-library/src/section/editor.scss +++ b/packages/block-library/src/section/editor.scss @@ -8,6 +8,7 @@ $block-name: "section"; padding-right: 42px; // Full Width Blocks + // specificity required to only target immediate child Blocks of Section > .editor-block-list__block-edit > div > .wp-block-section > .editor-inner-blocks > .editor-block-list__layout > .wp-block[data-align="full"] { padding-left: 58px; padding-right: 58px; @@ -30,6 +31,7 @@ $block-name: "section"; } // Full Width Blocks + // specificity required to only target immediate child Blocks of Section > .editor-block-list__block-edit > div > .wp-block-section > .editor-inner-blocks > .editor-block-list__layout > .wp-block[data-align="full"] { // we "pull" full width blocks out a little further when within a full width section From a6af16ab275cd0d16c6154494c6646d857c67de2 Mon Sep 17 00:00:00 2001 From: Dave Smith Date: Thu, 21 Mar 2019 11:58:11 +0000 Subject: [PATCH 31/52] Removes unwanted whitespace top/bottom of Block --- packages/block-library/src/section/editor.scss | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/packages/block-library/src/section/editor.scss b/packages/block-library/src/section/editor.scss index 04c61b960b52b..fdc34eadf7d08 100644 --- a/packages/block-library/src/section/editor.scss +++ b/packages/block-library/src/section/editor.scss @@ -7,6 +7,11 @@ $block-name: "section"; padding-left: 42px; padding-right: 42px; + > .editor-block-list__block-edit > div > .wp-block-section > .editor-inner-blocks { + margin-top: -32px; + margin-bottom: -32px; + } + // Full Width Blocks // specificity required to only target immediate child Blocks of Section > .editor-block-list__block-edit > div > .wp-block-section > .editor-inner-blocks > .editor-block-list__layout > .wp-block[data-align="full"] { From 908a8694bc3a19fcf64ea939d96ad8fffe01bb7d Mon Sep 17 00:00:00 2001 From: Dave Smith Date: Fri, 22 Mar 2019 09:36:23 +0000 Subject: [PATCH 32/52] Fixes wide child Block alignment within full width Section Resolves issue reported at https://github.com/WordPress/gutenberg/pull/13964#issuecomment-475455174 Also variablises the values. --- packages/block-library/src/section/editor.scss | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/packages/block-library/src/section/editor.scss b/packages/block-library/src/section/editor.scss index fdc34eadf7d08..2ed9fad13f61f 100644 --- a/packages/block-library/src/section/editor.scss +++ b/packages/block-library/src/section/editor.scss @@ -29,10 +29,11 @@ $block-name: "section"; // First tier of InnerBlocks must act like the container of the standard canvas > .editor-block-list__block-edit > div > .wp-block-section > .editor-inner-blocks { - padding-left: 56px; - padding-right: 56px; + margin-left: auto; margin-right: auto; + padding-left: $block-padding*3 + $block-spacing + $border-width; + padding-right: $block-padding*3 + $block-spacing + $border-width; } // Full Width Blocks From 2ba30a99b03c95b29c133bb2a61b9648a0058bbf Mon Sep 17 00:00:00 2001 From: Dave Smith Date: Fri, 22 Mar 2019 09:43:37 +0000 Subject: [PATCH 33/52] Fixes full width image alignment within full width Section. MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Alters values required to ensure full width image Block meets edges of editor canvas when within a full width Section Block. This removes the need for the “edge case” hack in the Image Block CSS which is good as this was never a good idea. Resolves https://github.com/WordPress/gutenberg/pull/13964#discussion_r268065794 --- packages/block-library/src/image/editor.scss | 6 ------ packages/block-library/src/section/editor.scss | 4 ++-- 2 files changed, 2 insertions(+), 8 deletions(-) diff --git a/packages/block-library/src/image/editor.scss b/packages/block-library/src/image/editor.scss index d49aeddd285e8..86090e85eccbe 100644 --- a/packages/block-library/src/image/editor.scss +++ b/packages/block-library/src/image/editor.scss @@ -124,9 +124,3 @@ caption-side: bottom; } } - -// Edge case to spacing required for images when displayed within Section Block -.wp-block-section .editor-block-list__layout [data-type="core/image"] { - padding-left: $block-padding*3; - padding-right: $block-padding*3; -} diff --git a/packages/block-library/src/section/editor.scss b/packages/block-library/src/section/editor.scss index 2ed9fad13f61f..3513c15526a29 100644 --- a/packages/block-library/src/section/editor.scss +++ b/packages/block-library/src/section/editor.scss @@ -43,8 +43,8 @@ $block-name: "section"; // we "pull" full width blocks out a little further when within a full width section padding-right: 0; padding-left: 0; - width: calc(100% + 81px); - left: -41px; + width: calc(100% + #{$block-padding*6 + $block-spacing*2}); + left: -#{$block-padding*3 + $block-spacing}; max-width: none; // Allow to abutt the edges of the canvas From 89d9939942c8ae223dabb130703b895db366f698 Mon Sep 17 00:00:00 2001 From: Dave Smith Date: Fri, 22 Mar 2019 09:46:01 +0000 Subject: [PATCH 34/52] Removes usage of Block name as Sass variable Not required. Resolves https://github.com/WordPress/gutenberg/pull/13964#discussion_r268066058 --- packages/block-library/src/section/editor.scss | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/packages/block-library/src/section/editor.scss b/packages/block-library/src/section/editor.scss index 3513c15526a29..b2cc7306a212d 100644 --- a/packages/block-library/src/section/editor.scss +++ b/packages/block-library/src/section/editor.scss @@ -1,9 +1,7 @@ -$block-name: "section"; - /** * Section: All Alignment Settings */ -.wp-block[data-type="core/#{$block-name}"] { +.wp-block[data-type="core/section"] { padding-left: 42px; padding-right: 42px; @@ -25,7 +23,7 @@ $block-name: "section"; /** * Section: Full Width Alignment */ -.wp-block[data-type="core/#{$block-name}"][data-align="full"] { +.wp-block[data-type="core/section"][data-align="full"] { // First tier of InnerBlocks must act like the container of the standard canvas > .editor-block-list__block-edit > div > .wp-block-section > .editor-inner-blocks { From fd8f45d5a6d65b53daf67729290581ec16aa73e6 Mon Sep 17 00:00:00 2001 From: Dave Smith Date: Fri, 22 Mar 2019 09:53:56 +0000 Subject: [PATCH 35/52] Updates hard coded spacing to variables --- packages/block-library/src/section/editor.scss | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/packages/block-library/src/section/editor.scss b/packages/block-library/src/section/editor.scss index b2cc7306a212d..06e8a29e8aac3 100644 --- a/packages/block-library/src/section/editor.scss +++ b/packages/block-library/src/section/editor.scss @@ -2,19 +2,19 @@ * Section: All Alignment Settings */ .wp-block[data-type="core/section"] { - padding-left: 42px; - padding-right: 42px; + padding-left: $block-padding*3; + padding-right: $block-padding*3; > .editor-block-list__block-edit > div > .wp-block-section > .editor-inner-blocks { - margin-top: -32px; - margin-bottom: -32px; + 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 Section > .editor-block-list__block-edit > div > .wp-block-section > .editor-inner-blocks > .editor-block-list__layout > .wp-block[data-align="full"] { - padding-left: 58px; - padding-right: 58px; + padding-left: $block-padding*4 + $block-spacing/2; // 58px + padding-right: $block-padding*4 + $block-spacing/2; // 58px margin-left: auto; margin-right: auto; } From 0ca88ff2b00c3c4624a6e0fcd48115a651bbbb7d Mon Sep 17 00:00:00 2001 From: Dave Smith Date: Fri, 22 Mar 2019 09:57:37 +0000 Subject: [PATCH 36/52] Fixes excessive Section Block padding on tiny screens Resolves https://github.com/WordPress/gutenberg/pull/13964#discussion_r267941930 --- packages/block-library/src/section/editor.scss | 16 +++++++++++----- 1 file changed, 11 insertions(+), 5 deletions(-) diff --git a/packages/block-library/src/section/editor.scss b/packages/block-library/src/section/editor.scss index 06e8a29e8aac3..60521caad0b6d 100644 --- a/packages/block-library/src/section/editor.scss +++ b/packages/block-library/src/section/editor.scss @@ -2,8 +2,10 @@ * Section: All Alignment Settings */ .wp-block[data-type="core/section"] { - padding-left: $block-padding*3; - padding-right: $block-padding*3; + @include break-small() { + padding-left: $block-padding*3; + padding-right: $block-padding*3; + } > .editor-block-list__block-edit > div > .wp-block-section > .editor-inner-blocks { margin-top: -#{$block-padding*2 + $block-spacing}; @@ -13,10 +15,15 @@ // Full Width Blocks // specificity required to only target immediate child Blocks of Section > .editor-block-list__block-edit > div > .wp-block-section > .editor-inner-blocks > .editor-block-list__layout > .wp-block[data-align="full"] { - padding-left: $block-padding*4 + $block-spacing/2; // 58px - padding-right: $block-padding*4 + $block-spacing/2; // 58px margin-left: auto; margin-right: auto; + padding-left: $block-padding*2; + padding-right: $block-padding*2; + + @include break-small() { + padding-left: $block-padding*4 + $block-spacing/2; // 58px + padding-right: $block-padding*4 + $block-spacing/2; // 58px + } } } @@ -27,7 +34,6 @@ // First tier of InnerBlocks must act like the container of the standard canvas > .editor-block-list__block-edit > div > .wp-block-section > .editor-inner-blocks { - margin-left: auto; margin-right: auto; padding-left: $block-padding*3 + $block-spacing + $border-width; From 1176f560ee24f9b20f12bd268ac39fb362c6c424 Mon Sep 17 00:00:00 2001 From: Dave Smith Date: Mon, 25 Mar 2019 10:58:07 +0000 Subject: [PATCH 37/52] Updates to add padding only when background is added to Block Addresses https://github.com/WordPress/gutenberg/pull/13964#issuecomment-475836562 --- packages/block-library/src/section/edit.js | 4 +++- packages/block-library/src/section/theme.scss | 2 +- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/packages/block-library/src/section/edit.js b/packages/block-library/src/section/edit.js index 682218e0c9396..e8ce004e52ebf 100644 --- a/packages/block-library/src/section/edit.js +++ b/packages/block-library/src/section/edit.js @@ -20,7 +20,9 @@ function SectionEdit( { className, setBackgroundColor, backgroundColor } ) { backgroundColor: backgroundColor.color, }; - const classes = classnames( className, backgroundColor.class ); + const classes = classnames( className, backgroundColor.class, { + 'has-background': !! backgroundColor.color, + } ); return ( diff --git a/packages/block-library/src/section/theme.scss b/packages/block-library/src/section/theme.scss index b44d32a8e3ff5..38bf6f106116c 100644 --- a/packages/block-library/src/section/theme.scss +++ b/packages/block-library/src/section/theme.scss @@ -1,7 +1,7 @@ .wp-block-section { - padding: $block-padding; &.has-background { + padding: $block-padding; margin-top: 0; margin-bottom: 0; } From 45565e8fe3792fce7cc3702254dc4a58c0a2c293 Mon Sep 17 00:00:00 2001 From: Dave Smith Date: Mon, 25 Mar 2019 14:27:30 +0000 Subject: [PATCH 38/52] Fixes Block overlap between adjacent Blocks when no background applied Resolves issue highlight at https://github.com/WordPress/gutenberg/pull/13964#issuecomment-476170650 --- packages/block-library/src/section/editor.scss | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/block-library/src/section/editor.scss b/packages/block-library/src/section/editor.scss index 60521caad0b6d..f39ffa122d1e7 100644 --- a/packages/block-library/src/section/editor.scss +++ b/packages/block-library/src/section/editor.scss @@ -7,7 +7,8 @@ padding-right: $block-padding*3; } - > .editor-block-list__block-edit > div > .wp-block-section > .editor-inner-blocks { + // Only applied when background is added to cancel out padding + > .editor-block-list__block-edit > div > .wp-block-section.has-background > .editor-inner-blocks { margin-top: -#{$block-padding*2 + $block-spacing}; margin-bottom: -#{$block-padding*2 + $block-spacing}; } From ad49f6d3fc860d761371aea1595e17935cd9c0e2 Mon Sep 17 00:00:00 2001 From: Dave Smith Date: Tue, 26 Mar 2019 10:46:05 +0000 Subject: [PATCH 39/52] Restores fix for Columns Block to ensure move/drag handles visible in full width Section Resolves https://github.com/WordPress/gutenberg/pull/13964#discussion_r269002700 --- packages/block-library/src/columns/editor.scss | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/packages/block-library/src/columns/editor.scss b/packages/block-library/src/columns/editor.scss index 20897dd6aba62..c795dab308558 100644 --- a/packages/block-library/src/columns/editor.scss +++ b/packages/block-library/src/columns/editor.scss @@ -19,6 +19,18 @@ } } +// Fullwide: show margin left/right to ensure there's room for the side UI. +// This is not a 1:1 preview with the front-end where these margins would presumably be zero. +.editor-block-list__block[data-align="full"] [data-type="core/columns"][data-align="full"] .wp-block-columns > .editor-inner-blocks { + padding-left: $block-padding; + padding-right: $block-padding; + + @include break-small() { + padding-left: $block-container-side-padding; + padding-right: $block-container-side-padding; + } +} + .wp-block-columns { display: block; From 8e383bb44be3b474ed2c406ade747e54143870a9 Mon Sep 17 00:00:00 2001 From: Dave Smith Date: Tue, 26 Mar 2019 17:06:20 +0000 Subject: [PATCH 40/52] Fixes 1px of overflow on full width blocks Resolves https://github.com/WordPress/gutenberg/pull/13964#issuecomment-476604013 --- packages/block-library/src/section/editor.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-library/src/section/editor.scss b/packages/block-library/src/section/editor.scss index f39ffa122d1e7..23b1bad96d07d 100644 --- a/packages/block-library/src/section/editor.scss +++ b/packages/block-library/src/section/editor.scss @@ -48,7 +48,7 @@ // we "pull" full width blocks out a little further when within a full width section padding-right: 0; padding-left: 0; - width: calc(100% + #{$block-padding*6 + $block-spacing*2}); + width: calc(100% + #{$block-padding*6 + $block-spacing*2 + $border-width}); left: -#{$block-padding*3 + $block-spacing}; max-width: none; From 664852376d7812faf3763eeed419a8a38f0da5d3 Mon Sep 17 00:00:00 2001 From: Dave Smith Date: Thu, 28 Mar 2019 09:47:26 +0000 Subject: [PATCH 41/52] Applies another fix to 1px overflow issue MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Full width Blocks were causing a 1px overflow and thus a hoz scrollbar to appear. Required adjustments to margins and the “pull/push” values (left/width) appleid to full width child Blocks --- packages/block-library/src/section/editor.scss | 12 +++++------- 1 file changed, 5 insertions(+), 7 deletions(-) diff --git a/packages/block-library/src/section/editor.scss b/packages/block-library/src/section/editor.scss index 23b1bad96d07d..53e6553cc9f73 100644 --- a/packages/block-library/src/section/editor.scss +++ b/packages/block-library/src/section/editor.scss @@ -2,11 +2,6 @@ * Section: All Alignment Settings */ .wp-block[data-type="core/section"] { - @include break-small() { - padding-left: $block-padding*3; - padding-right: $block-padding*3; - } - // Only applied when background is added to cancel out padding > .editor-block-list__block-edit > div > .wp-block-section.has-background > .editor-inner-blocks { margin-top: -#{$block-padding*2 + $block-spacing}; @@ -33,6 +28,9 @@ */ .wp-block[data-type="core/section"][data-align="full"] { + margin-left: -#{$block-container-side-padding - $border-width}; + margin-right: -#{$block-container-side-padding - $border-width}; + // First tier of InnerBlocks must act like the container of the standard canvas > .editor-block-list__block-edit > div > .wp-block-section > .editor-inner-blocks { margin-left: auto; @@ -48,8 +46,8 @@ // we "pull" full width blocks out a little further when within a full width section padding-right: 0; padding-left: 0; - width: calc(100% + #{$block-padding*6 + $block-spacing*2 + $border-width}); - left: -#{$block-padding*3 + $block-spacing}; + width: calc(100% + #{$block-padding*6 + $block-spacing*2 + $border-width*2}); + left: -#{$block-padding*3 + $block-spacing + $border-width}; max-width: none; // Allow to abutt the edges of the canvas From a7c6d362ea4481fe95db7c445d559143d1fe0c6f Mon Sep 17 00:00:00 2001 From: Dave Smith Date: Thu, 28 Mar 2019 10:30:36 +0000 Subject: [PATCH 42/52] Makes Block reusable Resolves part of https://github.com/WordPress/gutenberg/pull/13964#issuecomment-477532940 --- packages/block-library/src/section/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-library/src/section/index.js b/packages/block-library/src/section/index.js index e42d6ce39763e..748baff6d1785 100644 --- a/packages/block-library/src/section/index.js +++ b/packages/block-library/src/section/index.js @@ -32,7 +32,7 @@ export const settings = { align: [ 'wide', 'full' ], anchor: true, html: false, - reusable: false, + reusable: true, }, attributes: { From e3f30b15c48bc98d9e9e5d97fe8ff3f71025c1a1 Mon Sep 17 00:00:00 2001 From: Dave Smith Date: Thu, 28 Mar 2019 10:31:39 +0000 Subject: [PATCH 43/52] Removes feature flag Resolves https://github.com/WordPress/gutenberg/pull/13964#issuecomment-477532940 --- packages/block-library/src/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-library/src/index.js b/packages/block-library/src/index.js index a116cac1ad631..23b8bb52d33f4 100644 --- a/packages/block-library/src/index.js +++ b/packages/block-library/src/index.js @@ -107,7 +107,7 @@ export const registerCoreBlocks = () => { pullquote, rss, search, - process.env.GUTENBERG_PHASE === 2 ? section : null, + section, separator, reusableBlock, spacer, From 49353da39670276e4e4a7fac0d96c4b0a0523a69 Mon Sep 17 00:00:00 2001 From: Dave Smith Date: Thu, 28 Mar 2019 17:40:14 +0000 Subject: [PATCH 44/52] Fixes overflow issues MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Utilising width’s over 100% and negative left offsets were triggering hoz scrollbars. Also added a patch for the Block insertion point offsets which were triggering scrollbars due to their overhanging -1px indent. --- .../block-library/src/section/editor.scss | 25 +++++++++++++------ 1 file changed, 18 insertions(+), 7 deletions(-) diff --git a/packages/block-library/src/section/editor.scss b/packages/block-library/src/section/editor.scss index 53e6553cc9f73..17c72037c9bd0 100644 --- a/packages/block-library/src/section/editor.scss +++ b/packages/block-library/src/section/editor.scss @@ -2,6 +2,14 @@ * Section: All Alignment Settings */ .wp-block[data-type="core/section"] { + + // Ensure not rendering outside the element + // as -1px causes overflow-x scrollbars + .editor-block-list__insertion-point { + left: 0; + right: 0; + } + // Only applied when background is added to cancel out padding > .editor-block-list__block-edit > div > .wp-block-section.has-background > .editor-inner-blocks { margin-top: -#{$block-padding*2 + $block-spacing}; @@ -35,22 +43,25 @@ > .editor-block-list__block-edit > div > .wp-block-section > .editor-inner-blocks { margin-left: auto; margin-right: auto; - padding-left: $block-padding*3 + $block-spacing + $border-width; - padding-right: $block-padding*3 + $block-spacing + $border-width; + padding-left: 0; + padding-right: 0; + + > .editor-block-list__layout { + margin-left: 0; + margin-right: 0; + } } // Full Width Blocks // specificity required to only target immediate child Blocks of Section > .editor-block-list__block-edit > div > .wp-block-section > .editor-inner-blocks > .editor-block-list__layout > .wp-block[data-align="full"] { - - // we "pull" full width blocks out a little further when within a full width section padding-right: 0; padding-left: 0; - width: calc(100% + #{$block-padding*6 + $block-spacing*2 + $border-width*2}); - left: -#{$block-padding*3 + $block-spacing + $border-width}; + left: 0; + width: 100%; max-width: none; - // Allow to abutt the edges of the canvas + // Allow to be flush with the edges of the canvas > .editor-block-list__block-edit { margin-left: 0; margin-right: 0; From 91a147d62f6f447046dc77e0a7bec4ddcd033287 Mon Sep 17 00:00:00 2001 From: Dave Smith Date: Thu, 28 Mar 2019 17:57:43 +0000 Subject: [PATCH 45/52] Fix width of context toolbar causing overflow-x When the Section Block is highlighted so that the contextual toolbar is displayed it can cause hoz scrollbars to appear when the viewport becomes narrow. This is a very difficult bug to spot but careful testing will reveal it. The -1px compensates for the `left: 1px` value on the child element `.block-editor-block-toolbar`which is causing the scrollbar to appear. --- packages/edit-post/src/components/visual-editor/style.scss | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/packages/edit-post/src/components/visual-editor/style.scss b/packages/edit-post/src/components/visual-editor/style.scss index 1ba9ce38e0113..d0ec876d55315 100644 --- a/packages/edit-post/src/components/visual-editor/style.scss +++ b/packages/edit-post/src/components/visual-editor/style.scss @@ -31,11 +31,10 @@ // Use specific selector to not affect nested block toolbars. &[data-align="full"] > .block-editor-block-list__block-edit > .block-editor-block-contextual-toolbar { height: 0; // This collapses the container to an invisible element without margin. - width: 100%; + width: calc(100% - 1px); // -1px to account for inner element left: 1px value causing overflow-x scrollbars margin-left: 0; margin-right: 0; text-align: center; - // This float rule takes the toolbar out of the flow, without it having to be absolute positioned. // This is necessary because otherwise the mere presence of the toolbar can push down content. // Pairs with relative rule on line 49. From 127703255ce83a7b7f29b2d6b876216ddd132ab6 Mon Sep 17 00:00:00 2001 From: Dave Smith Date: Fri, 29 Mar 2019 09:34:25 +0000 Subject: [PATCH 46/52] Updates Section padding values to match paragraph Block Addresses https://github.com/WordPress/gutenberg/pull/13964#issuecomment-476930079 --- packages/block-library/src/section/theme.scss | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/block-library/src/section/theme.scss b/packages/block-library/src/section/theme.scss index 38bf6f106116c..fc3a7edd3bbcd 100644 --- a/packages/block-library/src/section/theme.scss +++ b/packages/block-library/src/section/theme.scss @@ -1,7 +1,9 @@ .wp-block-section { &.has-background { - padding: $block-padding; + // Matches paragraph Block padding + // Todo: normalise with variables + padding: 20px 30px; margin-top: 0; margin-bottom: 0; } From f890830584b7a8755dc43af9546e458f2d7305a8 Mon Sep 17 00:00:00 2001 From: Dave Smith Date: Fri, 29 Mar 2019 12:09:10 +0000 Subject: [PATCH 47/52] Fixes failing Block transforms e2e test --- packages/e2e-tests/fixtures/block-transforms.js | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/packages/e2e-tests/fixtures/block-transforms.js b/packages/e2e-tests/fixtures/block-transforms.js index bf1e218958c41..57687da9444f8 100644 --- a/packages/e2e-tests/fixtures/block-transforms.js +++ b/packages/e2e-tests/fixtures/block-transforms.js @@ -144,6 +144,10 @@ export const EXPECTED_TRANSFORMS = { originalBlock: 'Search', availableTransforms: [], }, + core__section: { + originalBlock: 'Section', + availableTransforms: [], + }, core__separator: { originalBlock: 'Separator', availableTransforms: [], From 225c5041cace631b233c1594a6d994bd434b7874 Mon Sep 17 00:00:00 2001 From: Dave Smith Date: Fri, 29 Mar 2019 13:58:27 +0000 Subject: [PATCH 48/52] Fixes Block overflowing off screen on <600px full width Section MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit This was due to negative margins being applied too early. Turns out these were mirroring a rule already in place within the editor and didn’t need to be there anyway. Removing fixes the issue as the core rules are applied at the correct media query. --- packages/block-library/src/section/editor.scss | 3 --- 1 file changed, 3 deletions(-) diff --git a/packages/block-library/src/section/editor.scss b/packages/block-library/src/section/editor.scss index 17c72037c9bd0..3cd1622bbd53e 100644 --- a/packages/block-library/src/section/editor.scss +++ b/packages/block-library/src/section/editor.scss @@ -36,9 +36,6 @@ */ .wp-block[data-type="core/section"][data-align="full"] { - margin-left: -#{$block-container-side-padding - $border-width}; - margin-right: -#{$block-container-side-padding - $border-width}; - // First tier of InnerBlocks must act like the container of the standard canvas > .editor-block-list__block-edit > div > .wp-block-section > .editor-inner-blocks { margin-left: auto; From 641758629237ea17d9988f7c1e5de4e1b0d2ffec Mon Sep 17 00:00:00 2001 From: Dave Smith Date: Fri, 29 Mar 2019 14:22:33 +0000 Subject: [PATCH 49/52] Fix to make full width children full width when background padding added When Section has a background padding is added meaning that full width child Blocks no longer span edge-to-edge. This fix adds a compensating factor to ensure an edge-to-edge layout within the editor. --- .../block-library/src/section/editor.scss | 20 +++++++++++++++++++ 1 file changed, 20 insertions(+) diff --git a/packages/block-library/src/section/editor.scss b/packages/block-library/src/section/editor.scss index 3cd1622bbd53e..f8cb11319ca0b 100644 --- a/packages/block-library/src/section/editor.scss +++ b/packages/block-library/src/section/editor.scss @@ -29,6 +29,20 @@ padding-right: $block-padding*4 + $block-spacing/2; // 58px } } + + // Full Width Blocks with a background (ie: has padding) + > .editor-block-list__block-edit > div > .wp-block-section.has-background > .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` + // added when the Block has a background set + margin-left: -30px; + + // 60px here is x2 the hoz padding from `theme.scss` added when + // the Block has a background set + // note: also duplicated below for full width Sections + width: calc(100% + 60px); + } } /** @@ -64,4 +78,10 @@ margin-right: 0; } } + + // Full Width Blocks with a background (ie: has padding) + // note: also duplicated above for all Section widths + > .editor-block-list__block-edit > div > .wp-block-section.has-background > .editor-inner-blocks > .editor-block-list__layout > .wp-block[data-align="full"] { + width: calc(100% + 60px); + } } From fcee5604ec4adb2694981a50e0ab39f1544bf1cf Mon Sep 17 00:00:00 2001 From: Dave Smith Date: Fri, 29 Mar 2019 14:51:23 +0000 Subject: [PATCH 50/52] Remove superflous Section keyword Resolves https://github.com/WordPress/gutenberg/pull/13964#discussion_r270442681 --- packages/block-library/src/section/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-library/src/section/index.js b/packages/block-library/src/section/index.js index 748baff6d1785..ec0b2e5c7ee9a 100644 --- a/packages/block-library/src/section/index.js +++ b/packages/block-library/src/section/index.js @@ -26,7 +26,7 @@ export const settings = { description: __( 'A wrapping section acting as a container for other blocks.' ), - keywords: [ __( 'container' ), __( 'section' ), __( 'wrapper' ), __( 'row' ) ], + keywords: [ __( 'container' ), __( 'wrapper' ), __( 'row' ) ], supports: { align: [ 'wide', 'full' ], From 2e19d9476a0da8ff7913edf2d5300f1fd6b64b1c Mon Sep 17 00:00:00 2001 From: Dave Smith Date: Fri, 29 Mar 2019 15:58:59 +0000 Subject: [PATCH 51/52] Removes superflous resuable setting MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit It’s already the default! Resolves https://github.com/WordPress/gutenberg/pull/13964#discussion_r270445852 --- packages/block-library/src/section/index.js | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/block-library/src/section/index.js b/packages/block-library/src/section/index.js index ec0b2e5c7ee9a..747c50964996c 100644 --- a/packages/block-library/src/section/index.js +++ b/packages/block-library/src/section/index.js @@ -32,7 +32,6 @@ export const settings = { align: [ 'wide', 'full' ], anchor: true, html: false, - reusable: true, }, attributes: { From 004741573717dbf3a8c8b943dc32509d9e1a0b31 Mon Sep 17 00:00:00 2001 From: Dave Smith Date: Mon, 1 Apr 2019 10:52:46 +0100 Subject: [PATCH 52/52] Updates to use `block-editor` package and avoid proxy Resolves https://github.com/WordPress/gutenberg/pull/13964#discussion_r270786647 --- packages/block-library/src/section/edit.js | 2 +- packages/block-library/src/section/index.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/block-library/src/section/edit.js b/packages/block-library/src/section/edit.js index e8ce004e52ebf..fcf17c40c48bc 100644 --- a/packages/block-library/src/section/edit.js +++ b/packages/block-library/src/section/edit.js @@ -13,7 +13,7 @@ import { InnerBlocks, PanelColorSettings, withColors, -} from '@wordpress/editor'; +} from '@wordpress/block-editor'; function SectionEdit( { className, setBackgroundColor, backgroundColor } ) { const styles = { diff --git a/packages/block-library/src/section/index.js b/packages/block-library/src/section/index.js index 747c50964996c..d119bfa324a4d 100644 --- a/packages/block-library/src/section/index.js +++ b/packages/block-library/src/section/index.js @@ -8,7 +8,7 @@ import classnames from 'classnames'; */ import { Path, SVG } from '@wordpress/components'; import { __ } from '@wordpress/i18n'; -import { InnerBlocks, getColorClassName } from '@wordpress/editor'; +import { InnerBlocks, getColorClassName } from '@wordpress/block-editor'; /** * Internal dependencies