Keyboard shortcut for indenting lines of code in the code block

[wclear]

Is your feature request related to a problem? Please describe.
In the code block editor I would like to be able to indent and outdent lines of code with a minimal number of keystrokes.

Describe the solution you'd like
Ideally:

• pressing a key combination of 3 or less keys would insert a tab character at the start of the line (or lines, if multiple lines are selected)
• pressing a key combination of 3 or less keys would remove tab characters at the start of the line (or lines, if multiple lines are selected)

The key combination could be:

• Using the same indent and outdent keys used for lists: Ctrl + ] (indent) and Ctrl + [ (outdent)
• For single tab inserts on Windows, ensuring that Alt + 0 + 0 + 9 inserts a tab in the code block editor on all major browsers could make up part of the solution as this already inserts a tab character in Chrome and Edge but not in Firefox. This does not allow indenting and outdenting multiple lines of selected code at once however.
• For single tab inserts on MacOS, ensuring that Ctrl + Option + Tab inserts a tab character in the code block editor on all major browsers could make up part of the solution as this already inserts a tab character in Safari but not Chrome or Firefox.

Describe alternatives you've considered

• Copying and pasting tabs from another program (tedious when freestyle writing lots of code in a code block)
• Using multiple spaces to emulate the tab character (this breaks convention when writing for code which uses tabs instead of spaces so it's not copy-pastable)
• https://github.com/bfred-it/indent-textarea (allows selecting lines and indenting them but changes tab key behaviour so it breaks the accessibility model)
• Looked at related issues and pull requests: #1640 #1826 #9611 #7051

[paaljoachim]

Hey @wclear Will.

Is this issue still relevant? Should it be closed?

[wclear]

Hey @paaljoachim. I believe this issue is still relevant. I don't know if I've overlooked a development in the editor for the code block recently, but all the methods for indenting in the code block editor proposed in the issue continue to not work (and I can't find a method that does work). It seems like it is still not possible to indent and outdent lines of code with tab characters in the code block using only the keyboard.

[paaljoachim]

Thanks @wclear Will

I will ping some developers (making my best guess) who might have some ideas about this.
@gziolo @tellthemachines @noisysocks

[wclear]

Wonderful, thank you @paaljoachim!

[noisysocks]

Matching what we do for the List block and using Cmd + ] and Cmd + ] makes sense to me.

[amustaque97]

Hi team, if this issue is still relevant I can take it up.

[paaljoachim]

I believe it is still relevant.

Please do take it up @amustaque97
Thank you!

[amustaque97]

@paaljoachim, looks like currently there is no option for indentation and outdentation. Do we need to implement indent and outdent feature first(and part of this issue) then work on the shortcut keys?

If yes, what is the requirement for indent/outdent? Please share your ideas!

Thanks

[paaljoachim]

Hi @amustaque97

Perhaps @getdave might have som ideas....:)

[getdave]

I suggest bringing this one up in the Core Editor chat. It seems like a good idea but I can't personally commit to it at this time.

[getdave]

This was discussed during the Core Editor chat. The consensus was that it would be great if someone could raise a PR using one of the keyboard shortcuts suggested above. We can then all test and refine the shortcuts as required.

Is anyone open to taking this one on?

[getdave]

Forwarding important feedback left in #core-editor on Slack (registration required):

@joedolson: It's totally reasonable and expected to use the tab key for indenting within a code context. It's important that users are informed how to get out of the context where tab has changed usage. E.g., text above the form like 'Use esc to leave edit mode'. (Ctrl+M is also a common key combination for toggling, used by VS Code, for example.) @alexstine and @marcoz probably have valuable opinions on this topic.

@alexstine: Me personally, I would like Escape to be used. My hope is the accessibility only Navigation Mode will be going away at some point and then Escape will be freed up.

@MarcoZehe: Yes, that sounds reasonable.

[paaljoachim]

As I am currently redoing my WordPress tutorial site I am adding a lot of code into Code blocks.
I missing being able to press Tab to indent the code similar to various coding programs, or text programs. Even in Text Edit on the Mac uses Tab to indent. It seems like a standard key one uses to indent.

It would be helpful if someone is able to add Tab as a key to indent in the Code block, or in a block that uses text.
Thanks!

@mcsf Miguel is this perhaps something you might be able to pick up?

[mcsf]

Miguel is this perhaps something you might be able to pick up?

Not anytime soon, unfortunately.

[paaljoachim]

Alrighty. Thanks for the response Miguel. We will see when this issue moves onward.
Have a great day!