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.



git-svn-id: https://develop.svn.wordpress.org/trunk@51023 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
Anthony Burchell
2021-05-26 01:39:47 +00:00
parent 7ec2c1dec8
commit ba7684417a
4 changed files with 102 additions and 16 deletions

View File

@@ -48,20 +48,33 @@ if ( isset( $_REQUEST['attachment_id'] ) && (int) $_REQUEST['attachment_id'] &&
switch ( $_REQUEST['fetch'] ) {
case 3:
echo '<div class="attachment-details">';
$thumb_url = wp_get_attachment_image_src( $id, 'thumbnail', true );
if ( $thumb_url ) {
echo '<img class="pinkynail" src="' . esc_url( $thumb_url[0] ) . '" alt="" />';
}
if ( current_user_can( 'edit_post', $id ) ) {
echo '<a class="edit-attachment" href="' . esc_url( get_edit_post_link( $id ) ) . '" target="_blank">' . _x( 'Edit', 'media item' ) . '</a>';
} else {
echo '<span class="edit-attachment">' . _x( 'Success', 'media item' ) . '</span>';
}
// Title shouldn't ever be empty, but use filename just in case.
$file = get_attached_file( $post->ID );
$title = $post->post_title ? $post->post_title : wp_basename( $file );
echo '<div class="filename new"><span class="title">' . esc_html( wp_html_excerpt( $title, 60, '&hellip;' ) ) . '</span></div>';
$file = get_attached_file( $post->ID );
$fileurl = wp_get_attachment_url( $post->ID );
$title = $post->post_title ? $post->post_title : wp_basename( $file );
echo '<div class="filename new"><span class="media-list-title"><strong>' . esc_html( wp_html_excerpt( $title, 60, '&hellip;' ) ) . '</strong></span> <span class="media-list-subtitle">' . basename( $file ) . '</span></div>';
echo '</div>';
?>
<div class="attachment-tools">
<span class="media-item-copy-container copy-to-clipboard-container edit-attachment">
<button type="button" class="button button-small copy-attachment-url" data-clipboard-text="<?php echo $fileurl; ?>"><?php _e( 'Copy URL to clipboard' ); ?></button>
<span class="success hidden" aria-hidden="true"><?php _e( 'Copied!' ); ?></span>
</span>
<?php
if ( current_user_can( 'edit_post', $id ) ) {
echo '<a class="edit-attachment" href="' . esc_url( get_edit_post_link( $id ) ) . '" target="_blank">' . _x( 'Edit', 'media item' ) . '</a>';
} else {
echo '<span class="edit-attachment">' . _x( 'Success', 'media item' ) . '</span>';
}
?>
</div>
<?php
break;
case 2:
add_filter( 'attachment_fields_to_edit', 'media_single_attachment_fields_to_edit', 10, 2 );

View File

@@ -51,6 +51,14 @@
max-width: 128px;
}
.media-list-subtitle {
display: block;
}
.media-list-title {
display: block;
}
#wpbody-content #async-upload-wrap a {
display: none;
}
@@ -96,7 +104,6 @@
padding: 0 0 0 5px;
}
.media-item .edit-attachment,
.describe-toggle-on,
.describe-toggle-off {
display: block;
@@ -105,6 +112,39 @@
margin-right: 10px;
}
.media-item {
display: grid;
grid-template-columns: repeat( 2, 1fr );
}
.media-item .attachment-tools {
display: flex;
justify-content: flex-end;
align-items: center;
}
.media-item .edit-attachment {
padding: 14px 0;
display: block;
margin-right: 10px;
}
.media-item .edit-attachment.copy-to-clipboard-container {
margin-top: 0;
}
.media-item-copy-container .success {
line-height: 0;
}
.media-item button .copy-attachment-url {
margin-top:14px;
}
.media-item .copy-to-clipboard-container {
margin-top:7px;
}
.media-item .describe-toggle-off,
.media-item.open .describe-toggle-on {
display: none;
@@ -115,7 +155,7 @@
}
.media-upload-form .media-item {
min-height: 36px;
min-height: 70px;
margin-bottom: 1px;
position: relative;
width: 100%;
@@ -132,16 +172,16 @@
}
.media-item .filename {
line-height: 2.76923076;
padding: 14px 0;
overflow: hidden;
margin-left: 6px;
}
.media-item .pinkynail {
float: left;
margin: 2px 10px 0 3px;
max-width: 40px;
max-height: 32px;
margin: 0 10px 0 0;
max-height: 70px;
max-width: 70px;
}
.media-item .startopen,