List View: Enhance list view to display heading level with title

[Infinite-Null]

What?

This PR enhances the List View by displaying the heading level (H1, H2, etc.) alongside the heading title, making it easier to identify and navigate the heading hierarchy. Closes #54631

Why?

List View doesn't visually indicate heading levels, making it difficult for users to understand the document structure without selecting each heading individually.

Testing Instructions for Keyboard

Testing Instructions for Keyboard

1. Create a new post
2. Add a heading to the post
3. Open list view and verify whether the title of the heading is appended with heading level or not, like H1, H2, etc.

Screenshot:

Before	After

[github-actions[bot]]

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: Infinite-Null <[email protected]>
Co-authored-by: t-hamano <[email protected]>
Co-authored-by: paaljoachim <[email protected]>
Co-authored-by: fabiankaegy <[email protected]>
Co-authored-by: karmatosed <[email protected]>
Co-authored-by: joedolson <[email protected]>
Co-authored-by: aristath <[email protected]>
Co-authored-by: annezazu <[email protected]>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

[Infinite-Null]

Hi @t-hamano, Thank you for the feedback. I have made the necessary changes. Please review it at your convenience.

[t-hamano]

Thanks for the update! I think the approach itself is good.

Another important thing is that we always need to take localization into account. In the current implementation, the order is fixed, like {Heading Level}: {Heading Content}, so it is not appropriate for RTL languages.

We should be able to do it like this:

if ( context === 'list-view' ) {
	const listViewTitle =
		customName || ( hasContent ? content : __( 'Heading' ) );
	return sprintf(
		/* translators: list view text. 1: heading level. 2: heading content. */
		__( '%1$s: %2$s' ),
		`H${ level }`,
		listViewTitle
	);
}

Also, I think the code itself is mostly good, but I'd like to hear what the designers think about this change. @WordPress/gutenberg-design

[paaljoachim]

Great! Thank you for working on this @Infinite-Null

To me it seems to do the job it needs to do. It looks identical with selecting a Heading block.

[fabiankaegy]

@Infinite-Null @karmatosed actually just added some designs for this in https://github.com/WordPress/gutenberg/issues/42181

I think instead of adding the heading level as raw text we should instead dynamically swap out the icon to use the heading level icons as @karmatosed showed there :)

Let me know if you have any questions / concerns about this.

[t-hamano]

we should instead dynamically swap out the icon to use the heading level icons

This is technically possible, but there are two points to be aware of:

• I think it's necessary to convey the same information to screen readers. Screen readers should announce list view items properly, both in heading and non-heading blocks.
• This icon is retrieved by the useBlockDisplayInformation hook. This hook is based on clientId only and does not support dynamic icon changing based on attributes. A new API or hook might be needed to avoid hard-coding.