Heading level keyboard shortcuts only work for Heading -> Paragraph transform and vice-versa

[afercia]

Description

Splitting this out from #60548
See also #30549

As an user, wherever I see the heading levels dropdown menu I'd expect the keyboard shortcuts to set the heading level to work. That's not the case, as they work only for the Heading and paragraph block.

However, the HeadingLevelDropdown component is used in other blocks as well, for example:

• Heading
• Site Title
• Site Tagline
• Post Title
• Comments Title
• Query Title (Archive title)
• Other blocks that may use the Post Title internally e.g. the Query loop Post tem[plate Title

Some of the dropdown menus of these blocks so provide the 'Paragraph' option, which internally works as a 'level 0', and some don't. Screenshots:

Site Tittle, Post Title, Heading:

Site Tagline, Query loop Post tempalte Title, Comments title:

In all these cases I would expect the kyboard shortcuts to work.

However, the shortcuts implementation is strictly tied with the block transform feature. It only works for Heading and Paragraph. In fact, all the other blocks don't use a transform, they just render the HTML tag conditionally.

Overall, I'd think this issue is broader than what it appears at first sight. I'd think it needs to reconsider the block transforms, variation transforms, HTML element used for rendering especially in terms of how they are presented to users.

Step-by-step reproduction instructions

• Edit a post.
• Add a Heading block.
• With teh block selected, use the following shortcuts to change the heading level or transform to Paragraph. The modifier to use is: Control+Option on macOS, and Ctrl+Alt on Windows:
• modifier + 1 changes the block to a H1
• modifier + 2 changes the block to a H2
• modifier + 3 changes the block to a H3
• modifier + 4 changes the block to a H4
• modifier + 5 changes the block to a H5
• modifier + 6 changes the block to a H6
• modifier + 0 changes the block to a Paragraph
• Add a Site Title or a Site Tagline or a Post Title block and with one of these blocks selected try again the keyboard shortcuts.
• Observe the keyboard shortcuts don't do anything

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

[afercia]

Noting also that these keyboard shortcuts implementation appears to duplicate a fair amount of code, see for example in teh following files:

code duplicated in 
packages/customize-widgets/src/components/keyboard-shortcuts/i
packages/edit-post/src/components/keyboard-shortcuts/index.js:
packages/edit-site/src/components/keyboard-shortcuts/edit-mode.js
packages/edit-site/src/components/keyboard-shortcuts/register.js:
packages/edit-widgets/src/components/keyboard-shortcuts/index.js:

the function handleTextLevelShortcut is absolutely identical in 4 instances.

[afercia]

Also noting the keyboard shortcuts are different from what they uset to be in Classic Editor for ages, here there's no 0 shortcut for the Paragraph. In Classic, the shortcuts are:

modifier + 1   →   H1
modifier + 2   →   H2
modifier + 3   →   H3
modifier + 4   →   H4
modifier + 5   →   H5
modifier + 6   →   H6
modifier + 7   →   P
modifier + 8   →   DIV
modifier + 9   →   ADDRESS 

[afercia]

Now that #60606 has been merged, this issue can move on.

[afercia]

What I would like to achieve is to make any block that uses heading levels (also custom blocks that may use headings) work with the keyboard shortcuts to change heading level. The HeadingLevelDropdown component could be extended to handle hte logic for handling the level change but I couldn't think of a way to 'attach' thie behavior to all blocks with headings

Currently, the keyboard shortcuts are 'global' and the internal logic checks for the block type. This approach doesn't appear to be abstract enough to support any block that has headings. Hardcoding a list of block types wouldn't be ideal and would not work for custom blocks.

Anyone can think of a more abstract way to achieve this?
@youknowriad when you have a chance, I'd greatly appreciate some guidance. 🙏🏽

[youknowriad]

I fail to see how we can make this generic for third-party blocks. Third-party blocks can be using different attribute names for levels. So reusing the same transform/callback function won't be possible.

[afercia]

Yes I know. Would it be an option to incorporate the keyboard shortcuts in the HeadingLevelDropdown component in some way and encourage third-party blocks to use HeadingLevelDropdown?

[youknowriad]

The problem with that is that the shortcut will only work if the component is actually rendered (the toolbar) which is not always the case.