fix: Improve empty block text (#11560)

* fix: Improve empty block text

Fix #9076
Fix #5591

* Tweak labels

* Make it consistent

* Make it MORE consistent

* Fix block inserter shortcut text

* Use suggested text

* Do not use placeholder in code editor

* fix tests

docs/design/block-design.md

@@ -97,7 +97,7 @@ The most basic unit of the editor. The paragraph block is a simple input field.
 
 ### Placeholder:
 
-- Simple placeholder text that says “Add text or type / to add content.” The placeholder disappears when the block is selected.
+- Simple placeholder text that reads “Start writing or press / to insert a block”. The placeholder disappears when the block is selected.
 
 ### Selected state:
 

lib/client-assets.php

@@ -1621,7 +1621,7 @@ function gutenberg_editor_scripts_and_styles( $hook ) {
 		'disableCustomFontSizes' => get_theme_support( 'disable-custom-font-sizes' ),
 		'disablePostFormats'     => ! current_theme_supports( 'post-formats' ),
 		'titlePlaceholder'       => apply_filters( 'enter_title_here', __( 'Add title', 'gutenberg' ), $post ),
-		'bodyPlaceholder'        => apply_filters( 'write_your_story', __( 'Write your story', 'gutenberg' ), $post ),
+		'bodyPlaceholder'        => apply_filters( 'write_your_story', __( 'Start writing or press / to insert a block', 'gutenberg' ), $post ),
 		'isRTL'                  => is_rtl(),
 		'autosaveInterval'       => 10,
 		'maxUploadFileSize'      => $max_upload_size,

packages/block-library/src/paragraph/edit.js

@@ -245,7 +245,8 @@ class ParagraphBlock extends Component {
 					onMerge={ mergeBlocks }
 					onReplace={ this.onReplace }
 					onRemove={ () => onReplace( [] ) }
-					placeholder={ placeholder || __( 'Add text or type / to add content' ) }
+					aria-label={ __( 'Empty block; type text or press the forward slash key to insert a block' ) }
+					placeholder={ placeholder || __( 'Start writing or press / to insert a block' ) }
 				/>
 			</Fragment>
 		);

packages/block-library/src/paragraph/test/__snapshots__/index.js.snap

@@ -14,7 +14,7 @@ exports[`core/paragraph block edit matches snapshot 1`] = `
           <p
             aria-autocomplete="list"
             aria-expanded="false"
-            aria-label="Add text or type / to add content"
+            aria-label="Empty block; type text or press the forward slash key to insert a block"
             aria-multiline="true"
             class="wp-block-paragraph editor-rich-text__tinymce"
             contenteditable="true"
@@ -28,7 +28,7 @@ exports[`core/paragraph block edit matches snapshot 1`] = `
           <p
             class="editor-rich-text__tinymce wp-block-paragraph"
           >
-            Add text or type / to add content
+            Start writing or press / to insert a block
           </p>
         </div>
       </div>

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

@@ -31,7 +31,7 @@ export function DefaultBlockAppender( {
 		return null;
 	}
 
-	const value = decodeEntities( placeholder ) || __( 'Write your story' );
+	const value = decodeEntities( placeholder ) || __( 'Start writing or press / to insert a block' );
 
 	// The appender "button" is in-fact a text field so as to support
 	// transitions by WritingFlow occurring by arrow key press. WritingFlow

packages/editor/src/components/default-block-appender/test/__snapshots__/index.js.snap

@@ -20,7 +20,7 @@ exports[`DefaultBlockAppender should append a default block when input focused 1
     readOnly={true}
     role="button"
     type="text"
-    value="Write your story"
+    value="Start writing or press / to insert a block"
   />
   <WithSelect(WithDispatch(InserterWithShortcuts)) />
   <WithSelect(IfCondition(Inserter))
@@ -42,7 +42,7 @@ exports[`DefaultBlockAppender should match snapshot 1`] = `
     readOnly={true}
     role="button"
     type="text"
-    value="Write your story"
+    value="Start writing or press / to insert a block"
   />
   <WithSelect(WithDispatch(InserterWithShortcuts)) />
   <WithSelect(IfCondition(Inserter))

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

@@ -7,7 +7,6 @@ import Textarea from 'react-autosize-textarea';
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { decodeEntities } from '@wordpress/html-entities';
 import { Component, Fragment } from '@wordpress/element';
 import { parse } from '@wordpress/blocks';
 import { withSelect, withDispatch } from '@wordpress/data';
@@ -65,13 +64,12 @@ export class PostTextEditor extends Component {
 
 	render() {
 		const { value } = this.state;
-		const { placeholder, instanceId } = this.props;
-		const decodedPlaceholder = decodeEntities( placeholder );
+		const { instanceId } = this.props;
 
 		return (
 			<Fragment>
 				<label htmlFor={ `post-content-${ instanceId }` } className="screen-reader-text">
-					{ decodedPlaceholder || __( 'Write your story' ) }
+					{ __( 'Type text or HTML' ) }
 				</label>
 				<Textarea
 					autoComplete="off"
@@ -80,7 +78,7 @@ export class PostTextEditor extends Component {
 					onBlur={ this.stopEditing }
 					className="editor-post-text-editor"
 					id={ `post-content-${ instanceId }` }
-					placeholder={ decodedPlaceholder || __( 'Write your story' ) }
+					placeholder={ __( 'Start writing with text or HTML' ) }
 				/>
 			</Fragment>
 		);
@@ -89,11 +87,9 @@ export class PostTextEditor extends Component {
 
 export default compose( [
 	withSelect( ( select ) => {
-		const { getEditedPostContent, getEditorSettings } = select( 'core/editor' );
-		const { bodyPlaceholder } = getEditorSettings();
+		const { getEditedPostContent } = select( 'core/editor' );
 		return {
 			value: getEditedPostContent(),
-			placeholder: bodyPlaceholder,
 		};
 	} ),
 	withDispatch( ( dispatch ) => {