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.


Built from https://develop.svn.wordpress.org/trunk@51023


git-svn-id: http://core.svn.wordpress.org/trunk@50632 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
antpb 2021-05-26 01:40:58 +00:00
parent d7086ba67a
commit e2e8120fa6
9 changed files with 152 additions and 26 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

@ -52,6 +52,14 @@
max-width: 128px;
}
.media-list-subtitle {
display: block;
}
.media-list-title {
display: block;
}
#wpbody-content #async-upload-wrap a {
display: none;
}
@ -97,7 +105,6 @@
padding: 0 5px 0 0;
}
.media-item .edit-attachment,
.describe-toggle-on,
.describe-toggle-off {
display: block;
@ -106,6 +113,39 @@
margin-left: 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-left: 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;
@ -116,7 +156,7 @@
}
.media-upload-form .media-item {
min-height: 36px;
min-height: 70px;
margin-bottom: 1px;
position: relative;
width: 100%;
@ -133,16 +173,16 @@
}
.media-item .filename {
line-height: 2.76923076;
padding: 14px 0;
overflow: hidden;
margin-right: 6px;
}
.media-item .pinkynail {
float: right;
margin: 2px 3px 0 10px;
max-width: 40px;
max-height: 32px;
margin: 0 0 0 10px;
max-height: 70px;
max-width: 70px;
}
.media-item .startopen,

File diff suppressed because one or more lines are too long

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,

File diff suppressed because one or more lines are too long

View File

@ -361,7 +361,39 @@ function wpFileExtensionError( up, file, message ) {
up.removeFile( file );
}
/**
* Copies the attachment URL to the clipboard.
*
* @since 5.8.0
*
* @param {MouseEvent} event A click event.
*
* @return {void}
*/
function copyAttachmentUploadURLClipboard() {
var clipboard = new ClipboardJS( '.copy-attachment-url' ),
successTimeout;
clipboard.on( 'success', function( event ) {
var triggerElement = jQuery( event.trigger ),
successElement = jQuery( '.success', triggerElement.closest( '.copy-to-clipboard-container' ) );
// Clear the selection and move focus back to the trigger.
event.clearSelection();
// Handle ClipboardJS focus bug, see https://github.com/zenorocha/clipboard.js/issues/680
triggerElement.trigger( 'focus' );
// Show success visual feedback.
clearTimeout( successTimeout );
successElement.removeClass( 'hidden' );
// Hide success visual feedback after 3 seconds since last success.
successTimeout = setTimeout( function() {
successElement.addClass( 'hidden' );
}, 3000 );
// Handle success audible feedback.
wp.a11y.speak( pluploadL10n.file_url_copied );
} );
}
jQuery( document ).ready( function( $ ) {
copyAttachmentUploadURLClipboard();
var tryAgainCount = {};
var tryAgain;

File diff suppressed because one or more lines are too long

View File

@ -883,6 +883,7 @@ function wp_default_scripts( $scripts ) {
/* translators: %s: File name. */
'error_uploading' => __( '&#8220;%s&#8221; has failed to upload.' ),
'unsupported_image' => __( 'This image cannot be displayed in a web browser. For best results convert it to JPEG before uploading.' ),
'file_url_copied' => __( 'The file URL has been copied to your clipboard' ),
);
$scripts->add( 'moxiejs', "/wp-includes/js/plupload/moxie$suffix.js", array(), '1.3.5' );
@ -892,7 +893,7 @@ function wp_default_scripts( $scripts ) {
$scripts->add( "plupload-$handle", false, array( 'plupload' ), '2.1.1' );
}
$scripts->add( 'plupload-handlers', "/wp-includes/js/plupload/handlers$suffix.js", array( 'plupload', 'jquery' ) );
$scripts->add( 'plupload-handlers', "/wp-includes/js/plupload/handlers$suffix.js", array( 'clipboard', 'jquery', 'plupload', 'underscore', 'wp-a11y', 'wp-i18n' ) );
did_action( 'init' ) && $scripts->localize( 'plupload-handlers', 'pluploadL10n', $uploader_l10n );
$scripts->add( 'wp-plupload', "/wp-includes/js/plupload/wp-plupload$suffix.js", array( 'plupload', 'jquery', 'json2', 'media-models' ), false, 1 );

View File

@ -13,7 +13,7 @@
*
* @global string $wp_version
*/
$wp_version = '5.8-alpha-51022';
$wp_version = '5.8-alpha-51023';
/**
* Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.