Make WordPress Core

Opened 19 months ago

Closed 15 months ago

Last modified 14 months ago

#54426 closed enhancement (fixed)

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

Reported by: pbiron's profile pbiron Owned by: davidbaumwald's profile davidbaumwald
Milestone: 6.0 Priority: normal
Severity: normal Version:
Component: Media Keywords: has-screenshots has-patch needs-testing needs-dev-note needs-user-docs
Focuses: ui, accessibility, javascript Cc:

Description

#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 :-)

Attachments (11)

copy-url-to-clipboard-row-action.png (6.6 KB) - added by pbiron 19 months ago.
54426.patch (777 bytes) - added by ravipatel 19 months ago.
Created a code for copy url on listing
54426-patch-view.png (66.7 KB) - added by ravipatel 19 months ago.
Patch view for copy url
54426.2.patch (751 bytes) - added by ravipatel 19 months ago.
Updated code with media link in a tag
54426.3.patch (2.6 KB) - added by alexstine 18 months ago.
54426.4.diff (4.3 KB) - added by pbiron 18 months ago.
copy-url-to-clipboard.gif (26.0 KB) - added by pbiron 18 months ago.
short movie that shows 54424.4.diff in action
copy-url-to-clipboard-movement.gif (23.5 KB) - added by pbiron 18 months ago.
54426-copied.png (61.8 KB) - added by afercia 15 months ago.
54426.diff (4.3 KB) - added by afercia 15 months ago.
copy.gif (42.5 KB) - added by afercia 15 months ago.

Download all attachments as: .zip

Change History (34)

#1 @pbiron
19 months ago

  • Keywords has-screenshots added

@ravipatel
19 months ago

Created a code for copy url on listing

@ravipatel
19 months ago

Patch view for copy url

@ravipatel
19 months ago

Updated code with media link in a tag

This ticket was mentioned in Slack in #accessibility by alexstine. View the logs.


18 months ago

#3 @alexstine
18 months ago

  • Keywords has-patch needs-testing added; needs-patch removed
  • Milestone changed from Awaiting Review to 6.0

@alexstine
18 months ago

#4 follow-up: @alexstine
18 months ago

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.

#5 in reply to: ↑ 4 @pbiron
18 months ago

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
18 months ago

#6 @pbiron
18 months ago

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
18 months ago

short movie that shows 54424.4.diff in action

#7 @pbiron
18 months ago

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

#8 @pbiron
18 months ago

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.

Last edited 18 months ago by pbiron (previous) (diff)

#9 @alexstine
18 months ago

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

#10 @alexstine
18 months ago

@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! :)

This ticket was mentioned in Slack in #core-media by pbiron. View the logs.


18 months ago

This ticket was mentioned in Slack in #core-media by antpb. View the logs.


17 months ago

#13 @davidbaumwald
16 months ago

  • Owner set to davidbaumwald
  • Status changed from new to reviewing

#14 follow-up: @afercia
15 months ago

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.

#15 in reply to: ↑ 14 @pbiron
15 months ago

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
15 months ago

#16 @afercia
15 months ago

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.

@afercia
15 months ago

#17 @pbiron
15 months ago

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.

#18 @alexstine
15 months ago

Still works great for me. Good for screen readers.

#19 @davidbaumwald
15 months ago

  • Resolution set to fixed
  • Status changed from reviewing to closed

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.

#20 @davidbaumwald
15 months ago

In 52843:

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

Follow-up to [52842].

See #54426.

#21 @pbiron
15 months ago

  • Keywords needs-dev-note added

#22 @milana_cap
14 months ago

  • Keywords needs-codex added

End user docs screenshots should be updated

Last edited 14 months ago by milana_cap (previous) (diff)

#23 @dd32
14 months ago

  • Keywords needs-user-docs added; needs-codex removed
Note: See TracTickets for help on using tickets.