Writing Flow: Revert the empty placeholder

WordPress · Nov 27, 2017 · 8ef1f3d · 8ef1f3d
1 parent d0b84b0
commit 8ef1f3d
Show file tree

Hide file tree

Showing 7 changed files with 26 additions and 63 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/components/default-block-appender/test/__snapshots__/index.js.snap b/editor/components/default-block-appender/test/__snapshots__/index.js.snap
@@ -1,20 +1,10 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`DefaultBlockAppender blocks present should match snapshot 1`] = `
-<div
-  className="editor-default-block-appender"
->
-  <Connect(BlockDropZone) />
-  <button
-    className="editor-default-block-appender__content"
-    onClick={[Function]}
-  />
-</div>
-`;
+exports[`DefaultBlockAppender blocks present should match snapshot 1`] = `""`;
 
 exports[`DefaultBlockAppender no block present should match snapshot 1`] = `
 <div
-  className="editor-default-block-appender is-visible-placeholder"
+  className="editor-default-block-appender"
 >
   <Connect(BlockDropZone) />
   <input

diff --git a/editor/components/default-block-appender/test/index.js b/editor/components/default-block-appender/test/index.js
@@ -51,14 +51,5 @@ describe( 'DefaultBlockAppender', () => {
 
 			expect( wrapper ).toMatchSnapshot();
 		} );
-
-		it( 'should append a default block when button clicked', () => {
-			const insertBlock = jest.fn();
-			const wrapper = shallow( <DefaultBlockAppender count={ 5 } onInsertBlock={ insertBlock } /> );
-
-			wrapper.find( 'button.editor-default-block-appender__content' ).simulate( 'click' );
-
-			expectInsertBlockCalled( insertBlock );
-		} );
 	} );
 } );
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