Media: Add selection count display for bulk select mode in the Media Library

src/js/_enqueues/wp/media/grid.js

@@ -13,3 +13,4 @@ media.view.MediaFrame.EditAttachments = require( '../../../media/views/frame/edi
 media.view.SelectModeToggleButton = require( '../../../media/views/button/select-mode-toggle.js' );
 media.view.DeleteSelectedButton = require( '../../../media/views/button/delete-selected.js' );
 media.view.DeleteSelectedPermanentlyButton = require( '../../../media/views/button/delete-selected-permanently.js' );
+media.view.SelectionCount = require( '../../../media/views/selection-count.js' );

src/js/media/views/attachments/browser.js

@@ -261,6 +261,11 @@ AttachmentsBrowser = View.extend(/** @lends wp.media.view.AttachmentsBrowser.pro
 				priority: -70
 			}).render() );
 
+			this.toolbar.set( 'selectionCount', new wp.media.view.SelectionCount({
+				controller: this.controller,
+				priority: -60
+			}).render() );
+
 			this.toolbar.set( 'deleteSelectedButton', new wp.media.view.DeleteSelectedButton({
 				filters: Filters,
 				style: 'primary',

src/js/media/views/button/select-mode-toggle.js

@@ -59,6 +59,7 @@ SelectModeToggle = Button.extend(/** @lends wp.media.view.SelectModeToggle.proto
 			this.$el.show();
 			toolbar.$el.addClass( 'media-toolbar-mode-select' );
 			toolbar.$( '.delete-selected-button' ).removeClass( 'hidden' );
+			toolbar.$( '.selection-count' ).removeClass( 'hidden' );
 		} else {
 			this.model.set( {
 				size: '',
@@ -68,6 +69,7 @@ SelectModeToggle = Button.extend(/** @lends wp.media.view.SelectModeToggle.proto
 			toolbar.$el.css( 'width', '' );
 			toolbar.$el.removeClass( 'media-toolbar-mode-select' );
 			toolbar.$( '.delete-selected-button' ).addClass( 'hidden' );
+			toolbar.$( '.selection-count' ).addClass( 'hidden' );
 			children.not( '.media-button' ).show();
 			this.controller.state().get( 'selection' ).reset();
 		}

src/js/media/views/selection-count.js

@@ -0,0 +1,44 @@
+var View = wp.media.View,
+	_n = wp.i18n._n,
+	sprintf = wp.i18n.sprintf,
+	SelectionCount;
+
+/**
+ * wp.media.view.SelectionCount
+ *
+ * Displays the number of selected items during bulk select mode in the
+ * Media Library grid view.
+ *
+ * @memberOf wp.media.view
+ *
+ * @class
+ * @augments wp.media.View
+ * @augments wp.Backbone.View
+ * @augments Backbone.View
+ */
+SelectionCount = View.extend(/** @lends wp.media.view.SelectionCount.prototype */{
+	tagName:   'div',
+	className: 'selection-count media-button hidden',
+
+	initialize: function() {
+		this.controller.on( 'selection:toggle', this.updateCount, this );
+		this.controller.on( 'select:activate', this.updateCount, this );
+	},
+
+	updateCount: function() {
+		var count = this.controller.state().get( 'selection' ).length;
+
+		this.$el.text(
+			/* translators: %s: Number of selected media items. */
+			sprintf( _n( '%s item selected', '%s items selected', count ), count )
+		);
+	},
+
+	render: function() {
+		View.prototype.render.apply( this, arguments );
+		this.updateCount();
+		return this;
+	}
+});
+
+module.exports = SelectionCount;

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

@@ -1300,6 +1300,18 @@ select#media-attachment-date-filters {
 	display: none;
 }
 
+.attachments-browser .media-toolbar-secondary .selection-count {
+	display: inline-block;
+	font-weight: 600;
+	line-height: 2;
+	padding: 0 10px;
+	vertical-align: middle;
+}
+
+.attachments-browser .media-toolbar-secondary .selection-count.hidden {
+	display: none;
+}
+
 .attachments-browser .media-toolbar-secondary {
 	max-width: 66%;
 }