17642 adds edit state to frames to fix new tab issue (#17641)

* adds edit state to frames to fix new tab issue

* moves default state build into else of gallery condition and adds gallery toolbar logic to reach parity with Core.

* fixes selection object reference to proper state

* improves and adds documentation

* removes buildAndSetEditFrame as it should be added in core and not here. Also removes the declaration of the button text as the default already is 'select'

* truly removes editState fu function

* fixes linting issues

* Adjusts PR to factor in review suggestions

packages/media-utils/src/components/media-upload/index.js

@@ -11,6 +11,11 @@ import { __ } from '@wordpress/i18n';
 
 const { wp } = window;
 
+/**
+ * Prepares the Featured Image toolbars and frames.
+ *
+ * @return {wp.media.view.MediaFrame.Select} The default media workflow.
+ */
 const getFeaturedImageMediaFrame = () => {
 	return wp.media.view.MediaFrame.Select.extend( {
 		/**
@@ -26,6 +31,25 @@ const getFeaturedImageMediaFrame = () => {
 			} );
 		},
 
+		/**
+		 * 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.
 		 *
@@ -37,12 +61,23 @@ const getFeaturedImageMediaFrame = () => {
 				this.featuredImageToolbar,
 				this
 			);
-			this.states.add( [ new wp.media.controller.FeaturedImage() ] );
+			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,
+				} ),
+			] );
 		},
 	} );
 };
 
-// Getter for the sake of unit tests.
+/**
+ * Prepares the Gallery toolbars and frames.
+ *
+ * @return {wp.media.view.MediaFrame.Select} The default media workflow.
+ */
 const getGalleryDetailsMediaFrame = () => {
 	/**
 	 * Custom gallery details frame.
@@ -51,13 +86,77 @@ const getGalleryDetailsMediaFrame = () => {
 	 * @class GalleryDetailsMediaFrame
 	 * @class
 	 */
-	return wp.media.view.MediaFrame.Post.extend( {
+	return wp.media.view.MediaFrame.Select.extend( {
+		/**
+		 * Set up gallery toolbar.
+		 *
+		 * @return {void}
+		 */
+		galleryToolbar() {
+			const editing = this.state().get( 'editing' );
+			this.toolbar.set(
+				new wp.media.view.Toolbar( {
+					controller: this,
+					items: {
+						insert: {
+							style: 'primary',
+							text: editing
+								? wp.media.view.l10n.updateGallery
+								: wp.media.view.l10n.insertGallery,
+							priority: 80,
+							requires: { library: true },
+
+							/**
+							 * @fires wp.media.controller.State#update
+							 */
+							click() {
+								const controller = this.controller,
+									state = controller.state();
+
+								controller.close();
+								state.trigger(
+									'update',
+									state.get( 'library' )
+								);
+
+								// Restore and reset the default state.
+								controller.setState( controller.options.state );
+								controller.reset();
+							},
+						},
+					},
+				} )
+			);
+		},
+
+		/**
+		 * Handle the edit state requirements of selected media item.
+		 *
+		 * @return {void}
+		 */
+		editState() {
+			const selection = this.state( 'gallery' ).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:main-gallery', this.galleryToolbar, this );
+			this.on( 'content:render:edit-image', this.editState, this );
+
 			this.states.add( [
 				new wp.media.controller.Library( {
 					id: 'gallery',
@@ -77,6 +176,9 @@ const getGalleryDetailsMediaFrame = () => {
 						)
 					),
 				} ),
+				new wp.media.controller.EditImage( {
+					model: this.options.editImage,
+				} ),
 
 				new wp.media.controller.GalleryEdit( {
 					library: this.options.selection,
@@ -157,7 +259,6 @@ class MediaUpload extends Component {
 		if ( unstableFeaturedImageFlow ) {
 			this.buildAndSetFeatureImageFrame();
 		}
-
 		this.initializeListeners();
 	}
 
@@ -169,6 +270,11 @@ class MediaUpload extends Component {
 		this.frame.on( 'close', this.onClose );
 	}
 
+	/**
+	 * Sets the Gallery frame and initializes listeners.
+	 *
+	 * @return {void}
+	 */
 	buildAndSetGalleryFrame() {
 		const {
 			addToGallery = false,
@@ -197,7 +303,6 @@ class MediaUpload extends Component {
 		if ( ! this.GalleryDetailsMediaFrame ) {
 			this.GalleryDetailsMediaFrame = getGalleryDetailsMediaFrame();
 		}
-
 		const attachments = getAttachmentsCollection( value );
 		const selection = new wp.media.model.Selection( attachments.models, {
 			props: attachments.props.toJSON(),
@@ -214,6 +319,11 @@ class MediaUpload extends Component {
 		this.initializeListeners();
 	}
 
+	/**
+	 * Initializes the Media Library requirements for the featured image flow.
+	 *
+	 * @return {void}
+	 */
 	buildAndSetFeatureImageFrame() {
 		const featuredImageFrame = getFeaturedImageMediaFrame();
 		const attachments = getAttachmentsCollection( this.props.value );
@@ -266,7 +376,6 @@ class MediaUpload extends Component {
 
 	onOpen() {
 		this.updateCollection();
-
 		if ( ! this.props.value ) {
 			return;
 		}