Block Appender: Use a button instead of input for the "invisible" pla…

…ceholder
WordPress · Nov 24, 2017 · 42f9b1a · 42f9b1a
1 parent a7740fb
commit 42f9b1a
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 25 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 { noop } from 'lodash';
 import classnames from 'classnames';
 import 'element-closest';
 
@@ -34,21 +33,31 @@ class DefaultBlockAppender extends Component {
 
 	render() {
 		const { count } = this.props;
+
 		const className = classnames( 'editor-default-block-appender', {
 			'is-visible-placeholder': count === 0,
 		} );
 
 		return (
 			<div className={ className }>
 				<BlockDropZone />
-				<input
-					type="text"
-					readOnly
-					onFocus={ this.appendDefaultBlock }
-					onClick={ noop }
-					onKeyDown={ noop }
-					value={ count === 0 ? __( 'Write your story' ) : '' }
-				/>
+				{ 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>
 		);
 	}

diff --git a/editor/components/default-block-appender/style.scss b/editor/components/default-block-appender/style.scss
@@ -1,19 +1,8 @@
-.editor-default-block-appender {
-	input[type=text] {
-		border: none;
-		background: none;
-		box-shadow: none;
-		display: block;
-		width: 100%;
-		height: $text-editor-font-size * 6; // 1.5 times the height of an empty paragraph
-		font-size: $editor-font-size;
-		line-height: $editor-line-height;
-		cursor: text;
-		max-width: none;	// fixes a bleed issue from the admin
-	}
+$empty-paragraph-height: $text-editor-font-size * 4;
 
-	&.is-visible-placeholder input[type=text] {
-		height: $text-editor-font-size * 4; // the height of an empty paragraph
+.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;
@@ -23,3 +12,21 @@
 		}
 	}
 }
+
+.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;
+	}
+}
diff --git a/editor/edit-post/modes/visual-editor/style.scss b/editor/edit-post/modes/visual-editor/style.scss
@@ -95,7 +95,7 @@
 	@include break-small() {
 		padding: 0 $block-mover-padding-visible;
 
-		input[type=text] {
+		.editor-default-block-appender__content {
 			padding: 0 $block-padding;
 		}
 	}