Compose: Implement useCopyToClipboard and useCopyOnClick with native clipboard API#75723
Merged
Compose: Implement useCopyToClipboard and useCopyOnClick with native clipboard API#75723
Conversation
2 tasks
|
Size Change: -2.83 kB (-0.04%) Total Size: 6.89 MB
ℹ️ View Unchanged
|
Member
|
I think this was tried and abandoned a couple of times. Here's the latest attempt I could find - #37810. |
Contributor
Author
I didn't know that 😅 This PR has a fallback code for HTTP, but I would like to test this PR to see if it actually works in various environments. |
Contributor
Author
|
This PR should technically work in an HTTP environment, but to verify this, I'll try to set up an HTTP environment somehow. This temporary log should be logged, and it should work correctly. |
Contributor
Author
|
Ok, so this PR seems to work on non-secure sites too. See the Testing on non-secure site section. cc @ciampo |
|
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 Unlinked AccountsThe following contributors have not linked their GitHub and WordPress.org accounts: @mostafa-abdelbari, @noahtallen. 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. To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook. |
ciampo
reviewed
Feb 20, 2026
Contributor
ciampo
left a comment
There was a problem hiding this comment.
Thank you for the ping!
Apart from the comments that I left, I have two additional suggestions:
- I still it would be valuable to add unit tests to test the branching logic (secure vs. fallback, guard clauses, error handling) and the hook integration (click listeners, state management, timeouts, cleanup). Some aspects will still require e2e tests (actual clipboard behaviour, HTTP vs HTTPS, real iframe scenarios, cross-browser quirks re.
execCommand), but unit tests IMO will still bring value. - should we write the new version in TypeScript?
Contributor
Author
|
@ciampo Thanks for the feedback! I'll try to convert it to Typescript, add tests, and address your feedback. |
Contributor
Author
|
I think I've addressed all the feedback.
|
ciampo
approved these changes
Feb 24, 2026
Contributor
ciampo
left a comment
There was a problem hiding this comment.
LGTM, testing well as per instructions 🚀
Left some more comments, but none are blocking. Feel free to address them in this PR, or in a follow-up.
Thank you for working on this 🙏
ciampo
reviewed
Feb 24, 2026
|
Flaky tests detected in 5bdf108. 🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/22842142139
|
ciampo
reviewed
Mar 7, 2026
ciampo
reviewed
Mar 7, 2026
Co-authored-by: Marco Ciampini <marco.ciampo@gmail.com>
t-hamano
added a commit
that referenced
this pull request
Mar 19, 2026
…clipboard API (#75723) * Compose: Implement useCopyToClipboard and useCopyOnClick with native clipboard API * Add temporary code to check if Clipboard API is available * Add isSecureContext log * Remove console.log * Migrate to Typescript * Call onSuccess even when empty text is copied * Add isActive flag to prevent state updates after unmount * useCopyToClipboard: Add isActive flag to prevent state updates after unmount * ADd unit tests * Add unit tests for useCopyOnClick * Add e2e test * e2e: correctly click button inside block * useCopyOnClick: check deprecated message in unit test * useCopyOnClick: verify isActive guard in unit test * Add unit tests for copyToClipboard and clearSelection * Preven scroll jump while copying Co-authored-by: Marco Ciampini <marco.ciampo@gmail.com> * useCopyOnClick: use async/await instad of .then() --------- Unlinked contributors: mostafa-abdelbari, noahtallen. Co-authored-by: t-hamano <wildworks@git.wordpress.org> Co-authored-by: ciampo <mciampini@git.wordpress.org> Co-authored-by: Mamaduka <mamaduka@git.wordpress.org> Co-authored-by: getdave <get_dave@git.wordpress.org> Co-authored-by: StYankov <styankov@git.wordpress.org>
2 tasks
t-hamano
added a commit
that referenced
this pull request
Mar 19, 2026
…clipboard API (#75723) (#76663) * Compose: Implement useCopyToClipboard and useCopyOnClick with native clipboard API * Add temporary code to check if Clipboard API is available * Add isSecureContext log * Remove console.log * Migrate to Typescript * Call onSuccess even when empty text is copied * Add isActive flag to prevent state updates after unmount * useCopyToClipboard: Add isActive flag to prevent state updates after unmount * ADd unit tests * Add unit tests for useCopyOnClick * Add e2e test * e2e: correctly click button inside block * useCopyOnClick: check deprecated message in unit test * useCopyOnClick: verify isActive guard in unit test * Add unit tests for copyToClipboard and clearSelection * Preven scroll jump while copying * useCopyOnClick: use async/await instad of .then() --------- Unlinked contributors: mostafa-abdelbari, noahtallen. Co-authored-by: ciampo <mciampini@git.wordpress.org> Co-authored-by: Mamaduka <mamaduka@git.wordpress.org> Co-authored-by: getdave <get_dave@git.wordpress.org> Co-authored-by: StYankov <styankov@git.wordpress.org> Co-authored-by: t-hamano <wildworks@git.wordpress.org> Co-authored-by: ramonjd <ramonopoly@git.wordpress.org>
pento
pushed a commit
to WordPress/wordpress-develop
that referenced
this pull request
Mar 19, 2026
This updates the pinned hash from the `gutenberg` from `8c78d87453509661a9f28f978ba2c242d515563b` to `487a096a9782ba6110a7686d7b4b2d0c55ed1b06`. The following changes are included: - Disables anchor support for the Page Break block. (WordPress/gutenberg#76434) - WP Admin: Update Connectors screen footer text for consistency. (WordPress/gutenberg#76382) - E2E Tests: Add coverage for AI plugin callout banner on Connectors page (WordPress/gutenberg#76432) - Update sync docs (WordPress/gutenberg#75972) - RTC: Add preference for collaborator notifications (WordPress/gutenberg#76460) - Fix "should undo bold" flaky test (WordPress/gutenberg#76464) - TimePicker: Clamp month day to valid day for month (WordPress/gutenberg#76400) - RTC: Fix error when entity record doesn't have 'meta' property (WordPress/gutenberg#76311) - Navigation: Update close button size. (WordPress/gutenberg#76482) - TemplateContentPanel: fix useSelect warning (WordPress/gutenberg#76421) - DataViews: Add spinner in `DataViewsLayout` in initial load of data (WordPress/gutenberg#76486) (WordPress/gutenberg#76490) - RTC: Fix TypeError in areEditorStatesEqual when selection is undefined (WordPress/gutenberg#76163) - Page/Post Content Focus Mode: Fix insertion into Post Content block (WordPress/gutenberg#76477) - Revisions: use useSubRegistry={false} to fix global store selectors (WordPress/gutenberg#76152) (WordPress/gutenberg#76522) - Fix RTL styling on Connectors, Font Library, and boot-based admin pages (WordPress/gutenberg#76496) - RTC: Auto-register custom taxonomy rest_base values for CRDT sync (WordPress/gutenberg#75983) - RTC: Add a limit for the default provider (WordPress/gutenberg#76437) - Fix RTL styling on AI plugin callout banner (WordPress/gutenberg#76497) - Add command palette trigger button to admin bar (WordPress/gutenberg#75757) - Block Bindings: Remove source items constrained by enums (WordPress/gutenberg#76200) - HTML Block: Remove "unsaved changes" check (WordPress/gutenberg#76086) - CI: Don't build release notes during plugin build workflow for WP Core sync (WordPress/gutenberg#76398) (WordPress/gutenberg#76578) - CI: Simplify strategy matrix in Build Gutenberg Plugin Zip workflow (WordPress/gutenberg#76435) (WordPress/gutenberg#76538) - Media: Add hooks and extension points for client-side media processing (WordPress/gutenberg#74913) - RTC: Fix list sidebar reset during real-time collaboration (WordPress/gutenberg#76025) - RTC: Fix CRDT serialization of nested RichText attributes (WordPress/gutenberg#76597) - RTC: Remove post list lock icon and replace user-specific lock text (WordPress/gutenberg#76322) - Fix HEIC upload error handling and sub-size format (WordPress/gutenberg#76514) - RTC: Fix cursor index sync with rich text formatting (WordPress/gutenberg#76418) - RTC: Allow filtering of `SyncConnectionModal` (WordPress/gutenberg#76554) - RTC: Implement front-end peer limits (WordPress/gutenberg#76565) - Navigation overlay close button may be displayed twice (WordPress/gutenberg#76585) - Site Editor > Templates: fix author filter (WordPress/gutenberg#76625) - Revisions: Show changed block attributes in inspector sidebar (WordPress/gutenberg#76550) - Fix IS_GUTENBERG_PLUGIN env var override in build config (WordPress/gutenberg#76605) - Real Time Collaboration: Introduce filters for the polling intervals. (WordPress/gutenberg#76518) - RTC: Fix RichTextData deserialization (WordPress/gutenberg#76607) - Cross Origin Isolation: Remove `img` from the list of elements that get mutated (WordPress/gutenberg#76618) - RTC: Scroll to collaborator on click (WordPress/gutenberg#76561) - Update changelog link for pull request 11276 (WordPress/gutenberg#76638) - Fix backport changelog filename (WordPress/gutenberg#76651) - Build: Skip non-minified build for WASM-inlined workers (WordPress/gutenberg#76615) - RTC: Change RTC option name (WordPress/gutenberg#76643) - BlockListBlock: fix crash when selectedProps are null (WordPress/gutenberg#75826) - Build: Fix vips worker 404 when SCRIPT_DEBUG is true (WordPress/gutenberg#76657) - useMediaQuery: support in-iframe queries via new `WindowContext` (WordPress/gutenberg#76446) (WordPress/gutenberg#76660) - Refactor admin-ui Page component to use @wordpress/theme tokens and @wordpress/ui layout primitive (WordPress/gutenberg#75963) - Connectors: Improve accessibility (WordPress/gutenberg#76456) - Build: Remove unused JXL WASM module from vips worker (WordPress/gutenberg#76639) - Connectors: fix button size (WordPress/gutenberg#76582) - Compose: Implement useCopyToClipboard and useCopyOnClick with native clipboard API (WordPress/gutenberg#75723) (WordPress/gutenberg#76663) - Connectors: Fetch specific plugin instead of all plugins (WordPress/gutenberg#76594) - Revisions: Add Meta fields diff panel to document sidebar (WordPress/gutenberg#76341) - Loosen client-side media processing requirements (WordPress/gutenberg#76616) - Reduce the added halo for selected block. (WordPress/gutenberg#76619) - Connectors: Add unregisterConnector and upsert support (WordPress/gutenberg#76541) A full list of changes can be found on GitHub: https://github.com/WordPress/gutenberg/compare/8c78d87453509661a9f28f978ba2c242d515563b…487a096a9782ba6110a7686d7b4b2d0c55ed1b06. Log created with: git log --reverse --format="- %s" 8c78d87453509661a9f28f978ba2c242d515563b..487a096a9782ba6110a7686d7b4b2d0c55ed1b06 | sed 's|#\([0-9][0-9]*\)|https://github.com/WordPress/gutenberg/pull/\1|g; /github\.com\/WordPress\/gutenberg\/pull/!d' | pbcopy See #64595. git-svn-id: https://develop.svn.wordpress.org/trunk@62063 602fd350-edb4-49c9-b593-d223f7449a82
markjaquith
pushed a commit
to markjaquith/WordPress
that referenced
this pull request
Mar 19, 2026
This updates the pinned hash from the `gutenberg` from `8c78d87453509661a9f28f978ba2c242d515563b` to `487a096a9782ba6110a7686d7b4b2d0c55ed1b06`. The following changes are included: - Disables anchor support for the Page Break block. (WordPress/gutenberg#76434) - WP Admin: Update Connectors screen footer text for consistency. (WordPress/gutenberg#76382) - E2E Tests: Add coverage for AI plugin callout banner on Connectors page (WordPress/gutenberg#76432) - Update sync docs (WordPress/gutenberg#75972) - RTC: Add preference for collaborator notifications (WordPress/gutenberg#76460) - Fix "should undo bold" flaky test (WordPress/gutenberg#76464) - TimePicker: Clamp month day to valid day for month (WordPress/gutenberg#76400) - RTC: Fix error when entity record doesn't have 'meta' property (WordPress/gutenberg#76311) - Navigation: Update close button size. (WordPress/gutenberg#76482) - TemplateContentPanel: fix useSelect warning (WordPress/gutenberg#76421) - DataViews: Add spinner in `DataViewsLayout` in initial load of data (WordPress/gutenberg#76486) (WordPress/gutenberg#76490) - RTC: Fix TypeError in areEditorStatesEqual when selection is undefined (WordPress/gutenberg#76163) - Page/Post Content Focus Mode: Fix insertion into Post Content block (WordPress/gutenberg#76477) - Revisions: use useSubRegistry={false} to fix global store selectors (WordPress/gutenberg#76152) (WordPress/gutenberg#76522) - Fix RTL styling on Connectors, Font Library, and boot-based admin pages (WordPress/gutenberg#76496) - RTC: Auto-register custom taxonomy rest_base values for CRDT sync (WordPress/gutenberg#75983) - RTC: Add a limit for the default provider (WordPress/gutenberg#76437) - Fix RTL styling on AI plugin callout banner (WordPress/gutenberg#76497) - Add command palette trigger button to admin bar (WordPress/gutenberg#75757) - Block Bindings: Remove source items constrained by enums (WordPress/gutenberg#76200) - HTML Block: Remove "unsaved changes" check (WordPress/gutenberg#76086) - CI: Don't build release notes during plugin build workflow for WP Core sync (WordPress/gutenberg#76398) (WordPress/gutenberg#76578) - CI: Simplify strategy matrix in Build Gutenberg Plugin Zip workflow (WordPress/gutenberg#76435) (WordPress/gutenberg#76538) - Media: Add hooks and extension points for client-side media processing (WordPress/gutenberg#74913) - RTC: Fix list sidebar reset during real-time collaboration (WordPress/gutenberg#76025) - RTC: Fix CRDT serialization of nested RichText attributes (WordPress/gutenberg#76597) - RTC: Remove post list lock icon and replace user-specific lock text (WordPress/gutenberg#76322) - Fix HEIC upload error handling and sub-size format (WordPress/gutenberg#76514) - RTC: Fix cursor index sync with rich text formatting (WordPress/gutenberg#76418) - RTC: Allow filtering of `SyncConnectionModal` (WordPress/gutenberg#76554) - RTC: Implement front-end peer limits (WordPress/gutenberg#76565) - Navigation overlay close button may be displayed twice (WordPress/gutenberg#76585) - Site Editor > Templates: fix author filter (WordPress/gutenberg#76625) - Revisions: Show changed block attributes in inspector sidebar (WordPress/gutenberg#76550) - Fix IS_GUTENBERG_PLUGIN env var override in build config (WordPress/gutenberg#76605) - Real Time Collaboration: Introduce filters for the polling intervals. (WordPress/gutenberg#76518) - RTC: Fix RichTextData deserialization (WordPress/gutenberg#76607) - Cross Origin Isolation: Remove `img` from the list of elements that get mutated (WordPress/gutenberg#76618) - RTC: Scroll to collaborator on click (WordPress/gutenberg#76561) - Update changelog link for pull request 11276 (WordPress/gutenberg#76638) - Fix backport changelog filename (WordPress/gutenberg#76651) - Build: Skip non-minified build for WASM-inlined workers (WordPress/gutenberg#76615) - RTC: Change RTC option name (WordPress/gutenberg#76643) - BlockListBlock: fix crash when selectedProps are null (WordPress/gutenberg#75826) - Build: Fix vips worker 404 when SCRIPT_DEBUG is true (WordPress/gutenberg#76657) - useMediaQuery: support in-iframe queries via new `WindowContext` (WordPress/gutenberg#76446) (WordPress/gutenberg#76660) - Refactor admin-ui Page component to use @wordpress/theme tokens and @wordpress/ui layout primitive (WordPress/gutenberg#75963) - Connectors: Improve accessibility (WordPress/gutenberg#76456) - Build: Remove unused JXL WASM module from vips worker (WordPress/gutenberg#76639) - Connectors: fix button size (WordPress/gutenberg#76582) - Compose: Implement useCopyToClipboard and useCopyOnClick with native clipboard API (WordPress/gutenberg#75723) (WordPress/gutenberg#76663) - Connectors: Fetch specific plugin instead of all plugins (WordPress/gutenberg#76594) - Revisions: Add Meta fields diff panel to document sidebar (WordPress/gutenberg#76341) - Loosen client-side media processing requirements (WordPress/gutenberg#76616) - Reduce the added halo for selected block. (WordPress/gutenberg#76619) - Connectors: Add unregisterConnector and upsert support (WordPress/gutenberg#76541) A full list of changes can be found on GitHub: https://github.com/WordPress/gutenberg/compare/8c78d87453509661a9f28f978ba2c242d515563b…487a096a9782ba6110a7686d7b4b2d0c55ed1b06. Log created with: git log --reverse --format="- %s" 8c78d87453509661a9f28f978ba2c242d515563b..487a096a9782ba6110a7686d7b4b2d0c55ed1b06 | sed 's|#\([0-9][0-9]*\)|https://github.com/WordPress/gutenberg/pull/\1|g; /github\.com\/WordPress\/gutenberg\/pull/!d' | pbcopy See #64595. Built from https://develop.svn.wordpress.org/trunk@62063 git-svn-id: http://core.svn.wordpress.org/trunk@61345 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Fixes #65874
Closes #37700
What? Why?
The
useCopyToClipboardhook usesclipboard.jsinternally, but that library doesn't support iframe documents and hasn't been maintained for years. It should be possible to implement the same thing with native browser APIs by now.Testing Instructions
I've created two blocks that implement the
useCopyToClipboardoruseCopyOnClickhooks. Insert them into the editor and verify that they work correctly.Verify that the various copy buttons in the editor continue to work as before. For example:
Testing on non-secure site
Similar efforts have been abandoned in the past because the copy didn't work on non-secure sites, i.e. sites running over HTTP. #37810
This PR includes a fallback for HTTP sites, so be sure to check it out to see if it works.
Perhaps the easiest way to build an HTTP site is with Studio. Launch your site with the "Enable HTTPS" check disabled:
Open your browser console and run the following code. It should return
falseandundefined.We'll verify that the copy works correctly even in this environment.