Text formatting UI (#460)

blocks/components/editable/index.js

@@ -2,7 +2,7 @@
  * External dependencies
  */
 import classnames from 'classnames';
-import { last } from 'lodash';
+import { forEach, last } from 'lodash';
 import { Parser as HtmlToReactParser } from 'html-to-react';
 
 /**
@@ -11,6 +11,11 @@ import { Parser as HtmlToReactParser } from 'html-to-react';
 import './style.scss';
 
 const htmlToReactParser = new HtmlToReactParser();
+const formatMap = {
+	strong: 'bold',
+	em: 'italic',
+	del: 'strikethrough'
+};
 
 export default class Editable extends wp.element.Component {
 	constructor() {
@@ -21,6 +26,8 @@ export default class Editable extends wp.element.Component {
 		this.onNewBlock = this.onNewBlock.bind( this );
 		this.bindNode = this.bindNode.bind( this );
 		this.onFocus = this.onFocus.bind( this );
+		this.onNodeChange = this.onNodeChange.bind( this );
+		this.formats = {};
 	}
 
 	componentDidMount() {
@@ -50,6 +57,10 @@ export default class Editable extends wp.element.Component {
 		editor.on( 'focusout', this.onChange );
 		editor.on( 'NewBlock', this.onNewBlock );
 		editor.on( 'focusin', this.onFocus );
+
+		if ( this.props.onFormatChange ) {
+			editor.on( 'nodechange', this.onNodeChange );
+		}
 	}
 
 	onInit() {
@@ -119,6 +130,20 @@ export default class Editable extends wp.element.Component {
 		} );
 	}
 
+	onNodeChange( { parents } ) {
+		this.formats = parents.reduce( ( result, node ) => {
+			const tag = node.nodeName.toLowerCase();
+
+			if ( formatMap.hasOwnProperty( tag ) ) {
+				result[ formatMap[ tag ] ] = true;
+			}
+
+			return result;
+		}, {} );
+
+		this.props.onFormatChange( this.formats );
+	}
+
 	bindNode( ref ) {
 		this.node = ref;
 	}
@@ -183,6 +208,22 @@ export default class Editable extends wp.element.Component {
 		}
 	}
 
+	componentWillReceiveProps( nextProps ) {
+		forEach( nextProps.formats, ( state, format ) => {
+			const currentState = this.formats[ format ] || false;
+
+			if ( state !== currentState ) {
+				this.editor.focus();
+
+				if ( state ) {
+					this.editor.formatter.apply( format );
+				} else {
+					this.editor.formatter.remove( format );
+				}
+			}
+		} );
+	}
+
 	render() {
 		const { tagName: Tag = 'div', style, className } = this.props;
 		const classes = classnames( 'blocks-editable', className );

blocks/library/text/index.js

@@ -44,7 +44,7 @@ registerBlock( 'core/text', {
 		}
 	],
 
-	edit( { attributes, setAttributes, insertBlockAfter, focus, setFocus } ) {
+	edit( { attributes, setAttributes, insertBlockAfter, focus, setFocus, onFormatChange, formats } ) {
 		const { content = <p />, align } = attributes;
 
 		return (
@@ -64,6 +64,8 @@ registerBlock( 'core/text', {
 						content: after
 					} ) );
 				} }
+				onFormatChange={ onFormatChange }
+				formats={ formats }
 			/>
 		);
 	},

editor/modes/visual-editor/block.js

@@ -11,20 +11,62 @@ import Toolbar from 'components/toolbar';
 import BlockMover from 'components/block-mover';
 import BlockSwitcher from 'components/block-switcher';
 
+const formattingControls = [
+	{
+		icon: 'editor-bold',
+		title: wp.i18n.__( 'Bold' ),
+		format: 'bold'
+	},
+	{
+		icon: 'editor-italic',
+		title: wp.i18n.__( 'Italic' ),
+		format: 'italic'
+	},
+	{
+		icon: 'editor-strikethrough',
+		title: wp.i18n.__( 'Strikethrough' ),
+		format: 'strikethrough'
+	}
+];
+
 class VisualEditorBlock extends wp.element.Component {
 	constructor() {
 		super( ...arguments );
 		this.bindBlockNode = this.bindBlockNode.bind( this );
 		this.setAttributes = this.setAttributes.bind( this );
 		this.maybeDeselect = this.maybeDeselect.bind( this );
 		this.maybeHover = this.maybeHover.bind( this );
+		this.onFormatChange = this.onFormatChange.bind( this );
+		this.toggleFormat = this.toggleFormat.bind( this );
 		this.previousOffset = null;
+		this.state = {
+			formats: {}
+		};
 	}
 
 	bindBlockNode( node ) {
 		this.node = node;
 	}
 
+	onFormatChange( formats ) {
+		if ( ! this.state.hasEditable ) {
+			this.setState( { hasEditable: true } );
+		}
+
+		this.setState( { formats } );
+	}
+
+	toggleFormat( format ) {
+		const { formats } = this.state;
+
+		this.setState( {
+			formats: {
+				...formats,
+				[ format ]: ! formats[ format ]
+			}
+		} );
+	}
+
 	componentWillReceiveProps( newProps ) {
 		if (
 			this.props.order !== newProps.order &&
@@ -119,6 +161,14 @@ class VisualEditorBlock extends wp.element.Component {
 									isActive: () => control.isActive( block.attributes )
 								} ) ) } />
 						) }
+						{ this.state.hasEditable && (
+							<Toolbar
+								controls={ formattingControls.map( ( control ) => ( {
+									...control,
+									onClick: () => this.toggleFormat( control.format ),
+									isActive: () => !! this.state.formats[ control.format ]
+								} ) ) } />
+						) }
 					</div>
 				}
 				<BlockEdit
@@ -127,6 +177,8 @@ class VisualEditorBlock extends wp.element.Component {
 					setAttributes={ this.setAttributes }
 					insertBlockAfter={ onInsertAfter }
 					setFocus={ onFocus }
+					onFormatChange={ this.onFormatChange }
+					formats={ this.state.formats }
 				/>
 			</div>
 		);

editor/modes/visual-editor/style.scss

@@ -50,6 +50,7 @@
 
 .editor-visual-editor__block-controls .editor-toolbar {
 	display: inline-flex;
+	margin-right: 10px;
 }
 
 .editor-visual-editor__block-controls .editor-block-switcher {

languages/gutenberg.pot

@@ -95,6 +95,18 @@ msgstr ""
 msgid "Publish"
 msgstr ""
 
+#: editor/modes/visual-editor/block.js:17
+msgid "Bold"
+msgstr ""
+
+#: editor/modes/visual-editor/block.js:22
+msgid "Italic"
+msgstr ""
+
+#: editor/modes/visual-editor/block.js:27
+msgid "Strikethrough"
+msgstr ""
+
 #: editor/header/mode-switcher/index.js:24
 msgctxt "Name for the Text editor tab (formerly HTML)"
 msgid "Text"