From 89db62d47f88638614c790c0669c4c0cc668a647 Mon Sep 17 00:00:00 2001
From: Kamran Abdul Aziz <kamran@shifteq.com>
Date: Wed, 21 Oct 2026 13:28:41 +0530
Subject: [PATCH] Media: Use plural forms for the "Load more" media item count.

The "Load more" count used `__( 'Showing %1$s of %2$s media items' )`,
which reads "Showing 1 of 1 media items" for a single media item and
gives translators no plural forms. Its translators comment was above
`sprintf()`, so it was not extracted. Use `_n()` with the plural form
following the total, and move the comment above the `_n()` call.

Adds a QUnit test for the count text.

See #66357.
---
 src/js/media/views/attachments/browser.js     |  9 ++-
 tests/qunit/index.html                        |  1 +
 .../js/media/test-attachments-browser.js      | 63 +++++++++++++++++++
 3 files changed, 71 insertions(+), 2 deletions(-)
 create mode 100644 tests/qunit/wp-includes/js/media/test-attachments-browser.js

diff --git a/src/js/media/views/attachments/browser.js b/src/js/media/views/attachments/browser.js
index 8d7d4dca51b76..d464ad6afe18f 100644
--- a/src/js/media/views/attachments/browser.js
+++ b/src/js/media/views/attachments/browser.js
@@ -5,6 +5,7 @@ var View = wp.media.View,
 	AttachmentsBrowser,
 	infiniteScrolling = wp.media.view.settings.infiniteScrolling,
 	__ = wp.i18n.__,
+	_n = wp.i18n._n,
 	sprintf = wp.i18n.sprintf;
 
 /**
@@ -606,9 +607,13 @@ AttachmentsBrowser = View.extend(/** @lends wp.media.view.AttachmentsBrowser.pro
 
 		if ( this.collection.length ) {
 			this.loadMoreCount.$el.text(
-				/* translators: 1: Number of displayed attachments, 2: Number of total attachments. */
 				sprintf(
-					__( 'Showing %1$s of %2$s media items' ),
+					/* translators: 1: Number of displayed attachments, 2: Number of total attachments. */
+					_n(
+						'Showing %1$s of %2$s media item',
+						'Showing %1$s of %2$s media items',
+						this.collection.getTotalAttachments()
+					),
 					this.collection.length,
 					this.collection.getTotalAttachments()
 				)
diff --git a/tests/qunit/index.html b/tests/qunit/index.html
index f9033a776151c..55e4bd4dabe2d 100644
--- a/tests/qunit/index.html
+++ b/tests/qunit/index.html
@@ -205,6 +205,7 @@
 		<script src="wp-admin/js/widgets/test-media-video-widget.js"></script>
 		<script src="wp-includes/js/media/test-models.js"></script>
 		<script src="wp-includes/js/media/test-attachment-view.js"></script>
+		<script src="wp-includes/js/media/test-attachments-browser.js"></script>
 
 		<!-- Customizer templates for sections -->
 		<script type="text/html" id="tmpl-customize-section-default">
diff --git a/tests/qunit/wp-includes/js/media/test-attachments-browser.js b/tests/qunit/wp-includes/js/media/test-attachments-browser.js
new file mode 100644
index 0000000000000..5d439e5d7694d
--- /dev/null
+++ b/tests/qunit/wp-includes/js/media/test-attachments-browser.js
@@ -0,0 +1,63 @@
+/* globals wp, jQuery */
+/* jshint qunit: true */
+/* eslint-env qunit */
+
+( function() {
+	'use strict';
+
+	QUnit.module( 'wp.media.view.AttachmentsBrowser' );
+
+	/**
+	 * Creates the parts of an attachments browser that updateLoadMoreView() reads and updates.
+	 *
+	 * @since 7.2.0
+	 *
+	 * @param {number} displayed Number of media items shown in the browser.
+	 * @param {number} total     Number of media items in the library.
+	 * @return {Object} The browser parts.
+	 */
+	function createBrowserParts( displayed, total ) {
+		return {
+			$el: jQuery( '<div></div>' ),
+			loadMoreButton: { $el: jQuery( '<button></button>' ) },
+			loadMoreCount: { $el: jQuery( '<p></p>' ) },
+			loadMoreJumpToFirst: { $el: jQuery( '<button></button>' ) },
+			collection: {
+				length: displayed,
+				getTotalAttachments: function() {
+					return total;
+				},
+				hasMore: function() {
+					return displayed < total;
+				}
+			}
+		};
+	}
+
+	QUnit.test( 'The load more count uses the plural form for the total number of media items.', function( assert ) {
+		var done = assert.async(),
+			browser = wp.media.view.AttachmentsBrowser.prototype,
+			one = createBrowserParts( 1, 1 ),
+			two = createBrowserParts( 1, 2 );
+
+		/*
+		 * updateLoadMoreView() is an underscore debounce, which measures its wait
+		 * with the real Date.now(), so it cannot run on this suite's fake timers.
+		 * Use real timers, clear any pending call, and run one update at a time,
+		 * since the debounced function is shared by all browsers.
+		 */
+		this.clock.restore();
+		browser.updateLoadMoreView.cancel();
+
+		browser.updateLoadMoreView.call( one );
+		setTimeout( function() {
+			assert.strictEqual( one.loadMoreCount.$el.text(), 'Showing 1 of 1 media item', 'One media item in total uses the singular form.' );
+
+			browser.updateLoadMoreView.call( two );
+			setTimeout( function() {
+				assert.strictEqual( two.loadMoreCount.$el.text(), 'Showing 1 of 2 media items', 'Two media items in total use the plural form.' );
+				done();
+			}, 50 );
+		}, 50 );
+	} );
+} )();