From ba7684417ae86fafde7907fdb78ddb49e89309da Mon Sep 17 00:00:00 2001
From: Anthony Burchell <antpb@git.wordpress.org>
Date: Wed, 26 May 2021 01:39:47 +0000
Subject: [PATCH] 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
---
 src/js/_enqueues/vendor/plupload/handlers.js | 32 ++++++++++++
 src/wp-admin/async-upload.php                | 31 ++++++++----
 src/wp-admin/css/media.css                   | 52 +++++++++++++++++---
 src/wp-includes/script-loader.php            |  3 +-
 4 files changed, 102 insertions(+), 16 deletions(-)

diff --git a/src/js/_enqueues/vendor/plupload/handlers.js b/src/js/_enqueues/vendor/plupload/handlers.js
index 884d8596fc..aaf1519aff 100644
--- a/src/js/_enqueues/vendor/plupload/handlers.js
+++ b/src/js/_enqueues/vendor/plupload/handlers.js
@@ -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;
 
diff --git a/src/wp-admin/async-upload.php b/src/wp-admin/async-upload.php
index 89362aa8f4..9c0190a198 100644
--- a/src/wp-admin/async-upload.php
+++ b/src/wp-admin/async-upload.php
@@ -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 );
diff --git a/src/wp-admin/css/media.css b/src/wp-admin/css/media.css
index b8d9ec6324..aaaf8ba13b 100644
--- a/src/wp-admin/css/media.css
+++ b/src/wp-admin/css/media.css
@@ -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,
diff --git a/src/wp-includes/script-loader.php b/src/wp-includes/script-loader.php
index 129cbd2b31..349fde5c3b 100644
--- a/src/wp-includes/script-loader.php
+++ b/src/wp-includes/script-loader.php
@@ -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 );