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

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="" />';
 			}
+			// 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 );
+
+			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>';
 				}
-
+				?>
-			// Title shouldn't ever be empty, but use filename just in case.
+			</div>
-			$file  = get_attached_file( $post->ID );
+			<?php
-			$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>';
 			break;
 		case 2:
 			add_filter( 'attachment_fields_to_edit', 'media_single_attachment_fields_to_edit', 10, 2 );

wp-admin/css/media-rtl.css

@@ -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;
+	margin: 0 0 0 10px;
-	max-width: 40px;
+	max-height: 70px;
-	max-height: 32px;
+	max-width: 70px;
 }
 
 .media-item .startopen,

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;
+	margin: 0 10px 0 0;
-	max-width: 40px;
+	max-height: 70px;
-	max-height: 32px;
+	max-width: 70px;
 }
 
 .media-item .startopen,

wp-includes/js/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;
 

wp-includes/script-loader.php

@@ -883,6 +883,7 @@ function wp_default_scripts( $scripts ) {
 		/* translators: %s: File name. */
 		'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' ),
 	);
 
 	$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 );

wp-includes/version.php

@@ -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.