Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Gallery: Update media frame state management #2488

Merged
merged 2 commits into from
Apr 24, 2018
Merged

Gallery: Update media frame state management #2488

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
d5aa7aa
Gallery: Properly set editing option for the media frame; Improve loa…
joemcgill Aug 16, 2017
4586353
Corrected bug where single media selection was not working as expecte…
jorgefilipecosta Apr 23, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
71 changes: 43 additions & 28 deletions edit-post/hooks/blocks/media-upload/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
/**
* External Dependencies
*/
import { pick } from 'lodash';
import { castArray, pick } from 'lodash';

/**
* WordPress dependencies
Expand Down Expand Up @@ -47,6 +47,7 @@ const getGalleryDetailsMediaFrame = () => {
editing: this.options.editing,
menu: 'gallery',
displaySettings: false,
multiple: true,
} ),

new wp.media.controller.GalleryAdd(),
Expand All @@ -62,35 +63,54 @@ const slimImageObject = ( img ) => {
return pick( img, attrSet );
};

const getAttachmentsCollection = ( ids ) => {
return wp.media.query( {
order: 'ASC',
orderby: 'post__in',
perPage: -1,
post__in: ids,
query: true,
type: 'image',
} );
};

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.onOpen = this.onOpen.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 ) {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Still having trouble to understand the difference between gallery and multiple props. I wonder if we should consolidate these two or if they are useful separately.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hi @youknowriad, the gallery flag indicates that we want to use the gallery media frame, the multiple still uses the normal select frame but allows us to select multiple files. Imagine a document block that wants to allow to select multiple documents it may use multiple flag but not use gallery flag.

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( {
frame: 'select',
mimeType: type,
state: 'gallery',
state: currentState,
multiple,
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 );
}

Expand Down Expand Up @@ -136,22 +156,17 @@ 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 );
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() {
Expand Down