From 77a945c86ccc209dccd14eea617ccd3bcaed70ae Mon Sep 17 00:00:00 2001
From: Jorge Costa <jorge.costa@developer.pt>
Date: Thu, 28 Feb 2019 21:19:26 +0000
Subject: [PATCH] Fix: Image that is uploaded to an existing gallery does not
 appear in the edit gallery view (#12435)

---
 .../hooks/components/media-upload/index.js    | 68 ++++++++++++++-----
 1 file changed, 52 insertions(+), 16 deletions(-)

diff --git a/packages/edit-post/src/hooks/components/media-upload/index.js b/packages/edit-post/src/hooks/components/media-upload/index.js
index bcf4d49d700c5..df65411e1c305 100644
--- a/packages/edit-post/src/hooks/components/media-upload/index.js
+++ b/packages/edit-post/src/hooks/components/media-upload/index.js
@@ -82,7 +82,6 @@ class MediaUpload extends Component {
 		gallery = false,
 		title = __( 'Select or Upload Media' ),
 		modalClass,
-		value,
 	} ) {
 		super( ...arguments );
 		this.openModal = this.openModal.bind( this );
@@ -92,21 +91,7 @@ class MediaUpload extends Component {
 		this.onClose = this.onClose.bind( this );
 
 		if ( gallery ) {
-			const currentState = value ? 'gallery-edit' : 'gallery';
-			const GalleryDetailsMediaFrame = getGalleryDetailsMediaFrame();
-			const attachments = getAttachmentsCollection( value );
-			const selection = new wp.media.model.Selection( attachments.models, {
-				props: attachments.props.toJSON(),
-				multiple,
-			} );
-			this.frame = new GalleryDetailsMediaFrame( {
-				mimeType: allowedTypes,
-				state: currentState,
-				multiple,
-				selection,
-				editing: ( value ) ? true : false,
-			} );
-			wp.media.frame = this.frame;
+			this.buildAndSetGalleryFrame();
 		} else {
 			const frameConfig = {
 				title,
@@ -126,6 +111,10 @@ class MediaUpload extends Component {
 			this.frame.$el.addClass( modalClass );
 		}
 
+		this.initializeListeners();
+	}
+
+	initializeListeners() {
 		// When an image is selected in the media frame...
 		this.frame.on( 'select', this.onSelect );
 		this.frame.on( 'update', this.onUpdate );
@@ -133,6 +122,45 @@ class MediaUpload extends Component {
 		this.frame.on( 'close', this.onClose );
 	}
 
+	buildAndSetGalleryFrame() {
+		const {
+			allowedTypes,
+			multiple = false,
+			value = null,
+		} = this.props;
+		// If the value did not changed there is no need to rebuild the frame,
+		// we can continue to use the existing one.
+		if ( value === this.lastGalleryValue ) {
+			return;
+		}
+
+		this.lastGalleryValue = value;
+
+		// If a frame already existed remove it.
+		if ( this.frame ) {
+			this.frame.remove();
+		}
+		const currentState = value ? 'gallery-edit' : 'gallery';
+		if ( ! this.GalleryDetailsMediaFrame ) {
+			this.GalleryDetailsMediaFrame = getGalleryDetailsMediaFrame();
+		}
+
+		const attachments = getAttachmentsCollection( value );
+		const selection = new wp.media.model.Selection( attachments.models, {
+			props: attachments.props.toJSON(),
+			multiple,
+		} );
+		this.frame = new this.GalleryDetailsMediaFrame( {
+			mimeType: allowedTypes,
+			state: currentState,
+			multiple,
+			selection,
+			editing: ( value ) ? true : false,
+		} );
+		wp.media.frame = this.frame;
+		this.initializeListeners();
+	}
+
 	componentWillUnmount() {
 		this.frame.remove();
 	}
@@ -176,6 +204,7 @@ class MediaUpload extends Component {
 				selection.add( wp.media.attachment( id ) );
 			} );
 		}
+
 		// load the images so they are available in the media modal.
 		getAttachmentsCollection( castArray( this.props.value ) ).more();
 	}
@@ -205,6 +234,13 @@ class MediaUpload extends Component {
 	}
 
 	openModal() {
+		if (
+			this.props.gallery &&
+			this.props.value &&
+			this.props.value.length > 0
+		) {
+			this.buildAndSetGalleryFrame();
+		}
 		this.frame.open();
 	}