Add a copy link in the code on the front end

[dingo-d]

This issue is inspired by a tweet from John Blackbourn

Every <code> or <pre> element on the web should have a "Copy" button next to it.

https://twitter.com/johnbillion/status/1316336593180012545?s=20

So you can blame him for it 😂

I remember that in Theme Sniffer we had a clipboard icon next to the sniff errors for easier copying

https://www.npmjs.com/package/clipboard

https://github.com/WPTT/theme-sniffer/blob/3aadb8c1ed64220684050bf09a7fb846bfdd2b54/assets/dev/scripts/theme-sniffer.js#L125

Something like that could work here 🤷‍♂️

[westonruter]

I'd want this feature to also be available in AMP. That is blocked by ampproject/amphtml#4853.

[studentcoinbonuscode]

waky wakyyy

[allejo]

waky wakyyy

We're awake, @studentcoinbonuscode. There's nothing this project can do as this feature is still blocked by the AMP spec.

[westonruter]

Work is underway on an amp-copy component (ampproject/amphtml#35221) which will unblock this.

[worldsdream]

I also would like to see a copy button on the front end.

[JuanxCursed]

Any updates?

[westonruter]

No updates. I am not sure that the amp-copy component will land soon, so probably this feature would either need to exclude AMP pages or it could be done in a way that it gets marked as being “PX-verified” for the AMP plugin and thus is able to be included on AMP pages when valid AMP is not required.

Since this feature would be adding something, it would probably need to have a global setting to enable (in Customizer?). I suppose there would also need to be a block-level setting as well, so you can enable it on a per-block basis.

We'd also need to work out the default styling of the copy button.

[NicoHood]

Will this still get implemented?

[westonruter]

Still would like to. Haven't been able to get to it.

In regards to the setting for whether globally enable a copy button across all blocks by default, using the Customizer wouldn't be appropriate anymore since its usage is declining now with the Site Editor.

[NicoHood]

Cant we use custom php code snippets for that? I mean that is how you configure this plugin, right?

[westonruter]

I mean, you can add a plugin that extends this plugin with a copy button, for sure.

[westonruter]

I created a proof of concept extension plugin that adds a Copy button after every code block: https://gist.github.com/westonruter/d99067473ad799deb099334a70bdf336