Media Workflow Actions and Selection UI

[koopersmith]

For media workflows that support more than a single action, it will be helpful to have a toolbar full of buttons, statuses, and the like.

The media modal supports both selecting a single image and selecting multiple images. For the latter, we should have a UI to indicate that a given number of items are selected and easily clear the selection, as scrolling through the library makes it easy to lose track of a selection otherwise.

I am currently working on this ticket.

See #21390.

[koopersmith]

In [21769]:

Adds UI for media modal toolbars, buttons, and the selected item(s) status.

Currently uses actions for inserting media into a post as an example (hence the raw text). To test a workflow that supports multiple selection, run the following in your browser's JavaScript console:

wp.media({ multiple: true });

see #21390, #21808.

[SergeyBiryukov]

Selecting multiple images seems to work fine.

Chrome console shows notices:

Resource interpreted as Image but transferred with MIME type text/html: "http://trunk.wordpress/wp-content/uploads/2012/05/KML_Samples.kml". jquery.js:2
Resource interpreted as Image but transferred with MIME type audio/mpeg: "http://trunk.wordpress/wp-content/uploads/2012/06/Paratiisi.mp3". jquery.js:2
Resource interpreted as Image but transferred with MIME type application/pdf: "http://trunk.wordpress/wp-content/uploads/2012/04/phpinfo.pdf". jquery.js:2

(and icons for those files are not displayed, see ticket:21776:21776.non-image.png​).

When pressing "Insert into post" button, nothing happens (in both Firefox and Chrome).

[koopersmith]

Thanks, Sergey.

Replying to SergeyBiryukov:

Chrome console shows notices:

Resource interpreted as Image but transferred with MIME type text/html: "http://trunk.wordpress/wp-content/uploads/2012/05/KML_Samples.kml". jquery.js:2
Resource interpreted as Image but transferred with MIME type audio/mpeg: "http://trunk.wordpress/wp-content/uploads/2012/06/Paratiisi.mp3". jquery.js:2
Resource interpreted as Image but transferred with MIME type application/pdf: "http://trunk.wordpress/wp-content/uploads/2012/04/phpinfo.pdf". jquery.js:2

(and icons for those files are not displayed, see ticket:21776:21776.non-image.png​).

Yep, non-image attachments are not handled correctly at the moment. In many cases, they shouldn't be displayed whatsoever.

When pressing "Insert into post" button, nothing happens (in both Firefox and Chrome).

I'd be worried if anything happened — the button currently does nothing.

[koopersmith]

In [21784]:

Use icons for non-image attachments in the new media modal. see #21836, #21390, #21808.

[koopersmith]

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.

[koopersmith]

In [22029]:

Apply localized strings to media modal. see #21390, #21808.

[koopersmith]

In 22321:

Add a sidebar to the media modal.

• Adds wp.media.view.Sidebar, to aid in rendering the sidebar.
• Removes the directions from the Attachments view and shifts search into a separate view (wp.mce.view.Search) that can be relocated at will. This also serves to simplify the Attachments view by removing the nested list and $list parameters.
• Show the toolbar on the featured image workflow, effectively requiring confirmation before closing the dialog.

see #21390, #21776, #21808.