fix: Change aria-label depending on content of paragraph block (#11653)

* fix: Only show aria-label when content is empty

Fix issue introduced in #11560

* Improve aria labels so they reflect state of block/empty block

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 reads “Start writing or press / to insert a block”. The placeholder disappears when the block is selected.
+- Simple placeholder text that reads “Start writing or type / to choose a block”. The placeholder disappears when the block is selected.
 
 ### Selected state:
 

lib/client-assets.php

@@ -1619,7 +1619,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', __( 'Start writing or press / to insert a block', 'gutenberg' ), $post ),
+		'bodyPlaceholder'        => apply_filters( 'write_your_story', __( 'Start writing or type / to choose a block', 'gutenberg' ), $post ),
 		'isRTL'                  => is_rtl(),
 		'autosaveInterval'       => 10,
 		'maxUploadFileSize'      => $max_upload_size,

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

@@ -246,8 +246,8 @@ class ParagraphBlock extends Component {
 					onMerge={ mergeBlocks }
 					onReplace={ this.onReplace }
 					onRemove={ () => onReplace( [] ) }
-					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' ) }
+					aria-label={ content ? __( 'Paragraph block' ) : __( 'Empty block; start writing or type forward slash to choose a block' ) }
+					placeholder={ placeholder || __( 'Start writing or type / to choose 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="Empty block; type text or press the forward slash key to insert a block"
+            aria-label="Empty block; start writing or type forward slash to choose 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"
           >
-            Start writing or press / to insert a block
+            Start writing or type / to choose 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 ) || __( 'Start writing or press / to insert a block' );
+	const value = decodeEntities( placeholder ) || __( 'Start writing or type / to choose 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="Start writing or press / to insert a block"
+    value="Start writing or type / to choose 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="Start writing or press / to insert a block"
+    value="Start writing or type / to choose a block"
   />
   <WithSelect(WithDispatch(InserterWithShortcuts)) />
   <WithSelect(IfCondition(Inserter))