Merge pull request #1941 from WordPress/update/continue-writing-contr…

…ols-reveal-on-focus

Reveal the Continue Writing controls also on focus

editor/modes/visual-editor/block-list.js

@@ -2,6 +2,7 @@
  * External dependencies
  */
 import { connect } from 'react-redux';
+import classnames from 'classnames';
 import { throttle, reduce, noop } from 'lodash';
 
 /**
@@ -10,7 +11,7 @@ import { throttle, reduce, noop } from 'lodash';
 import { __ } from 'i18n';
 import { Component } from 'element';
 import { serialize, getDefaultBlock, createBlock } from 'blocks';
-import { Dashicon } from 'components';
+import { IconButton } from 'components';
 import { ENTER } from 'utils/keycodes';
 
 /**
@@ -34,7 +35,9 @@ const INSERTION_POINT_PLACEHOLDER = '[[insertion-point]]';
 class VisualEditorBlockList extends Component {
 	constructor( props ) {
 		super( props );
-
+		this.state = {
+			showContinueWritingControls: false,
+		};
 		this.onSelectionStart = this.onSelectionStart.bind( this );
 		this.onSelectionChange = this.onSelectionChange.bind( this );
 		this.onSelectionEnd = this.onSelectionEnd.bind( this );
@@ -45,6 +48,7 @@ class VisualEditorBlockList extends Component {
 		this.setLastClientY = this.setLastClientY.bind( this );
 		this.onPointerMove = throttle( this.onPointerMove.bind( this ), 250 );
 		this.onPlaceholderKeyDown = this.onPlaceholderKeyDown.bind( this );
+		this.toggleContinueWritingControls = this.toggleContinueWritingControls.bind( this );
 		// Browser does not fire `*move` event when the pointer position changes
 		// relative to the document, so fire it with the last known position.
 		this.onScroll = () => this.onPointerMove( { clientY: this.lastClientY } );
@@ -198,6 +202,10 @@ class VisualEditorBlockList extends Component {
 		this.props.onInsertBlock( newBlock );
 	}
 
+	toggleContinueWritingControls( showContinueWritingControls ) {
+		return () => this.setState( { showContinueWritingControls } );
+	}
+
 	render() {
 		const {
 			blocks,
@@ -214,6 +222,9 @@ class VisualEditorBlockList extends Component {
 				...blocks.slice( insertionPointIndex + 1 ),
 			]
 			: blocks;
+		const continueWritingClassname = classnames( 'editor-visual-editor__continue-writing', {
+			'is-showing-controls': this.state.showContinueWritingControls,
+		} );
 
 		return (
 			<div>
@@ -248,22 +259,28 @@ class VisualEditorBlockList extends Component {
 						onKeyDown={ noop }
 					/>
 				}
-				<div className="editor-visual-editor__continue-writing">
+				<div
+					className={ continueWritingClassname }
+					onFocus={ this.toggleContinueWritingControls( true ) }
+					onBlur={ this.toggleContinueWritingControls( false ) }
+				>
 					<Inserter position="top right" />
-					<button
+					<IconButton
+						icon="text"
 						className="editor-inserter__block"
 						onClick={ () => this.insertBlock( 'core/text' ) }
+						label={ __( 'Insert text block' ) }
 					>
-						<Dashicon icon="text" />
 						{ __( 'Text' ) }
-					</button>
-					<button
+					</IconButton>
+					<IconButton
+						icon="format-image"
 						className="editor-inserter__block"
 						onClick={ () => this.insertBlock( 'core/image' ) }
+						label={ __( 'Insert image block' ) }
 					>
-						<Dashicon icon="format-image" />
 						{ __( 'Image' ) }
-					</button>
+					</IconButton>
 				</div>
 			</div>
 		);

editor/modes/visual-editor/style.scss

@@ -371,9 +371,11 @@ $sticky-bottom-offset: 20px;
 		width: auto;
 		font-family: $default-font;
 		font-size: $default-font-size;
+		box-shadow: none;
 	}
+
 	&:hover > .editor-inserter__block,
-	&:focus > .editor-inserter__block {
+	&.is-showing-controls > .editor-inserter__block {
 		opacity: 1;
 	}
 }