Merge branch 'develop' into feature/add-php-version

assets/src/media-selector/MediaUpload.js

@@ -0,0 +1,119 @@
+/**
+ * WordPress dependencies
+ */
+import { MediaUpload } from '@wordpress/media-utils';
+
+/**
+ * Internal dependencies
+ */
+import UnsplashState from './store/unsplash_state';
+
+/**
+ * Copied from Gutenberg and adapted to initialize the Unsplash state.
+ *
+ * @see https://github.com/WordPress/gutenberg/blob/c58b32266f8c950c5b9927d286608343078aee02/packages/media-utils/src/components/media-upload/index.js#L19
+ *
+ * @return {wp.media.view.MediaFrame.Select} The default media workflow.
+ */
+const getFeaturedImageMediaFrame = () => {
+	return wp.media.view.MediaFrame.Select.extend( {
+		/**
+		 * Enables the Set Featured Image Button.
+		 *
+		 * @param {Object} toolbar toolbar for featured image state
+		 * @return {void}
+		 */
+		featuredImageToolbar( toolbar ) {
+			this.createSelectToolbar( toolbar, {
+				text: wp.media.view.l10n.setFeaturedImage,
+				state: this.options.state,
+			} );
+		},
+
+		/**
+		 * Handle the edit state requirements of selected media item.
+		 *
+		 * @return {void}
+		 */
+		editState() {
+			const selection = this.state( 'featured-image' ).get( 'selection' );
+			const view = new wp.media.view.EditImage( {
+				model: selection.single(),
+				controller: this,
+			} ).render();
+
+			// Set the view to the EditImage frame using the selected image.
+			this.content.set( view );
+
+			// After bringing in the frame, load the actual editor via an ajax call.
+			view.loadEditor();
+		},
+
+		/**
+		 * Create the default states.
+		 *
+		 * @return {void}
+		 */
+		createStates: function createStates() {
+			this.on(
+				'toolbar:create:featured-image',
+				this.featuredImageToolbar,
+				this
+			);
+			this.on( 'content:render:edit-image', this.editState, this );
+
+			this.states.add( [
+				new wp.media.controller.FeaturedImage(),
+				new wp.media.controller.EditImage( {
+					model: this.options.editImage,
+				} ),
+				// And finally the reason this whole class exists, we initialize the Unsplash state.
+				new UnsplashState(),
+			] );
+		},
+	} );
+};
+
+/**
+ * Copied from Gutenberg.
+ *
+ * @see https://github.com/WordPress/gutenberg/blob/c58b32266f8c950c5b9927d286608343078aee02/packages/media-utils/src/components/media-upload/index.js#L214-L223
+ *
+ * @param {Array} ids
+ * @return {wp.media.model.Attachments} a new Attachments Query.
+ */
+const getAttachmentsCollection = ids => {
+	return wp.media.query( {
+		order: 'ASC',
+		orderby: 'post__in',
+		post__in: ids,
+		posts_per_page: -1,
+		query: true,
+		type: 'image',
+	} );
+};
+
+class MediaUploadWithUnsplashState extends MediaUpload {
+	/**
+	 * Initializes the Media Library requirements for the featured image flow.
+	 *
+	 * @return {void}
+	 */
+	buildAndSetFeatureImageFrame() {
+		const featuredImageFrame = getFeaturedImageMediaFrame();
+		const attachments = getAttachmentsCollection( this.props.value );
+		const selection = new wp.media.model.Selection( attachments.models, {
+			props: attachments.props.toJSON(),
+		} );
+		this.frame = new featuredImageFrame( {
+			mimeType: this.props.allowedTypes,
+			state: 'featured-image',
+			multiple: this.props.multiple,
+			selection,
+			editing: !! this.props.value,
+		} );
+		wp.media.frame = this.frame;
+	}
+}
+
+export default MediaUploadWithUnsplashState;

assets/src/media-selector/helpers/withUnsplashTab.js

@@ -9,14 +9,9 @@ export default View => {
 	return View.extend( {
 		createStates() {
 			View.prototype.createStates.apply( this, arguments );
-			this.createUnsplashStates();
-		},
-		createUnsplashStates() {
-			if ( ! this.unsplashStateSetup ) {
-				this.states.add( [ new UnsplashState() ] );
-				this.unsplashStateSetup = 1;
-			}
+			this.states.add( [ new UnsplashState() ] );
 		},
+
 		browseRouter( routerView ) {
 			View.prototype.browseRouter.apply( this, arguments );
 
@@ -64,7 +59,6 @@ export default View => {
 		 * @param {wp.media.controller.Region} contentRegion
 		 */
 		unsplashContent( contentRegion ) {
-			this.createUnsplashStates();
 			const state = this.state( 'unsplash' );
 
 			// TODO - Load selection from the correct state.

assets/src/media-selector/index.js

@@ -1,8 +1,14 @@
+/**
+ * WordPress dependencies
+ */
+import { addFilter } from '@wordpress/hooks';
+
 /**
  * Internal dependencies
  */
 import './style.css';
 import withUnsplashTab from './helpers/withUnsplashTab';
+import MediaUpload from './MediaUpload';
 
 // Override media frames in the respective editors to add the Unsplash tab.
 
@@ -27,8 +33,20 @@ if ( wp.media && wp.media.view && wp.media.view.MediaFrame ) {
 	}
 }
 
+/**
+ * We can't override the featured image media frame Gutenberg by extending Backbone views, meaning we can't initialize
+ * our own state to load the Unsplash tab. Instead, we have to filter the `editor.MediaUpload` component
+ * (which is used by `editor.PostFeaturedImage`) and extend it to initialize our state.
+ */
+addFilter(
+	'editor.MediaUpload',
+	'unsplash/extend-featured-image',
+	() => MediaUpload
+);
+
 /**
  * Work around that defaults the current media library to the 'Upload files' tab. This resolves the issue of the
  * Unsplash tab not being available in some media libraries, and instead showing a blank screen in the media selector.
  */
 wp.media.controller.Library.prototype.defaults.contentUserSetting = false;
+wp.media.controller.FeaturedImage.prototype.defaults.contentUserSetting = false;

assets/src/media-selector/style.css

@@ -29,7 +29,7 @@
 	margin: 5px 0 0;
 }
 
-.unsplash-browser.attachments-browser .unplash-search {
+.unsplash-browser.attachments-browser .unsplash-search {
 	width: 100%;
 	padding: 5px 10px;
 	margin: 0;

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

@@ -42,8 +42,8 @@ const ImagesBrowser = wp.media.view.AttachmentsBrowser.extend( {
 				controller: this.controller,
 				model: this.collection.props,
 				priority: 60,
-				className: 'unplash-search',
-				id: 'unplash-search-input',
+				className: 'unsplash-search',
+				id: 'unsplash-search-input',
 			} ).render()
 		);