Media Grid/List Table parity: when `MEDIA_TRASH` is `true` and `trash` is the current filter for the grid, add a second bulk action button: "Delete Selected"

Fixes #29742.


git-svn-id: https://develop.svn.wordpress.org/trunk@29811 602fd350-edb4-49c9-b593-d223f7449a82

src/wp-admin/css/media.css

@@ -585,7 +585,7 @@ border color while dragging a file over the uploader drop area */
 	margin-top: 15px;
 }
 
-.attachments-browser .media-toolbar-secondary > .select-mode-toggle-button {
+.attachments-browser .media-toolbar-secondary > .media-button {
 	margin-right: 10px;
 }
 

src/wp-includes/js/media-grid.js

@@ -630,22 +630,32 @@
 
 			children = toolbar.$( '.media-toolbar-secondary > *, .media-toolbar-primary > *');
 
+			// TODO: the Frame should be doing all of this.
 			if ( this.controller.isModeActive( 'select' ) ) {
 				this.model.set( 'text', l10n.cancelSelection );
-				children.not( '.delete-selected-button' ).hide();
-				toolbar.$( '.select-mode-toggle-button' ).show();
+				children.not( '.media-button' ).hide();
+				this.$el.show();
 				toolbar.$( '.delete-selected-button' ).removeClass( 'hidden' );
 			} else {
 				this.model.set( 'text', l10n.bulkSelect );
-				this.controller.content.get().$el.removeClass('fixed');
-				toolbar.$el.css('width', '');
+				this.controller.content.get().$el.removeClass( 'fixed' );
+				toolbar.$el.css( 'width', '' );
 				toolbar.$( '.delete-selected-button' ).addClass( 'hidden' );
-				children.not( '.spinner, .delete-selected-button' ).show();
+				children.not( '.spinner, .media-button' ).show();
 				this.controller.state().get( 'selection' ).reset();
 			}
 		}
 	});
 
+	/**
+	 * A button that handles bulk Delete/Trash logic
+	 *
+	 * @constructor
+	 * @augments wp.media.view.Button
+	 * @augments wp.media.View
+	 * @augments wp.Backbone.View
+	 * @augments Backbone.View
+	 */
 	media.view.DeleteSelectedButton = media.view.Button.extend({
 		initialize: function() {
 			media.view.Button.prototype.initialize.apply( this, arguments );
@@ -676,6 +686,45 @@
 			} else {
 				this.$el.addClass( 'delete-selected-button hidden' );
 			}
+			this.toggleDisabled();
+			return this;
+		}
+	});
+
+	/**
+	 * When MEDIA_TRASH is true, a button that handles bulk Delete Permanently logic
+	 *
+	 * @constructor
+	 * @augments wp.media.view.DeleteSelectedButton
+	 * @augments wp.media.view.Button
+	 * @augments wp.media.View
+	 * @augments wp.Backbone.View
+	 * @augments Backbone.View
+	 */
+	media.view.DeleteSelectedPermanentlyButton = media.view.DeleteSelectedButton.extend({
+		initialize: function() {
+			media.view.DeleteSelectedButton.prototype.initialize.apply( this, arguments );
+			this.listenTo( this.controller, 'select:activate', this.selectActivate );
+			this.listenTo( this.controller, 'select:deactivate', this.selectDeactivate );
+		},
+
+		filterChange: function( model ) {
+			this.canShow = ( 'trash' === model.get( 'status' ) );
+		},
+
+		selectActivate: function() {
+			this.toggleDisabled();
+			this.$el.toggleClass( 'hidden', ! this.canShow );
+		},
+
+		selectDeactivate: function() {
+			this.toggleDisabled();
+			this.$el.addClass( 'hidden' );
+		},
+
+		render: function() {
+			media.view.Button.prototype.render.apply( this, arguments );
+			this.selectActivate();
 			return this;
 		}
 	});

src/wp-includes/js/media-views.js

@@ -6079,6 +6079,41 @@
 						}
 					}
 				}).render() );
+
+				if ( media.view.settings.mediaTrash ) {
+					this.toolbar.set( 'deleteSelectedPermanentlyButton', new media.view.DeleteSelectedPermanentlyButton({
+						filters: Filters,
+						style: 'primary',
+						disabled: true,
+						text: l10n.deleteSelected,
+						controller: this.controller,
+						priority: -55,
+						click: function() {
+							var removed = [], selection = this.controller.state().get( 'selection' );
+
+							if ( ! selection.length ) {
+								return;
+							}
+
+							if ( ! confirm( l10n.warnBulkDelete ) ) {
+								return;
+							}
+
+							selection.each( function( model ) {
+								if ( ! model.get( 'nonces' )['delete'] ) {
+									removed.push( model );
+									return;
+								}
+
+								model.destroy();
+							} );
+
+							selection.remove( removed );
+							this.controller.trigger( 'selection:action:done' );
+						}
+					}).render() );
+				}
+
 			}
 
 			if ( this.options.search ) {