Add a "Copy URL to clipboard" row action in Media > Library...similar to the botton on the Edit Media screen

[pbiron]

#48463 added a "Copy URL to clipboard" button on the Edit Media screen.

I think it would be nice if there were an equivalent "row action" on the Media > Library screen.

What I end up doing now is:

1. find the media I need the URL for on the Media > Library screen
2. edit that media
3. click the "Copy URL to clipboard" button
4. paste the URL where I need it

I think it would be a big win to not need to do steps 2 & 3.

Note that I am not suggesting to remove the button from the Edit Media screen :-)

[ravipatel]

Created a code for copy url on listing

[ravipatel]

Patch view for copy url

[ravipatel]

Updated code with media link in a tag

[alexstine]

My latest patch:

• Adds a Copy URL button with associated JS function for ClipboardJS.
• Cleans up the code.
• Escapes the URL on output.
• Adds needed dependencies to "media" script handle (wp-i18n, wp-a11y).

This probably looks very visually ugly and that's not something I can fix, but it does seem to work well.

Interested to hear suggestions/feedback.

Thanks.

[pbiron]

Replying to alexstine:

My latest patch:

• Adds a Copy URL button with associated JS function for ClipboardJS.
• Cleans up the code.
• Escapes the URL on output.
• Adds needed dependencies to "media" script handle (wp-i18n, wp-a11y).

This probably looks very visually ugly and that's not something I can fix, but it does seem to work well.

Interested to hear suggestions/feedback.

@alexstine thank you so much for the patch. I'll try to test it this weekend!

[pbiron]

54426.4.diff​ builds on 54426.3.patch​ but with a UI that is closer to that on the Edit Media screen: when the Copy URL to clipboard row action link is clicked, the string Copied! is displayed for 3 seconds (w/ in the color green).

The patch from @alexstine gave me enough info to find the JS that is used on the Edit Media screen and this patch uses basically the same (the one mod is that is clears the focus on the Copy URL to clipboard link when it hides the Copied! text...something that should be probably be done on Edit Media, but I'll leave that to another ticket).

[pbiron]

short movie that shows 54424.4.diff in action

[pbiron]

Oops, description of copy-url-to-clipboard.gif​ should say "54426.4.diff" :-)

[pbiron]

copy-url-to-clipboard-movement.gif​ demonstrates one possible problem with 54426.4.diff​.

If there are custom row actions then when Copy URL to clipboard is clicked on all those other row actions move to make room for the Copied! text to display (and move back when Copied! is hidden again).

Personally, I don't think that's a big problem...but want to make sure those reviewing this are aware of it in case someone else things it's a problem.

And I say that as someone who suffers from pretty severe vertigo and thus, unnecessary (or unexpected) movement on the screen can often disorient me...and this movement does not...but I know that different people with motion sensitivity react differently.

[alexstine]

@pbiron Thanks for the latest patch. I'll check it when I have a free moment. Code looks a lot cleaner than my first attempt, appreciate the cleanup.

That is the hardest part, tracking down what core scripts are loaded where. This file usually holds the answers though if you ever need to find one in the future.

src/wp-includes/script-loader.php

Then you can search the page source for the script and have the above file to reference it by.

[alexstine]

@pbiron Patch works great. :)

Tagging @joedolson for next steps as he's current component maintainer or was at one time. Can't seem to find the current list. I'm happy with functionality.

I tried to run a quick lint over the code, but I can't tell if we've caused those errors or if they were there before. Code looks pretty clean to me as it was reused, but closer look by someone else may not hurt. More visual testing is probably a good idea as well.

Thanks! :)

[afercia]

Had a look at the patch. It still applies and makes sense to me, good job. Just a couple things:

• I'd recommend to not blur the trigger button on success, otherwise there will be a focus loss.
• I'm not sure the 'shifting' effect of other potential custom row actions would be a good experience. Maybe in the context of the row actions the 'Copied!' text should be styled differently. With a few lines of CSS it could be styled as a sort of 'tooltip' that appears above the row action button. See a very quick example in the screenshot attached below. Wort reminding the 'Copied!' text is hidden from assistive technologies so it's just a visual thing and it disappears after 3 seconds.

[pbiron]

Replying to afercia:

• I'm not sure the 'shifting' effect of other potential custom row actions would be a good experience. Maybe in the context of the row actions the 'Copied!' text should be styled differently. With a few lines of CSS it could be styled as a sort of 'tooltip' that appears above the row action button. See a very quick example in the screenshot attached below. Wort reminding the 'Copied!' text is hidden from assistive technologies so it's just a visual thing and it disappears after 3 seconds.

A tooltip-like effect for the "Copied!" text would be great!

Unfortunately, I'm really busy with "day job" things for the foreseeable future, so would appreciate if another contrib could try their hand at doing a revised patch that does that.

[afercia]

54426.diff​ updates the previous patch and:

• Prevents focus loss by not triggering blur on the currently focused element.
• Styles the 'Copied!' text to look like a tooltip placed above the Copy button.

See attached animated GIF.

[pbiron]

Thank you Andrea!

54426.diff, with the tooltip effect, works great on Chrome 98.0.4758.102, Edge 98.0.1108.62, and FF 97.0.1...all in Win 10.

It would be great if someone could test in a few other browsers, otherwise I think it's ready for commit.

[alexstine]

Still works great for me. Good for screen readers.

[davidbaumwald]

In 52842:

Media: Add a "Copy URL to clipboard" function to the list table view.

Previously, a button was added to the modal view for a single media item in the "grid" view to copy the file URL to the user's clipboard. This change adds a similar function to the "list" view for each media item.

Follow-up to [48232].

Props pbiron, ravipatel, alexstine, afercia.
Fixes #54426.

[davidbaumwald]

In 52843:

Media: Note ClipboardJS as a global in /js/_enqueues/admin/media.js.

Follow-up to [52842].

See #54426.

[milana_cap]

End user docs screenshots should be updated