Writing Flow: Always add an empty at the end of the block list

editor/components/block-list/block.js

@@ -17,11 +17,11 @@ import { __, sprintf } from '@wordpress/i18n';
  * Internal dependencies
  */
 import BlockMover from '../block-mover';
+import BlockDropZone from '../block-drop-zone';
 import BlockSettingsMenu from '../block-settings-menu';
 import InvalidBlockWarning from './invalid-block-warning';
 import BlockCrashWarning from './block-crash-warning';
 import BlockCrashBoundary from './block-crash-boundary';
-import BlockDropZone from './block-drop-zone';
 import BlockHtml from './block-html';
 import BlockContextualToolbar from './block-contextual-toolbar';
 import BlockMultiControls from './multi-controls';

editor/components/block-list/index.js

@@ -8,7 +8,6 @@ import {
 	invert,
 	isEqual,
 	mapValues,
-	noop,
 	sortBy,
 	throttle,
 } from 'lodash';
@@ -18,17 +17,15 @@ import 'element-closest';
 /**
  * WordPress dependencies
  */
-import { __ } from '@wordpress/i18n';
 import { Component } from '@wordpress/element';
-import { serialize, getDefaultBlockName, createBlock } from '@wordpress/blocks';
+import { serialize } from '@wordpress/blocks';
 
 /**
  * Internal dependencies
  */
 import './style.scss';
 import BlockListBlock from './block';
 import BlockListSiblingInserter from './sibling-inserter';
-import BlockDropZone from './block-drop-zone';
 import {
 	getBlockUids,
 	getMultiSelectedBlocksStartUid,
@@ -37,7 +34,7 @@ import {
 	getMultiSelectedBlockUids,
 	getSelectedBlock,
 } from '../../selectors';
-import { insertBlock, startMultiSelect, stopMultiSelect, multiSelect, selectBlock } from '../../actions';
+import { startMultiSelect, stopMultiSelect, multiSelect, selectBlock } from '../../actions';
 
 class BlockList extends Component {
 	constructor( props ) {
@@ -49,7 +46,6 @@ class BlockList extends Component {
 		this.onCopy = this.onCopy.bind( this );
 		this.onCut = this.onCut.bind( this );
 		this.setBlockRef = this.setBlockRef.bind( this );
-		this.appendDefaultBlock = this.appendDefaultBlock.bind( this );
 		this.setLastClientY = this.setLastClientY.bind( this );
 		this.onPointerMove = throttle( this.onPointerMove.bind( this ), 100 );
 		// Browser does not fire `*move` event when the pointer position changes
@@ -200,11 +196,6 @@ class BlockList extends Component {
 		}
 	}
 
-	appendDefaultBlock() {
-		const newBlock = createBlock( getDefaultBlockName() );
-		this.props.onInsertBlock( newBlock );
-	}
-
 	render() {
 		const { blocks, showContextualToolbar } = this.props;
 
@@ -225,19 +216,6 @@ class BlockList extends Component {
 						uid={ uid }
 					/>,
 				] ) }
-				{ ! blocks.length &&
-					<div className="editor-block-list__placeholder">
-						<BlockDropZone />
-						<input
-							type="text"
-							readOnly
-							value={ __( 'Write your story' ) }
-							onFocus={ this.appendDefaultBlock }
-							onClick={ noop }
-							onKeyDown={ noop }
-						/>
-					</div>
-				}
 			</div>
 		);
 	}
@@ -253,9 +231,6 @@ export default connect(
 		selectedBlock: getSelectedBlock( state ),
 	} ),
 	( dispatch ) => ( {
-		onInsertBlock( block ) {
-			dispatch( insertBlock( block ) );
-		},
 		onStartMultiSelect() {
 			dispatch( startMultiSelect() );
 		},

editor/components/block-list/style.scss

@@ -323,47 +323,6 @@
 	}
 }
 
