Still no support for <kbd> tags

[mrfatguy]

Describe the bug
Either I am missing something or current stable version of Gutenberg still lacks a support for <kbd> tags totally:

• there is no way to enter them in editor, other than switching to code editor,
• when converting pure text into blocks, <kbd> tags seems to be turned into <code> tags,
• when copy-pasting text in reach editor, <kbd> tags are stripped of and text is pasted as not formatted.

Example 1: To reproduce
Steps to reproduce the behavior:

1. Open any text that is not converted to blocks and contains at least one <kbd> tag.
2. Convert it to blocks
3. Observe that <kbd> tags are converted into <code> tags.

Example 1: Expected behavior
Gutenberg should support <kbd> tags and should not convert them into <code> tags by no means. In millions of Wordpress themes out there <kbd> and <code> tags have a different CSS formatting.

Example 1: Screenshots

Example 2: To reproduce
Steps to reproduce the behavior:

1. Open any text that contains at least one <kbd> tag.
2. Copy part of text containing it into another block.
3. Observe that <kbd> tags are converted into unformatted text.

Example 2: Expected behavior
When copy-pasting text containing <kbd> tags all of them should be pasted without any change into not formatted text.

Example 3: Do anything to insert for example <kbd>Ctrl</kbd>+<kbd>Alt</kbd>+<kbd>l</kbd> without switching to code editor.

Desktop (please complete the following information):

• OS: Windows 7
• Browser Chrome
• Version 77

Additional context

• Gutenberg 6.5.0.
• To report a security issue, please visit the WordPress HackerOne program: https://hackerone.com/wordpress.

[ellatrix]

#14429 fixed both cases to reproduce. Could you separately report anything remaining?

[mrfatguy]

Summary

1. The <kbd> tags are still stripped off when pasting.
2. There is still no way to insterd <kbd> tag into Visual Editor and one must always switch to Code Editor for this purpose.
3. The only difference is that converting classical text into blocks no longer converts <kbd> tags into <code> tags.

Details below.

Stripping when pasting

Pasting following piece of text (copied from Code Editor):

key combination: <kbd>mute</kbd> + <kbd>8</kbd> + <kbd>2</kbd> + <kbd>4</kbd> + <kbd>power `on</kbd>.

into Visual Editor produces this in Visual Editor

key combination: mute

• 8
• 2
• 4
• power on.

and this in Code Editor:

<!-- wp:paragraph -->
<p>key combination: mute<br> + 8<br> + 2<br> + 4<br> + power on.</p>
<!-- /wp:paragraph -->

2. Pasting piece of text that has <kbd> tags (visible in Code Editor only, of course) from Visual Editor pastes this into Visual Editor:

press quickly following key combination: mute + 8 + 2 + 4 + power on.

or this into Code Editor:

 press quickly following key combination: mute + 8 + 2 + 4 + power on.

Converting classic text into blocks

The only difference that I see is that when you convert some classic editor text into blocks then <kbd> tags are no longer converted into <code> tags.

Support for adding tags into Visual Editor

But that is by far not enough. The intention of this ticket (more like feature request than a bug report) -- support for tags -- was to have any kind of support for <kbd> tags in Gutenberg, i.e. any ability to add this tag to Visual Editor without the need to switch to Code Editor each time you need to add <kbd> tag.

From this perspective -- as far as I see -- nothing was done and nothing changed.

[ellatrix]

Pasting following piece of text (copied from Code Editor):

key combination: <kbd>mute</kbd> + <kbd>8</kbd> + <kbd>2</kbd> + <kbd>4</kbd> + <kbd>power `on</kbd>.

into Visual Editor produces this in Visual Editor

key combination: mute

• 8
• 2
• 4
• power on.

and this in Code Editor:

<!-- wp:paragraph -->
<p>key combination: mute<br> + 8<br> + 2<br> + 4<br> + power on.</p>
<!-- /wp:paragraph -->

For that, I get:

