Format Controls: Leverage the Toolbar component

 - clear the `setTimeout` on unmount
 - don't mutate the state object

Author: youknowriad

blocks/components/editable/format-toolbar.js

@@ -1,14 +1,10 @@
-/**
- * External dependencies
- */
-import classNames from 'classnames';
-
 /**
  * Internal dependencies
  */
  // TODO: We mustn't import by relative path traversing from blocks to editor
  // as we're doing here; instead, we should consider a common components path.
 import IconButton from '../../../editor/components/icon-button';
+import Toolbar from '../../../editor/components/toolbar';
 
 const FORMATTING_CONTROLS = [
 	{
@@ -42,6 +38,12 @@ class FormatToolbar extends wp.element.Component {
 		this.updateLinkValue = this.updateLinkValue.bind( this );
 	}
 
+	componentWillUnmout() {
+		if ( this.editTimeout ) {
+			clearTimeout( this.editTimeout );
+		}
+	}
+
 	componentWillReceiveProps( nextProps ) {
 		const newState = {
 			linkValue: nextProps.formats.link ? nextProps.formats.link.value : ''
@@ -57,8 +59,7 @@ class FormatToolbar extends wp.element.Component {
 	}
 
 	toggleFormat( format ) {
-		return ( event ) => {
-			event.stopPropagation();
+		return () => {
 			this.props.onChange( {
 				[ format ]: ! this.props.formats[ format ]
 			} );
@@ -70,7 +71,7 @@ class FormatToolbar extends wp.element.Component {
 			this.props.onChange( { link: { value: '' } } );
 
 			// Debounce the call to avoid the reset in willReceiveProps
-			setTimeout( () => this.setState( { isEditingLink: true } ) );
+			this.editTimeout = setTimeout( () => this.setState( { isEditingLink: true } ) );
 		}
 	}
 
@@ -107,26 +108,22 @@ class FormatToolbar extends wp.element.Component {
 
 		return (
 			<div className="editable-format-toolbar">
-				<ul className="editor-toolbar">
-					{ FORMATTING_CONTROLS.map( ( control, index ) => (
-						<IconButton
-							key={ index }
-							icon={ control.icon }
-							label={ control.title }
-							onClick={ this.toggleFormat( control.format ) }
-							className={ classNames( 'editor-toolbar__control', {
-								'is-active': !! formats[ control.format ]
-							} ) } />
-					) ) }
-					<IconButton
-						icon="admin-links"
-						label={ wp.i18n.__( 'Link' ) }
-						onClick={ this.addLink }
-						className={ classNames( 'editor-toolbar__control', {
-							'is-active': !! formats.link
-						} ) }
-					/>
-				</ul>
+				<Toolbar
+					controls={
+						FORMATTING_CONTROLS
+							.map( ( control ) => ( {
+								...control,
+								onClick: this.toggleFormat( control.format ),
+								isActive: !! formats[ control.format ]
+							} ) )
+							.concat( [ {
+								icon: 'admin-links',
+								title: wp.i18n.__( 'Link' ),
+								onClick: this.addLink,
+								isActive: !! formats.link
+							} ] )
+					}
+				/>
 
 				{ !! formats.link && this.state.isEditingLink &&
 					<form

blocks/components/editable/index.js

@@ -347,7 +347,7 @@ export default class Editable extends wp.element.Component {
 		} );
 
 		this.setState( {
-			formats: merge( this.state.formats, formats )
+			formats: merge( {}, this.state.formats, formats )
 		} );
 	}
 

editor/modes/visual-editor/block.js

@@ -140,7 +140,7 @@ class VisualEditorBlock extends wp.element.Component {
 
 		// Disable reason: Each block can be selected by clicking on it
 
-		/* eslint-disable jsx-a11y/no-static-element-interactions, jsx-a11y/onclick-has-role */
+		/* eslint-disable jsx-a11y/no-static-element-interactions, jsx-a11y/onclick-has-role, jsx-a11y/click-events-have-key-events */
 		return (
 			<div
 				ref={ this.bindBlockNode }

languages/gutenberg.pot

@@ -3,23 +3,23 @@ msgstr ""
 "Content-Type: text/plain; charset=utf-8\n"
 "X-Generator: babel-plugin-wp-i18n\n"
 
-#: blocks/components/editable/format-toolbar.js:123
-msgid "Link"
+#: blocks/components/editable/format-toolbar.js:12
+msgid "Bold"
 msgstr ""
 
-#: blocks/components/editable/format-toolbar.js:142
-msgid "Paste URL or type"
+#: blocks/components/editable/format-toolbar.js:121
+msgid "Link"
 msgstr ""
 
-#: blocks/components/editable/format-toolbar.js:16
-msgid "Bold"
+#: blocks/components/editable/format-toolbar.js:139
+msgid "Paste URL or type"
 msgstr ""
 
-#: blocks/components/editable/format-toolbar.js:21
+#: blocks/components/editable/format-toolbar.js:17
 msgid "Italic"
 msgstr ""
 
-#: blocks/components/editable/format-toolbar.js:26
+#: blocks/components/editable/format-toolbar.js:22
 msgid "Strikethrough"
 msgstr ""