Block Appender: Use a button instead of input

WordPress · Nov 23, 2017 · 441cfc4 · 441cfc4
1 parent 9b619a7
commit 441cfc4
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 13 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';
 
@@ -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
@@ -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
@@ -95,7 +95,7 @@
 	@include break-small() {
 		padding: 0 $block-mover-padding-visible;
 
-		input[type=text] {
+		button {
 			padding: 0 $block-padding;
 		}
 	}