Skip to content

fix(list-table): port ACF _acf-copyable.js for click-to-copy field keys - #520

Open
faisalahammad wants to merge 1 commit into
WordPress:trunkfrom
faisalahammad:fix/508-port-copyable-list-tables
Open

fix(list-table): port ACF _acf-copyable.js for click-to-copy field keys#520
faisalahammad wants to merge 1 commit into
WordPress:trunkfrom
faisalahammad:fix/508-port-copyable-list-tables

Conversation

@faisalahammad

@faisalahammad faisalahammad commented Jul 24, 2026

Copy link
Copy Markdown

Ports upstream ACF 6.8.5's assets/src/js/_acf-copyable.js so the Key column on the Field Groups / Post Types / Taxonomies / Options Pages list tables becomes click-to-copy, matching the existing field-group editor behavior.

The CSS for the hover copy icon and the green check on .copied was already synced from ACF 6.8.5 in #506, but was inert because no JS was emitting the .copyable markup. This PR adds the JS half and wires it into the acf.js entry bundle. The acf script handle is already enqueued on the four edit-acf-* list screens, so no PHP or CSS change is required.

Diff:

  • assets/src/js/_acf-copyable.js (new) — acf.Model gated on pagenow matching edit-acf-field-group, edit-acf-post-type, edit-acf-taxonomy, edit-acf-ui-options-page. Finds .column-acf-key cells, wraps the key text in a span.copyable (adds copy-unsupported when navigator.clipboard is unavailable), and handles the copy click.
  • assets/src/js/acf.js — added import './_acf-copyable.js'; after the _acf-tooltip.js import, matching upstream's entry ordering.

The only behavioral deviation from upstream: the original guard reads if ( ! $copyableElements ), which is dead because jQuery objects are always truthy; this port uses ! $copyableElements.length so the early return actually fires for empty pages. Same net behavior, strict correctness improvement.

How to test

  1. Build the assets (the bundled acf.js is checked in under assets/build/ and shipped; verify locally with npm run build if needed).
  2. On the WP admin, open Field Groups / Post Types / Taxonomies / Options Pages. Make the Key column visible via Screen Options if needed.
  3. Hover any row's Key cell — a copy icon now appears next to the key.
  4. Click the key — the field group / post type / taxonomy / options page key is copied to the clipboard, and the icon briefly turns into a green check for about two seconds.
  5. Open a Field Group for editing and click a field name/key to copy. Same behavior as before, no double-fire or console errors.
  6. (Optional) Test over plain HTTP (not localhost/HTTPS): the icon hides because navigator.clipboard is unavailable in non-secure contexts; no JS errors.

Use of AI Tools

AI tooling was used to research upstream ACF source, port the JS model, run validation checks (webpack build, lint, static analysis), and draft this description. The diff was reviewed and adjusted manually.

Screenshots

SCR-20260724-twpz SCR-20260724-twsb SCR-20260724-twwe

- Add _acf-copyable.js model gated on the four edit-acf-* list screens,
  wraps .column-acf-key in span.copyable and copies via navigator.clipboard.
- Wire the partial into the acf.js entry bundle; CSS for hover icon and
  green-check already shipped in 6.9.2 via WordPress#506, so the markup completes
  the feature with no further CSS work.

Fixes WordPress#508
@github-actions

Copy link
Copy Markdown

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.

Core Committers: Use this line as a base for the props when committing in SVN:

Props faisalahammad.

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

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

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant