Edit galleries in the media modal

[koopersmith]

Now that we have a stable media library workspace (currently wp.media.view.Workspace), we can start building out the others. The gallery workspace is similar to the media library, but is not attached to a query and is manually sortable. We should integrate jQuery.ui.sortable for the drag/drop functionality in the gallery workspace, and make it easy to navigate between editing a gallery and the media library.

This will benefit from the improvements on #21807 and #21808. See #21390.

In [21898]:

Allow JS Attachments models to be searchable and sortable.

Moves wp.media.model.Query sorting and searching to the parent wp.media.model.Attachments.

Query parameters are stored in attachments.props, which is a Backbone.Model, and supports order ('ASC' or 'DESC'), orderby (any Attachment model property name), search (a search term), and query (a boolean value that ties the Attachments collection to the server).

wp.media.query( args ) now returns an Attachments set that is mapped to a Query collection instead of the Query collection itself. This allows you to change the query arguments by updating attachments.props instead of fetching the mirrored arguments, changing them, and passing them to wp.media.query() again.

fixes #21921, see #21390, #21809.

In [21900]:

Ensure the Attachments model properties are correctly set for Query collections.

After shifting sorting and searching logic from the Query collection in [21898], it became apparent that Query collections should also have an accurate props model, as the model controls the aforementioned searching and sorting.

see #21921, #21809, and #21390.

In [21906]:

The first inklings of a gallery management screen.

• Adds view.Workspace.Library and view.Workspace.Gallery as extensions of view.Workspace to implement the individual screens
• Shifts the toolbar logic that was library-specific from the generic Workspace view to Workspace.Library.
• Adds a toolbar to the Gallery view.
• 'Create a gallery' and 'Return to media library' buttons toggle between the two views.
• 'Insert gallery into post' closes the modal, but does not actually perform its namesake action.
• Note that elements can still be deselected in the gallery view. This will be fixed in a future commit.

Improvements to avoid over-eager event unbinding:

• Modal views now properly detach their contents before replacing them with a new element.
• Likewise, Workspace views detach their main content blocks when re-rendering the view.

To test the gallery workflow (which is incomplete), run the following in your browser's console:

wp.media({ multiple: true });

see #21809, #21390.

In [22021]:

Media JS: Add support for filtering Attachment collections by mime type. see #21390, #21776, #21809.

In [22027]:

Media JS: Improve UX for which buttons show when inserting media into a post.

'Insert into post' is the primary action when either one item is selected, or any number of non-image items are selected. If multiple images are selected, 'Insert into post' becomes secondary, and 'Create a new gallery' takes the primary spot.

Adds a method to get Button views from the Toolbar. Adds a model for certain button attributes to allow size, style, and text to be easily changed.

see #21390, #21808, #21809.

In [22045]:

Media JS: Give the master Workspace view control over which Attachment view it uses. see #21390, #21807, #21809.

In [22046]:

Media JS: Use a custom Attachment views for both the media library and gallery screens.

To do so, the Attachment view code had to be shifted above the Workspace view code to ensure the subview is defined (preventing errors).

Also corrects an error in wp.media.view.Attachments.add where it was still using the default Attachment view.

see #21390, #21809.

In [22053]:

Add quick insert buttons to attachment views in the library and remove buttons to attachment views in the gallery editor. see #21390, #21809.

In [22101]:

Allow galleries to be reordered by drag and drop.

An Attachments view now accepts a sortable property. Manual sorting is only enabled when the corresponding collection doesn't have a comparator.

jQuery UI sortable must be enqueued for sorting to work.

see #21390, #21809.

In [22120]:

Use the new media modal to insert galleries into TinyMCE and the text editor.

Galleries

• Gallery insertion from the new media modal (into TinyMCE, the text editor, etc).
• Gallery previews in TinyMCE now use the wp.mce.views API.
• Disables the TinyMCE wpgallery plugin.
• Gallery previews consist of the first image of the gallery and the appearance of a stack. This will later be fleshed out to include more images/functionality (including editing the gallery, gallery properties, and showing the number of images in the gallery).
• Multiple galleries can be added to a single post.
• The gallery MCE view provides a bridge between the wp.shortcode and Attachments representation of a gallery, which allows the existing collection to persist when a gallery is initially created (preventing a request to the server for the query).

Shortcodes

• Renames wp.shortcode.Match to wp.shortcode to better expose the shortcode constructor.
• The wp.shortcode constructor now accepts an object of options instead of a wp.shortcode.regexp() match.
• A wp.shortcode instance can be created from a wp.shortcode.regexp() match by calling wp.shortcode.fromMatch( match ).
• Adds wp.shortcode.string(), which takes a set of shortcode parameters and converts them into a string.* Renames wp.shortcode.prototype.text() to wp.shortcode.prototype.string().
• Adds an additional capture group to wp.shortcode.regexp() that records whether or not the shortcode has a closing tag. This allows us to improve the accuracy of the syntax used when transforming a shortcode object back into a string.

Media Models

• Prevents media Query models from observing the central Attachments.all object when query args without corresponding filters are set (otherwise, queries quickly amass false positives).
• Adds post__in, post__not_in, and post_parent as acceptable JS attachment Query args.
• Attachments.more() always returns a $.promise object.

see #21390, #21809, #21812, #21815, #21817.

In [22155]:

Gallery editing in the media modal.

The edit button on gallery MCE views will open a new instance of the media modal. Images can be removed, uploaded, and reordered. However, the "Add images from media library" button is not yet functional.

see #21390, #21809, #21815.

In [22156]:

Reset the media modal to the library view after inserting a gallery. fixes #22151, see #21390, #21809.

hi koopersmith,

Loving the new media manager - welldone!

I picked up something : when I insert a gallery from the new media manager, how do I select to change the image link urls from the attachment page to the actual full size image urls? Is that still on the cards? I would like to help with this dev if possible, but how?

Also, if images have anchor tags in their captions, then the default 3.5 theme (twentytwelve) has a display:block CSS rule so the links wrap to the next line on the frontend. I have the simple CSS fix, but how can I contribute this back?

thanks for the help

In 22320:

Give media a heart transplant.

Revises the concept of the media controller and workspace views (i.e. two central points of control) to be more granular. The main media object is now the Frame, which is a hybrid view and state machine.

The state machine is a collection of states, which are just generic instances of Backbone.Model. This circumvents the problem of juggling global parameters when changing states. Each state contains its own event loop. All events are also forwarded to the frame itself (as is the case in all model/collection relationships).

The frame view contains several regions, each of which can be overridden without harming or re-rendering the other regions. These work well when used in conjunction with the state machine events.

This removes the upload sidebar (don't worry, visible upload UI will return). Drag and drop uploading still works. The ability to upload has been abstracted into its own view (instead of being attached to the central workspace view).

Editing galleries is temporarily broken — the gallery creation and editing experiences will be unified in a future patch.

Adds events to detect dragging changes in wp.Uploader and adds methods to detect and leverage browser support for CSS3 transitions.

see #21390, #21809.