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.


Built from https://develop.svn.wordpress.org/trunk@29212


git-svn-id: http://core.svn.wordpress.org/trunk@28996 1a063a9b-81f0-0310-95a4-ce76da25c4cd

wp-includes/css/media-views-rtl.css

@@ -913,7 +913,7 @@
 }
 
 .attachment.details .check,
-.media-grid-view .attachment .check {
+.media-grid-view .attachment.selected .check {
 	background-color: #1e8cbe;
 	-webkit-box-shadow: 0 0 0 1px #fff,
 				0 0 0 2px #1e8cbe;
@@ -921,13 +921,21 @@
 				0 0 0 2px #1e8cbe;
 }
 
-.attachment.details .check div,
+.media-grid-view .attachment .check {
+	display: block;
+}
+
 .media-grid-view .attachment .check div {
+	background-position: 21px 0;
+}
+
+.attachment.details .check div,
+.media-grid-view .attachment.selected .check div {
 	background-position: -21px 0;
 }
 
 .attachment.details .check:hover div,
-.media-grid-view .attachment .check:hover div {
+.media-grid-view .attachment.selected .check:hover div {
 	background-position: -60px 0;
 }
 
@@ -1051,7 +1059,7 @@
 	display: inline-block;
 }
 
-.attachment:hover .inline-toolbar {
+.attachment-preview:hover ~ .inline-toolbar {
 	display: block;
 }
 
@@ -2600,12 +2608,21 @@ video#inline-media-node {
 	margin-top: 0;
 }
 
+.media-grid-view .media-toolbar select {
+	margin-top: 1px;
+	font-size: inherit;
+}
+
+.media-grid-view .attachments-browser .bulk-select {
+	display: inline-block;
+}
+
 /**
  * Copied styles from the Add theme toolbar.
  *
  * This should be OOCSS'd so both use a shared selector.
  */
-.media-grid-view .media-toolbar {
+.media-grid-view .attachments-browser .media-toolbar {
 	background: #fff;
 	-webkit-box-shadow: 0 1px 1px 0 rgba(0,0,0,.1);
 	box-shadow: 0 1px 1px 0 rgba(0,0,0,.1);
@@ -2643,7 +2660,7 @@ video#inline-media-node {
 	margin: 0 0 0 20px;
 }
 
-.media-grid-view select.attachment-filters {
+.media-grid-view select {
 	margin: 0 0 0 10px;
 }
 
@@ -2729,7 +2746,7 @@ video#inline-media-node {
 	font-weight: 300;
 }
 
-.media-frame.mode-bulk-edit .attachment:hover .inline-toolbar {
+.media-frame.mode-bulk-edit .attachment-preview:hover ~ .inline-toolbar {
 	display: none;
 }
 
@@ -2911,9 +2928,13 @@ video#inline-media-node {
 	margin-top: 3px;
 }
 
+/**
+ * Media queries for media grid.
+ */
+
 @media only screen and (max-width: 1120px) {
-	.media-grid-view .media-toolbar-primary,
-	.media-grid-view .media-toolbar-secondary {
+	.media-grid-view .attachments-browser .media-toolbar-primary,
+	.media-grid-view .attachments-browser .media-toolbar-secondary {
 		float: none;
 	}
 
@@ -2924,4 +2945,3 @@ video#inline-media-node {
 		max-width: none !important;
 	}
 }
-

wp-includes/css/media-views.css

@@ -913,7 +913,7 @@
 }
 
 .attachment.details .check,
-.media-grid-view .attachment .check {
+.media-grid-view .attachment.selected .check {
 	background-color: #1e8cbe;
 	-webkit-box-shadow: 0 0 0 1px #fff,
 				0 0 0 2px #1e8cbe;
@@ -921,13 +921,21 @@
 				0 0 0 2px #1e8cbe;
 }
 
-.attachment.details .check div,
+.media-grid-view .attachment .check {
+	display: block;
+}
+
 .media-grid-view .attachment .check div {
+	background-position: 21px 0;
+}
+
+.attachment.details .check div,
+.media-grid-view .attachment.selected .check div {
 	background-position: -21px 0;
 }
 
 .attachment.details .check:hover div,
-.media-grid-view .attachment .check:hover div {
+.media-grid-view .attachment.selected .check:hover div {
 	background-position: -60px 0;
 }
 
@@ -1051,7 +1059,7 @@
 	display: inline-block;
 }
 
-.attachment:hover .inline-toolbar {
+.attachment-preview:hover ~ .inline-toolbar {
 	display: block;
 }
 
@@ -2600,12 +2608,21 @@ video#inline-media-node {
 	margin-top: 0;
 }
 
+.media-grid-view .media-toolbar select {
+	margin-top: 1px;
+	font-size: inherit;
+}
+
+.media-grid-view .attachments-browser .bulk-select {
+	display: inline-block;
+}
+
 /**
  * Copied styles from the Add theme toolbar.
  *
  * This should be OOCSS'd so both use a shared selector.
  */
-.media-grid-view .media-toolbar {
+.media-grid-view .attachments-browser .media-toolbar {
 	background: #fff;
 	-webkit-box-shadow: 0 1px 1px 0 rgba(0,0,0,.1);
 	box-shadow: 0 1px 1px 0 rgba(0,0,0,.1);
@@ -2643,7 +2660,7 @@ video#inline-media-node {
 	margin: 0 20px 0 0;
 }
 
-.media-grid-view select.attachment-filters {
+.media-grid-view select {
 	margin: 0 10px 0 0;
 }
 
@@ -2729,7 +2746,7 @@ video#inline-media-node {
 	font-weight: 300;
 }
 
-.media-frame.mode-bulk-edit .attachment:hover .inline-toolbar {
+.media-frame.mode-bulk-edit .attachment-preview:hover ~ .inline-toolbar {
 	display: none;
 }
 
@@ -2911,9 +2928,13 @@ video#inline-media-node {
 	margin-top: 3px;
 }
 
+/**
+ * Media queries for media grid.
+ */
+
 @media only screen and (max-width: 1120px) {
-	.media-grid-view .media-toolbar-primary,
-	.media-grid-view .media-toolbar-secondary {
+	.media-grid-view .attachments-browser .media-toolbar-primary,
+	.media-grid-view .attachments-browser .media-toolbar-secondary {
 		float: none;
 	}
 
@@ -2924,4 +2945,3 @@ video#inline-media-node {
 		max-width: none !important;
 	}
 }
-

wp-includes/js/media-grid.js

@@ -184,27 +184,25 @@
 		},
 
 		createStates: function() {
-			var options = this.options,
-				libraryState;
+			var options = this.options;
 
 			if ( this.options.states ) {
 				return;
 			}
 
-			libraryState = new media.controller.Library({
-				library:    media.query( options.library ),
-				multiple:   options.multiple,
-				title:      options.title,
-				priority:   20,
-				toolbar:    false,
-				router:     false,
-				content:    'browse',
-				filterable: 'mime-types'
-			});
-
 			// Add the default states.
 			this.states.add([
-				libraryState
+				new media.controller.Library({
+					library:    media.query( options.library ),
+					multiple:   options.multiple,
+					title:      options.title,
+					priority:   20,
+
+					router:     false,
+					content:    'browse',
+
+					filterable: 'mime-types'
+				})
 			]);
 		},
 
@@ -254,7 +252,6 @@
 				filters:    state.get('filterable'),
 				display:    state.get('displaySettings'),
 				dragInfo:   state.get('dragInfo'),
-				bulkEdit:   true,
 				sidebar:    false,
 
 				suggestedWidth:  state.get('suggestedWidth'),
@@ -606,55 +603,81 @@
 		}
 	});
 
