Media Grid: Bulk selection mode

[helen]

It exists, but is less than smooth in terms of experience. This is a ticket to make sure we work on it.

[ericlewis]

In 28842.diff:

• make media.view.Button's html element button, so we can apply disabled a disabled state when first entering bulk edit mode, which enables when attachments are selected.
• apply i18n for buttons, and change text to "Bulk Select" and "Delete Selected".

[JerrySarcastic]

When entering Bulk Select mode, I think a visual change (such as reducing the opacity of all thumbs in the grid view) would help to reinforce this modal switch. Video: ​https://cloudup.com/cBpeNkAb-g2

[ericlewis]

As per yesterday's ​IRC chat, in attachment:28842.2.diff​:

• Remove the bulk edit mode button, in lieu of a persistent mixed-mode.
• Show checkboxes all the time. Clicking the attachment preview will open the edit attachment modal, clicking the checkbox will select the attachment for bulk edit.
• Show the toolbar when entering bulk edit mode, and move the "Bulk Delete" button into it to reinforce this is an "action" the user can take.
• Only show the edit attachment icon when hovering over the attachment. When hovering over the checkbox, don't show it.

[ericlewis]

attachment:28842.mp4​ is a live preview of 28842.2.diff

[ericlewis]

In 28842.3.diff, move bulk actions into the primary attachments browser toolbar.

[ericlewis]

attachment:28842.3.diff​ was missing the checkboxes work from 28842.2.diff. 28842.4.diff puts it all together. Needs minor styling on the bulk edit UI elements.

[helen]

In 29212:

Media Grid:

Instead of a separate bulk selection mode, persistently show a checkbox for each item. Restores the more familiar bulk actions dropdown + action button.

props ericlewis. see #28842.

[helen]

In 29213:

Fix jshint errors introduced in [29212]. see #28842.

[helen]

The idea of fading everything except your current selection out is interesting, but perhaps unnecessary now?

Thing I noticed post-commit: If you have items selected but then filter your view in a way that they no longer show, the bulk action dropdown and button stay enabled. Not sure what we should do - reset the selection when filtering/searching?

[michalzuber]

Replying to helen:

Thing I noticed post-commit: If you have items selected but then filter your view in a way that they no longer show, the bulk action dropdown and button stay enabled. Not sure what we should do - reset the selection when filtering/searching?

Tried selecting more, search for string where one was selected and one not, removed with bulk action, reset search and all selected (also before search) were removed.
I think after searching the selection should be reset, because somebody may think after searching that only the newly selected ones will be removed. What I don't see I shouldn't be able to mess with it.

[michalzuber]

Lower checkbox opacity, change on hover ​https://youtu.be/XYWofLwKX9g

[michalzuber]

Clear selection might go into the Bulk Actions select, clearing is available in Posts Insert Media modal ​https://youtu.be/gsB0VbIEEcg

[ericlewis]

Replying to helen:

If you have items selected but then filter your view in a way that they no longer show, the bulk action dropdown and button stay enabled. Not sure what we should do - reset the selection when filtering/searching?

I like that idea, let's go ahead with it.

[wonderboymusic]

In 29297:

Media Grid: make check box-shadow more subtle.

See #28842.

[michalzuber]

Opinions on Select All/Deselect All ​http://i.imgur.com/bQU4gP7.png ?

[JerrySarcastic]

Replying to michalzuber:

Opinions on Select All/Deselect All ​http://i.imgur.com/bQU4gP7.png ?

I worry about this, as the number of files in a given media libraries could be in the hundreds (if not thousands) depending on the user.

I think it would be trivially easy for someone to mistake, since they would only see a small portion of their library at any given time. Deleting media is *very permanent* I'd hate to see users accidentally nuking their entire library, and not realizing it until it is too late.

[michalzuber]

Good point JerrySarcastic, I had only problem with removing more files, annoying selecting tens or hundreds of files, but the solution is in the List view. Don't know how many people will realise this, too :)

[nosilver4u]

It would be nice to allow developers to extend the bulk actions drop-down on the grid view. In EWWW Image Optimizer (and a few other plugins) developers are using a slightly hacky js+redirect method to add an action, and then send the user where we want based on that custom action.

