Core Columns Block - adds ability to vertically align all the columns

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)

packages/block-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 `<BlockControls />` component. Then inside of this add the `<BlockVerticalAlignmentToolbar />` where required. 
+
+
+```jsx
+import { registerBlockType } from '@wordpress/blocks';
+import { Fragment } from '@wordpress/element';
+import {
+	BlockControls,
+	BlockVerticalAlignmentToolbar,
+} from '@wordpress/block-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 (
+			<Fragment>
+				<BlockControls>
+					<BlockVerticalAlignmentToolbar
+						onChange={ onChange }
+						value={ verticalAlignment }
+					/>
+				</BlockControls>
+				<div>
+					// your Block here
+				</div>
+			</Fragment>
+		);
+	}
+} );
+```
+
+_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.
+
+## 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 may be `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`.

packages/block-editor/src/components/block-vertical-alignment-toolbar/icons.js

@@ -0,0 +1,26 @@
+/**
+ * WordPress dependencies
+ */
+import { Path, SVG } from '@wordpress/components';
+
+export const alignBottom = (
+	<SVG xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24">
+		<Path fill="none" d="M0 0h24v24H0V0z" />
+		<Path d="M16 13h-3V3h-2v10H8l4 4 4-4zM4 19v2h16v-2H4z" />
+	</SVG>
+);
+
+export const alignCenter = (
+	<SVG xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24">
+		<Path fill="none" d="M0 0h24v24H0V0z" />
+		<Path d="M8 19h3v4h2v-4h3l-4-4-4 4zm8-14h-3V1h-2v4H8l4 4 4-4zM4 11v2h16v-2H4z"
+		/>
+	</SVG>
+);
+
+export const alignTop = (
+	<SVG xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24">
+		<Path fill="none" d="M0 0h24v24H0V0z" />
+		<Path d="M8 11h3v10h2V11h3l-4-4-4 4zM4 3v2h16V3H4z" />
+	</SVG>
+);

packages/block-editor/src/components/block-vertical-alignment-toolbar/index.js

@@ -0,0 +1,76 @@
+/**
+ * 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 { withBlockEditContext } from '../block-edit/context';
+import { alignTop, alignCenter, alignBottom } from './icons';
+
+const BLOCK_ALIGNMENTS_CONTROLS = {
+	top: {
+		icon: alignTop,
+		title: _x( 'Vertically Align Top', 'Block vertical alignment setting' ),
+	},
+	center: {
+		icon: alignCenter,
+		title: _x( 'Vertically Align Middle', 'Block vertical alignment setting' ),
+	},
+	bottom: {
+		icon: alignBottom,
+		title: _x( 'Vertically 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 ];
+	const defaultAlignmentControl = BLOCK_ALIGNMENTS_CONTROLS[ DEFAULT_CONTROL ];
+
+	return (
+		<Toolbar
+			isCollapsed={ isCollapsed }
+			icon={ activeAlignment ? activeAlignment.icon : defaultAlignmentControl.icon }
+			label={ _x( 'Change Alignment', 'Block vertical alignment setting label' ) }
+			controls={
+				controls.map( ( control ) => {
+					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 );

packages/block-editor/src/components/block-vertical-alignment-toolbar/test/__snapshots__/index.js.snap

@@ -0,0 +1,84 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`BlockVerticalAlignmentToolbar should match snapshot 1`] = `
+<Toolbar
+  controls={
+    Array [
+      Object {
+        "icon": <SVG
+          height="20"
+          viewBox="0 0 24 24"
+          width="20"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <Path
+            d="M0 0h24v24H0V0z"
+            fill="none"
+          />
+          <Path
+            d="M8 11h3v10h2V11h3l-4-4-4 4zM4 3v2h16V3H4z"
+          />
+        </SVG>,
+        "isActive": true,
+        "onClick": [Function],
+        "title": "Vertically Align Top",
+      },
+      Object {
+        "icon": <SVG
+          height="20"
+          viewBox="0 0 24 24"
+          width="20"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <Path
+            d="M0 0h24v24H0V0z"
+            fill="none"
+          />
+          <Path
+            d="M8 19h3v4h2v-4h3l-4-4-4 4zm8-14h-3V1h-2v4H8l4 4 4-4zM4 11v2h16v-2H4z"
+          />
+        </SVG>,
+        "isActive": false,
+        "onClick": [Function],
+        "title": "Vertically Align Middle",
+      },
+      Object {
+        "icon": <SVG
+          height="20"
+          viewBox="0 0 24 24"
+          width="20"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <Path
+            d="M0 0h24v24H0V0z"
+            fill="none"
+          />
+          <Path
+            d="M16 13h-3V3h-2v10H8l4 4 4-4zM4 19v2h16v-2H4z"
+          />
+        </SVG>,
+        "isActive": false,
+        "onClick": [Function],
+        "title": "Vertically Align Bottom",
+      },
+    ]
+  }
+  icon={
+    <SVG
+      height="20"
+      viewBox="0 0 24 24"
+      width="20"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <Path
+        d="M0 0h24v24H0V0z"
+        fill="none"
+      />
+      <Path
+        d="M8 11h3v10h2V11h3l-4-4-4 4zM4 3v2h16V3H4z"
+      />
+    </SVG>
+  }
+  label="Change Alignment"
+/>
+`;

packages/block-editor/src/components/block-vertical-alignment-toolbar/test/index.js

@@ -0,0 +1,46 @@
+/**
+ * External dependencies
+ */
+import { shallow } from 'enzyme';
+
+/**
+ * Internal dependencies
+ */
+import { BlockVerticalAlignmentToolbar } from '../';
+
+describe( 'BlockVerticalAlignmentToolbar', () => {
+	const alignment = 'top';
+	const onChange = jest.fn();
+
+	const wrapper = shallow( <BlockVerticalAlignmentToolbar value={ alignment } onChange={ onChange } /> );
+
+	const controls = wrapper.props().controls;
+
+	afterEach( () => {
+		onChange.mockClear();
+	} );
+
+	it( 'should match snapshot', () => {
+		expect( wrapper ).toMatchSnapshot();
+	} );
+
+	it( 'should call onChange with undefined, when the control is already active', () => {
+		const activeControl = controls.find( ( { title } ) => title.toLowerCase().includes( alignment ) );
+		activeControl.onClick();
+
+		expect( activeControl.isActive ).toBe( true );
+		expect( onChange ).toHaveBeenCalledTimes( 1 );
+		expect( onChange ).toHaveBeenCalledWith( undefined );
+	} );
+
+	it( 'should call onChange with alignment value when the control is inactive', () => {
+		// note "middle" alias for "center"
+		const inactiveCenterControl = controls.find( ( { title } ) => title.toLowerCase().includes( 'middle' ) );
+
+		inactiveCenterControl.onClick();
+
+		expect( inactiveCenterControl.isActive ).toBe( false );
+		expect( onChange ).toHaveBeenCalledTimes( 1 );
+		expect( onChange ).toHaveBeenCalledWith( 'center' );
+	} );
+} );

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';

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