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

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.

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.

Screenshots

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

@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.

@faisalahammad
faisalahammad force-pushed the fix/508-port-copyable-list-tables branch from 144ce09 to 7b08cac Compare August 14, 2026 18:32
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 WordPress#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.

- 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.

Fixes WordPress#508
@faisalahammad faisalahammad reopened this Aug 14, 2026
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