Writing Flow: Revert the empty placeholder

WordPress · Nov 24, 2017 · 97e439f · 97e439f
1 parent d0b84b0
commit 97e439f
Show file tree

Hide file tree

Showing 5 changed files with 24 additions and 42 deletions.
diff --git a/editor/components/default-block-appender/index.js b/editor/components/default-block-appender/index.js
@@ -2,7 +2,6 @@
  * External dependencies
  */
 import { connect } from 'react-redux';
-import classnames from 'classnames';
 import 'element-closest';
 
 /**
@@ -33,31 +32,22 @@ export class DefaultBlockAppender extends Component {
 
 	render() {
 		const { count } = this.props;
-
-		const className = classnames( 'editor-default-block-appender', {
-			'is-visible-placeholder': count === 0,
-		} );
+		if ( count !== 0 ) {
+			return null;
+		}
 
 		return (
-			<div className={ className }>
+			<div className="editor-default-block-appender">
 				<BlockDropZone />
-				{ count === 0 &&
-					<input
-						className="editor-default-block-appender__content"
-						type="text"
-						readOnly
-						onFocus={ this.appendDefaultBlock }
-						onClick={ this.appendDefaultBlock }
-						onKeyDown={ this.appendDefaultBlock }
-						value={ __( 'Write your story' ) }
-					/>
-				}
-				{ count !== 0 &&
-					<button
-						className="editor-default-block-appender__content"
-						onClick={ this.appendDefaultBlock }
-					/>
-				}
+				<input
+					className="editor-default-block-appender__content"
+					type="text"
+					readOnly
+					onFocus={ this.appendDefaultBlock }
+					onClick={ this.appendDefaultBlock }
+					onKeyDown={ this.appendDefaultBlock }
+					value={ __( 'Write your story' ) }
+				/>
 			</div>
 		);
 	}

diff --git a/editor/components/default-block-appender/style.scss b/editor/components/default-block-appender/style.scss
@@ -1,32 +1,22 @@
 $empty-paragraph-height: $text-editor-font-size * 4;
 
-.editor-default-block-appender {
-	&.is-visible-placeholder .editor-default-block-appender__content {
-		height: $empty-paragraph-height;
-		color: $dark-gray-300;
-		outline: 1px solid transparent;
-		transition: 0.2s outline;
-
-		&:hover {
-			outline: 1px solid $light-gray-500;
-		}
-	}
-}
-
-.editor-default-block-appender__content,
 input[type=text].editor-default-block-appender__content {
 	border: none;
 	background: none;
 	box-shadow: none;
 	display: block;
 	width: 100%;
-	height: $empty-paragraph-height * 1.5;
 	font-size: $editor-font-size;
 	line-height: $editor-line-height;
 	cursor: text;
 	max-width: none;	// fixes a bleed issue from the admin
 
-	&:focus {
+	height: $empty-paragraph-height;
+	color: $dark-gray-300;
+	outline: 1px solid transparent;
+	transition: 0.2s outline;
+
+	&:focus, &:hover {
 		outline: 1px solid $light-gray-500;
 	}
 }
diff --git a/editor/edit-post/modes/visual-editor/index.js b/editor/edit-post/modes/visual-editor/index.js
@@ -13,6 +13,7 @@ import { Component, findDOMNode } from '@wordpress/element';
  */
 import './style.scss';
 import { BlockList, PostTitle, WritingFlow, DefaultBlockAppender, EditorGlobalKeyboardShortcuts } from '../../../components';
+import VisualEditorInserter from './inserter';
 import { isFeatureActive } from '../../../selectors';
 import { clearSelectedBlock } from '../../../actions';
 
@@ -59,8 +60,9 @@ class VisualEditor extends Component {
 						ref={ this.bindBlocksContainer }
 						showContextualToolbar={ ! this.props.hasFixedToolbar }
 					/>
+					<DefaultBlockAppender />
 				</WritingFlow>
-				<DefaultBlockAppender />
+				<VisualEditorInserter />
 			</div>
 		);
 		/* eslint-enable jsx-a11y/no-static-element-interactions */

diff --git a/test/e2e/integration/002-adding-blocks.js b/test/e2e/integration/002-adding-blocks.js
@@ -11,7 +11,7 @@ describe( 'Adding blocks', () => {
 		cy.get( lastBlockSelector ).type( 'Paragraph block' );
 
 		// Using the slash command
-		cy.get( '.editor-default-block-appender' ).click();
+		cy.get( '.editor-visual-editor__inserter [aria-label="Insert Paragraph"]' ).click();
 		cy.get( lastBlockSelector ).type( '/quote{enter}' );
 		cy.get( lastBlockSelector ).type( 'Quote block' );
 

diff --git a/test/e2e/integration/003-multi-block-selection.js b/test/e2e/integration/003-multi-block-selection.js
@@ -12,7 +12,7 @@ describe( 'Multi-block selection', () => {
 		// Creating test blocks
 		cy.get( '.editor-default-block-appender' ).click();
 		cy.get( lastBlockSelector ).type( 'First Paragraph' );
-		cy.get( '.editor-default-block-appender' ).click();
+		cy.get( '.editor-visual-editor__inserter [aria-label="Insert Paragraph"]' ).click();
 		cy.get( lastBlockSelector ).type( 'Second Paragraph' );
 
 		// Default: No selection