Skip to content

Adding line numbers to the code#68465

Closed
benazeer-ben wants to merge 2 commits intoWordPress:trunkfrom
benazeer-ben:code-block-line-numbers
Closed

Adding line numbers to the code#68465
benazeer-ben wants to merge 2 commits intoWordPress:trunkfrom
benazeer-ben:code-block-line-numbers

Conversation

@benazeer-ben
Copy link
Contributor

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
Copy link

github-actions bot commented Jan 2, 2025

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 <benazeer@git.wordpress.org>
Co-authored-by: carolinan <poena@git.wordpress.org>
Co-authored-by: t-hamano <wildworks@git.wordpress.org>

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

@akasunil akasunil added [Type] Enhancement A suggestion for improvement. [Block] Code Affects the Code Block labels Jan 6, 2025
@carolinan
Copy link
Contributor

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
Copy link
Contributor

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.

@Mamaduka
Copy link
Member

Mamaduka commented May 1, 2025

Let's close this as "maybe later" - #38479 (comment).

Thanks for contributing, @benazeer-ben!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

[Block] Code Affects the Code Block [Type] Enhancement A suggestion for improvement.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Add line numbers to the code block

5 participants