Editor: Bring back the trailing placeholder

editor/components/default-block-appender/index.js

@@ -2,41 +2,54 @@
  * External dependencies
  */
 import { connect } from 'react-redux';
-import 'element-closest';
+import classnames from 'classnames';
+import { last } from 'lodash';
 
 /**
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
 import { Component } from '@wordpress/element';
+import { getDefaultBlockName } from '@wordpress/blocks';
 
 /**
  * Internal dependencies
  */
 import './style.scss';
 import BlockDropZone from '../block-drop-zone';
 import { appendDefaultBlock } from '../../store/actions';
-import { getBlockCount } from '../../store/selectors';
+import { getBlockCount, getBlocks } from '../../store/selectors';
 
 export class DefaultBlockAppender extends Component {
 	render() {
-		const { count } = this.props;
-		if ( count !== 0 ) {
-			return null;
-		}
+		const { count, blocks } = this.props;
+		const lastBlock = last( blocks );
+		const showAppender = lastBlock && lastBlock.name !== getDefaultBlockName();
+
+		const className = classnames( 'editor-default-block-appender', {
+			'is-visible-placeholder': count === 0,
+		} );
 
 		return (
-			<div className="editor-default-block-appender">
+			<div className={ className }>
 				<BlockDropZone />
-				<input
-					className="editor-default-block-appender__content"
-					type="text"
-					readOnly
-					onFocus={ this.props.appendDefaultBlock }
-					onClick={ this.props.appendDefaultBlock }
-					onKeyDown={ this.props.appendDefaultBlock }
-					value={ __( 'Write your story' ) }
-				/>
+				{ count === 0 &&
+					<input
+						className="editor-default-block-appender__content"
+						type="text"
+						readOnly
+						onFocus={ this.props.appendDefaultBlock }
+						onClick={ this.props.appendDefaultBlock }
+						onKeyDown={ this.props.appendDefaultBlock }
+						value={ __( 'Write your story' ) }
+					/>
+				}
+				{ count !== 0 && showAppender &&
+					<button
+						className="editor-default-block-appender__content"
+						onClick={ this.props.appendDefaultBlock }
+					/>
+				}
 			</div>
 		);
 	}
@@ -45,6 +58,7 @@ export class DefaultBlockAppender extends Component {
 export default connect(
 	( state ) => ( {
 		count: getBlockCount( state ),
+		blocks: getBlocks( state ),
 	} ),
 	{ appendDefaultBlock }
 )( DefaultBlockAppender );

editor/components/default-block-appender/style.scss

@@ -1,26 +1,31 @@
 $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;
 	font-size: $editor-font-size;
 	cursor: text;
 	max-width: none;	// fixes a bleed issue from the admin
-	height: $empty-paragraph-height;
-	color: $dark-gray-300;
-	outline: 1px solid transparent;
-	transition: 0.2s outline;
-
-	// subtract 1px for border
-	position: relative;
-	top: -1px;
-	left: -1px;
-	margin-bottom: $block-spacing - 1px;
 
-	&:focus, &:hover {
+	&:focus {
 		outline: 1px solid $light-gray-500;
 	}
 }

editor/components/default-block-appender/test/__snapshots__/index.js.snap

@@ -1,10 +1,16 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`DefaultBlockAppender blocks present should match snapshot 1`] = `""`;
+exports[`DefaultBlockAppender blocks present should match snapshot 1`] = `
+<div
+  className="editor-default-block-appender"
+>
+  <Connect(WrappedComponent) />
+</div>
+`;
 
 exports[`DefaultBlockAppender no block present should match snapshot 1`] = `
 <div
-  className="editor-default-block-appender"
+  className="editor-default-block-appender is-visible-placeholder"
 >
   <Connect(WrappedComponent) />
   <input

editor/components/default-block-appender/test/index.js

@@ -47,5 +47,14 @@ describe( 'DefaultBlockAppender', () => {
 
 			expect( wrapper ).toMatchSnapshot();
 		} );
+
+		it( 'should append a default block when button clicked', () => {
+			const insertBlock = jest.fn();
+			const wrapper = shallow( <DefaultBlockAppender count={ 5 } blocks={ [ { name: 'core/image' } ] } appendDefaultBlock={ insertBlock } /> );
+
+			wrapper.find( 'button.editor-default-block-appender__content' ).simulate( 'click' );
+
+			expectAppendDefaultBlockCalled( insertBlock );
+		} );
 	} );
 } );

editor/edit-post/modes/visual-editor/index.js

@@ -13,7 +13,6 @@ import { Component, findDOMNode } from '@wordpress/element';
  */
 import './style.scss';
 import { BlockList, PostTitle, WritingFlow, DefaultBlockAppender, EditorGlobalKeyboardShortcuts } from '../../../components';
-import VisualEditorInserter from './inserter';
 import { hasFixedToolbar } from '../../../store/selectors';
 import { clearSelectedBlock } from '../../../store/actions';
 
@@ -62,7 +61,6 @@ class VisualEditor extends Component {
 					/>
 					<DefaultBlockAppender />
 				</WritingFlow>
-				<VisualEditorInserter />
 			</div>
 		);
 		/* eslint-enable jsx-a11y/no-static-element-interactions */

editor/edit-post/modes/visual-editor/style.scss

@@ -48,49 +48,6 @@
 	}
 }
 
-.editor-visual-editor__inserter {
-	display: flex;
-	align-items: baseline;
-	max-width: $visual-editor-max-width + ( 2 * $block-mover-padding-visible );
-	margin: 0 auto;
-	clear: both;
-
-	padding: $block-padding;
-	padding-left: $block-padding - 8px; // Offset by left button's own padding
-	@include break-small {
-		padding: $block-padding ( $block-padding + $block-mover-padding-visible );
-		padding-left: $block-padding + $block-mover-padding-visible - 8px;
-	}
-
-	> .editor-inserter__block {
-		flex-direction: row;
-		opacity: 0;
-		transition: opacity 150ms;
-		margin: 0 10px;
-		width: auto;
-		font-family: $default-font;
-		font-size: $default-font-size;
-		box-shadow: none;
-		padding: 6px;
-		align-items: center;
-	}
-
-	&:hover > .editor-inserter__block,
-	&.is-showing-controls > .editor-inserter__block {
-		opacity: 1;
-
-		&:disabled {
-			@include button-style__disabled;
-		}
-	}
-}
-
-.editor-visual-editor__inserter-block-icon {
-	display: inline-block;
-	margin-right: 8px;
-	height: 20px;
-}
-
 .editor-visual-editor .editor-post-title {
 	margin-left: auto;
 	margin-right: auto;