WordPress.org

Make WordPress Core

Opened 2 months ago

Last modified 2 weeks ago

#54426 new enhancement

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

Reported by: pbiron Owned by:
Milestone: 6.0 Priority: normal
Severity: normal Version:
Component: Media Keywords: has-screenshots has-patch needs-testing
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 (8)

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

Download all attachments as: .zip

Change History (20)

#1 @pbiron
2 months ago

  • Keywords has-screenshots added

@ravipatel
2 months ago

Created a code for copy url on listing

@ravipatel
2 months ago

Patch view for copy url

@ravipatel
2 months ago

Updated code with media link in a tag

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


7 weeks ago

#3 @alexstine
7 weeks ago

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

@alexstine
7 weeks ago

#4 follow-up: @alexstine
7 weeks 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
7 weeks 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
7 weeks ago

#6 @pbiron
7 weeks 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
7 weeks ago

short movie that shows 54424.4.diff in action

#7 @pbiron
7 weeks ago

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

#8 @pbiron
7 weeks 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 7 weeks ago by pbiron (previous) (diff)

#9 @alexstine
7 weeks 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
7 weeks 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.


6 weeks ago

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


2 weeks ago

Note: See TracTickets for help on using tickets.