Update selected featured image ID on select (#4453)

* Update selected featured image ID on select * Add sanity check for featured image ID being possibly undefined * Ensure the featured image is the first item in the collection
ampproject · Apr 2, 2020 · 567cbbc · 567cbbc
1 parent 5935fde
commit 567cbbc
Show file tree

Hide file tree

Showing 2 changed files with 59 additions and 25 deletions.
diff --git a/assets/src/block-editor/components/with-media-library-notice.js b/assets/src/block-editor/components/with-media-library-notice.js
@@ -1,7 +1,6 @@
 /**
  * WordPress dependencies
  */
-import { __ } from '@wordpress/i18n';
 import { dispatch } from '@wordpress/data';
 
 /**
@@ -57,47 +56,82 @@ export default ( InitialMediaUpload, minImageDimensions ) => {
 		 */
 		initFeaturedImage() {
 			const FeaturedImageSelectMediaFrame = getSelectMediaFrame( FeaturedImageToolbarSelect );
+
+			const FeaturedImageLibrary = wp.media.controller.FeaturedImage.extend( {
+				defaults: {
+					...wp.media.controller.FeaturedImage.prototype.defaults,
+					date: false,
+					filterable: false,
+					// Note: These suggestions are shown in the media library image browser.
+					suggestedWidth: EXPECTED_WIDTH,
+					suggestedHeight: EXPECTED_HEIGHT,
+				},
+			} );
+
 			this.frame = new FeaturedImageSelectMediaFrame( {
 				allowedTypes: this.props.allowedTypes,
-				button: {
-					text: __( 'Select', 'amp' ),
-					close: false,
-				},
-				states: [
-					new wp.media.controller.Library( {
-						title: __( 'Choose image', 'amp' ),
-						library: wp.media.query( { type: 'image' } ),
-						multiple: false,
-						date: false,
-						priority: 20,
-						// Note: These suggestions are shown in the media library image browser.
-						suggestedWidth: EXPECTED_WIDTH,
-						suggestedHeight: EXPECTED_HEIGHT,
-					} ),
-				],
+				state: 'featured-image',
+				states: [ new FeaturedImageLibrary(), new wp.media.controller.EditImage() ],
 			} );
 
+			this.frame.on( 'toolbar:create:featured-image', function ( toolbar ) {
+				/**
+				 * @this wp.media.view.MediaFrame.Select
+				 */
+				this.createSelectToolbar( toolbar, {
+					text: wp.media.view.l10n.setFeaturedImage,
+					state: this.options.state,
+				});
+			}, this.frame );
+
+			this.frame.on( 'open', this.onOpen );
+
+			this.frame.state('featured-image').on( 'select', this.onSelectImage, this );
+
 			// See wp.media() for this.
 			wp.media.frame = this.frame;
+		}
 
-			this.frame.on( 'select', this.onSelectImage, this );
-			this.frame.on( 'close', () => {
-				this.initFeaturedImage();
-			}, this );
+		/**
+		 * Ensure the selected image is the first item in the collection.
+		 *
+		 * @see https://github.com/WordPress/gutenberg/blob/c58b32266f8c950c5b9927d286608343078aee02/packages/media-utils/src/components/media-upload/index.js#L401-L417
+		 */
+		onOpen() {
+			const frameContent = this.frame.content.get();
+			if ( frameContent && frameContent.collection ) {
+				const collection = frameContent.collection;
+
+				// Clean all attachments we have in memory.
+				collection
+					.toArray()
+					.forEach( ( model ) => model.trigger( 'destroy', model ) );
+
+				// Reset has more flag, if library had small amount of items all items may have been loaded before.
+				collection.mirroring._hasMore = true;
+
+				// Request items.
+				collection.more();
+			}
 		}
 
 		/**
 		 * Handles image selection.
 		 */
 		onSelectImage() {
-			const attachment = this.frame.state().get( 'selection' ).first().toJSON();
+			const attachment = this.frame.state( 'featured-image' ).get( 'selection' ).first().toJSON();
 			const dispatchImage = ( attachmentId ) => {
 				dispatch( 'core/editor' ).editPost( { featured_media: attachmentId } );
 			};
 			const { onSelect } = this.props;
 			const { url, id, width, height } = attachment;
 			setImageFromURL( { url, id, width, height, onSelect, dispatchImage } );
-			this.frame.close();
+
+			if ( ! wp.media.view.settings.post.featuredImageId ) {
+				return;
+			}
+
+			wp.media.featuredImage.set( attachment ? attachment.id : -1 );
 		}
 	};
 };
diff --git a/assets/src/common/components/select-media-frame.js b/assets/src/common/components/select-media-frame.js
@@ -110,8 +110,8 @@ export const FeaturedImageToolbarSelect = wp.media.view.Toolbar.Select.extend( {
 		const selection = state.get( 'selection' );
 
 		const attachment = selection.models[ 0 ];
-		const minWidth = state.collection.get( 'library' ).get( 'suggestedWidth' );
-		const minHeight = state.collection.get( 'library' ).get( 'suggestedHeight' );
+		const minWidth = state.collection.get( 'featured-image' ).get( 'suggestedWidth' );
+		const minHeight = state.collection.get( 'featured-image' ).get( 'suggestedHeight' );
 
 		if (
 			! attachment ||