Code Block: Add Tab and Shift+Tab indentation support

[Infinite-Null]

What?

Closes #15791.
Closes #37336

Enhances the Code block so that pressing Tab indents the current line or selected text, and pressing Shift+Tab de-indents it.

Why?

Previously, pressing Tab inside a Code block moved focus to the next UI element, making proper code indentation impossible.
This update captures Tab and Shift+Tab key events, allowing for natural code editing and improving the experience for developers and anyone writing code snippets.

Testing Instructions

1. Open the post editor
2. Add a Code block
3. Type some code on the first line
4. Press Enter to create a new line
5. Select the code and Press Tab - verify that:
   • Focus remains in the Code block
   • A tab character is inserted for indentation
6. Test multiple tab presses to create deeper indentation levels
7. Select the code and Press Shift + Tab - verify that:
   • This action outdent the code

Screencast

Before

Screen.Recording.2025-08-06.at.12.28.31.PM.mov

After

Screen.Recording.2025-08-08.at.11.43.47.AM.mov

[github-actions]

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

Unlinked Accounts

The following contributors have not linked their GitHub and WordPress.org accounts: @wclear.

Contributors, please read how to link your accounts to ensure your work is properly credited in WordPress releases.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Unlinked contributors: wclear.

Co-authored-by: Infinite-Null <ankitkumarshah@git.wordpress.org>
Co-authored-by: Mamaduka <mamaduka@git.wordpress.org>
Co-authored-by: paaljoachim <paaljoachim@git.wordpress.org>
Co-authored-by: noisysocks <noisysocks@git.wordpress.org>
Co-authored-by: amustaque97 <amustaque97@git.wordpress.org>
Co-authored-by: getdave <get_dave@git.wordpress.org>
Co-authored-by: mcsf <mcsf@git.wordpress.org>
Co-authored-by: zaguiini <zaguiini@git.wordpress.org>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

[paaljoachim]

This looks like based on the video is working well!
Nicely done.

[Mamaduka]

I think we're moving in the right direction, but PR still needs some work.

Notes

• a11y. Let's ensure we're not introducing accessibility regression. After this change, the user can't navigate away from the code block using Tab.
• This should allow indenting the selected text, including multi-line selection. Currently, it just deletes the selection.
• The Shift+Tab is comment shortcut for outdenting the selection. Not a blocker, but it would also be a good addition.
• Evaluate and check if we can use existing rich-text helpers. Working with RichText can be complex; let's try to use existing tools when possible. I'm not an expert in this field, so maybe @ellatrix can give us some pointers.

I think we can resolve the first point by only allowing indent/outdent when there's a text selection. This is how GitHub handles similar logic in the comment textarea.

Screeencast

CleanShot.2025-08-06.at.12.29.15.mp4

[Infinite-Null]

Hi @Mamaduka,
Thank you for the feedback 🙌! I have updated the logic to make it similar to GitHub's textarea tab indentation.
Please review it at your convenience.

Screen.Recording.2025-08-07.at.11.57.01.AM.mov

[Infinite-Null]

Hi @Mamaduka,
I have also added the shift + tab to outdend the code. Please review it at your convenience:

Screen.Recording.2025-08-08.at.11.43.47.AM.mov

Screen.Recording.2025-08-08.at.11.44.12.AM.mov

[Mamaduka]

Thanks for the follow-ups, @Infinite-Null!

I'll try to test this properly later today. Meanwhile, here are some general notes:

• Let's update the PR title and description. We're not fixing the focus loss here, but instead introducing an enhancement for the Code block.
• The indentation hook logic can be moved outside of the component, in the same file as a custom hook - useTab or something like that.
• Use early returns when possible to reduce nesting and make code more readable.

[Infinite-Null]

Hi @Mamaduka, Thank you for the feedback. I have moved the logic to the useTabIndentation custom hook and also added early returns. Please review it at your convenience.

[Mamaduka]

Thanks for the follow-ups, @Infinite-Null!

I think indentation works mostly well, but there are still some quirks that would be nice to polish.

It's easier to showcase via screencast:

CleanShot.2025-08-22.at.15.20.26.mp4

[Mamaduka]

Suggestion (non-blocking): We can just return ref here; there's no need to wrap it in the object and destruct later.