WordPress / WordPress/secure-custom-fields
Port ACF's _acf-copyable.js for click-to-copy field keys on list tables
Nobody has claimed this yet.
- Dominant language
- PHP
- Stars
- 131
- Forks
- 64
- Avg merge
- 10m
- Merged PRs (30d)
- 1
Description
What
On the Field Groups / Post Types / Taxonomies / Options Pages list tables, the Key column (.column-acf-key) has no copy affordance in SCF. Upstream wraps the key in a .copyable span and handles click-to-copy from a dedicated assets/src/js/_acf-copyable.js, which SCF has never ported — SCF only has the field-group editor copyable (in _field-group-field.js), which works fine and is unrelated.
Why now
#506 synced the sass partials from ACF 6.8.5, so the list-table copyable CSS (_list-table.scss: hover copy icon, green check on .copied) already ships — it's inert until the JS creates the .copyable markup. Porting the JS completes the feature with zero further CSS work.
Where upstream has it
Free ACF repo, tag 6.8.5, assets/src/js/_acf-copyable.js: an acf.Model that gates on the relevant pagenow screens, wraps .column-acf-key contents, and handles the copy click (including the copy-unsupported fallback for non-secure contexts). Check how upstream enqueues it (bundle entry vs standalone) and mirror that in SCF's build.
Acceptance
Hovering a key in the list-table Key column shows the copy icon; clicking copies the key and swaps to the green check, matching the existing editor behavior.
Found while reviewing #506 (the "Copyable field keys" family of its CSS delta is currently inert).
🤖 Generated with Claude Code
Contributor guide
No contributing guide indexed for this repository
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Compare upstream ACF 6.8.5's assets/src/js/_acf-copyable.js with SCF's existing _field-group-field.js, then inspect how the script is enqueued in SCF's build. Confirm that the existing _list-table.scss styles apply to the generated markup. Done means list-table keys show the copy icon, copy successfully, and switch to the green check, including the fallback behavior described in the issue.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, scss, wordpress
- Domain
- frontend
- Issue type
- Feature
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Quiet
- Clarity
- Clearly specified
- Newbie friendliness
- 72/100