From 441cfc4646269e52f5748b9d0b3cd39275e7f7c2 Mon Sep 17 00:00:00 2001
From: Riad Benguella <benguella@gmail.com>
Date: Thu, 23 Nov 2017 13:41:08 +0100
Subject: [PATCH] Block Appender: Use a button instead of input

---
 editor/components/default-block-appender/index.js   | 12 +++---------
 editor/components/default-block-appender/style.scss | 11 ++++++++---
 editor/edit-post/modes/visual-editor/style.scss     |  2 +-
 3 files changed, 12 insertions(+), 13 deletions(-)

diff --git a/editor/components/default-block-appender/index.js b/editor/components/default-block-appender/index.js
index 2343c3aed1e210..0c10c597e6e31c 100644
--- 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';
 
@@ -41,14 +40,9 @@ class DefaultBlockAppender extends Component {
 		return (
 			<div className={ className }>
 				<BlockDropZone />
-				<input
-					type="text"
-					readOnly
-					onFocus={ this.appendDefaultBlock }
-					onClick={ noop }
-					onKeyDown={ noop }
-					value={ count === 0 ? __( 'Write your story' ) : '' }
-				/>
+				<button onClick={ this.appendDefaultBlock }>
+					{ count === 0 && __( 'Write your story' ) }
+				</button>
 			</div>
 		);
 	}
diff --git a/editor/components/default-block-appender/style.scss b/editor/components/default-block-appender/style.scss
index b2ae22afc12c55..1a02f3d2b12126 100644
--- a/editor/components/default-block-appender/style.scss
+++ b/editor/components/default-block-appender/style.scss
@@ -1,5 +1,5 @@
 .editor-default-block-appender {
-	input[type=text] {
+	button {
 		border: none;
 		background: none;
 		box-shadow: none;
@@ -10,15 +10,20 @@
 		line-height: $editor-line-height;
 		cursor: text;
 		max-width: none;	// fixes a bleed issue from the admin
+		text-align: left;
+
+		&:focus {
+			outline: 1px solid $light-gray-500;
+		}
 	}
 
-	&.is-visible-placeholder input[type=text] {
+	&.is-visible-placeholder button {
 		height: $text-editor-font-size * 4; // the height of an empty paragraph
 		color: $dark-gray-300;
 		outline: 1px solid transparent;
 		transition: 0.2s outline;
 
-		&:hover {
+		&:hover, &: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
index 82052ae6c4ac6f..2247f52a574108 100644
--- 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] {
+		button {
 			padding: 0 $block-padding;
 		}
 	}