From d9240a80d42ed44089f44c7991e69709713e39cb Mon Sep 17 00:00:00 2001 From: Dave Smith Date: Fri, 15 Feb 2019 17:20:30 +0000 Subject: [PATCH 01/47] Adds ability to valign all the columns via parent Proof of concept demonstrating ability to change the valignment of columns with a parent column Block --- packages/block-library/src/columns/index.js | 61 +++++++++++++++++-- packages/block-library/src/columns/style.scss | 14 +++++ 2 files changed, 69 insertions(+), 6 deletions(-) diff --git a/packages/block-library/src/columns/index.js b/packages/block-library/src/columns/index.js index eabd06e0e5ae2..af813a9dd9cbb 100644 --- a/packages/block-library/src/columns/index.js +++ b/packages/block-library/src/columns/index.js @@ -9,12 +9,20 @@ import memoize from 'memize'; * WordPress dependencies */ import { __ } from '@wordpress/i18n'; -import { PanelBody, RangeControl, G, SVG, Path } from '@wordpress/components'; +import { + PanelBody, + RangeControl, + G, + SVG, + Path, + Toolbar, +} from '@wordpress/components'; import { Fragment } from '@wordpress/element'; import { createBlock } from '@wordpress/blocks'; import { InspectorControls, InnerBlocks, + BlockControls, } from '@wordpress/block-editor'; /** @@ -79,6 +87,10 @@ export const settings = { type: 'number', default: 2, }, + verticalAlignment: { + type: 'string', + default: 'top', + }, }, description: __( 'Add a block that displays content in multiple columns, then add whatever content blocks you’d like.' ), @@ -143,10 +155,15 @@ export const settings = { ]; }, save( { attributes } ) { - const { columns } = attributes; + const { columns, verticalAlignment } = attributes; + + const wrapperClasses = classnames( { + [ `has-${ columns }-columns` ]: true, + [ `is-aligned-${ verticalAlignment }` ]: true, + } ); return ( -
+
); @@ -155,9 +172,30 @@ export const settings = { ], edit( { attributes, setAttributes, className } ) { - const { columns } = attributes; + const { columns, verticalAlignment } = attributes; const classes = classnames( className, `has-${ columns }-columns` ); + const toolbarControls = [ + { + icon: 'arrow-up-alt2', + title: 'V-align columns Top', + isActive: verticalAlignment === 'top', + onClick: () => setAttributes( { verticalAlignment: 'top' } ), + }, + { + icon: 'minus', + title: 'V-align columns Middle', + isActive: verticalAlignment === 'center', + onClick: () => setAttributes( { verticalAlignment: 'center' } ), + }, + { + icon: 'arrow-down-alt2', + title: 'V-align columns Bottom', + isActive: verticalAlignment === 'bottom', + onClick: () => setAttributes( { verticalAlignment: 'bottom' } ), + }, + ]; + return ( @@ -176,6 +214,13 @@ export const settings = { /> + + + + +
+
); diff --git a/packages/block-library/src/columns/style.scss b/packages/block-library/src/columns/style.scss index 00322b0afe799..60a57c92dcca0 100644 --- a/packages/block-library/src/columns/style.scss +++ b/packages/block-library/src/columns/style.scss @@ -44,3 +44,17 @@ } } } + +.wp-block-columns { + &.is-vertically-aligned-top { + align-items: flex-start; + } + + &.is-vertically-aligned-center { + align-items: center; + } + + &.is-vertically-aligned-bottom { + align-items: flex-end; + } +} From a2293a259eb92ce1e33fcba14d3ad692bc27dd89 Mon Sep 17 00:00:00 2001 From: Dave Smith Date: Fri, 15 Feb 2019 17:44:33 +0000 Subject: [PATCH 02/47] Adds ability to v-align individual Columns --- packages/block-library/src/columns/column.js | 64 +++++++++++++++++-- packages/block-library/src/columns/index.js | 2 +- packages/block-library/src/columns/style.scss | 20 +++++- 3 files changed, 76 insertions(+), 10 deletions(-) diff --git a/packages/block-library/src/columns/column.js b/packages/block-library/src/columns/column.js index b593f3ee06134..2ead04e179e75 100644 --- a/packages/block-library/src/columns/column.js +++ b/packages/block-library/src/columns/column.js @@ -1,9 +1,13 @@ /** * WordPress dependencies */ -import { Path, SVG } from '@wordpress/components'; +/** + * External dependencies + */ +import classnames from 'classnames'; +import { Path, SVG, Toolbar } from '@wordpress/components'; import { __ } from '@wordpress/i18n'; -import { InnerBlocks } from '@wordpress/block-editor'; +import { InnerBlocks, BlockControls } from '@wordpress/block-editor'; export const name = 'core/column'; @@ -18,17 +22,65 @@ export const settings = { category: 'common', + attributes: { + verticalAlignment: { + type: 'string', + default: 'top', + }, + }, + supports: { inserter: false, reusable: false, html: false, }, - edit() { - return ; + edit( { attributes, setAttributes, isSelected } ) { + const toolbarControls = [ + { + icon: 'arrow-up-alt2', + title: 'V-align column Top', + isActive: attributes.verticalAlignment === 'top', + onClick: () => setAttributes( { verticalAlignment: 'top' } ), + }, + { + icon: 'minus', + title: 'V-align column Middle', + isActive: attributes.verticalAlignment === 'center', + onClick: () => setAttributes( { verticalAlignment: 'center' } ), + }, + { + icon: 'arrow-down-alt2', + title: 'V-align column Bottom', + isActive: attributes.verticalAlignment === 'bottom', + onClick: () => setAttributes( { verticalAlignment: 'bottom' } ), + }, + ]; + + const classes = classnames( { + 'block-core-columns': true, + 'is-selected': isSelected, + } ); + + return ( +
+ + + + +
+ ); }, - save() { - return
; + save( { attributes } ) { + const { verticalAlignment } = attributes; + const wrapperClasses = classnames( { + [ `is-vertically-aligned-${ verticalAlignment }` ]: true, + } ); + return ( +
+ +
+ ); }, }; diff --git a/packages/block-library/src/columns/index.js b/packages/block-library/src/columns/index.js index af813a9dd9cbb..673bd65a40836 100644 --- a/packages/block-library/src/columns/index.js +++ b/packages/block-library/src/columns/index.js @@ -235,7 +235,7 @@ export const settings = { const { columns, verticalAlignment } = attributes; const wrapperClasses = classnames( { [ `has-${ columns }-columns` ]: true, - [ `is-vertically-aligned-${ verticalAlignment }` ]: true, + [ `are-vertically-aligned-${ verticalAlignment }` ]: true, } ); return ( diff --git a/packages/block-library/src/columns/style.scss b/packages/block-library/src/columns/style.scss index 60a57c92dcca0..c6978a741a487 100644 --- a/packages/block-library/src/columns/style.scss +++ b/packages/block-library/src/columns/style.scss @@ -46,15 +46,29 @@ } .wp-block-columns { - &.is-vertically-aligned-top { + &.are-vertically-aligned-top { align-items: flex-start; } - &.is-vertically-aligned-center { + &.are-vertically-aligned-center { align-items: center; } - &.is-vertically-aligned-bottom { + &.are-vertically-aligned-bottom { align-items: flex-end; } } + +.wp-block-column { + &.is-vertically-aligned-top { + align-self: flex-start; + } + + &.is-vertically-aligned-center { + align-self: center; + } + + &.is-vertically-aligned-bottom { + align-self: flex-end; + } +} From 1f3acbf931c1538612cd5357972c0c938b7b50aa Mon Sep 17 00:00:00 2001 From: Dave Smith Date: Mon, 18 Feb 2019 10:37:55 +0000 Subject: [PATCH 03/47] Adds ability to select individual Column Blocks to access Block Toolbar MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Previously the ability to select an individual Column Block was disabled via CSS. This was because the Column itself was just a passthrough element with no UI or Tools of its own. Now we’ve introduced the v-align toolbar on the Column the Block needs to be selectable. --- .../block-library/src/columns/editor.scss | 39 +------------------ packages/block-library/src/columns/style.scss | 6 +++ 2 files changed, 7 insertions(+), 38 deletions(-) diff --git a/packages/block-library/src/columns/editor.scss b/packages/block-library/src/columns/editor.scss index 2f316ef347154..5baca60cafb65 100644 --- a/packages/block-library/src/columns/editor.scss +++ b/packages/block-library/src/columns/editor.scss @@ -45,20 +45,7 @@ flex-direction: column; flex: 1; - // The Column block is a child of the Columns block and is mostly a passthrough container. - // Therefore it shouldn't add additional paddings and margins, so we reset these, and compensate for margins. - // @todo In the future, if a passthrough feature lands, it would be good to apply these rules to such an element in a more generic way. - > .block-editor-block-list__block-edit > div > .block-editor-inner-blocks { - margin-top: -$block-padding - $block-padding; - margin-bottom: -$block-padding - $block-padding; - } - - > .block-editor-block-list__block-edit { - margin-top: 0; - margin-bottom: 0; - } - - // Extend the passthrough concept to the block paddings, which we zero out. + // Remove Block "padding" so individual Column is flush with parent Columns > .block-editor-block-list__block-edit::before { left: 0; right: 0; @@ -111,27 +98,3 @@ } } } - -// In absence of making the individual columns resizable, we prevent them from being clickable. -// This makes them less fiddly. @todo: This should be revisited as the interface is refined. -.wp-block-columns [data-type="core/column"] { - pointer-events: none; - - // The empty state of a columns block has the default appenders. - // Since those appenders are not blocks, the parent, actual block, appears "hovered" when hovering the appenders. - // Because the column shouldn't be hovered as part of this temporary passthrough, we unset the hover style. - &.is-hovered { - > .block-editor-block-list__block-edit::before { - content: none; - } - - .block-editor-block-list__breadcrumb { - display: none; - } - } -} - -// This selector re-enables clicking on any child of a column block. -:not(.components-disabled) > .wp-block-columns > .block-editor-inner-blocks > .block-editor-block-list__layout > [data-type="core/column"] > .block-editor-block-list__block-edit > * { - pointer-events: all; -} diff --git a/packages/block-library/src/columns/style.scss b/packages/block-library/src/columns/style.scss index c6978a741a487..44c982a07a5a3 100644 --- a/packages/block-library/src/columns/style.scss +++ b/packages/block-library/src/columns/style.scss @@ -45,6 +45,9 @@ } } +/** + * All Columns Alignment + */ .wp-block-columns { &.are-vertically-aligned-top { align-items: flex-start; @@ -59,6 +62,9 @@ } } +/** + * Individual Column Alignment + */ .wp-block-column { &.is-vertically-aligned-top { align-self: flex-start; From ea81e28aaed10c97da3210f1bcc076b474fcf7e8 Mon Sep 17 00:00:00 2001 From: Dave Smith Date: Mon, 18 Feb 2019 10:53:08 +0000 Subject: [PATCH 04/47] Adds Material UI icons @thomasguillot recommended using Material UI icons. Added dedicated icons file and implemented. --- packages/block-library/src/columns/column.js | 24 +++++++++++------- packages/block-library/src/columns/icons.js | 26 ++++++++++++++++++++ 2 files changed, 41 insertions(+), 9 deletions(-) create mode 100644 packages/block-library/src/columns/icons.js diff --git a/packages/block-library/src/columns/column.js b/packages/block-library/src/columns/column.js index 2ead04e179e75..ae63928b5fc37 100644 --- a/packages/block-library/src/columns/column.js +++ b/packages/block-library/src/columns/column.js @@ -1,14 +1,20 @@ -/** - * WordPress dependencies - */ /** * External dependencies */ import classnames from 'classnames'; + +/** + * WordPress dependencies + */ import { Path, SVG, Toolbar } from '@wordpress/components'; import { __ } from '@wordpress/i18n'; import { InnerBlocks, BlockControls } from '@wordpress/block-editor'; +/** + * Internal dependencies + */ +import { valignTop, valignCenter, valignBottom } from './icons'; + export const name = 'core/column'; export const settings = { @@ -38,20 +44,20 @@ export const settings = { edit( { attributes, setAttributes, isSelected } ) { const toolbarControls = [ { - icon: 'arrow-up-alt2', - title: 'V-align column Top', + icon: valignTop, + title: 'V-align Top', isActive: attributes.verticalAlignment === 'top', onClick: () => setAttributes( { verticalAlignment: 'top' } ), }, { - icon: 'minus', - title: 'V-align column Middle', + icon: valignCenter, + title: 'V-align Middle', isActive: attributes.verticalAlignment === 'center', onClick: () => setAttributes( { verticalAlignment: 'center' } ), }, { - icon: 'arrow-down-alt2', - title: 'V-align column Bottom', + icon: valignBottom, + title: 'V-align Bottom', isActive: attributes.verticalAlignment === 'bottom', onClick: () => setAttributes( { verticalAlignment: 'bottom' } ), }, diff --git a/packages/block-library/src/columns/icons.js b/packages/block-library/src/columns/icons.js new file mode 100644 index 0000000000000..010035ab4ec2c --- /dev/null +++ b/packages/block-library/src/columns/icons.js @@ -0,0 +1,26 @@ +/** + * WordPress dependencies + */ +import { Path, SVG } from '@wordpress/components'; + +export const valignBottom = ( + + + + +); + +export const valignCenter = ( + + + + +); + +export const valignTop = ( + + + + +); From 964ea0048974015402cacfeddfc150fbfc30083f Mon Sep 17 00:00:00 2001 From: Dave Smith Date: Mon, 18 Feb 2019 11:01:22 +0000 Subject: [PATCH 05/47] Updates to add i18n to text strings Ensure all text strings are translatable. Also reuse icon defs in parent Columns Block alignment settings --- packages/block-library/src/columns/column.js | 8 ++++---- packages/block-library/src/columns/index.js | 19 ++++++++++++------- 2 files changed, 16 insertions(+), 11 deletions(-) diff --git a/packages/block-library/src/columns/column.js b/packages/block-library/src/columns/column.js index ae63928b5fc37..e3f835751f537 100644 --- a/packages/block-library/src/columns/column.js +++ b/packages/block-library/src/columns/column.js @@ -7,7 +7,7 @@ import classnames from 'classnames'; * WordPress dependencies */ import { Path, SVG, Toolbar } from '@wordpress/components'; -import { __ } from '@wordpress/i18n'; +import { __, _x } from '@wordpress/i18n'; import { InnerBlocks, BlockControls } from '@wordpress/block-editor'; /** @@ -45,19 +45,19 @@ export const settings = { const toolbarControls = [ { icon: valignTop, - title: 'V-align Top', + title: _x( 'V-align Top', 'Block vertical alignment setting' ), isActive: attributes.verticalAlignment === 'top', onClick: () => setAttributes( { verticalAlignment: 'top' } ), }, { icon: valignCenter, - title: 'V-align Middle', + title: _x( 'V-align Middle', 'Block vertical alignment setting' ), isActive: attributes.verticalAlignment === 'center', onClick: () => setAttributes( { verticalAlignment: 'center' } ), }, { icon: valignBottom, - title: 'V-align Bottom', + title: _x( 'V-align Bottom', 'Block vertical alignment setting' ), isActive: attributes.verticalAlignment === 'bottom', onClick: () => setAttributes( { verticalAlignment: 'bottom' } ), }, diff --git a/packages/block-library/src/columns/index.js b/packages/block-library/src/columns/index.js index 673bd65a40836..6264803ab30c2 100644 --- a/packages/block-library/src/columns/index.js +++ b/packages/block-library/src/columns/index.js @@ -8,7 +8,7 @@ import memoize from 'memize'; /** * WordPress dependencies */ -import { __ } from '@wordpress/i18n'; +import { __, _x } from '@wordpress/i18n'; import { PanelBody, RangeControl, @@ -25,6 +25,11 @@ import { BlockControls, } from '@wordpress/block-editor'; +/** + * Internal dependencies + */ +import { valignTop, valignCenter, valignBottom } from './icons'; + /** * Allowed blocks constant is passed to InnerBlocks precisely as specified here. * The contents of the array should never change. @@ -177,20 +182,20 @@ export const settings = { const toolbarControls = [ { - icon: 'arrow-up-alt2', - title: 'V-align columns Top', + icon: valignTop, + title: _x( 'V-align all Columns to Top', 'Block vertical alignment setting' ), isActive: verticalAlignment === 'top', onClick: () => setAttributes( { verticalAlignment: 'top' } ), }, { - icon: 'minus', - title: 'V-align columns Middle', + icon: valignCenter, + title: _x( 'V-align all Columns to Middle', 'Block vertical alignment setting' ), isActive: verticalAlignment === 'center', onClick: () => setAttributes( { verticalAlignment: 'center' } ), }, { - icon: 'arrow-down-alt2', - title: 'V-align columns Bottom', + icon: valignBottom, + title: _x( 'V-align all Columns to Bottom', 'Block vertical alignment setting' ), isActive: verticalAlignment === 'bottom', onClick: () => setAttributes( { verticalAlignment: 'bottom' } ), }, From 7b389a8be96d834f8ac389cf846b3e4e848de2cb Mon Sep 17 00:00:00 2001 From: Dave Smith Date: Mon, 18 Feb 2019 11:38:16 +0000 Subject: [PATCH 06/47] Extracts reusable VAlignToolbar to DRY up implementation --- .../src/columns/VAlignToolbar.js | 54 +++++++++++++++++++ packages/block-library/src/columns/column.js | 33 +++--------- packages/block-library/src/columns/index.js | 35 +++--------- 3 files changed, 67 insertions(+), 55 deletions(-) create mode 100644 packages/block-library/src/columns/VAlignToolbar.js diff --git a/packages/block-library/src/columns/VAlignToolbar.js b/packages/block-library/src/columns/VAlignToolbar.js new file mode 100644 index 0000000000000..79a9a8cc77805 --- /dev/null +++ b/packages/block-library/src/columns/VAlignToolbar.js @@ -0,0 +1,54 @@ +/** + * WordPress dependencies + */ +import { Toolbar } from '@wordpress/components'; +import { Component } from '@wordpress/element'; +import { _x } from '@wordpress/i18n'; + +/** + * Internal dependencies + */ +import { valignTop, valignCenter, valignBottom } from './icons'; + +class VAlignToolbar extends Component { + constructor( props ) { + super( props ); + + this.toolbarControls = [ + { + icon: valignTop, + title: _x( 'V-align Top', 'Block vertical alignment setting' ), + isActive: this.props.verticalAlignment === 'top', + onClick: this.makeAlignmentUpdater( 'top' ), + }, + { + icon: valignCenter, + title: _x( 'V-align Middle', 'Block vertical alignment setting' ), + isActive: this.props.verticalAlignment === 'center', + onClick: this.makeAlignmentUpdater( 'center' ), + }, + { + icon: valignBottom, + title: _x( 'V-align Bottom', 'Block vertical alignment setting' ), + isActive: this.props.verticalAlignment === 'bottom', + onClick: this.makeAlignmentUpdater( 'bottom' ), + }, + ]; + } + + makeAlignmentUpdater( alignment ) { + return () => this.props.setAttributes( { verticalAlignment: alignment } ); + } + + render() { + return ( + + ); + } +} + +VAlignToolbar.defaultProps = { + verticalAlignment: 'top', +}; + +export default VAlignToolbar; diff --git a/packages/block-library/src/columns/column.js b/packages/block-library/src/columns/column.js index e3f835751f537..99a490e808089 100644 --- a/packages/block-library/src/columns/column.js +++ b/packages/block-library/src/columns/column.js @@ -6,14 +6,14 @@ import classnames from 'classnames'; /** * WordPress dependencies */ -import { Path, SVG, Toolbar } from '@wordpress/components'; -import { __, _x } from '@wordpress/i18n'; +import { Path, SVG } from '@wordpress/components'; +import { __ } from '@wordpress/i18n'; import { InnerBlocks, BlockControls } from '@wordpress/block-editor'; /** * Internal dependencies */ -import { valignTop, valignCenter, valignBottom } from './icons'; +import VAlignToolbar from './VAlignToolbar'; export const name = 'core/column'; @@ -42,27 +42,6 @@ export const settings = { }, edit( { attributes, setAttributes, isSelected } ) { - const toolbarControls = [ - { - icon: valignTop, - title: _x( 'V-align Top', 'Block vertical alignment setting' ), - isActive: attributes.verticalAlignment === 'top', - onClick: () => setAttributes( { verticalAlignment: 'top' } ), - }, - { - icon: valignCenter, - title: _x( 'V-align Middle', 'Block vertical alignment setting' ), - isActive: attributes.verticalAlignment === 'center', - onClick: () => setAttributes( { verticalAlignment: 'center' } ), - }, - { - icon: valignBottom, - title: _x( 'V-align Bottom', 'Block vertical alignment setting' ), - isActive: attributes.verticalAlignment === 'bottom', - onClick: () => setAttributes( { verticalAlignment: 'bottom' } ), - }, - ]; - const classes = classnames( { 'block-core-columns': true, 'is-selected': isSelected, @@ -71,13 +50,15 @@ export const settings = { return (
- +
); }, - save( { attributes } ) { const { verticalAlignment } = attributes; const wrapperClasses = classnames( { diff --git a/packages/block-library/src/columns/index.js b/packages/block-library/src/columns/index.js index 6264803ab30c2..8aa72b7858b42 100644 --- a/packages/block-library/src/columns/index.js +++ b/packages/block-library/src/columns/index.js @@ -8,14 +8,13 @@ import memoize from 'memize'; /** * WordPress dependencies */ -import { __, _x } from '@wordpress/i18n'; +import { __ } from '@wordpress/i18n'; import { PanelBody, RangeControl, G, SVG, Path, - Toolbar, } from '@wordpress/components'; import { Fragment } from '@wordpress/element'; import { createBlock } from '@wordpress/blocks'; @@ -28,7 +27,7 @@ import { /** * Internal dependencies */ -import { valignTop, valignCenter, valignBottom } from './icons'; +import VAlignToolbar from './VAlignToolbar'; /** * Allowed blocks constant is passed to InnerBlocks precisely as specified here. @@ -180,27 +179,6 @@ export const settings = { const { columns, verticalAlignment } = attributes; const classes = classnames( className, `has-${ columns }-columns` ); - const toolbarControls = [ - { - icon: valignTop, - title: _x( 'V-align all Columns to Top', 'Block vertical alignment setting' ), - isActive: verticalAlignment === 'top', - onClick: () => setAttributes( { verticalAlignment: 'top' } ), - }, - { - icon: valignCenter, - title: _x( 'V-align all Columns to Middle', 'Block vertical alignment setting' ), - isActive: verticalAlignment === 'center', - onClick: () => setAttributes( { verticalAlignment: 'center' } ), - }, - { - icon: valignBottom, - title: _x( 'V-align all Columns to Bottom', 'Block vertical alignment setting' ), - isActive: verticalAlignment === 'bottom', - onClick: () => setAttributes( { verticalAlignment: 'bottom' } ), - }, - ]; - return ( @@ -220,11 +198,10 @@ export const settings = { - - - +
Date: Mon, 18 Feb 2019 12:07:35 +0000 Subject: [PATCH 07/47] Fixes alignment attribute not updating --- .../block-library/src/columns/VAlignToolbar.js | 16 ++++++---------- 1 file changed, 6 insertions(+), 10 deletions(-) diff --git a/packages/block-library/src/columns/VAlignToolbar.js b/packages/block-library/src/columns/VAlignToolbar.js index 79a9a8cc77805..d6dd5ed421c36 100644 --- a/packages/block-library/src/columns/VAlignToolbar.js +++ b/packages/block-library/src/columns/VAlignToolbar.js @@ -11,10 +11,12 @@ import { _x } from '@wordpress/i18n'; import { valignTop, valignCenter, valignBottom } from './icons'; class VAlignToolbar extends Component { - constructor( props ) { - super( props ); + makeAlignmentUpdater( alignment ) { + return () => this.props.setAttributes( { verticalAlignment: alignment } ); + } - this.toolbarControls = [ + render() { + const toolbarControls = [ { icon: valignTop, title: _x( 'V-align Top', 'Block vertical alignment setting' ), @@ -34,15 +36,9 @@ class VAlignToolbar extends Component { onClick: this.makeAlignmentUpdater( 'bottom' ), }, ]; - } - makeAlignmentUpdater( alignment ) { - return () => this.props.setAttributes( { verticalAlignment: alignment } ); - } - - render() { return ( - + ); } } From c26aa42395ed9b354981837d07dc980bd669fa50 Mon Sep 17 00:00:00 2001 From: Dave Smith Date: Mon, 18 Feb 2019 14:43:35 +0000 Subject: [PATCH 08/47] Updates Toolbar API to observe Single Responsibility MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Previously Toolbar was too aware of its context and assumed responsibility for updating parent Block’s attributes via setAttributes prop. Revised to utilise callback prop to propagate change events up to the parent. Now upto the consuming component to observe the change and handle it as required. This makes the VAlignToolbar easy to reuse in other locations. Refactor Blocks to utilise new pattern. --- packages/block-library/src/columns/VAlignToolbar.js | 10 +++++----- packages/block-library/src/columns/column.js | 6 ++++-- packages/block-library/src/columns/index.js | 6 ++++-- 3 files changed, 13 insertions(+), 9 deletions(-) diff --git a/packages/block-library/src/columns/VAlignToolbar.js b/packages/block-library/src/columns/VAlignToolbar.js index d6dd5ed421c36..56556f65400f6 100644 --- a/packages/block-library/src/columns/VAlignToolbar.js +++ b/packages/block-library/src/columns/VAlignToolbar.js @@ -12,7 +12,7 @@ import { valignTop, valignCenter, valignBottom } from './icons'; class VAlignToolbar extends Component { makeAlignmentUpdater( alignment ) { - return () => this.props.setAttributes( { verticalAlignment: alignment } ); + return () => this.props.onSelection( alignment ); } render() { @@ -20,19 +20,19 @@ class VAlignToolbar extends Component { { icon: valignTop, title: _x( 'V-align Top', 'Block vertical alignment setting' ), - isActive: this.props.verticalAlignment === 'top', + isActive: this.props.alignment === 'top', onClick: this.makeAlignmentUpdater( 'top' ), }, { icon: valignCenter, title: _x( 'V-align Middle', 'Block vertical alignment setting' ), - isActive: this.props.verticalAlignment === 'center', + isActive: this.props.alignment === 'center', onClick: this.makeAlignmentUpdater( 'center' ), }, { icon: valignBottom, title: _x( 'V-align Bottom', 'Block vertical alignment setting' ), - isActive: this.props.verticalAlignment === 'bottom', + isActive: this.props.alignment === 'bottom', onClick: this.makeAlignmentUpdater( 'bottom' ), }, ]; @@ -44,7 +44,7 @@ class VAlignToolbar extends Component { } VAlignToolbar.defaultProps = { - verticalAlignment: 'top', + alignment: 'top', }; export default VAlignToolbar; diff --git a/packages/block-library/src/columns/column.js b/packages/block-library/src/columns/column.js index 99a490e808089..32c0b7f6b1a79 100644 --- a/packages/block-library/src/columns/column.js +++ b/packages/block-library/src/columns/column.js @@ -47,12 +47,14 @@ export const settings = { 'is-selected': isSelected, } ); + const onSelection = ( alignment ) => setAttributes( { verticalAlignment: alignment } ); + return (
diff --git a/packages/block-library/src/columns/index.js b/packages/block-library/src/columns/index.js index 8aa72b7858b42..dc5a758611cad 100644 --- a/packages/block-library/src/columns/index.js +++ b/packages/block-library/src/columns/index.js @@ -179,6 +179,8 @@ export const settings = { const { columns, verticalAlignment } = attributes; const classes = classnames( className, `has-${ columns }-columns` ); + const onSelection = ( alignment ) => setAttributes( { verticalAlignment: alignment } ); + return ( @@ -199,8 +201,8 @@ export const settings = {
From 639ce698269b4b6fe4e13ad36538d2d9f92203e4 Mon Sep 17 00:00:00 2001 From: Dave Smith Date: Mon, 18 Feb 2019 14:49:13 +0000 Subject: [PATCH 09/47] Extract deprecations for readability This prepares deprecations for adding a new deprecation to handle the addition of the `verticalAlignment` attribute. --- .../block-library/src/columns/deprecated.js | 109 ++++++++++++++++++ packages/block-library/src/columns/index.js | 99 +--------------- 2 files changed, 111 insertions(+), 97 deletions(-) create mode 100644 packages/block-library/src/columns/deprecated.js diff --git a/packages/block-library/src/columns/deprecated.js b/packages/block-library/src/columns/deprecated.js new file mode 100644 index 0000000000000..bbb0f43eea365 --- /dev/null +++ b/packages/block-library/src/columns/deprecated.js @@ -0,0 +1,109 @@ +/** + * WordPress dependencies + */ +import { createBlock } from '@wordpress/blocks'; +import { + InnerBlocks, +} from '@wordpress/editor'; + +/** + * External dependencies + */ +import classnames from 'classnames'; + +/** + * Given an HTML string for a deprecated columns inner block, returns the + * column index to which the migrated inner block should be assigned. Returns + * undefined if the inner block was not assigned to a column. + * + * @param {string} originalContent Deprecated Columns inner block HTML. + * + * @return {?number} Column to which inner block is to be assigned. + */ +function getDeprecatedLayoutColumn( originalContent ) { + let { doc } = getDeprecatedLayoutColumn; + if ( ! doc ) { + doc = document.implementation.createHTMLDocument( '' ); + getDeprecatedLayoutColumn.doc = doc; + } + + let columnMatch; + + doc.body.innerHTML = originalContent; + for ( const classListItem of doc.body.firstChild.classList ) { + if ( ( columnMatch = classListItem.match( /^layout-column-(\d+)$/ ) ) ) { + return Number( columnMatch[ 1 ] ) - 1; + } + } +} + +export default [ + { + attributes: { + columns: { + type: 'number', + default: 2, + }, + }, + isEligible( attributes, innerBlocks ) { + // Since isEligible is called on every valid instance of the + // Columns block and a deprecation is the unlikely case due to + // its subsequent migration, optimize for the `false` condition + // by performing a naive, inaccurate pass at inner blocks. + const isFastPassEligible = innerBlocks.some( ( innerBlock ) => ( + /layout-column-\d+/.test( innerBlock.originalContent ) + ) ); + + if ( ! isFastPassEligible ) { + return false; + } + + // Only if the fast pass is considered eligible is the more + // accurate, durable, slower condition performed. + return innerBlocks.some( ( innerBlock ) => ( + getDeprecatedLayoutColumn( innerBlock.originalContent ) !== undefined + ) ); + }, + migrate( attributes, innerBlocks ) { + const columns = innerBlocks.reduce( ( result, innerBlock ) => { + const { originalContent } = innerBlock; + + let columnIndex = getDeprecatedLayoutColumn( originalContent ); + if ( columnIndex === undefined ) { + columnIndex = 0; + } + + if ( ! result[ columnIndex ] ) { + result[ columnIndex ] = []; + } + + result[ columnIndex ].push( innerBlock ); + + return result; + }, [] ); + + const migratedInnerBlocks = columns.map( ( columnBlocks ) => ( + createBlock( 'core/column', {}, columnBlocks ) + ) ); + + return [ + attributes, + migratedInnerBlocks, + ]; + }, + save( { attributes } ) { + const { columns, verticalAlignment } = attributes; + + const wrapperClasses = classnames( { + [ `has-${ columns }-columns` ]: true, + [ `is-aligned-${ verticalAlignment }` ]: true, + } ); + + return ( +
+ +
+ ); + }, + }, +]; diff --git a/packages/block-library/src/columns/index.js b/packages/block-library/src/columns/index.js index dc5a758611cad..e5014c02151c8 100644 --- a/packages/block-library/src/columns/index.js +++ b/packages/block-library/src/columns/index.js @@ -17,7 +17,6 @@ import { Path, } from '@wordpress/components'; import { Fragment } from '@wordpress/element'; -import { createBlock } from '@wordpress/blocks'; import { InspectorControls, InnerBlocks, @@ -28,6 +27,7 @@ import { * Internal dependencies */ import VAlignToolbar from './VAlignToolbar'; +import deprecated from './deprecated'; /** * Allowed blocks constant is passed to InnerBlocks precisely as specified here. @@ -51,32 +51,6 @@ const getColumnsTemplate = memoize( ( columns ) => { return times( columns, () => [ 'core/column' ] ); } ); -/** - * Given an HTML string for a deprecated columns inner block, returns the - * column index to which the migrated inner block should be assigned. Returns - * undefined if the inner block was not assigned to a column. - * - * @param {string} originalContent Deprecated Columns inner block HTML. - * - * @return {?number} Column to which inner block is to be assigned. - */ -function getDeprecatedLayoutColumn( originalContent ) { - let { doc } = getDeprecatedLayoutColumn; - if ( ! doc ) { - doc = document.implementation.createHTMLDocument( '' ); - getDeprecatedLayoutColumn.doc = doc; - } - - let columnMatch; - - doc.body.innerHTML = originalContent; - for ( const classListItem of doc.body.firstChild.classList ) { - if ( ( columnMatch = classListItem.match( /^layout-column-(\d+)$/ ) ) ) { - return Number( columnMatch[ 1 ] ) - 1; - } - } -} - export const name = 'core/columns'; export const settings = { @@ -104,76 +78,7 @@ export const settings = { html: false, }, - deprecated: [ - { - attributes: { - columns: { - type: 'number', - default: 2, - }, - }, - isEligible( attributes, innerBlocks ) { - // Since isEligible is called on every valid instance of the - // Columns block and a deprecation is the unlikely case due to - // its subsequent migration, optimize for the `false` condition - // by performing a naive, inaccurate pass at inner blocks. - const isFastPassEligible = innerBlocks.some( ( innerBlock ) => ( - /layout-column-\d+/.test( innerBlock.originalContent ) - ) ); - - if ( ! isFastPassEligible ) { - return false; - } - - // Only if the fast pass is considered eligible is the more - // accurate, durable, slower condition performed. - return innerBlocks.some( ( innerBlock ) => ( - getDeprecatedLayoutColumn( innerBlock.originalContent ) !== undefined - ) ); - }, - migrate( attributes, innerBlocks ) { - const columns = innerBlocks.reduce( ( result, innerBlock ) => { - const { originalContent } = innerBlock; - - let columnIndex = getDeprecatedLayoutColumn( originalContent ); - if ( columnIndex === undefined ) { - columnIndex = 0; - } - - if ( ! result[ columnIndex ] ) { - result[ columnIndex ] = []; - } - - result[ columnIndex ].push( innerBlock ); - - return result; - }, [] ); - - const migratedInnerBlocks = columns.map( ( columnBlocks ) => ( - createBlock( 'core/column', {}, columnBlocks ) - ) ); - - return [ - attributes, - migratedInnerBlocks, - ]; - }, - save( { attributes } ) { - const { columns, verticalAlignment } = attributes; - - const wrapperClasses = classnames( { - [ `has-${ columns }-columns` ]: true, - [ `is-aligned-${ verticalAlignment }` ]: true, - } ); - - return ( -
- -
- ); - }, - }, - ], + deprecated, edit( { attributes, setAttributes, className } ) { const { columns, verticalAlignment } = attributes; From 3ea9144364801efbb45c122afe318fd4bd8ddc4b Mon Sep 17 00:00:00 2001 From: Dave Smith Date: Tue, 19 Feb 2019 09:44:37 +0000 Subject: [PATCH 10/47] Updates valignment default to no alignment specified MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Previously we enforced a “top” valign on all columns. This seemed heavy handed given that Themes might wish to control this. Now we default to no valignment and allow user to optionally choose to specifiy a valignment. --- packages/block-library/src/columns/VAlignToolbar.js | 2 +- packages/block-library/src/columns/column.js | 5 +++-- packages/block-library/src/columns/index.js | 6 +++--- 3 files changed, 7 insertions(+), 6 deletions(-) diff --git a/packages/block-library/src/columns/VAlignToolbar.js b/packages/block-library/src/columns/VAlignToolbar.js index 56556f65400f6..a03902a1dc3f4 100644 --- a/packages/block-library/src/columns/VAlignToolbar.js +++ b/packages/block-library/src/columns/VAlignToolbar.js @@ -44,7 +44,7 @@ class VAlignToolbar extends Component { } VAlignToolbar.defaultProps = { - alignment: 'top', + alignment: null, }; export default VAlignToolbar; diff --git a/packages/block-library/src/columns/column.js b/packages/block-library/src/columns/column.js index 32c0b7f6b1a79..c68527b394f74 100644 --- a/packages/block-library/src/columns/column.js +++ b/packages/block-library/src/columns/column.js @@ -2,6 +2,7 @@ * External dependencies */ import classnames from 'classnames'; +import { isNil } from 'lodash'; /** * WordPress dependencies @@ -31,7 +32,6 @@ export const settings = { attributes: { verticalAlignment: { type: 'string', - default: 'top', }, }, @@ -64,8 +64,9 @@ export const settings = { save( { attributes } ) { const { verticalAlignment } = attributes; const wrapperClasses = classnames( { - [ `is-vertically-aligned-${ verticalAlignment }` ]: true, + [ `is-vertically-aligned-${ verticalAlignment }` ]: ! isNil( verticalAlignment ), } ); + return (
diff --git a/packages/block-library/src/columns/index.js b/packages/block-library/src/columns/index.js index e5014c02151c8..a32511b54f77a 100644 --- a/packages/block-library/src/columns/index.js +++ b/packages/block-library/src/columns/index.js @@ -1,7 +1,7 @@ /** * External dependencies */ -import { times } from 'lodash'; +import { times, isNil } from 'lodash'; import classnames from 'classnames'; import memoize from 'memize'; @@ -67,7 +67,6 @@ export const settings = { }, verticalAlignment: { type: 'string', - default: 'top', }, }, @@ -122,9 +121,10 @@ export const settings = { save( { attributes } ) { const { columns, verticalAlignment } = attributes; + const wrapperClasses = classnames( { [ `has-${ columns }-columns` ]: true, - [ `are-vertically-aligned-${ verticalAlignment }` ]: true, + [ `are-vertically-aligned-${ verticalAlignment }` ]: ! isNil( verticalAlignment ), } ); return ( From b6c628cadfd54d78eb948eed08a7fa8da8bd2272 Mon Sep 17 00:00:00 2001 From: Dave Smith Date: Tue, 19 Feb 2019 09:48:57 +0000 Subject: [PATCH 11/47] Adds ability to toggle alignment settings on and off Previously once alignment had been set there was no way to disable it. Added ability to toggle each setting on and off. --- packages/block-library/src/columns/column.js | 10 +++++++++- packages/block-library/src/columns/index.js | 10 +++++++++- 2 files changed, 18 insertions(+), 2 deletions(-) diff --git a/packages/block-library/src/columns/column.js b/packages/block-library/src/columns/column.js index c68527b394f74..115d7af3a0930 100644 --- a/packages/block-library/src/columns/column.js +++ b/packages/block-library/src/columns/column.js @@ -47,7 +47,15 @@ export const settings = { 'is-selected': isSelected, } ); - const onSelection = ( alignment ) => setAttributes( { verticalAlignment: alignment } ); + const onSelection = ( alignment ) => { + // If the current alignment is selected again we can assume it is an attempt to toggle + // the alignment value "off" for that setting so we reset alignment state to null + if ( alignment === attributes.verticalAlignment ) { + alignment = null; + } + + setAttributes( { verticalAlignment: alignment } ); + }; return (
diff --git a/packages/block-library/src/columns/index.js b/packages/block-library/src/columns/index.js index a32511b54f77a..af111057d2414 100644 --- a/packages/block-library/src/columns/index.js +++ b/packages/block-library/src/columns/index.js @@ -83,7 +83,15 @@ export const settings = { const { columns, verticalAlignment } = attributes; const classes = classnames( className, `has-${ columns }-columns` ); - const onSelection = ( alignment ) => setAttributes( { verticalAlignment: alignment } ); + const onSelection = ( alignment ) => { + // If the current alignment is selected again we can assume it is an attempt to toggle + // the alignment value "off" for that setting so we reset alignment state to null + if ( alignment === attributes.verticalAlignment ) { + alignment = null; + } + + setAttributes( { verticalAlignment: alignment } ); + }; return ( From 8cbe359df8d1fc328dd660e09418d5414689e3b9 Mon Sep 17 00:00:00 2001 From: Dave Smith Date: Tue, 19 Feb 2019 11:08:09 +0000 Subject: [PATCH 12/47] Adds editor preview of vertical alignment --- packages/block-library/src/columns/column.js | 10 ++-- .../block-library/src/columns/editor.scss | 48 +++++++++++++++++-- packages/block-library/src/columns/index.js | 5 +- 3 files changed, 55 insertions(+), 8 deletions(-) diff --git a/packages/block-library/src/columns/column.js b/packages/block-library/src/columns/column.js index 115d7af3a0930..7e712671d04a2 100644 --- a/packages/block-library/src/columns/column.js +++ b/packages/block-library/src/columns/column.js @@ -41,16 +41,18 @@ export const settings = { html: false, }, - edit( { attributes, setAttributes, isSelected } ) { + edit( { attributes, setAttributes } ) { + const { verticalAlignment } = attributes; + const classes = classnames( { 'block-core-columns': true, - 'is-selected': isSelected, + [ `is-vertically-aligned-${ verticalAlignment }` ]: ! isNil( verticalAlignment ), } ); const onSelection = ( alignment ) => { // If the current alignment is selected again we can assume it is an attempt to toggle // the alignment value "off" for that setting so we reset alignment state to null - if ( alignment === attributes.verticalAlignment ) { + if ( alignment === verticalAlignment ) { alignment = null; } @@ -62,7 +64,7 @@ export const settings = { diff --git a/packages/block-library/src/columns/editor.scss b/packages/block-library/src/columns/editor.scss index 5baca60cafb65..9fdcbc9b00284 100644 --- a/packages/block-library/src/columns/editor.scss +++ b/packages/block-library/src/columns/editor.scss @@ -1,3 +1,10 @@ +@mixin flex-full-height() { + display: flex; + flex-direction: column; + flex: 1; +} + + // These margins make sure that nested blocks stack/overlay with the parent block chrome // This is sort of an experiment at making sure the editor looks as much like the end result as possible // Potentially the rules here can apply to all nested blocks and enable stacking, in which case it should be moved elsewhere @@ -41,9 +48,15 @@ // Adjust the individual column block. > [data-type="core/column"] { - display: flex; - flex-direction: column; - flex: 1; + @include flex-full-height(); + // Enable vertical alignment preview + > .editor-block-list__block-edit { + @include flex-full-height(); + > div[data-block], + .block-core-columns { + @include flex-full-height(); + } + } // Remove Block "padding" so individual Column is flush with parent Columns > .block-editor-block-list__block-edit::before { @@ -98,3 +111,32 @@ } } } + +/** + * Vertical Alignment Preview + */ +.are-vertically-aligned-top .block-core-columns { + justify-content: flex-start; +} + +.are-vertically-aligned-center .block-core-columns { + justify-content: center; +} + +.are-vertically-aligned-bottom .block-core-columns { + justify-content: flex-end; +} + +// Specificity is important to ensure individual columns alignment +// is prioritised over parent column alignment +div.block-core-columns.is-vertically-aligned-top { + justify-content: flex-start; +} + +div.block-core-columns.is-vertically-aligned-center { + justify-content: center; +} + +div.block-core-columns.is-vertically-aligned-bottom { + justify-content: flex-end; +} diff --git a/packages/block-library/src/columns/index.js b/packages/block-library/src/columns/index.js index af111057d2414..d6197f17c834f 100644 --- a/packages/block-library/src/columns/index.js +++ b/packages/block-library/src/columns/index.js @@ -81,7 +81,10 @@ export const settings = { edit( { attributes, setAttributes, className } ) { const { columns, verticalAlignment } = attributes; - const classes = classnames( className, `has-${ columns }-columns` ); + const classes = classnames( className, { + [ `has-${ columns }-columns` ]: true, + [ `are-vertically-aligned-${ verticalAlignment }` ]: ! isNil( verticalAlignment ), + } ); const onSelection = ( alignment ) => { // If the current alignment is selected again we can assume it is an attempt to toggle From cf842902346bfd78e75a2025eeda04136e03ae41 Mon Sep 17 00:00:00 2001 From: Dave Smith Date: Wed, 20 Feb 2019 11:08:45 +0000 Subject: [PATCH 13/47] Adds reusable valign toolbar to editor package components --- .../block-vertical-alignment-toolbar/icons.js | 26 ++++++ .../block-vertical-alignment-toolbar/index.js | 82 +++++++++++++++++ .../test/__snapshots__/index.js.snap | 87 +++++++++++++++++++ .../test/index.js | 45 ++++++++++ 4 files changed, 240 insertions(+) create mode 100644 packages/editor/src/components/block-vertical-alignment-toolbar/icons.js create mode 100644 packages/editor/src/components/block-vertical-alignment-toolbar/index.js create mode 100644 packages/editor/src/components/block-vertical-alignment-toolbar/test/__snapshots__/index.js.snap create mode 100644 packages/editor/src/components/block-vertical-alignment-toolbar/test/index.js diff --git a/packages/editor/src/components/block-vertical-alignment-toolbar/icons.js b/packages/editor/src/components/block-vertical-alignment-toolbar/icons.js new file mode 100644 index 0000000000000..010035ab4ec2c --- /dev/null +++ b/packages/editor/src/components/block-vertical-alignment-toolbar/icons.js @@ -0,0 +1,26 @@ +/** + * WordPress dependencies + */ +import { Path, SVG } from '@wordpress/components'; + +export const valignBottom = ( + + + + +); + +export const valignCenter = ( + + + + +); + +export const valignTop = ( + + + + +); diff --git a/packages/editor/src/components/block-vertical-alignment-toolbar/index.js b/packages/editor/src/components/block-vertical-alignment-toolbar/index.js new file mode 100644 index 0000000000000..c480e92d0ff9b --- /dev/null +++ b/packages/editor/src/components/block-vertical-alignment-toolbar/index.js @@ -0,0 +1,82 @@ +/** + * WordPress dependencies + */ +import { _x } from '@wordpress/i18n'; +import { Toolbar } from '@wordpress/components'; +import { withViewportMatch } from '@wordpress/viewport'; +import { withSelect } from '@wordpress/data'; +import { compose } from '@wordpress/compose'; + +/** + * Internal dependencies + */ +import { valignTop, valignCenter, valignBottom } from './icons'; + +/** + * Internal dependencies + */ +import { withBlockEditContext } from '../block-edit/context'; + +const BLOCK_ALIGNMENTS_CONTROLS = { + top: { + _id: 'top', + icon: valignTop, + title: _x( 'Vertically Align Top', 'Block vertical alignment setting' ), + }, + center: { + _id: 'center', + icon: valignCenter, + title: _x( 'Verticaly Align Middle', 'Block vertical alignment setting' ), + }, + bottom: { + _id: 'bottom', + icon: valignBottom, + title: _x( 'Verticaly Align Bottom', 'Block vertical alignment setting' ), + }, +}; + +const DEFAULT_CONTROLS = [ 'top', 'center', 'bottom' ]; +const DEFAULT_CONTROL = 'top'; + +export function BlockVerticalAlignmentToolbar( { isCollapsed, value, onChange, controls = DEFAULT_CONTROLS } ) { + function applyOrUnset( align ) { + return () => onChange( value === align ? undefined : align ); + } + + const activeAlignment = BLOCK_ALIGNMENTS_CONTROLS[ value ]; + + return ( + { + return { + ...BLOCK_ALIGNMENTS_CONTROLS[ control ], + isActive: value === control, + onClick: applyOrUnset( control ), + }; + } ) + } + /> + ); +} + +export default compose( + withBlockEditContext( ( { clientId } ) => { + return { + clientId, + }; + } ), + withViewportMatch( { isLargeViewport: 'medium' } ), + withSelect( ( select, { clientId, isLargeViewport, isCollapsed } ) => { + const { getBlockRootClientId, getEditorSettings } = select( 'core/editor' ); + return { + isCollapsed: isCollapsed || ! isLargeViewport || ( + ! getEditorSettings().hasFixedToolbar && + getBlockRootClientId( clientId ) + ), + }; + } ), +)( BlockVerticalAlignmentToolbar ); diff --git a/packages/editor/src/components/block-vertical-alignment-toolbar/test/__snapshots__/index.js.snap b/packages/editor/src/components/block-vertical-alignment-toolbar/test/__snapshots__/index.js.snap new file mode 100644 index 0000000000000..e91c40b05085a --- /dev/null +++ b/packages/editor/src/components/block-vertical-alignment-toolbar/test/__snapshots__/index.js.snap @@ -0,0 +1,87 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`BlockVerticalAlignmentToolbar should match snapshot 1`] = ` + + + + , + "isActive": true, + "onClick": [Function], + "title": "Vertically Align Top", + }, + Object { + "_id": "center", + "icon": + + + , + "isActive": false, + "onClick": [Function], + "title": "Verticaly Align Middle", + }, + Object { + "_id": "bottom", + "icon": + + + , + "isActive": false, + "onClick": [Function], + "title": "Verticaly Align Bottom", + }, + ] + } + icon={ + + + + + } + label="Change Alignment" +/> +`; diff --git a/packages/editor/src/components/block-vertical-alignment-toolbar/test/index.js b/packages/editor/src/components/block-vertical-alignment-toolbar/test/index.js new file mode 100644 index 0000000000000..705923b8d8156 --- /dev/null +++ b/packages/editor/src/components/block-vertical-alignment-toolbar/test/index.js @@ -0,0 +1,45 @@ +/** + * External dependencies + */ +import { shallow } from 'enzyme'; + +/** + * Internal dependencies + */ +import { BlockVerticalAlignmentToolbar } from '../'; + +describe( 'BlockVerticalAlignmentToolbar', () => { + const alignment = 'top'; + const onChange = jest.fn(); + + const wrapper = shallow( ); + + const controls = wrapper.props().controls; + + afterEach( () => { + onChange.mockClear(); + } ); + + test( 'should match snapshot', () => { + expect( wrapper ).toMatchSnapshot(); + } ); + + test( 'should call onChange with undefined, when the control is already active', () => { + const activeControl = controls.find( ( { _id } ) => _id === alignment ); + activeControl.onClick(); + + expect( activeControl.isActive ).toBe( true ); + expect( onChange ).toHaveBeenCalledTimes( 1 ); + expect( onChange ).toHaveBeenCalledWith( undefined ); + } ); + + test( 'should call onChange with alignment value when the control is inactive', () => { + const inactiveCenterControl = controls.find( ( { _id } ) => _id === 'center' ); + + inactiveCenterControl.onClick(); + + expect( inactiveCenterControl.isActive ).toBe( false ); + expect( onChange ).toHaveBeenCalledTimes( 1 ); + expect( onChange ).toHaveBeenCalledWith( 'center' ); + } ); +} ); From b76cb6dce5b22f6cd22152a3d3c30c8ef900f4f7 Mon Sep 17 00:00:00 2001 From: Dave Smith Date: Wed, 20 Feb 2019 11:11:02 +0000 Subject: [PATCH 14/47] Updates Columns Block to utilise new editor package toolbar component Previously we utilised a bespoke toolbar for the Block. As this toolbar is also required in other components determined best to extract to a resuable component within the @wordpress/editor package. Updates Block to utilise this new component. Removes old bespoke component. See Slack convo: https://wordpress.slack.com/archives/C02QB2JS7/p1550657882430900 --- .../src/columns/VAlignToolbar.js | 50 ------------------- packages/block-library/src/columns/column.js | 23 ++------- packages/block-library/src/columns/index.js | 16 ++---- 3 files changed, 10 insertions(+), 79 deletions(-) delete mode 100644 packages/block-library/src/columns/VAlignToolbar.js diff --git a/packages/block-library/src/columns/VAlignToolbar.js b/packages/block-library/src/columns/VAlignToolbar.js deleted file mode 100644 index a03902a1dc3f4..0000000000000 --- a/packages/block-library/src/columns/VAlignToolbar.js +++ /dev/null @@ -1,50 +0,0 @@ -/** - * WordPress dependencies - */ -import { Toolbar } from '@wordpress/components'; -import { Component } from '@wordpress/element'; -import { _x } from '@wordpress/i18n'; - -/** - * Internal dependencies - */ -import { valignTop, valignCenter, valignBottom } from './icons'; - -class VAlignToolbar extends Component { - makeAlignmentUpdater( alignment ) { - return () => this.props.onSelection( alignment ); - } - - render() { - const toolbarControls = [ - { - icon: valignTop, - title: _x( 'V-align Top', 'Block vertical alignment setting' ), - isActive: this.props.alignment === 'top', - onClick: this.makeAlignmentUpdater( 'top' ), - }, - { - icon: valignCenter, - title: _x( 'V-align Middle', 'Block vertical alignment setting' ), - isActive: this.props.alignment === 'center', - onClick: this.makeAlignmentUpdater( 'center' ), - }, - { - icon: valignBottom, - title: _x( 'V-align Bottom', 'Block vertical alignment setting' ), - isActive: this.props.alignment === 'bottom', - onClick: this.makeAlignmentUpdater( 'bottom' ), - }, - ]; - - return ( - - ); - } -} - -VAlignToolbar.defaultProps = { - alignment: null, -}; - -export default VAlignToolbar; diff --git a/packages/block-library/src/columns/column.js b/packages/block-library/src/columns/column.js index 7e712671d04a2..6cc3ab27b854c 100644 --- a/packages/block-library/src/columns/column.js +++ b/packages/block-library/src/columns/column.js @@ -9,12 +9,7 @@ import { isNil } from 'lodash'; */ import { Path, SVG } from '@wordpress/components'; import { __ } from '@wordpress/i18n'; -import { InnerBlocks, BlockControls } from '@wordpress/block-editor'; - -/** - * Internal dependencies - */ -import VAlignToolbar from './VAlignToolbar'; +import { InnerBlocks, BlockControls, BlockVerticalAlignmentToolbar } from '@wordpress/block-editor'; export const name = 'core/column'; @@ -49,22 +44,14 @@ export const settings = { [ `is-vertically-aligned-${ verticalAlignment }` ]: ! isNil( verticalAlignment ), } ); - const onSelection = ( alignment ) => { - // If the current alignment is selected again we can assume it is an attempt to toggle - // the alignment value "off" for that setting so we reset alignment state to null - if ( alignment === verticalAlignment ) { - alignment = null; - } - - setAttributes( { verticalAlignment: alignment } ); - }; + const onChange = ( alignment ) => setAttributes( { verticalAlignment: alignment } ); return (
- diff --git a/packages/block-library/src/columns/index.js b/packages/block-library/src/columns/index.js index d6197f17c834f..f0e3e6650951d 100644 --- a/packages/block-library/src/columns/index.js +++ b/packages/block-library/src/columns/index.js @@ -21,12 +21,12 @@ import { InspectorControls, InnerBlocks, BlockControls, + BlockVerticalAlignmentToolbar, } from '@wordpress/block-editor'; /** * Internal dependencies */ -import VAlignToolbar from './VAlignToolbar'; import deprecated from './deprecated'; /** @@ -86,13 +86,7 @@ export const settings = { [ `are-vertically-aligned-${ verticalAlignment }` ]: ! isNil( verticalAlignment ), } ); - const onSelection = ( alignment ) => { - // If the current alignment is selected again we can assume it is an attempt to toggle - // the alignment value "off" for that setting so we reset alignment state to null - if ( alignment === attributes.verticalAlignment ) { - alignment = null; - } - + const onChange = ( alignment ) => { setAttributes( { verticalAlignment: alignment } ); }; @@ -115,9 +109,9 @@ export const settings = { -
From 63a1b32347dd45784afa9b4af6b927fb16be7240 Mon Sep 17 00:00:00 2001 From: Dave Smith Date: Wed, 20 Feb 2019 14:10:19 +0000 Subject: [PATCH 15/47] Adds documentation to the BlockVerticalAlignmentToolbar --- .../README.md | 84 +++++++++++++++++++ 1 file changed, 84 insertions(+) create mode 100644 packages/editor/src/components/block-vertical-alignment-toolbar/README.md diff --git a/packages/editor/src/components/block-vertical-alignment-toolbar/README.md b/packages/editor/src/components/block-vertical-alignment-toolbar/README.md new file mode 100644 index 0000000000000..6704f11d019f1 --- /dev/null +++ b/packages/editor/src/components/block-vertical-alignment-toolbar/README.md @@ -0,0 +1,84 @@ +BlockVerticalAlignmentToolbar +============================= + +`BlockVerticalAlignmentToolbar` is a simple `Toolbar` component designed to provide _vertical_ alignment UI controls for use within the editor `BlockControls` toolbar. + +This builds upon similar patterns to the [`BlockAlignmentToolbar`](https://github.com/WordPress/gutenberg/tree/master/packages/editor/src/components/block-alignment-toolbar) but is focused on vertical alignment only. + +## Usage + +In a block's `edit` implementation, render a `` component. Then inside of this add the `` where required. + + +```jsx +import { registerBlockType } from '@wordpress/blocks'; +import { Fragment } from '@wordpress/element'; +import { + BlockControls, + BlockVerticalAlignmentToolbar, +} from '@wordpress/editor'; + +registerBlockType( 'my-plugin/my-block', { + // ... + + attributes: { + // other attributes here + // ... + + verticalAlignment: { + type: 'string', + }, + }, + + edit( { attributes, setAttributes } ) { + + const { verticalAlignment } = attributes; + + // Change handler to set Block `attributes` + const onChange = ( alignment ) => setAttributes( { verticalAlignment: alignment } ); + + return ( + + + + +
+ // your Block here +
+ + ); + } +} ); +``` + +_Note:_ by default if you do not provide a initial `value` prop for the current alignment value, then no value will be selected (ie: there is no default alignment set). + +_Note:_ the user can repeatedly click on the toolbar buttons to toggle the alignment values on/off. This is handled within the component. + +## Props + +### `value` +* **Type:** `String` +* **Default:** `undefined` +* **Options:**: `top`, `center`, `bottom` + +The current value of the alignment setting. You may only choose from the `Options` listed above. + + +### `onChange` +* **Type:** `Function` + +A callback function invoked when the toolbar's alignment value is changed via an interaction with any of the toolbar's buttons. Called with the new alignment value (ie: `top`, `center`, `bottom`, `undefined`) as the only argument. + +Note: the value maybe `undefined` if the user has toggled the component "off". + +```js +const onChange = ( alignment ) => setAttributes( { verticalAlignment: alignment } ); +``` + +## Examples + +The [Core Columns](https://github.com/WordPress/gutenberg/tree/master/packages/block-library/src/columns) Block utilises the `BlockVerticalAlignmentToolbar`. \ No newline at end of file From c15b8df641cbb9ae02573451ff2c42b14434d291 Mon Sep 17 00:00:00 2001 From: Dave Smith Date: Wed, 20 Feb 2019 14:12:43 +0000 Subject: [PATCH 16/47] Updates to use simplified arrow function syntax --- packages/block-library/src/columns/index.js | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/packages/block-library/src/columns/index.js b/packages/block-library/src/columns/index.js index f0e3e6650951d..81d42bea4758d 100644 --- a/packages/block-library/src/columns/index.js +++ b/packages/block-library/src/columns/index.js @@ -86,9 +86,7 @@ export const settings = { [ `are-vertically-aligned-${ verticalAlignment }` ]: ! isNil( verticalAlignment ), } ); - const onChange = ( alignment ) => { - setAttributes( { verticalAlignment: alignment } ); - }; + const onChange = ( alignment ) => setAttributes( { verticalAlignment: alignment } ); return ( From 635b8bed207d5d8f0936b4716e81bbaf77e5e2b9 Mon Sep 17 00:00:00 2001 From: Dave Smith Date: Wed, 20 Feb 2019 14:28:51 +0000 Subject: [PATCH 17/47] Fixes deprecation save definition back to original version MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Previously the save definition of the deprecation was accidentally altered during testing. Restoring to the current state of `master` to ensure that we haven’t broken the existing deprecation when moving this block to a seperate file. --- packages/block-library/src/columns/deprecated.js | 14 ++------------ 1 file changed, 2 insertions(+), 12 deletions(-) diff --git a/packages/block-library/src/columns/deprecated.js b/packages/block-library/src/columns/deprecated.js index bbb0f43eea365..3409524eff9ce 100644 --- a/packages/block-library/src/columns/deprecated.js +++ b/packages/block-library/src/columns/deprecated.js @@ -6,11 +6,6 @@ import { InnerBlocks, } from '@wordpress/editor'; -/** - * External dependencies - */ -import classnames from 'classnames'; - /** * Given an HTML string for a deprecated columns inner block, returns the * column index to which the migrated inner block should be assigned. Returns @@ -92,15 +87,10 @@ export default [ ]; }, save( { attributes } ) { - const { columns, verticalAlignment } = attributes; - - const wrapperClasses = classnames( { - [ `has-${ columns }-columns` ]: true, - [ `is-aligned-${ verticalAlignment }` ]: true, - } ); + const { columns } = attributes; return ( -
+
); From 3ff8179cf0fa466c743288dc585548ce5659e367 Mon Sep 17 00:00:00 2001 From: Dave Smith Date: Thu, 21 Feb 2019 11:09:40 +0000 Subject: [PATCH 18/47] Updates known classes to use simplified classnames util style Resolves * https://github.com/WordPress/gutenberg/pull/13899#discussion_r258769783 * https://github.com/WordPress/gutenberg/pull/13899#discussion_r258770591 * https://github.com/WordPress/gutenberg/pull/13899#discussion_r258770657 --- packages/block-library/src/columns/column.js | 3 +-- packages/block-library/src/columns/index.js | 7 +++---- 2 files changed, 4 insertions(+), 6 deletions(-) diff --git a/packages/block-library/src/columns/column.js b/packages/block-library/src/columns/column.js index 6cc3ab27b854c..82340186fe843 100644 --- a/packages/block-library/src/columns/column.js +++ b/packages/block-library/src/columns/column.js @@ -39,8 +39,7 @@ export const settings = { edit( { attributes, setAttributes } ) { const { verticalAlignment } = attributes; - const classes = classnames( { - 'block-core-columns': true, + const classes = classnames( 'block-core-columns', { [ `is-vertically-aligned-${ verticalAlignment }` ]: ! isNil( verticalAlignment ), } ); diff --git a/packages/block-library/src/columns/index.js b/packages/block-library/src/columns/index.js index 81d42bea4758d..3111a750a6803 100644 --- a/packages/block-library/src/columns/index.js +++ b/packages/block-library/src/columns/index.js @@ -81,8 +81,8 @@ export const settings = { edit( { attributes, setAttributes, className } ) { const { columns, verticalAlignment } = attributes; - const classes = classnames( className, { - [ `has-${ columns }-columns` ]: true, + + const classes = classnames( className, `has-${ columns }-columns`, { [ `are-vertically-aligned-${ verticalAlignment }` ]: ! isNil( verticalAlignment ), } ); @@ -125,8 +125,7 @@ export const settings = { save( { attributes } ) { const { columns, verticalAlignment } = attributes; - const wrapperClasses = classnames( { - [ `has-${ columns }-columns` ]: true, + const wrapperClasses = classnames( `has-${ columns }-columns`, { [ `are-vertically-aligned-${ verticalAlignment }` ]: ! isNil( verticalAlignment ), } ); From 206fd159ffb4b0439d2f11acc63dceac25ffd57f Mon Sep 17 00:00:00 2001 From: Marek Hrabe Date: Thu, 21 Feb 2019 12:11:57 +0100 Subject: [PATCH 19/47] remove extraneous file with icons --- packages/block-library/src/columns/icons.js | 26 --------------------- 1 file changed, 26 deletions(-) delete mode 100644 packages/block-library/src/columns/icons.js diff --git a/packages/block-library/src/columns/icons.js b/packages/block-library/src/columns/icons.js deleted file mode 100644 index 010035ab4ec2c..0000000000000 --- a/packages/block-library/src/columns/icons.js +++ /dev/null @@ -1,26 +0,0 @@ -/** - * WordPress dependencies - */ -import { Path, SVG } from '@wordpress/components'; - -export const valignBottom = ( - - - - -); - -export const valignCenter = ( - - - - -); - -export const valignTop = ( - - - - -); From 119c771f51e8507aa180cbccff1ebac06d353a48 Mon Sep 17 00:00:00 2001 From: Dave Smith Date: Thu, 21 Feb 2019 11:14:23 +0000 Subject: [PATCH 20/47] Fixes icon vars to use standard coding style Resolves https://github.com/WordPress/gutenberg/pull/13899#discussion_r258772021 --- .../components/block-vertical-alignment-toolbar/icons.js | 6 +++--- .../components/block-vertical-alignment-toolbar/index.js | 8 ++++---- 2 files changed, 7 insertions(+), 7 deletions(-) diff --git a/packages/editor/src/components/block-vertical-alignment-toolbar/icons.js b/packages/editor/src/components/block-vertical-alignment-toolbar/icons.js index 010035ab4ec2c..f9c8883788040 100644 --- a/packages/editor/src/components/block-vertical-alignment-toolbar/icons.js +++ b/packages/editor/src/components/block-vertical-alignment-toolbar/icons.js @@ -3,14 +3,14 @@ */ import { Path, SVG } from '@wordpress/components'; -export const valignBottom = ( +export const alignBottom = ( ); -export const valignCenter = ( +export const alignCenter = ( ); -export const valignTop = ( +export const alignTop = ( diff --git a/packages/editor/src/components/block-vertical-alignment-toolbar/index.js b/packages/editor/src/components/block-vertical-alignment-toolbar/index.js index c480e92d0ff9b..94fcda3a13a43 100644 --- a/packages/editor/src/components/block-vertical-alignment-toolbar/index.js +++ b/packages/editor/src/components/block-vertical-alignment-toolbar/index.js @@ -10,7 +10,7 @@ import { compose } from '@wordpress/compose'; /** * Internal dependencies */ -import { valignTop, valignCenter, valignBottom } from './icons'; +import { alignTop, alignCenter, alignBottom } from './icons'; /** * Internal dependencies @@ -20,17 +20,17 @@ import { withBlockEditContext } from '../block-edit/context'; const BLOCK_ALIGNMENTS_CONTROLS = { top: { _id: 'top', - icon: valignTop, + icon: alignTop, title: _x( 'Vertically Align Top', 'Block vertical alignment setting' ), }, center: { _id: 'center', - icon: valignCenter, + icon: alignCenter, title: _x( 'Verticaly Align Middle', 'Block vertical alignment setting' ), }, bottom: { _id: 'bottom', - icon: valignBottom, + icon: alignBottom, title: _x( 'Verticaly Align Bottom', 'Block vertical alignment setting' ), }, }; From 884e10141dff89a214d10fa9917cae9671eca089 Mon Sep 17 00:00:00 2001 From: Dave Smith Date: Thu, 21 Feb 2019 11:28:24 +0000 Subject: [PATCH 21/47] Updates test to use `it` instead of `test` Resolves https://github.com/WordPress/gutenberg/pull/13899#discussion_r258773251 --- .../block-vertical-alignment-toolbar/test/index.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/editor/src/components/block-vertical-alignment-toolbar/test/index.js b/packages/editor/src/components/block-vertical-alignment-toolbar/test/index.js index 705923b8d8156..3c955bf3f8e7e 100644 --- a/packages/editor/src/components/block-vertical-alignment-toolbar/test/index.js +++ b/packages/editor/src/components/block-vertical-alignment-toolbar/test/index.js @@ -20,11 +20,11 @@ describe( 'BlockVerticalAlignmentToolbar', () => { onChange.mockClear(); } ); - test( 'should match snapshot', () => { + it( 'should match snapshot', () => { expect( wrapper ).toMatchSnapshot(); } ); - test( 'should call onChange with undefined, when the control is already active', () => { + it( 'should call onChange with undefined, when the control is already active', () => { const activeControl = controls.find( ( { _id } ) => _id === alignment ); activeControl.onClick(); @@ -33,7 +33,7 @@ describe( 'BlockVerticalAlignmentToolbar', () => { expect( onChange ).toHaveBeenCalledWith( undefined ); } ); - test( 'should call onChange with alignment value when the control is inactive', () => { + it( 'should call onChange with alignment value when the control is inactive', () => { const inactiveCenterControl = controls.find( ( { _id } ) => _id === 'center' ); inactiveCenterControl.onClick(); From 5fa21817cf5e801a658013f40f8878761bf7ac2c Mon Sep 17 00:00:00 2001 From: Dave Smith Date: Thu, 21 Feb 2019 11:30:14 +0000 Subject: [PATCH 22/47] Fix spelling and grammatical errors Resolves * https://github.com/WordPress/gutenberg/pull/13899#discussion_r258774530 * https://github.com/WordPress/gutenberg/pull/13899#discussion_r258774080 --- .../src/components/block-vertical-alignment-toolbar/README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/editor/src/components/block-vertical-alignment-toolbar/README.md b/packages/editor/src/components/block-vertical-alignment-toolbar/README.md index 6704f11d019f1..b5251e9ecb776 100644 --- a/packages/editor/src/components/block-vertical-alignment-toolbar/README.md +++ b/packages/editor/src/components/block-vertical-alignment-toolbar/README.md @@ -54,7 +54,7 @@ registerBlockType( 'my-plugin/my-block', { } ); ``` -_Note:_ by default if you do not provide a initial `value` prop for the current alignment value, then no value will be selected (ie: there is no default alignment set). +_Note:_ by default if you do not provide an initial `value` prop for the current alignment value, then no value will be selected (ie: there is no default alignment set). _Note:_ the user can repeatedly click on the toolbar buttons to toggle the alignment values on/off. This is handled within the component. @@ -73,7 +73,7 @@ The current value of the alignment setting. You may only choose from the `Option A callback function invoked when the toolbar's alignment value is changed via an interaction with any of the toolbar's buttons. Called with the new alignment value (ie: `top`, `center`, `bottom`, `undefined`) as the only argument. -Note: the value maybe `undefined` if the user has toggled the component "off". +Note: the value may be `undefined` if the user has toggled the component "off". ```js const onChange = ( alignment ) => setAttributes( { verticalAlignment: alignment } ); From 84257b26c203a083014d1c763dbd3d9f076c2730 Mon Sep 17 00:00:00 2001 From: Dave Smith Date: Thu, 21 Feb 2019 11:31:31 +0000 Subject: [PATCH 23/47] Removes duplicate dependencies comment Resolves https://github.com/WordPress/gutenberg/pull/13899#discussion_r258775474 --- .../components/block-vertical-alignment-toolbar/index.js | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/packages/editor/src/components/block-vertical-alignment-toolbar/index.js b/packages/editor/src/components/block-vertical-alignment-toolbar/index.js index 94fcda3a13a43..e5be8b673f23f 100644 --- a/packages/editor/src/components/block-vertical-alignment-toolbar/index.js +++ b/packages/editor/src/components/block-vertical-alignment-toolbar/index.js @@ -7,15 +7,11 @@ import { withViewportMatch } from '@wordpress/viewport'; import { withSelect } from '@wordpress/data'; import { compose } from '@wordpress/compose'; -/** - * Internal dependencies - */ -import { alignTop, alignCenter, alignBottom } from './icons'; - /** * Internal dependencies */ import { withBlockEditContext } from '../block-edit/context'; +import { alignTop, alignCenter, alignBottom } from './icons'; const BLOCK_ALIGNMENTS_CONTROLS = { top: { From 9bd76451ffbf27a9466dae3c1bb6cbd6675d87c2 Mon Sep 17 00:00:00 2001 From: Dave Smith Date: Thu, 21 Feb 2019 11:37:52 +0000 Subject: [PATCH 24/47] Updates code readability and self documentation MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Previously the tenary to determine which icon to show when in “collapsed” mode wasn’t easy to comprehend. Update to add clear variable names to make it more explicit about what happens when there is/isn’t a active alignment value set. This address the concern raised in https://github.com/WordPress/gutenberg/pull/13899#discussion_r258777358 but looks to prefer code readability over absolutely succinct code. --- .../src/components/block-vertical-alignment-toolbar/index.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/editor/src/components/block-vertical-alignment-toolbar/index.js b/packages/editor/src/components/block-vertical-alignment-toolbar/index.js index e5be8b673f23f..17e2bc5824214 100644 --- a/packages/editor/src/components/block-vertical-alignment-toolbar/index.js +++ b/packages/editor/src/components/block-vertical-alignment-toolbar/index.js @@ -40,11 +40,12 @@ export function BlockVerticalAlignmentToolbar( { isCollapsed, value, onChange, c } const activeAlignment = BLOCK_ALIGNMENTS_CONTROLS[ value ]; + const defaultAlignmentControl = BLOCK_ALIGNMENTS_CONTROLS[ DEFAULT_CONTROL ]; return ( { From 9719b7db19759e6d8557a12c72d759cabc26054b Mon Sep 17 00:00:00 2001 From: Dave Smith Date: Thu, 21 Feb 2019 11:52:04 +0000 Subject: [PATCH 25/47] Consolidates selectors for improve readability/comprehension Prevously nested of selectors was getting a little confusing. Pulled onto a single line to this unit of code in a single location. Resolves https://github.com/WordPress/gutenberg/pull/13899#discussion_r258551134 --- packages/block-library/src/columns/editor.scss | 18 +++++++----------- 1 file changed, 7 insertions(+), 11 deletions(-) diff --git a/packages/block-library/src/columns/editor.scss b/packages/block-library/src/columns/editor.scss index 9fdcbc9b00284..499cfd4d67ce7 100644 --- a/packages/block-library/src/columns/editor.scss +++ b/packages/block-library/src/columns/editor.scss @@ -45,19 +45,15 @@ @include break-medium() { flex-wrap: nowrap; } - + // Set full heights on Columns to enable vertical alignment preview + > [data-type="core/column"], + > [data-type="core/column"] > .editor-block-list__block-edit, + > [data-type="core/column"] > .editor-block-list__block-edit > div[data-block], + > [data-type="core/column"] > .editor-block-list__block-edit .block-core-columns { + @include flex-full-height(); + } // Adjust the individual column block. > [data-type="core/column"] { - @include flex-full-height(); - // Enable vertical alignment preview - > .editor-block-list__block-edit { - @include flex-full-height(); - > div[data-block], - .block-core-columns { - @include flex-full-height(); - } - } - // Remove Block "padding" so individual Column is flush with parent Columns > .block-editor-block-list__block-edit::before { left: 0; From 014384b102a12e04fb6c311e948a62fbae33852e Mon Sep 17 00:00:00 2001 From: Dave Smith Date: Thu, 21 Feb 2019 12:04:41 +0000 Subject: [PATCH 26/47] Updates to consolidate similar CSS rules Resolves https://github.com/WordPress/gutenberg/pull/13899#discussion_r258552884 --- .../block-library/src/columns/editor.scss | 20 ++++++------------- 1 file changed, 6 insertions(+), 14 deletions(-) diff --git a/packages/block-library/src/columns/editor.scss b/packages/block-library/src/columns/editor.scss index 499cfd4d67ce7..fee6293bb7529 100644 --- a/packages/block-library/src/columns/editor.scss +++ b/packages/block-library/src/columns/editor.scss @@ -110,29 +110,21 @@ /** * Vertical Alignment Preview + * note: specificity is important here to ensure individual + * * columns alignment is prioritised over parent column alignment + * */ -.are-vertically-aligned-top .block-core-columns { - justify-content: flex-start; -} - -.are-vertically-aligned-center .block-core-columns { - justify-content: center; -} - -.are-vertically-aligned-bottom .block-core-columns { - justify-content: flex-end; -} - -// Specificity is important to ensure individual columns alignment -// is prioritised over parent column alignment +.are-vertically-aligned-top .block-core-columns, div.block-core-columns.is-vertically-aligned-top { justify-content: flex-start; } +.are-vertically-aligned-center .block-core-columns, div.block-core-columns.is-vertically-aligned-center { justify-content: center; } +.are-vertically-aligned-bottom .block-core-columns, div.block-core-columns.is-vertically-aligned-bottom { justify-content: flex-end; } From 3ede33f0bbc64f68de0015ce33708ce9c9a1280c Mon Sep 17 00:00:00 2001 From: Dave Smith Date: Thu, 21 Feb 2019 12:06:14 +0000 Subject: [PATCH 27/47] Fixes spelling error Resolves https://github.com/WordPress/gutenberg/pull/13899#discussion_r258557977 --- .../src/components/block-vertical-alignment-toolbar/index.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/editor/src/components/block-vertical-alignment-toolbar/index.js b/packages/editor/src/components/block-vertical-alignment-toolbar/index.js index 17e2bc5824214..76e8840558c9d 100644 --- a/packages/editor/src/components/block-vertical-alignment-toolbar/index.js +++ b/packages/editor/src/components/block-vertical-alignment-toolbar/index.js @@ -22,12 +22,12 @@ const BLOCK_ALIGNMENTS_CONTROLS = { center: { _id: 'center', icon: alignCenter, - title: _x( 'Verticaly Align Middle', 'Block vertical alignment setting' ), + title: _x( 'Vertically Align Middle', 'Block vertical alignment setting' ), }, bottom: { _id: 'bottom', icon: alignBottom, - title: _x( 'Verticaly Align Bottom', 'Block vertical alignment setting' ), + title: _x( 'Vertically Align Bottom', 'Block vertical alignment setting' ), }, }; From 6a7decad98640cb74c359b3c999854796fbc78db Mon Sep 17 00:00:00 2001 From: Dave Smith Date: Thu, 21 Feb 2019 12:11:20 +0000 Subject: [PATCH 28/47] Removes unecessary type checking in favour of coercion rules Previously we were explicitly checking the type of the `verticalAlignment` attr with `isNil()`. However this only checks for `undefined` or `null`. Other falsey values would have passed here which is undesirable. As `undefined` and `null` are both coerced to falsey we can remove the dep on `isNil` and simplify. Resolves https://github.com/WordPress/gutenberg/pull/13899#discussion_r258487802 --- packages/block-library/src/columns/column.js | 5 ++--- packages/block-library/src/columns/index.js | 6 +++--- 2 files changed, 5 insertions(+), 6 deletions(-) diff --git a/packages/block-library/src/columns/column.js b/packages/block-library/src/columns/column.js index 82340186fe843..b893d2411681f 100644 --- a/packages/block-library/src/columns/column.js +++ b/packages/block-library/src/columns/column.js @@ -2,7 +2,6 @@ * External dependencies */ import classnames from 'classnames'; -import { isNil } from 'lodash'; /** * WordPress dependencies @@ -40,7 +39,7 @@ export const settings = { const { verticalAlignment } = attributes; const classes = classnames( 'block-core-columns', { - [ `is-vertically-aligned-${ verticalAlignment }` ]: ! isNil( verticalAlignment ), + [ `is-vertically-aligned-${ verticalAlignment }` ]: verticalAlignment, } ); const onChange = ( alignment ) => setAttributes( { verticalAlignment: alignment } ); @@ -60,7 +59,7 @@ export const settings = { save( { attributes } ) { const { verticalAlignment } = attributes; const wrapperClasses = classnames( { - [ `is-vertically-aligned-${ verticalAlignment }` ]: ! isNil( verticalAlignment ), + [ `is-vertically-aligned-${ verticalAlignment }` ]: verticalAlignment, } ); return ( diff --git a/packages/block-library/src/columns/index.js b/packages/block-library/src/columns/index.js index 3111a750a6803..3569b9bb4e184 100644 --- a/packages/block-library/src/columns/index.js +++ b/packages/block-library/src/columns/index.js @@ -1,7 +1,7 @@ /** * External dependencies */ -import { times, isNil } from 'lodash'; +import { times } from 'lodash'; import classnames from 'classnames'; import memoize from 'memize'; @@ -83,7 +83,7 @@ export const settings = { const { columns, verticalAlignment } = attributes; const classes = classnames( className, `has-${ columns }-columns`, { - [ `are-vertically-aligned-${ verticalAlignment }` ]: ! isNil( verticalAlignment ), + [ `are-vertically-aligned-${ verticalAlignment }` ]: verticalAlignment, } ); const onChange = ( alignment ) => setAttributes( { verticalAlignment: alignment } ); @@ -126,7 +126,7 @@ export const settings = { const { columns, verticalAlignment } = attributes; const wrapperClasses = classnames( `has-${ columns }-columns`, { - [ `are-vertically-aligned-${ verticalAlignment }` ]: ! isNil( verticalAlignment ), + [ `are-vertically-aligned-${ verticalAlignment }` ]: verticalAlignment, } ); return ( From 452f386e2c76b11d5b2b68fdb5015a6d45f7982c Mon Sep 17 00:00:00 2001 From: Marek Hrabe Date: Thu, 21 Feb 2019 13:13:19 +0100 Subject: [PATCH 29/47] update icon sizes to match others in Toolbar --- .../components/block-vertical-alignment-toolbar/icons.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/editor/src/components/block-vertical-alignment-toolbar/icons.js b/packages/editor/src/components/block-vertical-alignment-toolbar/icons.js index f9c8883788040..4642eddb367c7 100644 --- a/packages/editor/src/components/block-vertical-alignment-toolbar/icons.js +++ b/packages/editor/src/components/block-vertical-alignment-toolbar/icons.js @@ -4,14 +4,14 @@ import { Path, SVG } from '@wordpress/components'; export const alignBottom = ( - + ); export const alignCenter = ( - + @@ -19,7 +19,7 @@ export const alignCenter = ( ); export const alignTop = ( - + From c83a44e1ff8a7a36bb199d669b55a5cc482881f4 Mon Sep 17 00:00:00 2001 From: Dave Smith Date: Thu, 21 Feb 2019 12:34:14 +0000 Subject: [PATCH 30/47] Fixes bottom alignment on front end Specificity overide to ensure margin is applied and preserved on last child to ensure that when columns are aligned to bottom they are are flush with each other Resolves https://github.com/WordPress/gutenberg/pull/13899#issuecomment-465958295 --- packages/block-library/src/columns/style.scss | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/packages/block-library/src/columns/style.scss b/packages/block-library/src/columns/style.scss index 44c982a07a5a3..e377480792af0 100644 --- a/packages/block-library/src/columns/style.scss +++ b/packages/block-library/src/columns/style.scss @@ -11,7 +11,6 @@ .wp-block-column { flex-grow: 1; - margin-bottom: 1em; // Responsiveness: Show at most one columns on mobile. flex-basis: 100%; @@ -45,6 +44,14 @@ } } +// Specificity overide to ensure margin is applied +// and preserved on last child to ensure that when columns +// are aligned to bottom they are are flush with each other +.wp-block-column, +.entry-content > .wp-block-columns .wp-block-column:last-child { + margin-bottom: 1em; +} + /** * All Columns Alignment */ From fcc6441279580007914b8c951102918b08e6ca70 Mon Sep 17 00:00:00 2001 From: Dave Smith Date: Fri, 22 Feb 2019 12:24:43 +0000 Subject: [PATCH 31/47] Fix failing e2e testing due to additional of toolbar MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit e2e tests were failing due to introduction of valign toolbar meaning that number of tab stops needed to be increased by 3 (the number of items in the new toolbar). Also uncovered a bug with Pupeteer not handling Cmd + A to “Select All” on a Mac. This is a known issue (https://github.com/GoogleChrome/puppeteer/issues/1313 ) and it is now worked around using arrows and backspace. --- .../specs/block-hierarchy-navigation.test.js | 15 ++++++++++----- 1 file changed, 10 insertions(+), 5 deletions(-) diff --git a/packages/e2e-tests/specs/block-hierarchy-navigation.test.js b/packages/e2e-tests/specs/block-hierarchy-navigation.test.js index 200e5a234f06b..eb23d8fba8c26 100644 --- a/packages/e2e-tests/specs/block-hierarchy-navigation.test.js +++ b/packages/e2e-tests/specs/block-hierarchy-navigation.test.js @@ -44,7 +44,7 @@ describe( 'Navigating the block hierarchy', () => { await lastColumnsBlockMenuItem.click(); // Insert text in the last column block. - await pressKeyTimes( 'Tab', 2 ); // Navigate to the appender. + await pressKeyTimes( 'Tab', 5 ); // Navigate to the appender. await page.keyboard.type( 'Third column' ); expect( await getEditedPostContent() ).toMatchSnapshot(); @@ -76,17 +76,19 @@ describe( 'Navigating the block hierarchy', () => { await page.keyboard.press( 'Enter' ); // Insert text in the last column block - await pressKeyTimes( 'Tab', 2 ); // Navigate to the appender. + await pressKeyTimes( 'Tab', 5 ); // Navigate to the appender. await page.keyboard.type( 'Third column' ); expect( await getEditedPostContent() ).toMatchSnapshot(); } ); it( 'should appear and function even without nested blocks', async () => { + const textString = 'You say goodbye'; + await insertBlock( 'Paragraph' ); // Add content so there is a block in the hierachy. - await page.keyboard.type( 'You say goodbye' ); + await page.keyboard.type( textString ); // Create an image block too. await page.keyboard.press( 'Enter' ); @@ -96,8 +98,11 @@ describe( 'Navigating the block hierarchy', () => { await openBlockNavigator(); await page.keyboard.press( 'Space' ); - // Replace its content. - await pressKeyWithModifier( 'primary', 'A' ); + // Replace its content + // note Cmd/Ctrl + A doesn't work on Mac with Pupetter right now + // https://github.com/GoogleChrome/puppeteer/issues/1313 + await pressKeyTimes( 'ArrowRight', textString.length ); + await pressKeyTimes( 'Backspace', textString.length ); await page.keyboard.type( 'and I say hello' ); expect( await getEditedPostContent() ).toMatchSnapshot(); From 68710d59a58e79507215a61fbe0f6a12cab99be0 Mon Sep 17 00:00:00 2001 From: Dave Smith Date: Fri, 22 Feb 2019 13:01:15 +0000 Subject: [PATCH 32/47] Fixes toolbar snapshot unit test --- .../test/__snapshots__/index.js.snap | 20 +++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/packages/editor/src/components/block-vertical-alignment-toolbar/test/__snapshots__/index.js.snap b/packages/editor/src/components/block-vertical-alignment-toolbar/test/__snapshots__/index.js.snap index e91c40b05085a..5ec7916a7bde4 100644 --- a/packages/editor/src/components/block-vertical-alignment-toolbar/test/__snapshots__/index.js.snap +++ b/packages/editor/src/components/block-vertical-alignment-toolbar/test/__snapshots__/index.js.snap @@ -7,9 +7,9 @@ exports[`BlockVerticalAlignmentToolbar should match snapshot 1`] = ` Object { "_id": "top", "icon": , "isActive": false, "onClick": [Function], - "title": "Verticaly Align Middle", + "title": "Vertically Align Middle", }, Object { "_id": "bottom", "icon": , "isActive": false, "onClick": [Function], - "title": "Verticaly Align Bottom", + "title": "Vertically Align Bottom", }, ] } icon={ Date: Fri, 22 Feb 2019 17:05:53 +0000 Subject: [PATCH 33/47] Adds force update of child columns when parent setting changes MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Previously it was possible to have a setting on the parent and individual settings on the individual columns. However the parent would still show an alignment setting even though not all of the child columns had that alignment. Now if the parent has an alignment setting it will be auto applied to the state of the child columns directly. If a child column changes it’s individual alignment to something which does not match the parent’s alignment setting then the parent’s alignment setting is removed. However the individual column alignments still stay “as is” because each individual column has the valign setting directly rather than pseudo inheried from the parent via CSS. Addresses: https://github.com/WordPress/gutenberg/pull/13899#issuecomment-466406846 --- packages/block-library/src/columns/index.js | 142 ++++++++++++++------ 1 file changed, 100 insertions(+), 42 deletions(-) diff --git a/packages/block-library/src/columns/index.js b/packages/block-library/src/columns/index.js index 3569b9bb4e184..5f63f7ac056cc 100644 --- a/packages/block-library/src/columns/index.js +++ b/packages/block-library/src/columns/index.js @@ -9,6 +9,7 @@ import memoize from 'memize'; * WordPress dependencies */ import { __ } from '@wordpress/i18n'; +import { compose } from '@wordpress/compose'; import { PanelBody, RangeControl, @@ -22,8 +23,11 @@ import { InnerBlocks, BlockControls, BlockVerticalAlignmentToolbar, + } from '@wordpress/block-editor'; +import { withSelect, withDispatch } from '@wordpress/data'; + /** * Internal dependencies */ @@ -53,6 +57,97 @@ const getColumnsTemplate = memoize( ( columns ) => { export const name = 'core/columns'; +function ColumnsEdit( { attributes, setAttributes, className, childColumns, updateChildColumnsAlignment } ) { + const { columns, verticalAlignment } = attributes; + + // Do any of the child column have a valign setting that is different to what is currently + // set on this parent Columns Block? + const childColumnHasOveride = !! childColumns.find( ( childColumn ) => childColumn.attributes.verticalAlignment !== verticalAlignment ); + + // If we have an overide then remove the setting on the parent so that the toolbar + // no longer displays an alignment. This is inline with behaviour of user land editing + // tools such as MS Word...etc + if ( childColumnHasOveride ) { + setAttributes( { verticalAlignment: null } ); + } + + const classes = classnames( className, `has-${ columns }-columns`, { + [ `are-vertically-aligned-${ verticalAlignment }` ]: verticalAlignment, + } ); + + const onChange = ( alignment ) => { + // Update self... + setAttributes( { verticalAlignment: alignment } ); + + // Update all the (immediate) child Column Blocks + updateChildColumnsAlignment( alignment ); + }; + + return ( + + + + { + setAttributes( { + columns: nextColumns, + } ); + } } + min={ 2 } + max={ 6 } + /> + + + + + +
+ +
+ + ); +} + +const EnhancedColumnsEdit = compose( + /** + * Selects the child column Blocks for this parent Column + */ + withSelect( ( select, { clientId } ) => { + const { getBlocksByClientId } = select( 'core/editor' ); + + return { + childColumns: getBlocksByClientId( clientId )[ 0 ].innerBlocks, + }; + } ), + withDispatch( ( dispatch, { childColumns } ) => { + return { + /** + * Update all child column Blocks with a new + * vertical alignment setting based on whatever + * alignment is passed in. This allows change to parent + * to overide anything set on a individual column basis + * + * @param {string} alignment the vertical alignment setting + */ + updateChildColumnsAlignment( alignment ) { + childColumns.forEach( ( childColumn ) => { + dispatch( 'core/editor' ).updateBlockAttributes( childColumn.clientId, { + verticalAlignment: alignment, + } ); + } ); + }, + }; + } ), +)( ColumnsEdit ); + export const settings = { title: __( 'Columns' ), @@ -68,6 +163,9 @@ export const settings = { verticalAlignment: { type: 'string', }, + childColumnHasVerticalAlignmentOveride: { + type: 'bool', + }, }, description: __( 'Add a block that displays content in multiple columns, then add whatever content blocks you’d like.' ), @@ -79,48 +177,7 @@ export const settings = { deprecated, - edit( { attributes, setAttributes, className } ) { - const { columns, verticalAlignment } = attributes; - - const classes = classnames( className, `has-${ columns }-columns`, { - [ `are-vertically-aligned-${ verticalAlignment }` ]: verticalAlignment, - } ); - - const onChange = ( alignment ) => setAttributes( { verticalAlignment: alignment } ); - - return ( - - - - { - setAttributes( { - columns: nextColumns, - } ); - } } - min={ 2 } - max={ 6 } - required - /> - - - - - -
- -
- - ); - }, + edit: EnhancedColumnsEdit, save( { attributes } ) { const { columns, verticalAlignment } = attributes; @@ -136,3 +193,4 @@ export const settings = { ); }, }; + From 8c7f720db239f9c505f95fa2fb1454e8d44795ba Mon Sep 17 00:00:00 2001 From: Dave Smith Date: Mon, 25 Feb 2019 12:10:07 +0000 Subject: [PATCH 34/47] Updates changelog with `BlockVerticalAlignmentToolbar` feature --- packages/editor/CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/editor/CHANGELOG.md b/packages/editor/CHANGELOG.md index ce396bfa582ec..40ed0b8ccc6f0 100644 --- a/packages/editor/CHANGELOG.md +++ b/packages/editor/CHANGELOG.md @@ -4,6 +4,7 @@ - Added `createCustomColorsHOC` for creating a higher order `withCustomColors` component. - Added a new `TextEditorGlobalKeyboardShortcuts` component. +- Added `BlockVerticalAlignmentToolbar` for adding a vertical alignment toolbar to Blocks. ### Deprecations From d861e6df89beb669e0ae0255ed6a2a0f18589912 Mon Sep 17 00:00:00 2001 From: Dave Smith Date: Mon, 25 Feb 2019 12:13:19 +0000 Subject: [PATCH 35/47] Adds valign feature to changelog for Block Library --- packages/block-library/CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/block-library/CHANGELOG.md b/packages/block-library/CHANGELOG.md index f46b47f579afe..33ef12ff27487 100644 --- a/packages/block-library/CHANGELOG.md +++ b/packages/block-library/CHANGELOG.md @@ -5,6 +5,7 @@ - Add background color controls for the table block. - Add new `RSS` block ([#7966](https://github.com/WordPress/gutenberg/pull/7966)). - Add new `Search` block ([#13583](https://github.com/WordPress/gutenberg/pull/13583)). +- Add vertical alignment controls to `columns` Block ([#13899](https://github.com/WordPress/gutenberg/pull/13899/)) - note: individual (child) `column` Blocks are now selectable within the UI (no longer a "passthrough" Block). ## 2.2.12 (2019-01-03) From 764b1e066008662dafd8b5949d407cc6cba6dca3 Mon Sep 17 00:00:00 2001 From: Dave Smith Date: Mon, 25 Feb 2019 12:29:58 +0000 Subject: [PATCH 36/47] Creates dedicated files for large code blocks MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Previously all code blocks were in a single large index file. This was becoming unwieldy and difficult to manage/edit. Extract each large block into it’s own file for readability and maintainability. --- packages/block-library/src/columns/edit.js | 130 ++++++++++++++++++++ packages/block-library/src/columns/index.js | 129 +------------------ packages/block-library/src/columns/utils.js | 16 +++ 3 files changed, 149 insertions(+), 126 deletions(-) create mode 100644 packages/block-library/src/columns/edit.js create mode 100644 packages/block-library/src/columns/utils.js diff --git a/packages/block-library/src/columns/edit.js b/packages/block-library/src/columns/edit.js new file mode 100644 index 0000000000000..12010e94d12f8 --- /dev/null +++ b/packages/block-library/src/columns/edit.js @@ -0,0 +1,130 @@ +/** + * External dependencies + */ +import classnames from 'classnames'; + +/** + * WordPress dependencies + */ +import { __ } from '@wordpress/i18n'; +import { compose } from '@wordpress/compose'; +import { + PanelBody, + RangeControl, +} from '@wordpress/components'; +import { Fragment } from '@wordpress/element'; +import { + InspectorControls, + InnerBlocks, + BlockControls, + BlockVerticalAlignmentToolbar, + +} from '@wordpress/editor'; +import { withSelect, withDispatch } from '@wordpress/data'; + +/** + * Internal dependencies + */ +import { getColumnsTemplate } from './utils'; + +/** + * Allowed blocks constant is passed to InnerBlocks precisely as specified here. + * The contents of the array should never change. + * The array should contain the name of each block that is allowed. + * In columns block, the only block we allow is 'core/column'. + * + * @constant + * @type {string[]} +*/ +const ALLOWED_BLOCKS = [ 'core/column' ]; + +export const ColumnsEdit = function( { attributes, setAttributes, className, childColumns, updateChildColumnsAlignment } ) { + const { columns, verticalAlignment } = attributes; + + // Do any of the child column have a valign setting that is different to what is currently + // set on this parent Columns Block? + const childColumnHasOveride = !! childColumns.find( ( childColumn ) => childColumn.attributes.verticalAlignment !== verticalAlignment ); + + // If we have an overide then remove the setting on the parent so that the toolbar + // no longer displays an alignment. This is inline with behaviour of user land editing + // tools such as MS Word...etc + if ( childColumnHasOveride ) { + setAttributes( { verticalAlignment: null } ); + } + + const classes = classnames( className, `has-${ columns }-columns`, { + [ `are-vertically-aligned-${ verticalAlignment }` ]: verticalAlignment, + } ); + + const onChange = ( alignment ) => { + // Update self... + setAttributes( { verticalAlignment: alignment } ); + + // Update all the (immediate) child Column Blocks + updateChildColumnsAlignment( alignment ); + }; + + return ( + + + + { + setAttributes( { + columns: nextColumns, + } ); + } } + min={ 2 } + max={ 6 } + /> + + + + + +
+ +
+ + ); +}; + +export default compose( + /** + * Selects the child column Blocks for this parent Column + */ + withSelect( ( select, { clientId } ) => { + const { getBlocksByClientId } = select( 'core/editor' ); + + return { + childColumns: getBlocksByClientId( clientId )[ 0 ].innerBlocks, + }; + } ), + withDispatch( ( dispatch, { childColumns } ) => { + return { + /** + * Update all child column Blocks with a new + * vertical alignment setting based on whatever + * alignment is passed in. This allows change to parent + * to overide anything set on a individual column basis + * + * @param {string} alignment the vertical alignment setting + */ + updateChildColumnsAlignment( alignment ) { + childColumns.forEach( ( childColumn ) => { + dispatch( 'core/editor' ).updateBlockAttributes( childColumn.clientId, { + verticalAlignment: alignment, + } ); + } ); + }, + }; + } ), +)( ColumnsEdit ); diff --git a/packages/block-library/src/columns/index.js b/packages/block-library/src/columns/index.js index 5f63f7ac056cc..9e499924894fc 100644 --- a/packages/block-library/src/columns/index.js +++ b/packages/block-library/src/columns/index.js @@ -1,153 +1,30 @@ /** * External dependencies */ -import { times } from 'lodash'; import classnames from 'classnames'; -import memoize from 'memize'; /** * WordPress dependencies */ import { __ } from '@wordpress/i18n'; -import { compose } from '@wordpress/compose'; import { - PanelBody, - RangeControl, G, SVG, Path, } from '@wordpress/components'; -import { Fragment } from '@wordpress/element'; + import { - InspectorControls, InnerBlocks, - BlockControls, - BlockVerticalAlignmentToolbar, - } from '@wordpress/block-editor'; -import { withSelect, withDispatch } from '@wordpress/data'; - /** * Internal dependencies */ import deprecated from './deprecated'; - -/** - * Allowed blocks constant is passed to InnerBlocks precisely as specified here. - * The contents of the array should never change. - * The array should contain the name of each block that is allowed. - * In columns block, the only block we allow is 'core/column'. - * - * @constant - * @type {string[]} -*/ -const ALLOWED_BLOCKS = [ 'core/column' ]; - -/** - * Returns the layouts configuration for a given number of columns. - * - * @param {number} columns Number of columns. - * - * @return {Object[]} Columns layout configuration. - */ -const getColumnsTemplate = memoize( ( columns ) => { - return times( columns, () => [ 'core/column' ] ); -} ); +import edit from './edit'; export const name = 'core/columns'; -function ColumnsEdit( { attributes, setAttributes, className, childColumns, updateChildColumnsAlignment } ) { - const { columns, verticalAlignment } = attributes; - - // Do any of the child column have a valign setting that is different to what is currently - // set on this parent Columns Block? - const childColumnHasOveride = !! childColumns.find( ( childColumn ) => childColumn.attributes.verticalAlignment !== verticalAlignment ); - - // If we have an overide then remove the setting on the parent so that the toolbar - // no longer displays an alignment. This is inline with behaviour of user land editing - // tools such as MS Word...etc - if ( childColumnHasOveride ) { - setAttributes( { verticalAlignment: null } ); - } - - const classes = classnames( className, `has-${ columns }-columns`, { - [ `are-vertically-aligned-${ verticalAlignment }` ]: verticalAlignment, - } ); - - const onChange = ( alignment ) => { - // Update self... - setAttributes( { verticalAlignment: alignment } ); - - // Update all the (immediate) child Column Blocks - updateChildColumnsAlignment( alignment ); - }; - - return ( - - - - { - setAttributes( { - columns: nextColumns, - } ); - } } - min={ 2 } - max={ 6 } - /> - - - - - -
- -
- - ); -} - -const EnhancedColumnsEdit = compose( - /** - * Selects the child column Blocks for this parent Column - */ - withSelect( ( select, { clientId } ) => { - const { getBlocksByClientId } = select( 'core/editor' ); - - return { - childColumns: getBlocksByClientId( clientId )[ 0 ].innerBlocks, - }; - } ), - withDispatch( ( dispatch, { childColumns } ) => { - return { - /** - * Update all child column Blocks with a new - * vertical alignment setting based on whatever - * alignment is passed in. This allows change to parent - * to overide anything set on a individual column basis - * - * @param {string} alignment the vertical alignment setting - */ - updateChildColumnsAlignment( alignment ) { - childColumns.forEach( ( childColumn ) => { - dispatch( 'core/editor' ).updateBlockAttributes( childColumn.clientId, { - verticalAlignment: alignment, - } ); - } ); - }, - }; - } ), -)( ColumnsEdit ); - export const settings = { title: __( 'Columns' ), @@ -177,7 +54,7 @@ export const settings = { deprecated, - edit: EnhancedColumnsEdit, + edit, save( { attributes } ) { const { columns, verticalAlignment } = attributes; diff --git a/packages/block-library/src/columns/utils.js b/packages/block-library/src/columns/utils.js new file mode 100644 index 0000000000000..e7e3f90df70fd --- /dev/null +++ b/packages/block-library/src/columns/utils.js @@ -0,0 +1,16 @@ +/** + * External dependencies + */ +import memoize from 'memize'; +import { times } from 'lodash'; + +/** + * Returns the layouts configuration for a given number of columns. + * + * @param {number} columns Number of columns. + * + * @return {Object[]} Columns layout configuration. + */ +export const getColumnsTemplate = memoize( ( columns ) => { + return times( columns, () => [ 'core/column' ] ); +} ); From 77baddaf61f49bd2aba9547615e73f0b21812b88 Mon Sep 17 00:00:00 2001 From: Dave Smith Date: Thu, 7 Mar 2019 09:54:37 +0000 Subject: [PATCH 37/47] Updates to avoid tests depending on erroneous _id prop Previously the `_id` prop was included purely to make testing easier (more resilient). On reflection introducing code just for tests was a bad idea. Now depends on string comparison which is an acceptable compromise. Resolves https://github.com/WordPress/gutenberg/pull/13899#discussion_r263302166 --- .../src/components/block-vertical-alignment-toolbar/index.js | 3 --- .../test/__snapshots__/index.js.snap | 3 --- .../components/block-vertical-alignment-toolbar/test/index.js | 4 ++-- 3 files changed, 2 insertions(+), 8 deletions(-) diff --git a/packages/editor/src/components/block-vertical-alignment-toolbar/index.js b/packages/editor/src/components/block-vertical-alignment-toolbar/index.js index 76e8840558c9d..f75f324b52e5d 100644 --- a/packages/editor/src/components/block-vertical-alignment-toolbar/index.js +++ b/packages/editor/src/components/block-vertical-alignment-toolbar/index.js @@ -15,17 +15,14 @@ import { alignTop, alignCenter, alignBottom } from './icons'; const BLOCK_ALIGNMENTS_CONTROLS = { top: { - _id: 'top', icon: alignTop, title: _x( 'Vertically Align Top', 'Block vertical alignment setting' ), }, center: { - _id: 'center', icon: alignCenter, title: _x( 'Vertically Align Middle', 'Block vertical alignment setting' ), }, bottom: { - _id: 'bottom', icon: alignBottom, title: _x( 'Vertically Align Bottom', 'Block vertical alignment setting' ), }, diff --git a/packages/editor/src/components/block-vertical-alignment-toolbar/test/__snapshots__/index.js.snap b/packages/editor/src/components/block-vertical-alignment-toolbar/test/__snapshots__/index.js.snap index 5ec7916a7bde4..5af12d1e1a1c7 100644 --- a/packages/editor/src/components/block-vertical-alignment-toolbar/test/__snapshots__/index.js.snap +++ b/packages/editor/src/components/block-vertical-alignment-toolbar/test/__snapshots__/index.js.snap @@ -5,7 +5,6 @@ exports[`BlockVerticalAlignmentToolbar should match snapshot 1`] = ` controls={ Array [ Object { - "_id": "top", "icon": { } ); it( 'should call onChange with undefined, when the control is already active', () => { - const activeControl = controls.find( ( { _id } ) => _id === alignment ); + const activeControl = controls.find( ( { title } ) => title.toLowerCase().includes( alignment ) ); activeControl.onClick(); expect( activeControl.isActive ).toBe( true ); @@ -34,7 +34,7 @@ describe( 'BlockVerticalAlignmentToolbar', () => { } ); it( 'should call onChange with alignment value when the control is inactive', () => { - const inactiveCenterControl = controls.find( ( { _id } ) => _id === 'center' ); + const inactiveCenterControl = controls.find( ( { title } ) => title.toLowerCase().includes( 'middle' ) ); // note "middle" alias for "center" inactiveCenterControl.onClick(); From e52e000d6a025b7cad4390b9f90069c13beaef13 Mon Sep 17 00:00:00 2001 From: Dave Smith Date: Thu, 7 Mar 2019 09:57:41 +0000 Subject: [PATCH 38/47] Removes usage of unused attribute introduced as experiment MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit This attribute was introduced as part of experimenting in https://github.com/WordPress/gutenberg/pull/13899/commits/e7593150c3c22358fa6a26398dd4aa32e19069c9 and never removed. It’s unused and has been removed. --- packages/block-library/src/columns/index.js | 3 --- 1 file changed, 3 deletions(-) diff --git a/packages/block-library/src/columns/index.js b/packages/block-library/src/columns/index.js index 9e499924894fc..b0c4e9b2c0a5f 100644 --- a/packages/block-library/src/columns/index.js +++ b/packages/block-library/src/columns/index.js @@ -40,9 +40,6 @@ export const settings = { verticalAlignment: { type: 'string', }, - childColumnHasVerticalAlignmentOveride: { - type: 'bool', - }, }, description: __( 'Add a block that displays content in multiple columns, then add whatever content blocks you’d like.' ), From 5e05de1298d24f2677d5df635fbcea10e8491b22 Mon Sep 17 00:00:00 2001 From: Dave Smith Date: Thu, 7 Mar 2019 09:59:30 +0000 Subject: [PATCH 39/47] Updates example to run without erroring due to missing var Resolves https://github.com/WordPress/gutenberg/pull/13899#discussion_r263300008 --- .../src/components/block-vertical-alignment-toolbar/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/editor/src/components/block-vertical-alignment-toolbar/README.md b/packages/editor/src/components/block-vertical-alignment-toolbar/README.md index b5251e9ecb776..a42ca6dc095a2 100644 --- a/packages/editor/src/components/block-vertical-alignment-toolbar/README.md +++ b/packages/editor/src/components/block-vertical-alignment-toolbar/README.md @@ -45,7 +45,7 @@ registerBlockType( 'my-plugin/my-block', { value={ verticalAlignment } /> -
+
// your Block here
From 8e65b6bf77c0d882bae74f151ea86d90f36f151f Mon Sep 17 00:00:00 2001 From: Dave Smith Date: Thu, 7 Mar 2019 10:16:35 +0000 Subject: [PATCH 40/47] Fixes comment to match coding style guidelines Resolves https://github.com/WordPress/gutenberg/pull/13899#discussion_r263313204 --- .../components/block-vertical-alignment-toolbar/test/index.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/editor/src/components/block-vertical-alignment-toolbar/test/index.js b/packages/editor/src/components/block-vertical-alignment-toolbar/test/index.js index af1488e98d2e0..6840e35ba6331 100644 --- a/packages/editor/src/components/block-vertical-alignment-toolbar/test/index.js +++ b/packages/editor/src/components/block-vertical-alignment-toolbar/test/index.js @@ -34,7 +34,8 @@ describe( 'BlockVerticalAlignmentToolbar', () => { } ); it( 'should call onChange with alignment value when the control is inactive', () => { - const inactiveCenterControl = controls.find( ( { title } ) => title.toLowerCase().includes( 'middle' ) ); // note "middle" alias for "center" + // note "middle" alias for "center" + const inactiveCenterControl = controls.find( ( { title } ) => title.toLowerCase().includes( 'middle' ) ); inactiveCenterControl.onClick(); From a4f58fbc942b60472cfda53221d5d29f4dd0eb3e Mon Sep 17 00:00:00 2001 From: Dave Smith Date: Thu, 7 Mar 2019 12:09:44 +0000 Subject: [PATCH 41/47] Fixes to avoid mutation in render method MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Previously in order to reset the Parent’s alignment when one of the child Columns set it’s own alignment, the render method of the Parent Columns mutated the attributes causing a re-render. To avoid this we now reset the Parent from the Child Column whose alignment changed. Addresses https://github.com/WordPress/gutenberg/pull/13899#discussion_r263341084 --- packages/block-library/src/columns/column.js | 71 ++++++++++++++------ packages/block-library/src/columns/edit.js | 28 +++----- 2 files changed, 61 insertions(+), 38 deletions(-) diff --git a/packages/block-library/src/columns/column.js b/packages/block-library/src/columns/column.js index b893d2411681f..d2c725997d0bb 100644 --- a/packages/block-library/src/columns/column.js +++ b/packages/block-library/src/columns/column.js @@ -9,9 +9,58 @@ import classnames from 'classnames'; import { Path, SVG } from '@wordpress/components'; import { __ } from '@wordpress/i18n'; import { InnerBlocks, BlockControls, BlockVerticalAlignmentToolbar } from '@wordpress/block-editor'; +import { withDispatch, withSelect } from '@wordpress/data'; +import { compose } from '@wordpress/compose'; export const name = 'core/column'; +const ColumnEdit = ( { attributes, updateAlignment } ) => { + const { verticalAlignment } = attributes; + + const classes = classnames( 'block-core-columns', { + [ `is-vertically-aligned-${ verticalAlignment }` ]: verticalAlignment, + } ); + + const onChange = ( alignment ) => updateAlignment( alignment ); + + return ( +
+ + + + +
+ ); +}; + +const edit = compose( + withSelect( ( select, { clientId } ) => { + const { getBlockRootClientId } = select( 'core/editor' ); + + return { + parentColumsBlockClientId: getBlockRootClientId( clientId ), + }; + } ), + withDispatch( ( dispatch, { clientId, parentColumsBlockClientId } ) => { + return { + updateAlignment( alignment ) { + // Update self... + dispatch( 'core/editor' ).updateBlockAttributes( clientId, { + verticalAlignment: alignment, + } ); + + // Reset Parent Columns Block + dispatch( 'core/editor' ).updateBlockAttributes( parentColumsBlockClientId, { + verticalAlignment: null, + } ); + }, + }; + } ) +)( ColumnEdit ); + export const settings = { title: __( 'Column' ), @@ -35,27 +84,8 @@ export const settings = { html: false, }, - edit( { attributes, setAttributes } ) { - const { verticalAlignment } = attributes; - - const classes = classnames( 'block-core-columns', { - [ `is-vertically-aligned-${ verticalAlignment }` ]: verticalAlignment, - } ); + edit, - const onChange = ( alignment ) => setAttributes( { verticalAlignment: alignment } ); - - return ( -
- - - - -
- ); - }, save( { attributes } ) { const { verticalAlignment } = attributes; const wrapperClasses = classnames( { @@ -69,3 +99,4 @@ export const settings = { ); }, }; + diff --git a/packages/block-library/src/columns/edit.js b/packages/block-library/src/columns/edit.js index 12010e94d12f8..6ebcc97f763fe 100644 --- a/packages/block-library/src/columns/edit.js +++ b/packages/block-library/src/columns/edit.js @@ -38,30 +38,16 @@ import { getColumnsTemplate } from './utils'; */ const ALLOWED_BLOCKS = [ 'core/column' ]; -export const ColumnsEdit = function( { attributes, setAttributes, className, childColumns, updateChildColumnsAlignment } ) { +export const ColumnsEdit = function( { attributes, setAttributes, className, updateAlignment } ) { const { columns, verticalAlignment } = attributes; - // Do any of the child column have a valign setting that is different to what is currently - // set on this parent Columns Block? - const childColumnHasOveride = !! childColumns.find( ( childColumn ) => childColumn.attributes.verticalAlignment !== verticalAlignment ); - - // If we have an overide then remove the setting on the parent so that the toolbar - // no longer displays an alignment. This is inline with behaviour of user land editing - // tools such as MS Word...etc - if ( childColumnHasOveride ) { - setAttributes( { verticalAlignment: null } ); - } - const classes = classnames( className, `has-${ columns }-columns`, { [ `are-vertically-aligned-${ verticalAlignment }` ]: verticalAlignment, } ); const onChange = ( alignment ) => { - // Update self... - setAttributes( { verticalAlignment: alignment } ); - // Update all the (immediate) child Column Blocks - updateChildColumnsAlignment( alignment ); + updateAlignment( alignment ); }; return ( @@ -108,7 +94,7 @@ export default compose( childColumns: getBlocksByClientId( clientId )[ 0 ].innerBlocks, }; } ), - withDispatch( ( dispatch, { childColumns } ) => { + withDispatch( ( dispatch, { clientId, childColumns } ) => { return { /** * Update all child column Blocks with a new @@ -118,7 +104,13 @@ export default compose( * * @param {string} alignment the vertical alignment setting */ - updateChildColumnsAlignment( alignment ) { + updateAlignment( alignment ) { + // Update self... + dispatch( 'core/editor' ).updateBlockAttributes( clientId, { + verticalAlignment: alignment, + } ); + + // Update all child Column Blocks to match childColumns.forEach( ( childColumn ) => { dispatch( 'core/editor' ).updateBlockAttributes( childColumn.clientId, { verticalAlignment: alignment, From 2905a82bf1c9a0064371abaf196ad4ff1fddab38 Mon Sep 17 00:00:00 2001 From: Dave Smith Date: Tue, 12 Mar 2019 10:46:58 +0000 Subject: [PATCH 42/47] Fixes single Column Block breadcrumb to RHS of boundary Resolves point raised in https://github.com/WordPress/gutenberg/pull/13899#issuecomment-471509812 --- packages/block-library/src/columns/editor.scss | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/packages/block-library/src/columns/editor.scss b/packages/block-library/src/columns/editor.scss index fee6293bb7529..4aa384805905d 100644 --- a/packages/block-library/src/columns/editor.scss +++ b/packages/block-library/src/columns/editor.scss @@ -128,3 +128,11 @@ div.block-core-columns.is-vertically-aligned-center { div.block-core-columns.is-vertically-aligned-bottom { justify-content: flex-end; } + + +/** + * Fixes single Column breadcrumb to RHS of Block boundary + */ +[data-type="core/column"] > .editor-block-list__block-edit > .editor-block-list__breadcrumb { + right: 0; +} From af56d2ee233c02623bef6e40569105951a6d249b Mon Sep 17 00:00:00 2001 From: Dave Smith Date: Tue, 19 Mar 2019 09:39:54 +0000 Subject: [PATCH 43/47] Restores pass through click behaviour on single Column Block As discussed [here](https://github.com/WordPress/gutenberg/pull/13899#issuecomment-471965971) selection of parent/child Blocks is currently being worked on elsewhere. Therefore to get the vertical-alignment shipped, this commit reverts the change that made Columns individually selectable. Now reverts to original behaviour of only being selectable via the Block Inspector (or keyboard). This assumes that future PRs will land better Parent/Child selection behaviour. Also removes unwanted space within the Columns themselves. --- .../block-library/src/columns/editor.scss | 38 +++++++++++++++++++ 1 file changed, 38 insertions(+) diff --git a/packages/block-library/src/columns/editor.scss b/packages/block-library/src/columns/editor.scss index 4aa384805905d..d91907996e5fd 100644 --- a/packages/block-library/src/columns/editor.scss +++ b/packages/block-library/src/columns/editor.scss @@ -63,11 +63,25 @@ margin-left: -$border-width; } + // The Column block is a child of the Columns block and is mostly a passthrough container. + // Therefore it shouldn't add additional paddings and margins, so we reset these, and compensate for margins. + // @todo In the future, if a passthrough feature lands, it would be good to apply these rules to such an element in a more generic way. + > .editor-block-list__block-edit > div > .block-core-columns > .editor-inner-blocks { + margin-top: -$block-padding - $block-padding; + margin-bottom: -$block-padding - $block-padding; + } + + > .editor-block-list__block-edit { + margin-top: 0; + margin-bottom: 0; + } + // On mobile, only a single column is shown, so match adjacent block paddings. padding-left: 0; padding-right: 0; margin-left: -$block-padding; margin-right: -$block-padding; + @include break-small() { margin-left: $block-padding; margin-right: $block-padding; @@ -136,3 +150,27 @@ div.block-core-columns.is-vertically-aligned-bottom { [data-type="core/column"] > .editor-block-list__block-edit > .editor-block-list__breadcrumb { right: 0; } + +// In absence of making the individual columns resizable, we prevent them from being clickable. +// This makes them less fiddly. @todo: This should be revisited as the interface is refined. +.wp-block-columns [data-type="core/column"] { + pointer-events: none; + + // The empty state of a columns block has the default appenders. + // Since those appenders are not blocks, the parent, actual block, appears "hovered" when hovering the appenders. + // Because the column shouldn't be hovered as part of this temporary passthrough, we unset the hover style. + &.is-hovered { + > .block-editor-block-list__block-edit::before { + content: none; + } + + .block-editor-block-list__breadcrumb { + display: none; + } + } +} + +// This selector re-enables clicking on any child of a column block. +:not(.components-disabled) > .wp-block-columns > .editor-inner-blocks > .editor-block-list__layout > [data-type="core/column"] > .editor-block-list__block-edit > * { + pointer-events: all; +} From a65d18cf7c2500c9865d66b2cb186ecdd1e76552 Mon Sep 17 00:00:00 2001 From: Dave Smith Date: Tue, 19 Mar 2019 09:47:36 +0000 Subject: [PATCH 44/47] Updates to tidy CSS selectors for improved readability --- .../block-library/src/columns/editor.scss | 59 +++++++++---------- 1 file changed, 29 insertions(+), 30 deletions(-) diff --git a/packages/block-library/src/columns/editor.scss b/packages/block-library/src/columns/editor.scss index d91907996e5fd..4e8905f9bbca1 100644 --- a/packages/block-library/src/columns/editor.scss +++ b/packages/block-library/src/columns/editor.scss @@ -9,12 +9,12 @@ // This is sort of an experiment at making sure the editor looks as much like the end result as possible // Potentially the rules here can apply to all nested blocks and enable stacking, in which case it should be moved elsewhere // When using CSS grid, margins do not collapse on the container. -.wp-block-columns .block-editor-block-list__layout { +.wp-block-columns .editor-block-list__layout { margin-left: 0; margin-right: 0; // This max-width is used to constrain the main editor column, it should not cascade into columns - .block-editor-block-list__block { + .editor-block-list__block { max-width: none; } } @@ -23,7 +23,7 @@ // 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. -.block-editor-block-list__block[data-align="full"] .wp-block-columns > .block-editor-inner-blocks { +.editor-block-list__block[data-align="full"] .wp-block-columns > .editor-inner-blocks { padding-left: $block-padding; padding-right: $block-padding; @@ -36,7 +36,7 @@ .wp-block-columns { display: block; - > .block-editor-inner-blocks > .block-editor-block-list__layout { + > .editor-inner-blocks > .editor-block-list__layout { display: flex; // Responsiveness: Allow wrapping on mobile. @@ -54,27 +54,6 @@ } // Adjust the individual column block. > [data-type="core/column"] { - // Remove Block "padding" so individual Column is flush with parent Columns - > .block-editor-block-list__block-edit::before { - left: 0; - right: 0; - } - > .block-editor-block-list__block-edit > .block-editor-block-contextual-toolbar { - margin-left: -$border-width; - } - - // The Column block is a child of the Columns block and is mostly a passthrough container. - // Therefore it shouldn't add additional paddings and margins, so we reset these, and compensate for margins. - // @todo In the future, if a passthrough feature lands, it would be good to apply these rules to such an element in a more generic way. - > .editor-block-list__block-edit > div > .block-core-columns > .editor-inner-blocks { - margin-top: -$block-padding - $block-padding; - margin-bottom: -$block-padding - $block-padding; - } - - > .editor-block-list__block-edit { - margin-top: 0; - margin-bottom: 0; - } // On mobile, only a single column is shown, so match adjacent block paddings. padding-left: 0; @@ -82,11 +61,6 @@ margin-left: -$block-padding; margin-right: -$block-padding; - @include break-small() { - margin-left: $block-padding; - margin-right: $block-padding; - } - // Prevent the columns from growing wider than their distributed sizes. min-width: 0; @@ -101,6 +75,8 @@ @include break-small() { flex-basis: calc(50% - (#{$grid-size-large} + #{$block-padding * 2})); flex-grow: 0; + margin-left: $block-padding; + margin-right: $block-padding; } // Add space between columns. Themes can customize this if they wish to work differently. @@ -118,6 +94,29 @@ margin-left: calc(#{$grid-size-large * 2} + #{$block-padding}); } } + + > .editor-block-list__block-edit { + margin-top: 0; + margin-bottom: 0; + + // Remove Block "padding" so individual Column is flush with parent Columns + &::before { + left: 0; + right: 0; + } + + > .editor-block-contextual-toolbar { + margin-left: -$border-width; + } + + // The Column block is a child of the Columns block and is mostly a passthrough container. + // Therefore it shouldn't add additional paddings and margins, so we reset these, and compensate for margins. + // @todo In the future, if a passthrough feature lands, it would be good to apply these rules to such an element in a more generic way. + > div > .block-core-columns > .editor-inner-blocks { + margin-top: -$block-padding - $block-padding; + margin-bottom: -$block-padding - $block-padding; + } + } } } } From 46a9b12a59bb10f5a6992b221f51de362fa543b2 Mon Sep 17 00:00:00 2001 From: Dave Smith Date: Tue, 19 Mar 2019 10:32:28 +0000 Subject: [PATCH 45/47] Updates to move VAlign Toolbar into Block Editor package Previously the editor package container the toolbar. Now the new Block Editor should be the new home for the toolbar --- .../src/components/block-vertical-alignment-toolbar/README.md | 2 +- .../src/components/block-vertical-alignment-toolbar/icons.js | 0 .../src/components/block-vertical-alignment-toolbar/index.js | 0 .../test/__snapshots__/index.js.snap | 0 .../components/block-vertical-alignment-toolbar/test/index.js | 0 packages/block-editor/src/components/index.js | 1 + packages/block-library/src/columns/deprecated.js | 2 +- packages/block-library/src/columns/edit.js | 3 +-- 8 files changed, 4 insertions(+), 4 deletions(-) rename packages/{editor => block-editor}/src/components/block-vertical-alignment-toolbar/README.md (98%) rename packages/{editor => block-editor}/src/components/block-vertical-alignment-toolbar/icons.js (100%) rename packages/{editor => block-editor}/src/components/block-vertical-alignment-toolbar/index.js (100%) rename packages/{editor => block-editor}/src/components/block-vertical-alignment-toolbar/test/__snapshots__/index.js.snap (100%) rename packages/{editor => block-editor}/src/components/block-vertical-alignment-toolbar/test/index.js (100%) diff --git a/packages/editor/src/components/block-vertical-alignment-toolbar/README.md b/packages/block-editor/src/components/block-vertical-alignment-toolbar/README.md similarity index 98% rename from packages/editor/src/components/block-vertical-alignment-toolbar/README.md rename to packages/block-editor/src/components/block-vertical-alignment-toolbar/README.md index a42ca6dc095a2..8c2c58a03720d 100644 --- a/packages/editor/src/components/block-vertical-alignment-toolbar/README.md +++ b/packages/block-editor/src/components/block-vertical-alignment-toolbar/README.md @@ -16,7 +16,7 @@ import { Fragment } from '@wordpress/element'; import { BlockControls, BlockVerticalAlignmentToolbar, -} from '@wordpress/editor'; +} from '@wordpress/block-editor'; registerBlockType( 'my-plugin/my-block', { // ... diff --git a/packages/editor/src/components/block-vertical-alignment-toolbar/icons.js b/packages/block-editor/src/components/block-vertical-alignment-toolbar/icons.js similarity index 100% rename from packages/editor/src/components/block-vertical-alignment-toolbar/icons.js rename to packages/block-editor/src/components/block-vertical-alignment-toolbar/icons.js diff --git a/packages/editor/src/components/block-vertical-alignment-toolbar/index.js b/packages/block-editor/src/components/block-vertical-alignment-toolbar/index.js similarity index 100% rename from packages/editor/src/components/block-vertical-alignment-toolbar/index.js rename to packages/block-editor/src/components/block-vertical-alignment-toolbar/index.js diff --git a/packages/editor/src/components/block-vertical-alignment-toolbar/test/__snapshots__/index.js.snap b/packages/block-editor/src/components/block-vertical-alignment-toolbar/test/__snapshots__/index.js.snap similarity index 100% rename from packages/editor/src/components/block-vertical-alignment-toolbar/test/__snapshots__/index.js.snap rename to packages/block-editor/src/components/block-vertical-alignment-toolbar/test/__snapshots__/index.js.snap diff --git a/packages/editor/src/components/block-vertical-alignment-toolbar/test/index.js b/packages/block-editor/src/components/block-vertical-alignment-toolbar/test/index.js similarity index 100% rename from packages/editor/src/components/block-vertical-alignment-toolbar/test/index.js rename to packages/block-editor/src/components/block-vertical-alignment-toolbar/test/index.js diff --git a/packages/block-editor/src/components/index.js b/packages/block-editor/src/components/index.js index a43c53ea54f12..aade441e3dde6 100644 --- a/packages/block-editor/src/components/index.js +++ b/packages/block-editor/src/components/index.js @@ -7,6 +7,7 @@ export { default as BlockEdit } from './block-edit'; export { default as BlockFormatControls } from './block-format-controls'; export { default as BlockNavigationDropdown } from './block-navigation/dropdown'; export { default as BlockIcon } from './block-icon'; +export { default as BlockVerticalAlignmentToolbar } from './block-vertical-alignment-toolbar'; export { default as ColorPalette } from './color-palette'; export { default as withColorContext } from './color-palette/with-color-context'; export * from './colors'; diff --git a/packages/block-library/src/columns/deprecated.js b/packages/block-library/src/columns/deprecated.js index 3409524eff9ce..7d3d16c770adb 100644 --- a/packages/block-library/src/columns/deprecated.js +++ b/packages/block-library/src/columns/deprecated.js @@ -4,7 +4,7 @@ import { createBlock } from '@wordpress/blocks'; import { InnerBlocks, -} from '@wordpress/editor'; +} from '@wordpress/block-editor'; /** * Given an HTML string for a deprecated columns inner block, returns the diff --git a/packages/block-library/src/columns/edit.js b/packages/block-library/src/columns/edit.js index 6ebcc97f763fe..af5431807645d 100644 --- a/packages/block-library/src/columns/edit.js +++ b/packages/block-library/src/columns/edit.js @@ -18,8 +18,7 @@ import { InnerBlocks, BlockControls, BlockVerticalAlignmentToolbar, - -} from '@wordpress/editor'; +} from '@wordpress/block-editor'; import { withSelect, withDispatch } from '@wordpress/data'; /** From c8713f5f5b8a053719d48e9462ca9cebd96a4e38 Mon Sep 17 00:00:00 2001 From: Dave Smith Date: Tue, 19 Mar 2019 10:32:54 +0000 Subject: [PATCH 46/47] Automated README update --- packages/block-editor/README.md | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/packages/block-editor/README.md b/packages/block-editor/README.md index 1d1089561ed2a..da61b36fac7c8 100644 --- a/packages/block-editor/README.md +++ b/packages/block-editor/README.md @@ -118,6 +118,12 @@ Undocumented declaration. Undocumented declaration. +### BlockVerticalAlignmentToolbar + +[src/index.js#L15-L15](src/index.js#L15-L15) + +Undocumented declaration. + ### ColorPalette [src/index.js#L15-L15](src/index.js#L15-L15) From 56b838fb2e1437d34632e4963370c7b3e7a0cb07 Mon Sep 17 00:00:00 2001 From: Dave Smith Date: Tue, 19 Mar 2019 10:37:48 +0000 Subject: [PATCH 47/47] Updates changlogs to reflect release status --- packages/block-library/CHANGELOG.md | 5 ++++- packages/editor/CHANGELOG.md | 1 - 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/packages/block-library/CHANGELOG.md b/packages/block-library/CHANGELOG.md index 33ef12ff27487..34ac5b9d4807d 100644 --- a/packages/block-library/CHANGELOG.md +++ b/packages/block-library/CHANGELOG.md @@ -1,3 +1,7 @@ +## 2.4.0 (Unreleased) + +- Add vertical alignment controls to `columns` Block ([#13899](https://github.com/WordPress/gutenberg/pull/13899/)). + ## 2.3.0 (2019-03-06) ### New Feature @@ -5,7 +9,6 @@ - Add background color controls for the table block. - Add new `RSS` block ([#7966](https://github.com/WordPress/gutenberg/pull/7966)). - Add new `Search` block ([#13583](https://github.com/WordPress/gutenberg/pull/13583)). -- Add vertical alignment controls to `columns` Block ([#13899](https://github.com/WordPress/gutenberg/pull/13899/)) - note: individual (child) `column` Blocks are now selectable within the UI (no longer a "passthrough" Block). ## 2.2.12 (2019-01-03) diff --git a/packages/editor/CHANGELOG.md b/packages/editor/CHANGELOG.md index 40ed0b8ccc6f0..ce396bfa582ec 100644 --- a/packages/editor/CHANGELOG.md +++ b/packages/editor/CHANGELOG.md @@ -4,7 +4,6 @@ - Added `createCustomColorsHOC` for creating a higher order `withCustomColors` component. - Added a new `TextEditorGlobalKeyboardShortcuts` component. -- Added `BlockVerticalAlignmentToolbar` for adding a vertical alignment toolbar to Blocks. ### Deprecations