fix: Improve empty block text

Fix #9076 Fix #5591
WordPress · Nov 7, 2018 · 1a747fc · 1a747fc
1 parent 2dddcc9
commit 1a747fc
Show file tree

Hide file tree

Showing 7 changed files with 11 additions and 10 deletions.
diff --git a/docs/design/block-design.md b/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 “Type text or press / to select a block”. The placeholder disappears when the block is selected.
 
 ### Selected state:
 

diff --git a/lib/client-assets.php b/lib/client-assets.php
@@ -1626,7 +1626,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', __( 'Type text or press “/” to select a block', 'gutenberg' ), $post ),
 		'isRTL'                  => is_rtl(),
 		'autosaveInterval'       => 10,
 		'maxUploadFileSize'      => $max_upload_size,

diff --git a/packages/block-library/src/paragraph/edit.js b/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={ __( 'Type text or use the forward slash key to insert a block' ) }
+					placeholder={ placeholder || __( 'Type text or press “/” to select a block' ) }
 				/>
 			</Fragment>
 		);

diff --git a/packages/block-library/src/paragraph/test/__snapshots__/index.js.snap b/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="Type text or use 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
+            Type text or press “/” to select a block
           </p>
         </div>
       </div>

diff --git a/packages/editor/src/components/default-block-appender/index.js b/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 ) || __( 'Type text or press “/” to select a block' );
 
 	// The appender "button" is in-fact a text field so as to support
 	// transitions by WritingFlow occurring by arrow key press. WritingFlow

diff --git a/packages/editor/src/components/default-block-appender/test/__snapshots__/index.js.snap b/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="Type text or press “/” to select 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="Type text or press “/” to select a block"
   />
   <WithSelect(WithDispatch(InserterWithShortcuts)) />
   <WithSelect(IfCondition(Inserter))

diff --git a/packages/editor/src/components/post-text-editor/index.js b/packages/editor/src/components/post-text-editor/index.js
@@ -71,7 +71,7 @@ export class PostTextEditor extends Component {
 		return (
 			<Fragment>
 				<label htmlFor={ `post-content-${ instanceId }` } className="screen-reader-text">
-					{ decodedPlaceholder || __( 'Write your story' ) }
+					{ decodedPlaceholder || __( 'Type text or press “/” to select a block' ) }
 				</label>
 				<Textarea
 					autoComplete="off"
@@ -80,7 +80,7 @@ export class PostTextEditor extends Component {
 					onBlur={ this.stopEditing }
 					className="editor-post-text-editor"
 					id={ `post-content-${ instanceId }` }
-					placeholder={ decodedPlaceholder || __( 'Write your story' ) }
+					placeholder={ decodedPlaceholder || __( 'Type text or press “/” to select a block' ) }
 				/>
 			</Fragment>
 		);