Open afercia opened 5 months ago
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.
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
Now that https://github.com/WordPress/gutenberg/pull/60606 has been merged, this issue can move on.
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. 🙏🏽
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.
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
?
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.
Description
Splitting this out from https://github.com/WordPress/gutenberg/pull/60548 See also https://github.com/WordPress/gutenberg/issues/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: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
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