Move "continue writing" next to inserter and show on hover. (#1553)

* Move "continue writing" next to inserter and show on hover. * Convert empty text to row of common blocks.
WordPress · Jun 28, 2017 · 8417e9e · 8417e9e
1 parent ecea4ef
commit 8417e9e
Show file tree

Hide file tree

Showing 3 changed files with 60 additions and 13 deletions.
diff --git a/editor/modes/visual-editor/block-list.js b/editor/modes/visual-editor/block-list.js
@@ -10,12 +10,14 @@ import { throttle, reduce, noop } from 'lodash';
 import { __ } from 'i18n';
 import { Component } from 'element';
 import { serialize, getDefaultBlock, createBlock } from 'blocks';
+import { Dashicon } from 'components';
 import { ENTER } from 'utils/keycodes';
 
 /**
  * Internal dependencies
  */
 import VisualEditorBlock from './block';
+import Inserter from '../../inserter';
 import {
 	getBlockUids,
 	getBlockInsertionPoint,
@@ -191,8 +193,19 @@ class VisualEditorBlockList extends Component {
 		this.props.onInsertBlock( newBlock );
 	}
 
+	insertBlock( name ) {
+		const newBlock = createBlock( name );
+		this.props.onInsertBlock( newBlock );
+	}
+
 	render() {
-		const { blocks, showInsertionPoint, insertionPoint, multiSelectedBlockUids } = this.props;
+		const {
+			blocks,
+			showInsertionPoint,
+			insertionPoint,
+			multiSelectedBlockUids,
+		} = this.props;
+
 		const insertionPointIndex = blocks.indexOf( insertionPoint );
 		const blocksWithInsertionPoint = showInsertionPoint
 			? [
@@ -224,16 +237,34 @@ class VisualEditorBlockList extends Component {
 						/>
 					);
 				} ) }
-
-				<input
-					type="text"
-					readOnly
-					className="editor-visual-editor__placeholder"
-					value={ ! blocks.length ? __( 'Write your story' ) : __( 'Continue writing…' ) }
-					onFocus={ ! blocks.length ? this.appendDefaultBlock : noop }
-					onClick={ !! blocks.length ? this.appendDefaultBlock : noop }
-					onKeyDown={ !! blocks.length ? this.onPlaceholderKeyDown : noop }
-				/>
+				{ ! blocks.length &&
+					<input
+						type="text"
+						readOnly
+						className="editor-visual-editor__placeholder"
+						value={ __( 'Write your story' ) }
+						onFocus={ this.appendDefaultBlock }
+						onClick={ noop }
+						onKeyDown={ noop }
+					/>
+				}
+				<div className="editor-visual-editor__continue-writing">
+					<Inserter position="top right" />
+					<button
+						className="editor-inserter__block"
+						onClick={ () => this.insertBlock( 'core/text' ) }
+					>
+						<Dashicon icon="text" />
+						{ __( 'Text' ) }
+					</button>
+					<button
+						className="editor-inserter__block"
+						onClick={ () => this.insertBlock( 'core/image' ) }
+					>
+						<Dashicon icon="format-image" />
+						{ __( 'Image' ) }
+					</button>
+				</div>
 			</div>
 		);
 	}

diff --git a/editor/modes/visual-editor/index.js b/editor/modes/visual-editor/index.js
@@ -15,7 +15,6 @@ import { CHAR_A } from 'utils/keycodes';
  * Internal dependencies
  */
 import './style.scss';
-import Inserter from '../../inserter';
 import VisualEditorBlockList from './block-list';
 import PostTitle from '../../post-title';
 import { getBlockUids } from '../../selectors';
@@ -80,7 +79,6 @@ class VisualEditor extends Component {
 			>
 				<PostTitle />
 				<VisualEditorBlockList ref={ this.bindBlocksContainer } />
-				<Inserter position="top right" />
 			</div>
 		);
 		/* eslint-enable jsx-a11y/no-static-element-interactions, jsx-a11y/onclick-has-role, jsx-a11y/click-events-have-key-events */

diff --git a/editor/modes/visual-editor/style.scss b/editor/modes/visual-editor/style.scss
@@ -322,3 +322,21 @@ $sticky-bottom-offset: 20px;
 		outline: 1px solid $light-gray-500;
 	}
 }
+
+.editor-visual-editor__continue-writing {
+	display: flex;
+	align-items: baseline;
+
+	.editor-inserter__block {
+		opacity: 0;
+		transition: opacity 150ms;
+		margin: 0 10px;
+		width: auto;
+		font-family: $default-font;
+		font-size: $default-font-size;
+	}
+	&:hover .editor-inserter__block,
+	&:focus .editor-inserter__block {
+		opacity: 1;
+	}
+}