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