From fad09b59fd30983f8def3b640b5db3785ead8a75 Mon Sep 17 00:00:00 2001
From: AKSHAT2802 <akshat.kakkad2802@gmail.com>
Date: Fri, 5 Jun 2026 12:15:02 +0530
Subject: [PATCH] Media: Add selection count display for bulk select mode in
 the Media Library

---
 src/js/_enqueues/wp/media/grid.js             |  1 +
 src/js/media/views/attachments/browser.js     |  5 +++
 .../media/views/button/select-mode-toggle.js  |  2 +
 src/js/media/views/selection-count.js         | 44 +++++++++++++++++++
 src/wp-includes/css/media-views.css           | 12 +++++
 5 files changed, 64 insertions(+)
 create mode 100644 src/js/media/views/selection-count.js

diff --git a/src/js/_enqueues/wp/media/grid.js b/src/js/_enqueues/wp/media/grid.js
index 06dacba48ebb7..3f1f226cee07e 100644
--- a/src/js/_enqueues/wp/media/grid.js
+++ b/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' );
diff --git a/src/js/media/views/attachments/browser.js b/src/js/media/views/attachments/browser.js
index 26218ea2fa1ae..b1f3c7f9da914 100644
--- a/src/js/media/views/attachments/browser.js
+++ b/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',
diff --git a/src/js/media/views/button/select-mode-toggle.js b/src/js/media/views/button/select-mode-toggle.js
index 2c2335bcd56f6..ee25288703816 100644
--- a/src/js/media/views/button/select-mode-toggle.js
+++ b/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();
 		}
diff --git a/src/js/media/views/selection-count.js b/src/js/media/views/selection-count.js
new file mode 100644
index 0000000000000..8214cbc818788
--- /dev/null
+++ b/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;
diff --git a/src/wp-includes/css/media-views.css b/src/wp-includes/css/media-views.css
index 0feac6b178d7f..0575da9591a9e 100644
--- a/src/wp-includes/css/media-views.css
+++ b/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%;
 }