Changeset 51023

Timestamp:

05/26/2021 01:39:47 AM (3 years ago)

Author:

antpb

Message:

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.

Location:

trunk/src

Files:

• js/_enqueues/vendor/plupload/handlers.js (modified) (1 diff)
• wp-admin/async-upload.php (modified) (1 diff)
• wp-admin/css/media.css (modified) (6 diffs)
• wp-includes/script-loader.php (modified) (2 diffs)

trunk/src/js/_enqueues/vendor/plupload/handlers.js

@@ -362 +362 @@
 }
 
+/**
+ * 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;

trunk/src/wp-admin/async-upload.php

@@ -49 +49 @@
     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 );
+            $fileurl = wp_get_attachment_url( $post->ID );
+            $title   = $post->post_title ? $post->post_title : wp_basename( $file );
 
-            // 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>';
+            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:

trunk/src/wp-admin/css/media.css

@@ -52 +52 @@
 }
 
+.media-list-subtitle {
+    display: block;
+}
+
+.media-list-title {
+    display: block;
+}
+
 #wpbody-content #async-upload-wrap a {
     display: none;
@@ -97 +105 @@
 }
 
-.media-item .edit-attachment,
 .describe-toggle-on,
 .describe-toggle-off {
@@ -106 +113 @@
 }
 
+.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 {
@@ -116 +156 @@
 
 .media-upload-form .media-item {
-    min-height: 36px;
+    min-height: 70px;
     margin-bottom: 1px;
     position: relative;
@@ -133 +173 @@
 
 .media-item .filename {
-    line-height: 2.76923076;
+    padding: 14px 0;
     overflow: hidden;
     margin-left: 6px;
@@ -140 +180 @@
 .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;
 }
 

trunk/src/wp-includes/script-loader.php

@@ -884 +884 @@
         'error_uploading'           => __( '“%s” 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' ),
     );
 
@@ -893 +894 @@
     }
 
-    $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 );