Fix: Image that is uploaded to an existing gallery does not appear in…

… the edit gallery view
WordPress · Feb 28, 2019 · 003186b · 003186b
1 parent 29bff85
commit 003186b
Showing 1 changed file with 52 additions and 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
@@ -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,13 +111,56 @@ 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 );
 		this.frame.on( 'open', this.onOpen );
 		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();
 	}