Adding line numbers to the code

[benazeer-ben]

What?

Fixes: #38479

How?

Added line numbers along with the code

Testing Instructions

• Go to WP admin.
• Open any page or post in edit mode.
• Add code block.
• Insert some code.
• Observe and verify the line numbers are adding properly.

Screenshots or screencast

Screenshare.-.2025-01-02.6_18_20.PM.mp4

[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.

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

Co-authored-by: benazeer-ben <[email protected]>
Co-authored-by: carolinan <[email protected]>
Co-authored-by: t-hamano <[email protected]>

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

[carolinan]

Hi
Having line numbers would be a welcome update.
Can you please describe the solution in more detail and the reasons for choosing this solution?

When I apply the PR, it breaks existing code blocks. The previous version of the block needs to be deprecated, so that the editor can prevent the error. See https://developer.wordpress.org/block-editor/reference-guides/block-api/block-deprecation/

In this PR, the line numbers are only visual, and there is no way for a screen reader user to receive information about what code is on what line.
But the numbers are also not hidden, and when I test the block, the problem is most apparent in the editor.
When I navigate to the block, it reads out the numbers 1-10 before reaching the code element, and it is not helpful.

[t-hamano]

Thanks for the PR!

To be honest, I am personally reluctant to move forward this PR. Here are the reasons:

• There are many plugins that extend the Code block. Those plugins may already provide line numbers in their own plugins. If we provided line numbers in the core, it would mean forcing developers to deal with line numbers that may be duplicated.
• Line numbers are not the only useful thing in a code snippet. Some people may want a button to copy the code. Some people may want to highlight specific lines. I don't see why line numbers are the only thing we need.
• Line number style is not customizable in the UI. One line number style may not match all themes or colors.

The Code block already offers basic functionality like color, typography, etc. Users who want more can find a plugin that meets their needs.

But this is just my opinion.