Mirror WordPress plugin install text for blocks

packages/block-directory/src/components/downloadable-block-info/index.js

@@ -1,16 +1,34 @@
 /**
  * WordPress dependencies
  */
-import { __, _n, sprintf } from '@wordpress/i18n';
+import { __, sprintf } from '@wordpress/i18n';
 import { decodeEntities } from '@wordpress/html-entities';
 import { Fragment } from '@wordpress/element';
 import { Icon, update, chartLine } from '@wordpress/icons';
 
 function DownloadableBlockInfo( {
-	description,
 	activeInstalls,
+	description,
 	humanizedUpdated,
 } ) {
+	let activeInstallsString;
+
+	if ( activeInstalls > 1000000 ) {
+		activeInstallsString = sprintf(
+			/* translators: %d: number of active installations. */
+			__( '%d+ Million active installations' ),
+			Math.floor( activeInstalls / 1000000 )
+		);
+	} else if ( 0 === activeInstalls ) {
+		activeInstallsString = __( 'Less than 10 active installations' );
+	} else {
+		activeInstallsString = sprintf(
+			/* translators: %d: number of active installations. */
+			__( '%d+ active installations' ),
+			activeInstalls
+		);
+	}
+
 	return (
 		<Fragment>
 			<p className="block-directory-downloadable-block-info__content">
@@ -21,15 +39,7 @@ function DownloadableBlockInfo( {
 					className="block-directory-downloadable-block-info__icon"
 					icon={ chartLine }
 				/>
-				{ sprintf(
-					/* translators: %s: number of active installations. */
-					_n(
-						'%d active installation',
-						'%d active installations',
-						activeInstalls
-					),
-					activeInstalls
-				) }
+				{ activeInstallsString }
 			</div>
 			<div className="block-directory-downloadable-block-info__meta">
 				<Icon

packages/block-directory/src/components/downloadable-block-info/test/index.js

@@ -0,0 +1,44 @@
+/**
+ * External dependencies
+ */
+import { shallow } from 'enzyme';
+
+/**
+ * Internal dependencies
+ */
+import DownloadableBlockInfo from '../index';
+
+describe( 'DownloadableBlockInfo', () => {
+	const metaSelector = '.block-directory-downloadable-block-info__meta';
+	describe( 'Active Installs Count', () => {
+		it( 'should display the correct count for over a million installs', () => {
+			const wrapper = shallow(
+				<DownloadableBlockInfo activeInstalls={ 10000000 } />
+			);
+
+			const count = wrapper.find( metaSelector ).first().text();
+
+			expect( count ).toContain( '10+ Million' );
+		} );
+
+		it( 'should display the correct count for 0 installs', () => {
+			const wrapper = shallow(
+				<DownloadableBlockInfo activeInstalls={ 0 } />
+			);
+
+			const count = wrapper.find( metaSelector ).first().text();
+
+			expect( count ).toContain( 'Less than 10 active installations' );
+		} );
+
+		it( 'should display the correct count for 10+ and less than a Million installs', () => {
+			const wrapper = shallow(
+				<DownloadableBlockInfo activeInstalls={ 100 } />
+			);
+
+			const count = wrapper.find( metaSelector ).first().text();
+
+			expect( count ).toContain( '100+ active installations' );
+		} );
+	} );
+} );