<p>key combination: &lt;kbd>mute&lt;/kbd> + &lt;kbd>8&lt;/kbd> + &lt;kbd>2&lt;/kbd> + &lt;kbd>4&lt;/kbd> + &lt;kbd>power `on&lt;/kbd>. </p>

Could you share what is logged in the console for all cases?

[mrfatguy]

Adding console dumps in step-by-step process of copying and pasting piece of text with <kbd> tags from Visual Editor into Visual Editor.

Step 1. Page / Visual Editor load on some draft article:

JQMIGRATE: Migrate is installed, version 1.4.1
index.js?ver=ffee04a5c015601fa7840a747e107e8b:1 wp.editor.InspectorControls is deprecated. Please use wp.blockEditor.InspectorControls instead.
c @ index.js?ver=ffee04a5c015601fa7840a747e107e8b:1
index.js?ver=ffee04a5c015601fa7840a747e107e8b:1 wp.editor.PlainText is deprecated. Please use wp.blockEditor.PlainText instead.

Step 2. Selecting by pressing Alt + Up or Alt + Down text (by pressing <kbd>Alt</kbd> + <kbd>Up</kbd> or <kbd>Alt</kbd> + <kbd>Down</kbd> in Code Editor):

index.js?ver=ffee04a5c015601fa7840a747e107e8b:1 `wp.data.select( 'core/editor' ).getSelectedBlock` is deprecated. Please use `wp.data.select( 'core/block-editor' ).getSelectedBlock` instead.
c @ index.js?ver=ffee04a5c015601fa7840a747e107e8b:1
(anonymous) @ index.js?ver=048001dcf6f0304c9176abd5f3efa063:11
e @ index.js?ver=1797bf8784ed2f6cc0feedc1ac56d5dd:1
(anonymous) @ index.js?ver=1797bf8784ed2f6cc0feedc1ac56d5dd:1
r @ index.js?ver=1797bf8784ed2f6cc0feedc1ac56d5dd:1
(anonymous) @ common.min.js?ver=20191211:1
(anonymous) @ index.js?ver=1797bf8784ed2f6cc0feedc1ac56d5dd:1
_t @ index.js?ver=1797bf8784ed2f6cc0feedc1ac56d5dd:1
(anonymous) @ index.js?ver=1797bf8784ed2f6cc0feedc1ac56d5dd:1
je @ react-dom.min.b694e242.js?ver=16.9.0:78
ph @ react-dom.min.b694e242.js?ver=16.9.0:215
lh @ react-dom.min.b694e242.js?ver=16.9.0:126
O @ react-dom.min.b694e242.js?ver=16.9.0:121
ze @ react-dom.min.b694e242.js?ver=16.9.0:118
(anonymous) @ react-dom.min.b694e242.js?ver=16.9.0:53
unstable_runWithPriority @ react.min.0212dc62.js?ver=16.9.0:26
Ma @ react-dom.min.b694e242.js?ver=16.9.0:52
mg @ react-dom.min.b694e242.js?ver=16.9.0:52
V @ react-dom.min.b694e242.js?ver=16.9.0:52
Be @ react-dom.min.b694e242.js?ver=16.9.0:119
xi @ react-dom.min.b694e242.js?ver=16.9.0:39
index.js?ver=ffee04a5c015601fa7840a747e107e8b:1 wp.editor.RichTextToolbarButton is deprecated. Please use wp.blockEditor.RichTextToolbarButton instead.

Step 3. Pasting above copied text into some other place (new paragraph at the end of text) in Visual Editor.

Getting by pressing Alt + Up or Alt + Down in Visual Editor (<!-- wp:paragraph --><p>by pressing Alt + Up or Alt + Down</p><!-- /wp:paragraph --> in Code Editor).

Received HTML:

 <html>
<body>
<!--StartFragment--><span style="color: rgb(25, 30, 35); font-family: &quot;Noto Serif&quot;; font-size: 16px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: pre-wrap; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(255, 255, 255); text-decoration-style: initial; text-decoration-color: initial; display: inline !important; float: none;">by pressing </span><kbd style="padding: 3px 5px 2px; margin: 0px 1px; background: rgba(0, 0, 0, 0.07); font-size: 13px; box-sizing: inherit; color: rgb(25, 30, 35); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: pre-wrap; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">Alt</kbd><span style="color: rgb(25, 30, 35); font-family: &quot;Noto Serif&quot;; font-size: 16px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: pre-wrap; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(255, 255, 255); text-decoration-style: initial; text-decoration-color: initial; display: inline !important; float: none;"> + </span><kbd style="padding: 3px 5px 2px; margin: 0px 1px; background: rgba(0, 0, 0, 0.07); font-size: 13px; box-sizing: inherit; color: rgb(25, 30, 35); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: pre-wrap; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">Up</kbd><span style="color: rgb(25, 30, 35); font-family: &quot;Noto Serif&quot;; font-size: 16px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: pre-wrap; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(255, 255, 255); text-decoration-style: initial; text-decoration-color: initial; display: inline !important; float: none;"> or </span><kbd style="padding: 3px 5px 2px; margin: 0px 1px; background: rgba(0, 0, 0, 0.07); font-size: 13px; box-sizing: inherit; color: rgb(25, 30, 35); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: pre-wrap; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">Alt</kbd><span style="color: rgb(25, 30, 35); font-family: &quot;Noto Serif&quot;; font-size: 16px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: pre-wrap; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(255, 255, 255); text-decoration-style: initial; text-decoration-color: initial; display: inline !important; float: none;"> + </span><kbd style="padding: 3px 5px 2px; margin: 0px 1px; background: rgba(0, 0, 0, 0.07); font-size: 13px; box-sizing: inherit; color: rgb(25, 30, 35); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: start; text-indent: 0px; text-transform: none; white-space: pre-wrap; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">Down</kbd><!--EndFragment-->
</body>
</html>
index.js?ver=7c6c2221add49d82b0166792f2b184c4:6 Received plain text:

 by pressing Alt + Up or Alt + Down
index.js?ver=4a81ccc4ccb8f6c45e1b07eaec152198:2 Processed HTML piece:

 <p>by pressing Alt + Up or Alt + Down</p>

[typometre]

Hope to have a better handling of kbd. An optional button of the editor would be great.

[Nantris]

Lack of kbd can make it really difficult to properly format articles where there's a heavy reliance on inline code. Usually it's workable to use inline code for hotkeys as a workaround, but it's proving reaaaally messy not having kbd today.

[Nantris]

Any news on this? It makes it really hard to work with documentation in Gutenberg, which then pushes us to a page builder, which is sort of nuts to do just for this single, seemingly tiny, thing.

I know what seems tiny isn't always, but is there an appetite from the team for addressing this in the first place?

[ichnaton777]

Well we sure don't want to start talking about how Jupyter and Colab are handling code, right?

[Nantris]

[TomLewis]

Why hasn't this been added yet?

[pansamolot]

@TomLewis, what hasn't been added? I definitely see this is available:

And it was there since at least 2-3 past versions.

The only problem is that this is not supported by any keyboard shortcut, which makes this feature very unhandy. But, I believe that this is area of some other ticket.

[TomLewis]

Oh what, why can't I see that! Let me try disabling and re-enabeling. Is there a way to reset or re initialize the plugin?

[pansamolot]

Make sure that you have the newest version of the plugin. Make sure that you have Gutenberg as a separate plugin:

Because the one that comes with Wordpress core installation is updated way too slower and on a very rare basis, so it can still be missing this.

Disable and re-enable Gutenberg plugin. If still no effect, uninstall it and install again.

BTW: Make sure that you enable auto-update feature for plugins. To have always the newest version of each of it. I was very reluctant to have it enabled, but it turned out very handy.

As you can see in my screenshot, I am currently on Gutenberg 10.3.2. If you're on the same version and still don't see corresponding menu item then there could be some other plugin blocking or overriding something in Gutenberg plugin or there could be something wrong with your Wordpress in general.

I am on Gutenberg 10.3.2 currently, but -- as I told you above -- I am using this feature for certain months, so this isn't something new. The corresponding #26801 has been merged by @ellatrix on 7 Nov 2020 and I am pretty sure that we have this feature in Gutenberg plugin since something around late November / early December or something like that.

[Nantris]

I haven't tried this yet, but oh my god @pansamolot thank you for this tip!

Changing inline codes manually to kbd tags when the writing process was completed was an awful workflow.

[TomLewis]

Aha I didnt have Gutenberg installed as a plugin! I thought I did! This fixed it! thank you.

Why does this have SUCH bad rating? When you search for Gutenberg its not even near the top...

Are there any other plugins worth adding to expand Gutenberg? or improve it?

[pansamolot]

Why does this have SUCH bad rating? When you search for Gutenberg its not even near the top...

It is a development version. It gets updated very often (I had auto-updates even once per day for some time), but it can handle some nasty things (for example we had a bad-looking Times New Roman font in editor for about 2 weeks). The official, core version gets updated on very rare basis (once per month or even less), but doesn't get that many bugs. This one is more like nightly build etc.

Many (really many... way too many) people doesn't understand that (or don't want to understand that) and thinks this is a production-level plugin. Since it's not, since it fails for so many times, it gets so bad credit.

Are there any other plugins worth adding to expand Gutenberg? or improve it?

It's up to you, depending on what you need or want. The core thing behind Gudneberg is that it is based on block. There are hundreds, if not thousands of blocks types available. Of which just a tiny subset is carried on with Gutenberg plugin itself. You need to install dozens of other plugins in order to get access to these block types. I'd consider this as a major advantage of Gutenberg and the most important way of "improving" it.

[Nantris]

I can't help but notice that the fact it's a beta is mentioned towards the end of the snippet. It seems like that should really be up front, and bolded if possible.

[ployt0]

I just copy pasted my old HTML into a very vanilla, stock, WordPress, with no plugins, via the Gutenberg interface and it has, in fact, detected the <kbd> tags. It only looks like code because the only customisation I have is the vanilla Astra theme:

A convoluted workflow; I compose in MD, convert to HTML, and then paste it into WordPress, and review each page manually. Static HTML is always an option. I'm only employing (deploying) WordPress for better SEO.