Add missing label and focus style to the code editor textarea (#6262)

* Add label, placeholder, and filter to the content textarea.

* Add focus style to the content textarea.

* Use Write your story.

edit-post/components/text-editor/style.scss

@@ -27,8 +27,7 @@
  }
 
  // Always show outlines in code editor
- .editor-post-title div,
- .editor-post-text-editor {
+ .editor-post-title div {
  border: 1px solid $light-gray-500;
  }
 

editor/components/post-text-editor/index.js

@@ -6,9 +6,12 @@ import Textarea from 'react-autosize-textarea';
 /**
  * WordPress dependencies
  */
-import { Component, compose } from '@wordpress/element';
-import { parse } from '@wordpress/blocks';
+import { __ } from '@wordpress/i18n';
+import { decodeEntities } from '@wordpress/utils';
+import { Component, compose, Fragment } from '@wordpress/element';
+import { parse, withEditorSettings } from '@wordpress/blocks';
 import { withSelect, withDispatch } from '@wordpress/data';
+import { withInstanceId } from '@wordpress/components';
 
 /**
  * Internal dependencies
@@ -58,15 +61,25 @@ class PostTextEditor extends Component {
  }
 
  render() {
+ const { value, placeholder, instanceId } = this.props;
+ const decodedPlaceholder = decodeEntities( placeholder );
+
  return (
- <Textarea
- autoComplete="off"
- value={ this.state.value || this.props.value }
- onFocus={ this.startEditing }
- onChange={ this.edit }
- onBlur={ this.stopEditing }
- className="editor-post-text-editor"
- />
+ <Fragment>
+ <label htmlFor={ `post-content-${ instanceId }` } className="screen-reader-text">
+ { decodedPlaceholder || __( 'Write your story' ) }
+ </label>
+ <Textarea
+ autoComplete="off"
+ value={ this.state.value || value }
+ onFocus={ this.startEditing }
+ onChange={ this.edit }
+ onBlur={ this.stopEditing }
+ className="editor-post-text-editor"
+ id={ `post-content-${ instanceId }` }
+ placeholder={ decodedPlaceholder || __( 'Write your story' ) }
+ />
+ </Fragment>
  );
  }
 }
@@ -87,4 +100,8 @@ export default compose( [
  },
  };
  } ),
+ withEditorSettings( ( settings ) => ( {
+ placeholder: settings.bodyPlaceholder,
+ } ) ),
+ withInstanceId,
 ] )( PostTextEditor );

editor/components/post-text-editor/style.scss

@@ -1,18 +1,22 @@
 .editor-post-text-editor {
+ border: 1px solid $light-gray-500;
  display: block;
- margin: 0;
+ margin: 0 0 2em;
  width: 100%;
- border: none;
- outline: none;
  box-shadow: none;
  resize: none;
  overflow: hidden;
  font-family: $editor-html-font;
  font-size: $text-editor-font-size;
  line-height: 150%;
 
+ &:hover,
  &:focus {
+ border: 1px solid $light-gray-500;
  box-shadow: none;
+ // Emulate the effect used on the post title.
+ outline: 1px solid $light-gray-500;
+ outline-offset: -2px;
  }
 }