While it would be preferable to give us some hooks to extend the bulk actions (from my perspective), if it isn't intended to let folks extend the bulk actions, and Delete Permanently is the only option, I wonder if this comment begins to make more sense: ​http://make.wordpress.org/ui/2014/07/22/media-grid-user-testing-round-1/#comment-24457
That would make 2 clicks instead of 4, and you're still asking the user for confirmation before they blow up anything.

At any rate, I've managed to add my own 'Bulk Optimize' action via the javascript method I mentioned (borrowed from viper007bond's regenerate thumbnails plugin). Unfortunately, it actually attempts to delete the images, because the drop-down on the grid mode is js-based, instead of submitting via POST like the old one. I barely know enough js to be dangerous, so any guidance here would be appreciated.

[ocean90]

Replying to nosilver4u:

See #29101.

[ericlewis]

In attachment:28842.6.diff​,

• remove the persistent checkboxes, and split the Select workflow back into a separate mode of the attachments browsing interface.
• as this mode is now globally toggle-able, users should have access to switch modes at any time. So, try out a sticky-style on the main toolbar.
• Toggling into the mode removes all other toolbar actions, reiterating the fact that you have switched modes.
• Put bulk selected actions in a persistent toolbar fixed just above the bottom of the attachments browser.

This is rough and shouldn't be merged unless we're gonna clean it up later; this is more proof of concept(everything works) to get UX feedback.

[helen]

Replying to ericlewis:

In attachment:28842.6.diff​

• I don't think both toolbars are necessary - let's go with just the top one.
• Not feeling the top bar always being sticky - I get that you have to be at the top to start selection mode, but given that right now bulk actions by default are all of delete, we may be prematurely worrying about exposing the functionality fully. We do still have to tackle the UI of the stickiness at least somewhat though, since the actions need to stick on screen given infinite scroll.
• "Select" should be "Bulk Select" - looks like that's a string already, probably from before.

[wonderboymusic]

In 29484:

Media Grid: add Bulk Selection mode for deleting attachments.

• Toolbar is sticky when select mode is active
• Selection is toggled when clicking an attachment preview
• Unselected attachments fade out, selected fade in.

See #28842.

[wonderboymusic]

In 29485:

Remove debug line from [29484].

See #28842.

[michalzuber]

Delete selected doesn't work ​https://youtu.be/1bSorSpDFFU

[helen]

In 29486:

Remove now-unused strings. see #28842.

[ocean90]

Replying to wonderboymusic:

Unselected attachments fade out, selected fade in.

That feels wrong in the media modal, see ​https://cloudup.com/c1DHcsTk3au.

[wonderboymusic]

Replying to ocean90:

Replying to wonderboymusic:

Unselected attachments fade out, selected fade in.

That feels wrong in the media modal, see ​https://cloudup.com/c1DHcsTk3au.

Yep, that was a mistake. The opacity should be scoped to .media-frame.mode-grid .attachment

[ocean90]

In 29500:

Media: Apply attachment opacity only in grid mode.

see #28842.

[ocean90]

When uploading multiple files each file will be in a selected state. Should we switch into bulk selection mode then?

[ocean90]

In 29517:

Media Grid: Improve position of fixed toolbar at small-screen sizes.

see #28842.

[helen]

Replying to ocean90:

When uploading multiple files each file will be in a selected state. Should we switch into bulk selection mode then?

No, but I have written down on my notes that nothing should be "checked"/selected on upload to the media grid.

[ocean90]

In 28842.disable-autoselect.patch​ I added a new property autoSelect to wp.media.controller.Library which allows you to enable/disable auto selecting. But maybe wonderboymusic has a better idea.

[adamsilverstein]

minor JS standards fix

[wonderboymusic]

In 29565:

Media Grid: don't auto-select attachments upon upload.

Props ocean90.
See #28842.

[helen]

The only thing I have left here is to exit bulk selection mode when you take an action like delete.

[wonderboymusic]

In 29566:

Media Grid: after completing a Bulk action, switch from select to edit mode.

Fixes #28842.

[wonderboymusic]

In 29568:

Media Grid: after [29566], account for Trash and Delete.

See #28842.