-	media.view.BulkSelectionToggleButton = media.view.Button.extend({
+ 	media.view.BulkSelection = media.View.extend({
+		className: 'bulk-select',
+
 		initialize: function() {
-			media.view.Button.prototype.initialize.apply( this, arguments );
-			this.listenTo( this.controller, 'bulk-edit:activate bulk-edit:deactivate', _.bind( this.toggleBulkEditHandler, this ) );
-		},
+			this.model = new Backbone.Model({
+				currentAction: '',
 
-		click: function() {
-			var bulkEditActive = this.controller.activeModes.where( { id: 'bulk-edit' } ).length;
-			media.view.Button.prototype.click.apply( this, arguments );
+			});
 
-			if ( bulkEditActive ) {
-				this.controller.deactivateMode( 'bulk-edit' ).activateMode( 'edit' );
-			} else {
-				this.controller.deactivateMode( 'edit' ).activateMode( 'bulk-edit' );
-			}
-		},
+			this.views.add(
+				new media.view.BulkSelectionActionDropdown({
+					controller: this
+				})
+			);
 
-		toggleBulkEditHandler: function() {
-			var bulkEditActive = this.controller.activeModes.where( { id: 'bulk-edit' } ).length;
-			if ( bulkEditActive ) {
-				this.$el.addClass( 'button-primary' );
-			} else {
-				this.$el.removeClass( 'button-primary' );
-				this.controller.state().get('selection').reset();
-			}
+			this.views.add(
+				new media.view.BulkSelectionActionButton({
+					disabled:   true,
+					text:       l10n.apply,
+					controller: this
+				})
+			);
 		}
 	});
 
-	media.view.BulkDeleteButton = media.view.Button.extend({
+	media.view.BulkSelectionActionDropdown = media.View.extend({
+		tagName:   'select',
+
+  		initialize: function() {
+  			media.view.Button.prototype.initialize.apply( this, arguments );
+			this.listenTo( this.controller.controller.state().get( 'selection' ), 'add remove reset', _.bind( this.enabled, this ) );
+			this.$el.append( $('<option></option>').val( '' ).html( l10n.bulkActions ) )
+				.append( $('<option></option>').val( 'delete' ).html( l10n.deletePermanently ) );
+			this.$el.prop( 'disabled', true );
+			this.$el.on( 'change', _.bind( this.toggleChange, this ) );
+		},
+
+		toggleChange: function() {
+			this.controller.model.set( { 'currentAction': this.$el.val() } );
+  		},
+		enabled: function() {
+			var disabled = ! this.controller.controller.state().get('selection').length;
+			this.$el.prop( 'disabled', disabled );
+  		}
+  	});
+
+	media.view.BulkSelectionActionButton = media.view.Button.extend({
+		tagName: 'button',
+
 		initialize: function() {
 			media.view.Button.prototype.initialize.apply( this, arguments );
-			this.$el.hide();
-			this.listenTo( this.controller, 'bulk-edit:activate bulk-edit:deactivate', _.bind( this.visibility, this ) );
+
+			this.listenTo( this.controller.model, 'change', this.enabled, this );
+			this.listenTo( this.controller.controller.state().get( 'selection' ), 'add remove reset', _.bind( this.enabled, this ) );
 		},
 
 		click: function() {
+			var selection = this.controller.controller.state().get('selection');
 			media.view.Button.prototype.click.apply( this, arguments );
-			while (this.controller.state().get('selection').length > 0) {
-				this.controller.state().get('selection').at(0).destroy();
+
+			// Currently assumes delete is the only action
+			if ( confirm( l10n.warnBulkDelete ) ) {
+				while ( selection.length > 0) {
+					selection.at(0).destroy();
+				}
 			}
+
+			this.enabled();
 		},
 
-		visibility: function() {
-			var bulkEditActive = this.controller.activeModes.where( { id: 'bulk-edit' } ).length;
-			if ( bulkEditActive ) {
-				this.$el.show();
-			} else {
-				this.$el.hide();
-			}
+		enabled: function() {
+			var currentAction = this.controller.model.get( 'currentAction' ),
+				selection = this.controller.controller.state().get('selection'),
+				disabled = ! currentAction || ! selection.length;
+			this.$el.prop( 'disabled', disabled );
 		}
 	});
 

wp-includes/js/media-views.js

@@ -4619,7 +4619,7 @@
 			'change [data-setting] select':   'updateSetting',
 			'change [data-setting] textarea': 'updateSetting',
 			'click .close':                   'removeFromLibrary',
-			'click .check':                   'removeFromSelection',
+			'click .check':                   'checkClickHandler',
 			'click a':                        'preventDefault',
 			'keydown':                        'toggleSelectionHandler'
 		},
@@ -4879,12 +4879,8 @@
 				return;
 			}
 
-			// In bulk edit mode (in media grid), attachments don't open the "details"
-			// pane, so a `details` class is unnecessary on the attachment view.
-			if ( ! this.controller.isModeActive( 'bulk-edit' ) ) {
-				details = selection.single();
-				this.$el.toggleClass( 'details', details === this.model );
-			}
+			details = selection.single();
+			this.$el.toggleClass( 'details', details === this.model );
 		},
 		/**
 		 * @param {Object} event
@@ -5015,19 +5011,25 @@
 
 			this.collection.remove( this.model );
 		},
+
 		/**
-		 * @param {Object} event
+		 * Add the model if it isn't in the selection, if it is in the selection,
+		 * remove it.
+		 *
+		 * @param  {[type]} event [description]
+		 * @return {[type]}       [description]
 		 */
-		removeFromSelection: function( event ) {
+		checkClickHandler: function ( event ) {
 			var selection = this.options.selection;
 			if ( ! selection ) {
 				return;
 			}
-
-			// Stop propagation so the model isn't selected.
 			event.stopPropagation();
-
-			selection.remove( this.model );
+			if ( selection.where( { id: this.model.get( 'id' ) } ).length ) {
+				selection.remove( this.model );
+			} else {
+				selection.add( this.model );
+			}
 		}
 	});
 
@@ -5657,17 +5659,10 @@
 					priority: -90
 				}).render() );
 
