From d5aa7aa5bb95cd33d77a962ed17780b6b08fe420 Mon Sep 17 00:00:00 2001 From: Joe McGill Date: Wed, 16 Aug 2017 13:17:15 -0500 Subject: [PATCH 1/2] Gallery: Properly set editing option for the media frame; Improve loading of media frame when editing a gallery; Editing a gallery opens media frame in gallery-edit state This sets the editing option based on the values property of our component. Previously, we were replacing the media frame state right before opening the modal, but after views like the menu were created. This caused a few bugs, like the cancel button moving back to the initial "create gallery" state and some labels being incorrect. This creates a selection from any existing IDs and passes it to the frame before it is created to avoid these issues. Additionally, this updates the method for getting a collection of attachments using `wp.media.query` so we can fetch all of the attachment models in one request, rather than relying on seperate requests for each attachment in the gallery. When opening the `wp.media` modal to modify an existing gallery, the frame should be opened in the `gallery-edit` state, rather than the `gallery` state used when selecting images for a new gallery. --- edit-post/hooks/blocks/media-upload/index.js | 48 ++++++++++---------- 1 file changed, 25 insertions(+), 23 deletions(-) diff --git a/edit-post/hooks/blocks/media-upload/index.js b/edit-post/hooks/blocks/media-upload/index.js index bc6b4922bfe174..4049ed5d5ced79 100644 --- a/edit-post/hooks/blocks/media-upload/index.js +++ b/edit-post/hooks/blocks/media-upload/index.js @@ -47,6 +47,7 @@ const getGalleryDetailsMediaFrame = () => { editing: this.options.editing, menu: 'gallery', displaySettings: false, + multiple: true, } ), new wp.media.controller.GalleryAdd(), @@ -62,13 +63,26 @@ const slimImageObject = ( img ) => { return pick( img, attrSet ); }; +const getAttachmentsCollection = ( ids ) => { + const attachments = wp.media.query( { + order: 'ASC', + orderby: 'post__in', + perPage: -1, + post__in: ids, + query: true, + type: 'image', + } ); + + attachments.more(); + return attachments; +}; + class MediaUpload extends Component { constructor( { multiple = false, type, gallery = false, title = __( 'Select or Upload Media' ), modalClass } ) { super( ...arguments ); this.openModal = this.openModal.bind( this ); this.onSelect = this.onSelect.bind( this ); this.onUpdate = this.onUpdate.bind( this ); - this.onOpen = this.onOpen.bind( this ); this.processMediaCaption = this.processMediaCaption.bind( this ); const frameConfig = { title, @@ -83,11 +97,19 @@ class MediaUpload extends Component { } if ( gallery ) { + const ids = this.props.value || []; + const attachments = getAttachmentsCollection( ids ); + const currentState = ( this.props.value ) ? 'gallery-edit' : 'gallery'; const GalleryDetailsMediaFrame = getGalleryDetailsMediaFrame(); this.frame = new GalleryDetailsMediaFrame( { - frame: 'select', mimeType: type, - state: 'gallery', + state: currentState, + multiple, + selection: new wp.media.model.Selection( attachments.models, { + props: attachments.props.toJSON(), + multiple: true, + } ), + editing: ( this.props.value ) ? true : false, } ); wp.media.frame = this.frame; } else { @@ -101,7 +123,6 @@ class MediaUpload extends Component { // 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 ); } componentWillUnmount() { @@ -135,25 +156,6 @@ class MediaUpload extends Component { ); } - onOpen() { - const selection = this.frame.state().get( 'selection' ); - const addMedia = ( id ) => { - const attachment = wp.media.attachment( id ); - attachment.fetch(); - selection.add( attachment ); - }; - - if ( ! this.props.value ) { - return; - } - - if ( this.props.multiple ) { - this.props.value.map( addMedia ); - } else { - addMedia( this.props.value ); - } - } - openModal() { this.frame.open(); } From 4586353d1992ddf318ce007ff3bbad4d2eb2b7d9 Mon Sep 17 00:00:00 2001 From: Jorge Date: Mon, 23 Apr 2018 12:28:16 +0100 Subject: [PATCH 2/2] Corrected bug where single media selection was not working as expected; Corrected bug where if gallery was empty all media content was loaded. --- edit-post/hooks/blocks/media-upload/index.js | 63 ++++++++++++-------- 1 file changed, 38 insertions(+), 25 deletions(-) diff --git a/edit-post/hooks/blocks/media-upload/index.js b/edit-post/hooks/blocks/media-upload/index.js index 4049ed5d5ced79..fe20dad65ec2ec 100644 --- a/edit-post/hooks/blocks/media-upload/index.js +++ b/edit-post/hooks/blocks/media-upload/index.js @@ -1,7 +1,7 @@ /** * External Dependencies */ -import { pick } from 'lodash'; +import { castArray, pick } from 'lodash'; /** * WordPress dependencies @@ -64,7 +64,7 @@ const slimImageObject = ( img ) => { }; const getAttachmentsCollection = ( ids ) => { - const attachments = wp.media.query( { + return wp.media.query( { order: 'ASC', orderby: 'post__in', perPage: -1, @@ -72,47 +72,45 @@ const getAttachmentsCollection = ( ids ) => { query: true, type: 'image', } ); - - attachments.more(); - return attachments; }; class MediaUpload extends Component { - constructor( { multiple = false, type, gallery = false, title = __( 'Select or Upload Media' ), modalClass } ) { + constructor( { multiple = false, type, gallery = false, title = __( 'Select or Upload Media' ), modalClass, value } ) { super( ...arguments ); this.openModal = this.openModal.bind( this ); + this.onOpen = this.onOpen.bind( this ); this.onSelect = this.onSelect.bind( this ); this.onUpdate = this.onUpdate.bind( this ); this.processMediaCaption = this.processMediaCaption.bind( this ); - const frameConfig = { - title, - button: { - text: __( 'Select' ), - }, - multiple, - selection: new wp.media.model.Selection( [] ), - }; - if ( !! type ) { - frameConfig.library = { type }; - } if ( gallery ) { - const ids = this.props.value || []; - const attachments = getAttachmentsCollection( ids ); - const currentState = ( this.props.value ) ? 'gallery-edit' : '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: type, state: currentState, multiple, - selection: new wp.media.model.Selection( attachments.models, { - props: attachments.props.toJSON(), - multiple: true, - } ), - editing: ( this.props.value ) ? true : false, + selection, + editing: ( value ) ? true : false, } ); wp.media.frame = this.frame; } else { + const frameConfig = { + title, + button: { + text: __( 'Select' ), + }, + multiple, + }; + if ( !! type ) { + frameConfig.library = { type }; + } + this.frame = wp.media( frameConfig ); } @@ -123,6 +121,7 @@ class MediaUpload extends Component { // 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 ); } componentWillUnmount() { @@ -156,6 +155,20 @@ class MediaUpload extends Component { ); } + onOpen() { + if ( ! this.props.value ) { + return; + } + if ( ! this.props.gallery ) { + const selection = this.frame.state().get( 'selection' ); + castArray( this.props.value ).map( ( id ) => { + selection.add( wp.media.attachment( id ) ); + } ); + } + // load the images so they are available in the media modal. + getAttachmentsCollection( castArray( this.props.value ) ).more(); + } + openModal() { this.frame.open(); }