Ticket #24716: 24716.45.diff

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

@@ -903 +903 @@
         display: block;
 }
 
-.attachment.details {
+.attachment.details,
+.media-grid-view .selected.attachment {
         -webkit-box-shadow: 0 0 0 1px #fff,
                                 0 0 0 5px #1e8cbe;
         box-shadow: 0 0 0 1px #fff,
                                 0 0 0 5px #1e8cbe;
 }
 
-.attachment.details .check {
+.attachment.details .check,
+.media-grid-view .attachment .check {
         background-color: #1e8cbe;
         -webkit-box-shadow: 0 0 0 1px #fff,
                                 0 0 0 2px #1e8cbe;
@@ -918 +920 @@
                                 0 0 0 2px #1e8cbe;
 }
 
-.attachment.details .check div {
+.attachment.details .check div,
+.media-grid-view .attachment .check div {
         background-position: -21px 0;
 }
 
-.attachment.details .check:hover div {
+.attachment.details .check:hover div,
+.media-grid-view .attachment .check:hover div {
         background-position: -60px 0;
 }
 

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

@@ -608 +608 @@
                         media.view.Button.prototype.click.apply( this, arguments );
 
                         if ( bulkEditActive ) {
-                                this.controller.deactivateMode( 'bulk-edit' );
-                                this.controller.activateMode( 'edit' );
+                                this.controller.deactivateMode( 'bulk-edit' )
+                                        .activateMode( 'edit' );
                         } else {
-                                this.controller.deactivateMode( 'edit' );
-                                this.controller.activateMode( 'bulk-edit' );
+                                this.controller.deactivateMode( 'edit' )
+                                        .activateMode( 'bulk-edit' );
                         }
                 },
 

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

@@ -1970 +1970 @@
                         eventToTrigger = model.get('id') + ':' + modeEventMap[collectionEvent];
                         this.trigger( eventToTrigger );
                 },
+                /**
+                 * Activate a mode on the frame.
+                 *
+                 * @param string mode Mode ID.
+                 * @returns {this} Returns itself to allow chaining.
+                 */
                 activateMode: function( mode ) {
-                        if ( this.activeModes.where( { id: mode } ).length ) {
+                        // Bail if the mode is already active.
+                        if ( this.isModeActive( mode ) ) {
                                 return;
                         }
                         this.activeModes.add( [ { id: mode } ] );
+                        // Add a css class to the frame for anything that needs to be styled
+                        // for the mode.
                         this.$el.addClass( 'mode-' + mode );
+                        /**
+                         * Frame mode activation event.
+                         *
+                         * @event this#{mode}:activate
+                         */
                         this.trigger( mode + ':activate' );
+
+                        return this;
                 },
+                /**
+                 * Deactivate a mode on the frame.
+                 *
+                 * @param string mode Mode ID.
+                 * @returns {this} Returns itself to allow chaining.
+                 */
                 deactivateMode: function( mode ) {
                         // Bail if the mode isn't active.
-                        if ( ! this.activeModes.where( { id: mode } ).length ) {
+                        if ( ! this.isModeActive( mode ) ) {
                                 return;
                         }
                         this.activeModes.remove( this.activeModes.where( { id: mode } ) );
                         this.$el.removeClass( 'mode-' + mode );
+                        /**
+                         * Frame mode deactivation event.
+                         *
+                         * @event this#{mode}:deactivate
+                         */
                         this.trigger( mode + ':deactivate' );
+
+                        return this;
+                },
+                /**
+                 * Check if a mode is enabled on the frame.
+                 *
+                 * @param  string mode Mode ID.
+                 * @return bool
+                 */
+                isModeActive: function( mode ) {
+                        return Boolean( this.activeModes.where( { id: mode } ).length );
                 }
         });
 
@@ -4819 +4857 @@
                  */
                 details: function( model, collection ) {
                         var selection = this.options.selection,
-                                details;
+                                details,
+                                addAttachmentDetailsClass;
 
                         if ( selection !== collection ) {
                                 return;
                         }
 
-                        details = selection.single();
-                        this.$el.toggleClass( 'details', details === this.model );
+                        // In bulk edit mode (in media grid), attachments don't open the "details"
+                        // pane, so a `details` class is unnecessary on the attachment view.
+                        addAttachmentDetailsClass = ! this.controller.isModeActive( 'bulk-edit' );
+
+                        if ( addAttachmentDetailsClass ) {
+                                details = selection.single();
+                                this.$el.toggleClass( 'details', details === this.model );
+                        }
+
                 },
                 /**
                  * @param {Object} event