Display toolbar of controls on selected block

blocks/components/editable/index.js

@@ -75,11 +75,12 @@ export default class Editable extends wp.element.Component {
 	}
 
 	render() {
-		const { tagName: Tag = 'div' } = this.props;
+		const { tagName: Tag = 'div', style } = this.props;
 
 		return (
 			<Tag
 				ref={ this.bindNode }
+				style={ style }
 				className="blocks-editable" />
 		);
 	}

editor/blocks/list/index.js

@@ -16,7 +16,7 @@ wp.blocks.registerBlock( 'core/list', {
 		)
 	},
 
-	edit( { attributes, onChange } ) {
+	edit( { attributes } ) {
 		const { listType = 'ol', items = [] } = attributes;
 		const value = items.map( item => {
 			return `<li>${ item.value }</li>`;
@@ -25,8 +25,7 @@ wp.blocks.registerBlock( 'core/list', {
 		return (
 			<Editable
 				tagName={ listType }
-				value={ value }
-				onChange={ onChange } />
+				value={ value } />
 		);
 	},
 

editor/blocks/text/index.js

@@ -1,4 +1,4 @@
-const { html } = wp.blocks.query;
+const { html, prop } = wp.blocks.query;
 const Editable = wp.blocks.Editable;
 
 wp.blocks.registerBlock( 'core/text', {
@@ -9,20 +9,57 @@ wp.blocks.registerBlock( 'core/text', {
 	category: 'common',
 
 	attributes: {
-		value: html( 'p' )
+		content: html( 'p' ),
+		align: prop( 'p', 'style.textAlign' )
 	},
 
-	edit( { attributes, onChange } ) {
+	controls: [
+		{
+			icon: 'editor-alignleft',
+			title: wp.i18n.__( 'Align left' ),
+			isActive: ( { align } ) => ! align || 'left' === align,
+			onClick( attributes, setAttributes ) {
+				setAttributes( { align: undefined } );
+			}
+		},
+		{
+			icon: 'editor-aligncenter',
+			title: wp.i18n.__( 'Align center' ),
+			isActive: ( { align } ) => 'center' === align,
+			onClick( attributes, setAttributes ) {
+				setAttributes( { align: 'center' } );
+			}
+		},
+		{
+			icon: 'editor-alignright',
+			title: wp.i18n.__( 'Align right' ),
+			isActive: ( { align } ) => 'right' === align,
+			onClick( attributes, setAttributes ) {
+				setAttributes( { align: 'right' } );
+			}
+		}
+	],
+
+	edit( { attributes, setAttributes } ) {
+		const { content, align } = attributes;
+
 		return (
 			<Editable
 				tagName="p"
-				value={ attributes.value }
-				onChange={ ( value ) => onChange( { value } ) }
+				value={ content }
+				onChange={ ( value ) => setAttributes( { content: value } ) }
+				style={ align ? { textAlign: align } : null }
 			/>
 		);
 	},
 
 	save( { attributes } ) {
-		return <p dangerouslySetInnerHTML={ { __html: attributes.value } } />;
+		const { align, content } = attributes;
+
+		return (
+			<p
+				style={ align ? { textAlign: align } : null }
+				dangerouslySetInnerHTML={ { __html: content } } />
+		);
 	}
 } );

editor/components/toolbar/index.js

@@ -0,0 +1,38 @@
+/**
+ * External dependencies
+ */
+import classNames from 'classnames';
+
+/**
+ * Internal dependencies
+ */
+import './style.scss';
+import Dashicon from '../dashicon';
+
+function Toolbar( { controls } ) {
+	if ( ! controls || ! controls.length ) {
+		return null;
+	}
+
+	return (
+		<ul className="editor-toolbar">
+			{ controls.map( ( control, index ) => (
+				<button
+					key={ index }
+					className={ classNames( 'editor-toolbar__control', {
+						'is-active': control.isActive && control.isActive()
+					} ) }
+					title={ control.title }
+					onClick={ ( event ) => {
+						event.stopPropagation();
+						control.onClick();
+					} }
+				>
+					<Dashicon icon={ control.icon } />
+				</button>
+			) ) }
+		</ul>
+	);
+}
+
+export default Toolbar;

editor/components/toolbar/style.scss

@@ -0,0 +1,35 @@
+.editor-toolbar {
+	margin: 0;
+	border: 1px solid $light-gray-500;
+	box-shadow: 0px 3px 20px rgba( 18, 24, 30, .1 ), 0px 1px 3px rgba( 18, 24, 30, .1 );
+	background-color: $white;
+}
+
+.editor-toolbar__control {
+	margin: 2px;
+	margin-left: 0;
+	padding: 6px;
+	background: none;
+	border: 1px solid transparent;
+	outline: none;
+	color: $dark-gray-500;
+	cursor: pointer;
+
+	&:first-child {
+		margin-left: 2px;
+	}
+
+	&.is-active,
+	&:hover {
+		border-color: $dark-gray-500;
+	}
+
+	&.is-active {
+		background-color: $dark-gray-500;
+		color: $white;
+	}
+}
+
+.editor-toolbar__control .dashicon {
+	display: block;
+}

editor/modes/visual-editor/block.js

@@ -4,6 +4,11 @@
 import { connect } from 'react-redux';
 import classnames from 'classnames';
 
+/**
+ * Internal dependencies
+ */
+import Toolbar from '../../components/toolbar';
+
 function VisualEditorBlock( props ) {
 	const { block } = props;
 	const settings = wp.blocks.getBlockSettings( block.blockType );
@@ -17,22 +22,31 @@ function VisualEditorBlock( props ) {
 		return null;
 	}
 
-	function onAttributesChange( attributes ) {
-		props.onChange( {
+	const { isHovered } = props;
+	const isSelected = props.isSelected;
+	const className = classnames( 'editor-visual-editor__block', {
+		'is-selected': isSelected,
+		'is-hovered': isHovered
+	} );
+
+	const { onChange, onSelect, onDeselect, onMouseEnter, onMouseLeave } = props;
+
+	function setAttributes( attributes ) {
+		onChange( {
 			attributes: {
 				...block.attributes,
 				...attributes
 			}
 		} );
 	}
 
-	const { isSelected, isHovered } = props;
-	const className = classnames( 'editor-visual-editor__block', {
-		'is-selected': isSelected,
-		'is-hovered': isHovered
-	} );
-
-	const { onSelect, onDeselect, onMouseEnter, onMouseLeave } = props;
+	function maybeDeselect( event ) {
+		// Annoyingly React does not support focusOut and we're forced to check
+		// related target to ensure it's not a child when blur fires.
+		if ( ! event.currentTarget.contains( event.relatedTarget ) ) {
+			onDeselect();
+		}
+	}
 
 	// Disable reason: Each block can receive focus but must be able to contain
 	// block children. Tab keyboard navigation enabled by tabIndex assignment.
@@ -42,15 +56,23 @@ function VisualEditorBlock( props ) {
 		<div
 			tabIndex="0"
 			onFocus={ onSelect }
-			onBlur={ onDeselect }
+			onBlur={ maybeDeselect }
 			onKeyDown={ onDeselect }
 			onMouseEnter={ onMouseEnter }
 			onMouseLeave={ onMouseLeave }
 			className={ className }
 		>
+			{ isSelected && settings.controls ? (
+				<Toolbar
+					controls={ settings.controls.map( ( control ) => ( {
+						...control,
+						onClick: () => control.onClick( block.attributes, setAttributes ),
+						isActive: () => control.isActive( block.attributes )
+					} ) ) } />
+			) : null }
 			<BlockEdit
 				attributes={ block.attributes }
-				onChange={ onAttributesChange } />
+				setAttributes={ setAttributes } />
 		</div>
 	);
 	/* eslint-enable jsx-a11y/no-static-element-interactions */

editor/modes/visual-editor/style.scss

@@ -16,6 +16,7 @@
 }
 
 .editor-visual-editor__block {
+	position: relative;
 	padding: 15px;
 	border: 2px solid transparent;
 	transition: 0.2s border-color;
@@ -28,3 +29,10 @@
 		border: 2px solid $light-gray-500;
 	}
 }
+
+.editor-visual-editor__block .editor-toolbar {
+	position: absolute;
+	bottom: 100%;
+	margin-bottom: -4px;
+	left: 8px;
+}

languages/gutenberg.pot

@@ -11,6 +11,18 @@ msgstr ""
 msgid "List"
 msgstr ""
 
+#: editor/blocks/text/index.js:19
+msgid "Align left"
+msgstr ""
+
+#: editor/blocks/text/index.js:27
+msgid "Align center"
+msgstr ""
+
+#: editor/blocks/text/index.js:35
+msgid "Align right"
+msgstr ""
+
 #: editor/header/mode-switcher/index.js:30
 msgid "Visual"
 msgstr ""

package.json

@@ -57,7 +57,7 @@
   },
   "dependencies": {
     "classnames": "^2.2.5",
-    "hpq": "^1.1.1",
+    "hpq": "^1.2.0",
     "jed": "^1.1.1",
     "lodash": "^4.17.4",
     "react-redux": "^5.0.3",