-.editor-block-list__placeholder {
-	max-width: $visual-editor-max-width + ( 2 * $block-mover-padding-visible );
-	padding: 0;
-	clear: left;
-	margin: 0 auto;
-	position: relative;
-
-	@include break-small() {
-		padding: 0 ( $block-padding + $block-mover-padding-visible );
-	}
-
-	input[type=text] {
-		height: $text-editor-font-size * 4; // same height as an empty paragraph
-		margin: 0px 0px 4px 0px;
-		outline: 1px solid transparent;
-		border: none;
-		background: none;
-		box-shadow: none;
-		display: block;
-		transition: 0.2s outline;
-		text-align: left;
-		width: 100%;
-		color: $dark-gray-300;
-		font-size: $editor-font-size;
-		line-height: $editor-line-height;
-		cursor: text;
-		max-width: none;	// fixes a bleed issue from the admin
-
-		&:hover {
-			outline: 1px solid $light-gray-500;
-		}
-
-		padding: ( $block-padding - 2px ) $block-padding;
-
-		@include break-small() {
-			margin-left: -$block-padding;
-			margin-right: -$block-padding;
-		}
-	}
-}
-
 .editor-block-list__block .blocks-visual-editor__block-html-textarea {
 	display: block;
 	margin: 0;

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

@@ -0,0 +1,71 @@
+/**
+ * External dependencies
+ */
+import { connect } from 'react-redux';
+import classnames from 'classnames';
+import 'element-closest';
+
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { Component } from '@wordpress/element';
+import { getDefaultBlockName, createBlock } from '@wordpress/blocks';
+
+/**
+ * Internal dependencies
+ */
+import './style.scss';
+import BlockDropZone from '../block-drop-zone';
+import { insertBlock } from '../../actions';
+import { getBlockCount } from '../../selectors';
+
+class DefaultBlockAppender extends Component {
+	constructor( props ) {
+		super( props );
+		this.appendDefaultBlock = this.appendDefaultBlock.bind( this );
+	}
+
+	appendDefaultBlock() {
+		const newBlock = createBlock( getDefaultBlockName() );
+		this.props.onInsertBlock( newBlock );
+	}
+
+	render() {
+		const { count } = this.props;
+
+		const className = classnames( 'editor-default-block-appender', {
+			'is-visible-placeholder': count === 0,
+		} );
+
+		return (
+			<div className={ className }>
+				<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 }
+					/>
+				}
+			</div>
+		);
+	}
+}
+
+export default connect(
+	( state ) => ( {
+		count: getBlockCount( state ),
+	} ),
+	{ onInsertBlock: insertBlock }
+)( DefaultBlockAppender );

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

@@ -0,0 +1,32 @@
+$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 {
+		outline: 1px solid $light-gray-500;
+	}
+}

editor/components/index.js

@@ -40,6 +40,7 @@ export { default as BlockList } from './block-list';
 export { default as BlockMover } from './block-mover';
 export { default as BlockSettingsMenu } from './block-settings-menu';
 export { default as BlockToolbar } from './block-toolbar';
+export { default as DefaultBlockAppender } from './default-block-appender';
 export { default as ErrorBoundary } from './error-boundary';
 export { default as Inserter } from './inserter';
 export { default as Warning } from './warning';

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

@@ -14,8 +14,7 @@ import { KeyboardShortcuts } from '@wordpress/components';
  * Internal dependencies
  */
 import './style.scss';
-import VisualEditorInserter from './inserter';
-import { BlockList, PostTitle, WritingFlow } from '../../../components';
+import { BlockList, PostTitle, WritingFlow, DefaultBlockAppender } from '../../../components';
 import { getBlockUids, getMultiSelectedBlockUids, isFeatureActive } from '../../../selectors';
 import { clearSelectedBlock, multiSelect, redo, undo, removeBlocks } from '../../../actions';
 
@@ -98,7 +97,7 @@ class VisualEditor extends Component {
 						showContextualToolbar={ ! this.props.hasFixedToolbar }
 					/>
 				</WritingFlow>
-				<VisualEditorInserter />
+				<DefaultBlockAppender />
 			</div>
 		);
 		/* eslint-enable jsx-a11y/no-static-element-interactions */