Heading Block: Show default block name in list view when content is e…

…mpty (#59827)


Co-authored-by: t-hamano <wildworks@git.wordpress.org>
Co-authored-by: Mamaduka <mamaduka@git.wordpress.org>
Co-authored-by: andrewserong <andrewserong@git.wordpress.org>
Co-authored-by: getdave <get_dave@git.wordpress.org>

packages/block-library/src/heading/index.js

@@ -30,15 +30,16 @@ export const settings = {
 		const { content, level } = attributes;
 
 		const customName = attributes?.metadata?.name;
+		const hasContent = content?.length > 0;
 
 		// In the list view, use the block's content as the label.
 		// If the content is empty, fall back to the default label.
-		if ( context === 'list-view' && ( customName || content ) ) {
-			return attributes?.metadata?.name || content;
+		if ( context === 'list-view' && ( customName || hasContent ) ) {
+			return customName || content;
 		}
 
 		if ( context === 'accessibility' ) {
-			return ! content || content.length === 0
+			return ! hasContent
 				? sprintf(
 						/* translators: accessibility text. %s: heading level. */
 						__( 'Level %s. Empty.' ),

test/e2e/specs/editor/blocks/heading.spec.js

@@ -292,6 +292,56 @@ test.describe( 'Heading', () => {
 		] );
 	} );
 
+	test( 'Should have proper label in the list view', async ( {
+		editor,
+		page,
+	} ) => {
+		await editor.insertBlock( { name: 'core/heading' } );
+
+		await editor.publishPost();
+		await page.reload();
+
+		await page
+			.getByRole( 'toolbar', { name: 'Document tools' } )
+			.getByRole( 'button', { name: 'Document Overview' } )
+			.click();
+
+		const listView = page.getByRole( 'treegrid', {
+			name: 'Block navigation structure',
+		} );
+
+		await expect(
+			listView.getByRole( 'link' ),
+			'should show default block name if the content is empty'
+		).toHaveText( 'Heading' );
+
+		await editor.canvas
+			.getByRole( 'document', {
+				name: 'Block: Heading',
+			} )
+			.fill( 'Heading content' );
+
+		await expect(
+			listView.getByRole( 'link' ),
+			'should show content'
+		).toHaveText( 'Heading content' );
+
+		await editor.openDocumentSettingsSidebar();
+
+		await page.getByRole( 'button', { name: 'Advanced' } ).click();
+
+		await page
+			.getByRole( 'textbox', {
+				name: 'Block name',
+			} )
+			.fill( 'My new name' );
+
+		await expect(
+			listView.getByRole( 'link' ),
+			'should show custom name'
+		).toHaveText( 'My new name' );
+	} );
+
 	test.describe( 'Block transforms', () => {
 		test.describe( 'FROM paragraph', () => {
 			test( 'should preserve the content', async ( { editor } ) => {