Add Copy Button to Code Block

[Rishit30G]

What?

Closes #70018

Why?

This PR is intended to add the copy button to the code block

How?

This PR adds the <Button> component in the code code block with the necessary icon , onClick, label and disabled prop for it to behave like Copy Button along with a notice.

Testing Instructions

• Add a new post
• Add the code block
• Add some code to the code block
• Notice a copy button placed on the top right of the code block, which helps to copy the code

Screenshots or screencast

Screen.Recording.2025-04-30.at.1.25.34.PM.mov

[Rishit30G]

There are currently two blockers with this PR:

• Instead of the navigator , I should be using useCopyToClipboard hook, but it's giving an error when I'm passing content.text as the first prop.
• The copy functionality is only available on the editor side right now, I'm curious to know how can we bring it to the frontend as well

[Mamaduka]

I don't think this improves UX in the editor, but it introduces more lines of code to maintain.

The "Select All" command works just fine in textarea and contenteditable fields, unlike <pre> elements, where you can usually find the copy button.

@t-hamano, what do you think?

[github-actions]

Warning: Type of PR label mismatch

To merge this PR, it requires exactly 1 label indicating the type of PR. Other labels are optional and not being checked here.

• Type-related labels to choose from: [Type] Automated Testing, [Type] Breaking Change, [Type] Bug, [Type] Build Tooling, [Type] Code Quality, [Type] Copy, [Type] Developer Documentation, [Type] Enhancement, [Type] Experimental, [Type] Feature, [Type] New API, [Type] Task, [Type] Technical Prototype, [Type] Performance, [Type] Project Management, [Type] Regression, [Type] Security, [Type] WP Core Ticket, Backport from WordPress Core, Gutenberg Plugin.
• Labels found: [Status] Blocked, [Block] Code.

Read more about Type labels in Gutenberg. Don't worry if you don't have the required permissions to add labels; the PR reviewer should be able to help with the task.

[t-hamano]

Thanks for the ping!

Personally, I am against adding new functionality to the Code block. A PR has also been submitted to add line numbers, but I left my thoughts there. See #68465 (comment)

[Rishit30G]

Thanks @Mamaduka and @t-hamano for sharing your views! 💯

Users who want more can find a plugin that meets their needs.

I agree with the same, but as on now I couldn't find a plugin that would do this, so we can probably think about implementing this
But if it feels redundant as of now then maybe in future a plugin might help with this 🤞🏻

[Mamaduka]

Sure, the feature can be part of a custom plugin, and if the user really needs a separate copy, they can install the plugin. That's the beauty of WordPress. Not every feature needs to be part of the core.

I'm going to close this and the associated issue as "won't fix". Thanks again for contributing, @Rishit30G!

[paaljoachim]

Hey

I have lately become hooked on using ChatGPT for developing code that I need. So with a lot of help I made this tutorial. I add code for line numbers and a copy button to the Code block.
https://easywebdesigntutorials.com/enhance-the-code-block-in-gutenberg-with-a-code-snippet/