Change HeadingLevelDropdown to be a 'Change element' menu

[afercia]

Description

See #60548 and #60567

The HeadingLevelDropdown component renders the menu illustrated in the screenshots below. The menu is labeled 'Change level':

Depending on the selected block, the menu may provide an option to change the Heading to a Paragraph, besides providing the ability to change heading level.

After discussing #60548 with @carolinan, we'd like to propose to evolve the concept of this menu from 'change level' to 'change element'.

• Some blocks already provide the ability to change the 'element' they are rendered with on the front end. However, they do it differently.
  • Headings can be transformed to Paragraphs and vice-versa. That changes also the block type. The Heading block drodpwn menu doesn't provide the 'Paragraph' option though, it's restricted for changing the heading levels.
  • The Site Title and the Site Tagline can be changed to a paragraph and headings with level from 1 to 6 but that only changes the tagName prop that determines the HTML tag the element is rendered with.
  • The Post Title can only be changed to headings with level from 1 to 6.
  • The Group, Comments, Cover, Query blocks and Template Parts can be changed to sectioning, semantic, elements like main, aside, nav, footer, etc. The user interface for this is the 'HTML element' setting in the block inspector.
• There are valid use cases where users will ned to change the HTML element some blocks are rendered with, as discussed in Post title: Re-add the paragraph level (without UI) #60548.
• Regardless of the technical implementation, whether it's a block transform or a tagName change, from an user perspective the user interface should provide a consistent, easy to find and easy to use way to change a block element.

Right now, the editor provides at least 3 different ways to change a block's element. Sometimes it's an option that is difficult to find and a little obscure.

From an user perspective, I'm not sure that it is important to know whether the element changes because of a block transform or because of a tagName change. Users just wat to change the element.

Providing a unique, centralized, easy to find and use, and more prominent UI to change the block element seems worth it. The block toolbar seems to be a good place where to place this feature.

Additionally:

• A new 'change element' menu could also be expanded to include more elements to change to.
• By providing a unique component to change element, also the keyboard shortcuts issue reported at Heading level keyboard shortcuts only work for Heading -> Paragraph transform and vice-versa #60567 could be solved more easily, even though the keyboard shortcuts callbacks shoud be differentiated depending on the block type.

Step-by-step reproduction instructions

• Observe the user interface provides different UIs to change a block 'element'.
• Heading block > 'Transform to' menu (the block switcher) > to Paragraph.
• Site Tagline > Block toolbar > Change level > Paragraph or Heading levels.
• Site Titile > Block toolbar > Change level > Paragraph or Heading levels.
• Post Title > Block toolbar > Change level > only Heading levels.
• Group > block inspetor > Advanced > HTML element: div, header, main, section, article, aside, footer.
• Cover > block inspetor > Advanced > HTML element: div, header, main, section, article, aside, footer.
• Query > block inspetor > Advanced > HTML element: div, main, section, aside.
• Etc.

Screenshots, screen recording, code snippet

No response

Environment info

No response

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Yes

[talldan]

A lot to unpack with this one. I personally don't think the term 'element' should be shown to users in the toolbar if that's what's being proposed, as most users won't know what that is.

For blocks like Site Title / Post Title, while it made sense in the past to implement that way, those kind of blocks might well be implemented using block bindings and block variations today. That might be another consideration when it comes to how this is implemented. I'm not sure if there are any future plans to change the implementation of some of these blocks.

[afercia]

A lot to unpack with this one. I personally don't think the term 'element' should be shown to users

@talldan thanks for your feedback. I'm pretty sure we can find a better terminology. Noting that if there's agreement that the term 'element' isn't best for users, then we should remove it also from the Advanced setting. Screenshot:

This issue isn't about the term to use though. Rather, it's about the functionality.

Regardless of the technical implementation, I'd encourage to see this issue from an user perspective:

For some blocks, users need to change the element the block is rendered with.

There are legitimate use cases for this. They are not only related to the post content. The ability to change the element is even more important for the Site editing, for example when making a custom Query block as explained in this comment.

The editor features to change the element a block is rendered with work differently and, more importantly, are all scattered around the UI. It's not easy for users to find them and understand how they work. I do realize these features are conceptually and technically different but, from an user perspective, that's not relevant. As a user, I would like to have a unique, discoverable, consistent, easy way to change a block element.

[afercia]

For history, the Classic editor based on TinyMCE always provided a dropdown menu to change heading levels, paragraphs and other elements for example a <pre> element. This menu also provides some hidden features where:

• Pressing Control + Option + 8 transforms to a <div> element.
• Pressing Control + Option + 9 transforms to an <address> element.