WordPress / WordPress/secure-custom-fields

Port ACF's _acf-copyable.js for click-to-copy field keys on list tables

Open
#508 0 comments 0 reactions 0 assignees View on GitHub

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

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.