Add a copy-link button at the media upload page

[anotia]

At the “upload media” page of PC panel, I think it would be helpful if you add a “copy link” button beside the “detail” button, which will make it convenient to get the file’s direct link

(See here​https://wordpress.org/support/topic/add-a-copy-link-button-at-the-media-upload-page/)

[ryokuhi]

Hello @anotia, and thank you for your suggestion!
We reviewed the ticket during the accessibility team's weekly bug-scrub.
While a button to copy the link of the uploaded media is available when you click the edit link, we are open to consider adding it. We prefer to wait for feedback also from the media team, though.
While testing, we found two more accessibility issues, so this ticket was really worth opening!

[antpb]

Mentioned in the recent Media Component meeting, this looks like a good ticket for 5.8. Adding to the milestone for visibility.

[antpb]

I'll be proposing a design mock for this feature soon. From there we can kick off conversations with the design team on the best way to finalize that design. :D

[lukecarbis]

@antpb This would make a great addition to 5.8. Do you think we're likely to see a patch prior to the feature freeze?

[antpb]

I'm adding a work in progress patch to drive discussion around design and features. This is not a final patch and has a todo for some design/css cleanup. We also need RTL configs verified. I believe we'll need more css for that config.

Above is a screenshot with the patch applied.

[antpb]

initial patch for design and feature discussion

[antpb]

initial patch for design and feature discussion - cleanup on patch 1

[claytoncollie]

@antpb I like where this is heading. I do find myself uploading an image only to copy the URL and paste as a link in the block editor. From looking at your screenshot, the UI is too bulking IMO. What about an inline list of quick action links that look the same as the Edit link? Then a filter to add or remove additional quick action links in the future. Somebody can build on top of your work by adding View, Delete, etc.

[antpb]

I like the suggestion @claytoncollie ! One thing that I'd be curious is if we should make it look like the "Edit" link or if it should remain a button. The edit link to me shows that it will take me to a separate page, vs the button which will perform an action (in this case copying)

Maybe we should hide the input field and only expose the button. I think the text "Copy URL to clipboard" is clear enough without the context of the input field next to it. Adding needs-design so we may get some feedback from the team.

If any design team folks are reading this, what I would like to know is how we could improve this screenshot:

I'd propose removing "File URL: <input>" and leaving the button. Maybe we could condense the button a little bit or increase the line height that determines the height of the container holding all of the media-item markup.

[claytoncollie]

I agree with removing the File URL text and input field. The button still looks odd crammed into this small space. Not a whole lot to work with. Will be curious what others think about the design. My comments come from a place of unified design and extendibility to add more actions in the future. I also see your point though about a link going to another page versus an action with a button. All valid considerations.

[shaunandrews]

An updated design for the row items, including the new "Copy URL" button and it's success message.

[shaunandrews]

I uploaded a quick design mockup for how this could look and work.

• I've increased the size of the row to 60px as well as the size of the thumbnail to 60px square. This gives us more room to include the title and the filename.
• At the end of the row I've updated the "Edit" button to be more specific, saying "Edit media" — it would be nice if this could specify the media type (Edit image, Edit video, etc).
• Next to the "Edit media" button is the new "Copy URL" button. When clicked it's label is updated to "Copied" along with the green coloring. After a few seconds this reverts back to its normal state.

[claytoncollie]

@shaunandrews I really like this design. For the hover state on "edit media", will there also be a light gray background? Or does it get a regular link color hover state?

[antpb]

IN PROGRESS - this is to share a bug found in copy text as we work toward design completion.

[antpb]

Work in progress, removes unwanted changes from previous patch.

[antpb]

New patch uploaded. Still pending is testing on RTL to verify that the CSS works for that configuration. Also on mobile scaling the screen under 750px makes the buttons larger and alignment of the elements is thrown off.

[joedolson]

The tab order no longer matches the visual order; the 'edit' link appears before the Copy button, but is floated to the right.

I wonder if the content-ordering & CSS here should be totally re-done. This would be a great place to use CSS grid for layout, and with the elimination of IE11 as a required browser, I think we can use that now. That would help with spacing changes on mobile, too.

But the content order should be img, title/filename, copy button/edit link, I think.

[joedolson]

Updated patch - localize file copied text, change order, use CSS grid for layout

[joedolson]

This is an updated patch. Improves layout on small screens (to a point; it's not 100% at this point.) Fixes tab order & localizes the wp.a11y.speak message.

This adds a copy link button on upload of new media.

Trac ticket: https://core.trac.wordpress.org/ticket/51754

[antpb]

Final patch passing tests

[antpb]

In 51023:

Media: Add button in media upload page for copying the media url.

Adds a button to the media upload page to make copying the url possible on the same page when a media item upload is successful.

Props anotia, ryokuhi, Mista-Flo, lukecarbis, antpb, claytoncollie, shaunandrews, joedolson.
Fixes #51754.

[SergeyBiryukov]

In 51030:

Media: Replace basename() usage on media upload screen with wp_basename() for better multibyte filenames support.

Includes minor code layout fixes for better readability.

Follow-up to [44785], [51023].

See #51754.

[Presskopp]

@antpb looks like this patch has an unwanted side effect showing error message(s) only halfwith.

[sabernhardt]

with two columns on mobile, the button can overlap the file name and title (in French, the overlap can occur on screens wider than 480px)

[sabernhardt]

making error message span both columns; changing grid to one column at 600px breakpoint

[sabernhardt]

one column for mobile: English, 560px wide

[sabernhardt]

one column for mobile: English, 414px wide

[sabernhardt]

one column for mobile: French, 560px wide

[sabernhardt]

one column for mobile: French, 414px wide

[sabernhardt]

If the error message is the only container that would show as one column within the media-item container, grid-column-start and grid-column-end in 51754.8.diff​ could fix that. If there are any other elements that need to span the full width, this probably would need a new container div inside media-item for applying CSS grid.

On smaller screens, multiple-column layout does not work well, so the patch proposes switching to one column. For longer translations, I used the 600px breakpoint instead of 480. This can result in significant white space when both the file name and the button translation are short in the 500-600 pixel range, yet that should be better than allowing the button to overlap the file name within that range.

I also considered switching from grid to flex with flex-wrap, but flex-wrap is not a good option.

[sabernhardt]

adding media-item-wrapper container for CSS grid

[sabernhardt]

In case the wrapper container is necessary (or simply safer), 51754.9.diff​ includes one. Also, the error message needed a min-height to fill the media-item container.

[joedolson]

This all looks good; tested errors & valid uploads in English and German. Marking for commit.

This PR fixes some alignment issues introduced from 51754. The proposed patch adjusts the container a bit to collapse better on a wider variety of screens.
Trac ticket: https://core.trac.wordpress.org/ticket/51754

[antpb]

In 51195:

Media: Improve upload page media item layout on smaller screens.

This allows smaller screens to wrap error messages and other uploader media item elements in a more readable way.

Props joedolson sabernhardt, Presskopp.
See #51754.