-				this.toolbar.set( 'bulkSelectionToggleButton', new media.view.BulkSelectionToggleButton({
-					text: 'Bulk Edit',
-					controller: this.controller,
-					priority: -70
-				}).render() );
-
-				this.toolbar.set( 'BulkDeleteButton', new media.view.BulkDeleteButton({
-					text: 'Bulk Delete',
-					controller: this.controller,
-					priority: -69
-				}).render() );
+				this.toolbar.set( 'BulkSelection', new media.view.BulkSelection({
+  					controller: this.controller,
+  					priority: -70
+  				}).render() );
 			}
 
 			filters = this.options.filters;

wp-includes/media-template.php

@@ -397,11 +397,6 @@ function wp_print_media_templates() {
 	</script>
 
 	<script type="text/html" id="tmpl-attachment">
-		<# if ( _.contains( data.controller.options.mode, 'grid' ) ) { #>
-		<div class="inline-toolbar js--select-attachment">
-			<div class="dashicons dashicons-edit edit edit-media"></div>
-		</div>
-		<# } #>
 		<div class="attachment-preview js--select-attachment type-{{ data.type }} subtype-{{ data.subtype }} {{ data.orientation }}">
 			<# if ( data.uploading ) { #>
 				<div class="media-progress-bar"><div></div></div>
@@ -424,11 +419,15 @@ function wp_print_media_templates() {
 			<# if ( data.buttons.close ) { #>
 				<a class="close media-modal-icon" href="#" title="<?php esc_attr_e('Remove'); ?>"></a>
 			<# } #>
-
-			<# if ( data.buttons.check ) { #>
-				<a class="check" href="#" title="<?php esc_attr_e('Deselect'); ?>" tabindex="-1"><div class="media-modal-icon"></div></a>
-			<# } #>
 		</div>
+		<# if ( _.contains( data.controller.options.mode, 'grid' ) ) { #>
+		<div class="inline-toolbar js--select-attachment">
+			<div class="dashicons dashicons-edit edit edit-media"></div>
+		</div>
+		<# } #>
+		<# if ( data.buttons.check ) { #>
+			<a class="check" href="#" title="<?php esc_attr_e('Deselect'); ?>" tabindex="-1"><div class="media-modal-icon"></div></a>
+		<# } #>
 		<#
 		var maybeReadOnly = data.can.save || data.allowLocalEdits ? '' : 'readonly';
 		if ( data.describe ) {

wp-includes/media.php

@@ -2896,18 +2896,22 @@ function wp_enqueue_media( $args = array() ) {
 		'uploadImagesTitle' => __( 'Upload Images' ),
 
 		// Library
-		'mediaLibraryTitle'  => __( 'Media Library' ),
-		'insertMediaTitle'   => __( 'Insert Media' ),
-		'createNewGallery'   => __( 'Create a new gallery' ),
-		'createNewPlaylist'   => __( 'Create a new playlist' ),
-		'createNewVideoPlaylist'   => __( 'Create a new video playlist' ),
-		'returnToLibrary'    => __( '← Return to library' ),
-		'allMediaItems'      => __( 'All media items' ),
-		'allMediaTypes'      => __( 'All media types' ),
-		'noItemsFound'       => __( 'No items found.' ),
-		'insertIntoPost'     => $hier ? __( 'Insert into page' ) : __( 'Insert into post' ),
-		'uploadedToThisPost' => $hier ? __( 'Uploaded to this page' ) : __( 'Uploaded to this post' ),
-		'warnDelete' =>      __( "You are about to permanently delete this item.\n  'Cancel' to stop, 'OK' to delete." ),
+		'mediaLibraryTitle'      => __( 'Media Library' ),
+		'insertMediaTitle'       => __( 'Insert Media' ),
+		'createNewGallery'       => __( 'Create a new gallery' ),
+		'createNewPlaylist'      => __( 'Create a new playlist' ),
+		'createNewVideoPlaylist' => __( 'Create a new video playlist' ),
+		'returnToLibrary'        => __( '← Return to library' ),
+		'allMediaItems'          => __( 'All media items' ),
+		'allMediaTypes'          => __( 'All media types' ),
+		'noItemsFound'           => __( 'No items found.' ),
+		'insertIntoPost'         => $hier ? __( 'Insert into page' ) : __( 'Insert into post' ),
+		'uploadedToThisPost'     => $hier ? __( 'Uploaded to this page' ) : __( 'Uploaded to this post' ),
+		'warnDelete'             => __( "You are about to permanently delete this item.\n  'Cancel' to stop, 'OK' to delete." ),
+		'warnBulkDelete'         => __( "You are about to permanently delete these items.\n  'Cancel' to stop, 'OK' to delete." ),
+		'bulkActions'            => __( 'Bulk Actions' ),
+		'deletePermanently'      => __( 'Delete Permanently' ),
+		'apply'                  => __( 'Apply' ),
 
 		// Library Details
 		'attachmentDetails'  => __( 'Attachment Details' ),