Merge pull request #179 from xwp/fix/177-attachment-details

Attachment details

assets/src/media-selector/index.js

@@ -3,7 +3,12 @@
  */
 import './style.css';
 import unsetUnsplashLibrary from './controllers/unset-unsplash-library';
-import { PostFrame, UnsplashFrame, withUnsplashTab } from './views';
+import {
+	PostFrame,
+	UnsplashFrame,
+	withUnsplashTab,
+	withUnsplashAttachmentDetails,
+} from './views';
 
 // Override media frames in the respective editors to add the Unsplash tab.
 if ( wp.media && wp.media.view && wp.media.view.MediaFrame ) {
@@ -39,6 +44,15 @@ if ( wp.media && wp.media.view && wp.media.view.MediaFrame ) {
 			wp.media.view.MediaFrame.ImageDetails
 		);
 	}
+
+	/**
+	 * 	Override attachment details in media selector.
+	 */
+	if ( wp.media.view.Attachment && wp.media.view.Attachment.Details ) {
+		wp.media.view.Attachment.Details = withUnsplashAttachmentDetails(
+			wp.media.view.Attachment.Details
+		);
+	}
 }
 
 // Ensure we don't mess the user's default media library.

assets/src/media-selector/views/details.js

@@ -1,6 +1,7 @@
-const Details = wp.media.view.Attachment.Details.extend( {
-	className: 'attachment-details unsplash-attachment-details',
-	template: wp.template( 'unsplash-attachment-details' ),
-} );
+import withUnsplashAttachmentDetails from './with-unsplash-attachment-details';
+
+const Details = withUnsplashAttachmentDetails(
+	wp.media.view.Attachment.Details
+);
 
 export default Details;

assets/src/media-selector/views/index.js

@@ -7,4 +7,5 @@ export { default as PostFrame } from './post-frame';
 export { default as Toolbar } from './toolbar';
 export { default as ToolbarSelect } from './toolbar-select';
 export { default as withUnsplashTab } from './with-unsplash-tab';
+export { default as withUnsplashAttachmentDetails } from './with-unsplash-attachment-details';
 export { default as UnsplashFrame } from './unsplash-frame';

assets/src/media-selector/views/with-unsplash-attachment-details.js

@@ -0,0 +1,6 @@
+export default View => {
+	return View.extend( {
+		className: 'attachment-details unsplash-attachment-details',
+		template: wp.template( 'unsplash-attachment-details' ),
+	} );
+};

php/class-plugin.php

@@ -904,12 +904,36 @@ public function add_media_templates() { ?>
 						</div>
 						<# } #>
 
-						<# if ( data.originalImageURL || data.link ) { #>
+						<# var originalImageURL = data.originalImageURL || data.link; #>
+						<# originalImageURL = originalImageURL.match( 'unsplash.com/' ) ? originalImageURL : false; #>
+						<# if ( originalImageURL ) { #>
 						<strong><?php esc_html_e( 'Original image:' ); ?></strong>
-						<a href="{{ data.originalImageURL || data.link }}" target="_blank" rel="noopener noreferrer"><?php esc_html_e( 'Unsplash', 'unsplash' ); ?></a>
+						<a href="{{ originalImageURL }}" target="_blank" rel="noopener noreferrer"><?php esc_html_e( 'Unsplash', 'unsplash' ); ?></a>
 						<# } #>
+
+						<# if ( data.can.save && data.sizes ) { #>
+							<a class="edit-attachment" href="{{ data.editLink }}&amp;image-editor" target="_blank"><?php _e( 'Edit Image' ); ?></a>
+						<# } #>
+					<# } #>
+
+					<# if ( ! data.uploading && data.can.remove ) { #>
+						<?php if ( MEDIA_TRASH ) : ?>
+						<# if ( 'trash' === data.status ) { #>
+							<button type="button" class="button-link untrash-attachment"><?php _e( 'Restore from Trash' ); ?></button>
+						<# } else { #>
+							<button type="button" class="button-link trash-attachment"><?php _e( 'Move to Trash' ); ?></button>
+						<# } #>
+						<?php else : ?>
+							<button type="button" class="button-link delete-attachment"><?php _e( 'Delete Permanently' ); ?></button>
+						<?php endif; ?>
 					<# } #>
 
+					<div class="compat-meta">
+						<# if ( data.compat && data.compat.meta ) { #>
+							{{{ data.compat.meta }}} <?php // phpcs:ignore WordPressVIPMinimum.Security.Mustache.OutputNotation ?>
+						<# } #>
+					</div>
+
 				</div>
 			</div>
 			<# if ( 'image' === data.type ) { #>

tests/e2e/config/bootstrap.js

@@ -135,6 +135,7 @@ async function runAxeTestsForBlockEditor() {
 			'label',
 			'landmark-one-main',
 			'link-name',
+			'list',
 			'listitem',
 			'region',
 		],

tests/e2e/specs/gutenberg/image-block.spec.js

@@ -70,4 +70,47 @@ describe( 'Image Block', () => {
 		await page.waitForSelector( blockClass );
 		await expect( page ).toMatchElement( blockClass );
 	} );
+
+	it( 'should show post-import attachment details', async () => {
+		await clickSelector( '#menu-item-browse' );
+		await page.waitForSelector( '.attachments-browser .attachment' );
+		await clickSelector( '.attachments-browser .attachment' );
+		const attachmentDetails = '.unsplash-attachment-details';
+		await page.waitForSelector( attachmentDetails );
+
+		expect( await page.$( `${ attachmentDetails } .details` ) ).not.toBeNull();
+
+		await page.waitForSelector( `${ attachmentDetails } .details .author` );
+
+		expect(
+			await page.evaluate(
+				author => author.innerText,
+				await page.$( `${ attachmentDetails } .details .author` )
+			)
+		).toContain( 'Photo by:' );
+
+		expect(
+			await page.evaluate(
+				filename => filename.innerHTML,
+				await page.$( `${ attachmentDetails } .details .filename` )
+			)
+		).toContain( '<strong>File name:</strong>' );
+
+		expect(
+			await page.evaluate(
+				uploaded => uploaded.innerText,
+				await page.$( `${ attachmentDetails } .details .uploaded` )
+			)
+		).toContain( 'Date:' );
+
+		const originalImage = await page.evaluate(
+			details => details.innerHTML,
+			await page.$( `${ attachmentDetails } .details` )
+		);
+
+		expect( originalImage ).toContain( '<strong>Original image:</strong>' );
+		expect( originalImage ).toMatch(
+			new RegExp( /https:\/\/unsplash.com\/photos\/[^"]+/ )
+		);
+	} );
 } );