From f25bab88d39a4b35384f21950d886b83a78dc6b0 Mon Sep 17 00:00:00 2001
From: James Koster <james@jameskoster.co.uk>
Date: Mon, 22 Jul 2024 16:39:54 +0100
Subject: [PATCH 01/14] Apply minimal variant to pagination dropdown

---
 .../components/dataviews-pagination/index.tsx | 61 +++++++++----------
 .../dataviews-pagination/style.scss           | 10 +--
 2 files changed, 35 insertions(+), 36 deletions(-)

diff --git a/packages/dataviews/src/components/dataviews-pagination/index.tsx b/packages/dataviews/src/components/dataviews-pagination/index.tsx
index f8ebf41469d949..f325fbc1a76dc7 100644
--- a/packages/dataviews/src/components/dataviews-pagination/index.tsx
+++ b/packages/dataviews/src/components/dataviews-pagination/index.tsx
@@ -40,38 +40,35 @@ function DataViewsPagination() {
 					spacing={ 2 }
 					className="dataviews-pagination__page-selection"
 				>
-					{ createInterpolateElement(
-						sprintf(
-							// translators: %s: Total number of pages.
-							_x( 'Page <CurrentPageControl /> of %s', 'paging' ),
-							totalPages
-						),
-						{
-							CurrentPageControl: (
-								<SelectControl
-									aria-label={ __( 'Current page' ) }
-									value={ view.page?.toString() }
-									options={ Array.from(
-										Array( totalPages )
-									).map( ( _, i ) => {
-										const page = i + 1;
-										return {
-											value: page.toString(),
-											label: page.toString(),
-										};
-									} ) }
-									onChange={ ( newValue ) => {
-										onChangeView( {
-											...view,
-											page: +newValue,
-										} );
-									} }
-									size="compact"
-									__nextHasNoMarginBottom
-								/>
-							),
-						}
-					) }
+					<SelectControl
+						aria-label={ __( 'Current page' ) }
+						value={ view.page?.toString() }
+						options={ Array.from( Array( totalPages ) ).map(
+							( _, i ) => {
+								const page = i + 1;
+								return {
+									value: page.toString(),
+									label:
+										__( 'Page ' ) +
+										page.toString() +
+										sprintf(
+											// translators: %s: Total number of pages.
+											_x( ' of %s', 'paging' ),
+											totalPages
+										),
+								};
+							}
+						) }
+						onChange={ ( newValue ) => {
+							onChangeView( {
+								...view,
+								page: +newValue,
+							} );
+						} }
+						size="compact"
+						__nextHasNoMarginBottom
+						variant="minimal"
+					/>
 				</HStack>
 				<HStack expanded={ false } spacing={ 1 }>
 					<Button
diff --git a/packages/dataviews/src/components/dataviews-pagination/style.scss b/packages/dataviews/src/components/dataviews-pagination/style.scss
index 4e754ab90fa54a..e783e3316df7bf 100644
--- a/packages/dataviews/src/components/dataviews-pagination/style.scss
+++ b/packages/dataviews/src/components/dataviews-pagination/style.scss
@@ -12,10 +12,12 @@
 }
 
 .dataviews-pagination__page-selection {
-	font-size: 11px;
-	text-transform: uppercase;
-	font-weight: 500;
-	color: $gray-900;
+	.components-select-control__input {
+		&:hover,
+		&:focus {
+			color: $gray-900;
+		}
+	}
 }
 
 /* stylelint-disable-next-line scss/at-rule-no-unknown -- '@container' not globally permitted */

From 9577f1a8951da4a7ed5bf64e7438be23a1353515 Mon Sep 17 00:00:00 2001
From: James Koster <james@jameskoster.co.uk>
Date: Tue, 23 Jul 2024 17:46:06 +0100
Subject: [PATCH 02/14] Update labels

---
 .../src/components/dataviews-pagination/index.tsx  | 14 ++++++--------
 1 file changed, 6 insertions(+), 8 deletions(-)

diff --git a/packages/dataviews/src/components/dataviews-pagination/index.tsx b/packages/dataviews/src/components/dataviews-pagination/index.tsx
index f325fbc1a76dc7..c241488af315b8 100644
--- a/packages/dataviews/src/components/dataviews-pagination/index.tsx
+++ b/packages/dataviews/src/components/dataviews-pagination/index.tsx
@@ -48,14 +48,12 @@ function DataViewsPagination() {
 								const page = i + 1;
 								return {
 									value: page.toString(),
-									label:
-										__( 'Page ' ) +
-										page.toString() +
-										sprintf(
-											// translators: %s: Total number of pages.
-											_x( ' of %s', 'paging' ),
-											totalPages
-										),
+									label: sprintf(
+										// translators: 1: Current page number, 2: Total number of pages
+										__( 'Page %1$s of %2$s' ),
+										page.toString(),
+										totalPages
+									),
 								};
 							}
 						) }

From 8d1c4f37925a0f81a0a1b896757a5f37721e2910 Mon Sep 17 00:00:00 2001
From: James Koster <james@jameskoster.co.uk>
Date: Tue, 23 Jul 2024 17:48:25 +0100
Subject: [PATCH 03/14] Fix alignment in list layout

---
 packages/dataviews/src/layouts/list/style.scss | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/packages/dataviews/src/layouts/list/style.scss b/packages/dataviews/src/layouts/list/style.scss
index 09f29a73b74d2d..6845533566f876 100644
--- a/packages/dataviews/src/layouts/list/style.scss
+++ b/packages/dataviews/src/layouts/list/style.scss
@@ -185,5 +185,9 @@
 
 	& + .dataviews-pagination {
 		justify-content: space-between;
+
+		.dataviews-pagination__page-selection {
+			margin-left: - $grid-unit-10; // Offset the padding applied to the SelectControl
+		}
 	}
 }

From a74a9dce597d7b3530e3fb0c3d735cbe9b9a262a Mon Sep 17 00:00:00 2001
From: James Koster <james@jameskoster.co.uk>
Date: Wed, 24 Jul 2024 11:57:44 +0100
Subject: [PATCH 04/14] Add visible inline label

---
 .../src/components/dataviews-pagination/index.tsx |  6 ++++--
 .../components/dataviews-pagination/style.scss    | 15 +++++++++++++++
 2 files changed, 19 insertions(+), 2 deletions(-)

diff --git a/packages/dataviews/src/components/dataviews-pagination/index.tsx b/packages/dataviews/src/components/dataviews-pagination/index.tsx
index c241488af315b8..26fe2c50101171 100644
--- a/packages/dataviews/src/components/dataviews-pagination/index.tsx
+++ b/packages/dataviews/src/components/dataviews-pagination/index.tsx
@@ -37,11 +37,13 @@ function DataViewsPagination() {
 				<HStack
 					justify="flex-start"
 					expanded={ false }
-					spacing={ 2 }
+					spacing={ 0 }
 					className="dataviews-pagination__page-selection"
 				>
 					<SelectControl
 						aria-label={ __( 'Current page' ) }
+						label={ __( 'Page:' ) }
+						labelPosition="side"
 						value={ view.page?.toString() }
 						options={ Array.from( Array( totalPages ) ).map(
 							( _, i ) => {
@@ -50,7 +52,7 @@ function DataViewsPagination() {
 									value: page.toString(),
 									label: sprintf(
 										// translators: 1: Current page number, 2: Total number of pages
-										__( 'Page %1$s of %2$s' ),
+										__( '%1$s of %2$s' ),
 										page.toString(),
 										totalPages
 									),
diff --git a/packages/dataviews/src/components/dataviews-pagination/style.scss b/packages/dataviews/src/components/dataviews-pagination/style.scss
index e783e3316df7bf..ddbc79dce4c863 100644
--- a/packages/dataviews/src/components/dataviews-pagination/style.scss
+++ b/packages/dataviews/src/components/dataviews-pagination/style.scss
@@ -12,7 +12,22 @@
 }
 
 .dataviews-pagination__page-selection {
+	.components-select-control {
+		gap: $grid-unit-05;
+	}
+
+	.components-input-control__container {
+		font-size: 11px;
+		font-weight: 500;
+		text-transform: uppercase;
+	}
+
 	.components-select-control__input {
+		font-size: 11px !important;
+		line-height: $default-line-height; // Override wp-admin style bleed
+		font-weight: 500;
+		text-transform: uppercase;
+
 		&:hover,
 		&:focus {
 			color: $gray-900;

From 18612a30d1c7a47fffa7924a4cf97cf3684012d6 Mon Sep 17 00:00:00 2001
From: James Koster <james@jameskoster.co.uk>
Date: Wed, 24 Jul 2024 12:23:48 +0100
Subject: [PATCH 05/14] Use suffix

---
 .../components/dataviews-pagination/index.tsx | 23 +++++++++++--------
 .../dataviews-pagination/style.scss           | 11 +++++++++
 2 files changed, 24 insertions(+), 10 deletions(-)

diff --git a/packages/dataviews/src/components/dataviews-pagination/index.tsx b/packages/dataviews/src/components/dataviews-pagination/index.tsx
index 26fe2c50101171..ac90e216070f64 100644
--- a/packages/dataviews/src/components/dataviews-pagination/index.tsx
+++ b/packages/dataviews/src/components/dataviews-pagination/index.tsx
@@ -6,9 +6,9 @@ import {
 	__experimentalHStack as HStack,
 	SelectControl,
 } from '@wordpress/components';
-import { createInterpolateElement, memo, useContext } from '@wordpress/element';
+import { memo, useContext } from '@wordpress/element';
 import { sprintf, __, _x } from '@wordpress/i18n';
-import { next, previous } from '@wordpress/icons';
+import { Icon, next, previous, chevronDownSmall } from '@wordpress/icons';
 
 /**
  * Internal dependencies
@@ -42,20 +42,13 @@ function DataViewsPagination() {
 				>
 					<SelectControl
 						aria-label={ __( 'Current page' ) }
-						label={ __( 'Page:' ) }
-						labelPosition="side"
 						value={ view.page?.toString() }
 						options={ Array.from( Array( totalPages ) ).map(
 							( _, i ) => {
 								const page = i + 1;
 								return {
 									value: page.toString(),
-									label: sprintf(
-										// translators: 1: Current page number, 2: Total number of pages
-										__( '%1$s of %2$s' ),
-										page.toString(),
-										totalPages
-									),
+									label: page.toString(),
 								};
 							}
 						) }
@@ -68,6 +61,16 @@ function DataViewsPagination() {
 						size="compact"
 						__nextHasNoMarginBottom
 						variant="minimal"
+						suffix={
+							<span className="dataviews-pagination__page-selection-suffix">
+								{ sprintf(
+									// translators: Total number of pages
+									__( 'of %s pages' ),
+									totalPages
+								) }
+								<Icon icon={ chevronDownSmall } />
+							</span>
+						}
 					/>
 				</HStack>
 				<HStack expanded={ false } spacing={ 1 }>
diff --git a/packages/dataviews/src/components/dataviews-pagination/style.scss b/packages/dataviews/src/components/dataviews-pagination/style.scss
index ddbc79dce4c863..262a369a93093a 100644
--- a/packages/dataviews/src/components/dataviews-pagination/style.scss
+++ b/packages/dataviews/src/components/dataviews-pagination/style.scss
@@ -20,6 +20,7 @@
 		font-size: 11px;
 		font-weight: 500;
 		text-transform: uppercase;
+		padding: 0 0 0 $grid-unit-10;
 	}
 
 	.components-select-control__input {
@@ -27,12 +28,22 @@
 		line-height: $default-line-height; // Override wp-admin style bleed
 		font-weight: 500;
 		text-transform: uppercase;
+		padding: 0 $grid-unit-05 0 0 !important;
 
 		&:hover,
 		&:focus {
 			color: $gray-900;
 		}
 	}
+
+	.components-input-control__suffix {
+		flex-shrink: 0;
+	}
+
+	.dataviews-pagination__page-selection-suffix {
+		display: flex;
+		align-items: center;
+	}
 }
 
 /* stylelint-disable-next-line scss/at-rule-no-unknown -- '@container' not globally permitted */

From 326796c2c13b5df977cd4555a3a5ee6a6f4680d8 Mon Sep 17 00:00:00 2001
From: James Koster <james@jameskoster.co.uk>
Date: Wed, 24 Jul 2024 12:24:26 +0100
Subject: [PATCH 06/14] Line-height

---
 .../dataviews/src/components/dataviews-pagination/style.scss     | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/dataviews/src/components/dataviews-pagination/style.scss b/packages/dataviews/src/components/dataviews-pagination/style.scss
index 262a369a93093a..4456a584682dd9 100644
--- a/packages/dataviews/src/components/dataviews-pagination/style.scss
+++ b/packages/dataviews/src/components/dataviews-pagination/style.scss
@@ -43,6 +43,7 @@
 	.dataviews-pagination__page-selection-suffix {
 		display: flex;
 		align-items: center;
+		line-height: 1.4;
 	}
 }
 

From 641a95d7e7f084de70318ecfb381a669c168072a Mon Sep 17 00:00:00 2001
From: Lena Morita <lena@jaguchi.com>
Date: Sat, 27 Jul 2024 04:35:18 +0900
Subject: [PATCH 07/14] Change implementation

---
 .../components/dataviews-pagination/index.tsx | 54 +++++++++----------
 .../dataviews-pagination/style.scss           | 34 ++----------
 2 files changed, 31 insertions(+), 57 deletions(-)

diff --git a/packages/dataviews/src/components/dataviews-pagination/index.tsx b/packages/dataviews/src/components/dataviews-pagination/index.tsx
index ac90e216070f64..10b31482d52588 100644
--- a/packages/dataviews/src/components/dataviews-pagination/index.tsx
+++ b/packages/dataviews/src/components/dataviews-pagination/index.tsx
@@ -7,8 +7,8 @@ import {
 	SelectControl,
 } from '@wordpress/components';
 import { memo, useContext } from '@wordpress/element';
-import { sprintf, __, _x } from '@wordpress/i18n';
-import { Icon, next, previous, chevronDownSmall } from '@wordpress/icons';
+import { sprintf, __ } from '@wordpress/i18n';
+import { next, previous } from '@wordpress/icons';
 
 /**
  * Internal dependencies
@@ -21,10 +21,30 @@ function DataViewsPagination() {
 		onChangeView,
 		paginationInfo: { totalItems = 0, totalPages },
 	} = useContext( DataViewsContext );
+
 	if ( ! totalItems || ! totalPages ) {
 		return null;
 	}
+
 	const currentPage = view.page ?? 1;
+	const pageSelectOptions = Array.from( Array( totalPages ) ).map(
+		( _, i ) => {
+			const page = i + 1;
+			return {
+				value: page.toString(),
+				label:
+					currentPage === page
+						? sprintf(
+								// translators: Current page number in total number of pages
+								__( 'Page %1$s of %2$s' ),
+								currentPage,
+								totalPages
+						  )
+						: page.toString(),
+			};
+		}
+	);
+
 	return (
 		!! totalItems &&
 		totalPages !== 1 && (
@@ -34,24 +54,12 @@ function DataViewsPagination() {
 				justify="end"
 				className="dataviews-pagination"
 			>
-				<HStack
-					justify="flex-start"
-					expanded={ false }
-					spacing={ 0 }
-					className="dataviews-pagination__page-selection"
-				>
+				<HStack justify="flex-start" expanded={ false } spacing={ 0 }>
 					<SelectControl
 						aria-label={ __( 'Current page' ) }
-						value={ view.page?.toString() }
-						options={ Array.from( Array( totalPages ) ).map(
-							( _, i ) => {
-								const page = i + 1;
-								return {
-									value: page.toString(),
-									label: page.toString(),
-								};
-							}
-						) }
+						className="dataviews-pagination__page-select"
+						value={ currentPage.toString() }
+						options={ pageSelectOptions }
 						onChange={ ( newValue ) => {
 							onChangeView( {
 								...view,
@@ -61,16 +69,6 @@ function DataViewsPagination() {
 						size="compact"
 						__nextHasNoMarginBottom
 						variant="minimal"
-						suffix={
-							<span className="dataviews-pagination__page-selection-suffix">
-								{ sprintf(
-									// translators: Total number of pages
-									__( 'of %s pages' ),
-									totalPages
-								) }
-								<Icon icon={ chevronDownSmall } />
-							</span>
-						}
 					/>
 				</HStack>
 				<HStack expanded={ false } spacing={ 1 }>
diff --git a/packages/dataviews/src/components/dataviews-pagination/style.scss b/packages/dataviews/src/components/dataviews-pagination/style.scss
index 4456a584682dd9..b73d4b295e63ad 100644
--- a/packages/dataviews/src/components/dataviews-pagination/style.scss
+++ b/packages/dataviews/src/components/dataviews-pagination/style.scss
@@ -11,39 +11,15 @@
 	@include reduce-motion("transition");
 }
 
-.dataviews-pagination__page-selection {
-	.components-select-control {
-		gap: $grid-unit-05;
-	}
-
-	.components-input-control__container {
-		font-size: 11px;
-		font-weight: 500;
-		text-transform: uppercase;
-		padding: 0 0 0 $grid-unit-10;
-	}
+.dataviews-pagination__page-select {
+	font-size: 11px;
+	font-weight: 500;
+	text-transform: uppercase;
 
-	.components-select-control__input {
+	select {
 		font-size: 11px !important;
-		line-height: $default-line-height; // Override wp-admin style bleed
 		font-weight: 500;
 		text-transform: uppercase;
-		padding: 0 $grid-unit-05 0 0 !important;
-
-		&:hover,
-		&:focus {
-			color: $gray-900;
-		}
-	}
-
-	.components-input-control__suffix {
-		flex-shrink: 0;
-	}
-
-	.dataviews-pagination__page-selection-suffix {
-		display: flex;
-		align-items: center;
-		line-height: 1.4;
 	}
 }
 

From 22a477b04b61705f28b0510ede530c3a6527277c Mon Sep 17 00:00:00 2001
From: Lena Morita <lena@jaguchi.com>
Date: Tue, 6 Aug 2024 05:06:34 +0900
Subject: [PATCH 08/14] Simplify implementation

---
 .../src/components/dataviews-pagination/index.tsx   | 13 ++++++++++---
 .../src/components/dataviews-pagination/style.scss  | 11 ++---------
 packages/dataviews/src/layouts/list/style.scss      |  4 ----
 3 files changed, 12 insertions(+), 16 deletions(-)

diff --git a/packages/dataviews/src/components/dataviews-pagination/index.tsx b/packages/dataviews/src/components/dataviews-pagination/index.tsx
index 10b31482d52588..35c500c8c19aeb 100644
--- a/packages/dataviews/src/components/dataviews-pagination/index.tsx
+++ b/packages/dataviews/src/components/dataviews-pagination/index.tsx
@@ -32,7 +32,8 @@ function DataViewsPagination() {
 			const page = i + 1;
 			return {
 				value: page.toString(),
-				label:
+				label: page.toString(),
+				'aria-label':
 					currentPage === page
 						? sprintf(
 								// translators: Current page number in total number of pages
@@ -54,10 +55,15 @@ function DataViewsPagination() {
 				justify="end"
 				className="dataviews-pagination"
 			>
-				<HStack justify="flex-start" expanded={ false } spacing={ 0 }>
+				<HStack
+					justify="flex-start"
+					expanded={ false }
+					spacing={ 1 }
+					className="dataviews-pagination__page-select"
+				>
+					<div aria-hidden>Page</div>
 					<SelectControl
 						aria-label={ __( 'Current page' ) }
-						className="dataviews-pagination__page-select"
 						value={ currentPage.toString() }
 						options={ pageSelectOptions }
 						onChange={ ( newValue ) => {
@@ -70,6 +76,7 @@ function DataViewsPagination() {
 						__nextHasNoMarginBottom
 						variant="minimal"
 					/>
+					<div aria-hidden>/ { totalPages }</div>
 				</HStack>
 				<HStack expanded={ false } spacing={ 1 }>
 					<Button
diff --git a/packages/dataviews/src/components/dataviews-pagination/style.scss b/packages/dataviews/src/components/dataviews-pagination/style.scss
index b73d4b295e63ad..a514c5ca1d24f6 100644
--- a/packages/dataviews/src/components/dataviews-pagination/style.scss
+++ b/packages/dataviews/src/components/dataviews-pagination/style.scss
@@ -12,15 +12,8 @@
 }
 
 .dataviews-pagination__page-select {
-	font-size: 11px;
-	font-weight: 500;
-	text-transform: uppercase;
-
-	select {
-		font-size: 11px !important;
-		font-weight: 500;
-		text-transform: uppercase;
-	}
+	color: $gray-900;
+	font-size: 13px;
 }
 
 /* stylelint-disable-next-line scss/at-rule-no-unknown -- '@container' not globally permitted */
diff --git a/packages/dataviews/src/layouts/list/style.scss b/packages/dataviews/src/layouts/list/style.scss
index 0b5088b95725f8..5b8f764d012a22 100644
--- a/packages/dataviews/src/layouts/list/style.scss
+++ b/packages/dataviews/src/layouts/list/style.scss
@@ -188,9 +188,5 @@
 
 	& + .dataviews-pagination {
 		justify-content: space-between;
-
-		.dataviews-pagination__page-selection {
-			margin-left: - $grid-unit-10; // Offset the padding applied to the SelectControl
-		}
 	}
 }

From 8e9de9d132538da1217704d1bb8855834770f4a3 Mon Sep 17 00:00:00 2001
From: Aki Hamano <tetsuaki.hamano@gmail.com>
Date: Tue, 6 Aug 2024 11:22:30 +0900
Subject: [PATCH 09/14] Make the term "Page" translatable

---
 .../dataviews/src/components/dataviews-pagination/index.tsx     | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/dataviews/src/components/dataviews-pagination/index.tsx b/packages/dataviews/src/components/dataviews-pagination/index.tsx
index 35c500c8c19aeb..ab94c6e81ee803 100644
--- a/packages/dataviews/src/components/dataviews-pagination/index.tsx
+++ b/packages/dataviews/src/components/dataviews-pagination/index.tsx
@@ -61,7 +61,7 @@ function DataViewsPagination() {
 					spacing={ 1 }
 					className="dataviews-pagination__page-select"
 				>
-					<div aria-hidden>Page</div>
+					<div aria-hidden>{ __( 'Page' ) }</div>
 					<SelectControl
 						aria-label={ __( 'Current page' ) }
 						value={ currentPage.toString() }

From ac3970131429efbe4ac95a2859718e6fba17c667 Mon Sep 17 00:00:00 2001
From: Lena Morita <lena@jaguchi.com>
Date: Wed, 7 Aug 2024 00:11:50 +0900
Subject: [PATCH 10/14] Make translatable with suggestion

---
 .../src/components/dataviews-pagination/index.tsx        | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/packages/dataviews/src/components/dataviews-pagination/index.tsx b/packages/dataviews/src/components/dataviews-pagination/index.tsx
index ab94c6e81ee803..68c731f3c4996d 100644
--- a/packages/dataviews/src/components/dataviews-pagination/index.tsx
+++ b/packages/dataviews/src/components/dataviews-pagination/index.tsx
@@ -76,7 +76,14 @@ function DataViewsPagination() {
 						__nextHasNoMarginBottom
 						variant="minimal"
 					/>
-					<div aria-hidden>/ { totalPages }</div>
+					<div aria-hidden>
+						{ sprintf(
+							/* translators: This is preceded by a pagination dropdown, and %s is the total number of pages
+							 * (e.g. Page 1 of 10). Use '/ %s' if language doesn't use this word order. */
+							__( 'of %s' ),
+							totalPages
+						) }
+					</div>
 				</HStack>
 				<HStack expanded={ false } spacing={ 1 }>
 					<Button

From bf1d7684eff41d0151ef640a0c14ee9db9db6fb1 Mon Sep 17 00:00:00 2001
From: Lena Morita <lena@jaguchi.com>
Date: Wed, 7 Aug 2024 21:11:58 +0900
Subject: [PATCH 11/14] Restore use of `createInterpolateElement`

---
 .../components/dataviews-pagination/index.tsx | 54 ++++++++++---------
 1 file changed, 30 insertions(+), 24 deletions(-)

diff --git a/packages/dataviews/src/components/dataviews-pagination/index.tsx b/packages/dataviews/src/components/dataviews-pagination/index.tsx
index 68c731f3c4996d..3945431aa10124 100644
--- a/packages/dataviews/src/components/dataviews-pagination/index.tsx
+++ b/packages/dataviews/src/components/dataviews-pagination/index.tsx
@@ -6,8 +6,8 @@ import {
 	__experimentalHStack as HStack,
 	SelectControl,
 } from '@wordpress/components';
-import { memo, useContext } from '@wordpress/element';
-import { sprintf, __ } from '@wordpress/i18n';
+import { createInterpolateElement, memo, useContext } from '@wordpress/element';
+import { sprintf, __, _x } from '@wordpress/i18n';
 import { next, previous } from '@wordpress/icons';
 
 /**
@@ -61,29 +61,35 @@ function DataViewsPagination() {
 					spacing={ 1 }
 					className="dataviews-pagination__page-select"
 				>
-					<div aria-hidden>{ __( 'Page' ) }</div>
-					<SelectControl
-						aria-label={ __( 'Current page' ) }
-						value={ currentPage.toString() }
-						options={ pageSelectOptions }
-						onChange={ ( newValue ) => {
-							onChangeView( {
-								...view,
-								page: +newValue,
-							} );
-						} }
-						size="compact"
-						__nextHasNoMarginBottom
-						variant="minimal"
-					/>
-					<div aria-hidden>
-						{ sprintf(
-							/* translators: This is preceded by a pagination dropdown, and %s is the total number of pages
-							 * (e.g. Page 1 of 10). Use '/ %s' if language doesn't use this word order. */
-							__( 'of %s' ),
+					{ createInterpolateElement(
+						sprintf(
+							// translators: <CurrentPage /> is the current page number, %s is the total number of pages.
+							_x(
+								'<div>Page</div><CurrentPage /><div>of %s</div>',
+								'paging'
+							),
 							totalPages
-						) }
-					</div>
+						),
+						{
+							div: <div aria-hidden />,
+							CurrentPage: (
+								<SelectControl
+									aria-label={ __( 'Current page' ) }
+									value={ currentPage.toString() }
+									options={ pageSelectOptions }
+									onChange={ ( newValue ) => {
+										onChangeView( {
+											...view,
+											page: +newValue,
+										} );
+									} }
+									size="compact"
+									__nextHasNoMarginBottom
+									variant="minimal"
+								/>
+							),
+						}
+					) }
 				</HStack>
 				<HStack expanded={ false } spacing={ 1 }>
 					<Button

From 37fc33af42b6b8f7984ee4b89e3db91fb4b1b7f4 Mon Sep 17 00:00:00 2001
From: Lena Morita <lena@jaguchi.com>
Date: Wed, 7 Aug 2024 21:18:31 +0900
Subject: [PATCH 12/14] Improve translator comment?

---
 .../dataviews/src/components/dataviews-pagination/index.tsx  | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/packages/dataviews/src/components/dataviews-pagination/index.tsx b/packages/dataviews/src/components/dataviews-pagination/index.tsx
index 3945431aa10124..ba9a3325a851c7 100644
--- a/packages/dataviews/src/components/dataviews-pagination/index.tsx
+++ b/packages/dataviews/src/components/dataviews-pagination/index.tsx
@@ -63,11 +63,12 @@ function DataViewsPagination() {
 				>
 					{ createInterpolateElement(
 						sprintf(
-							// translators: <CurrentPage /> is the current page number, %s is the total number of pages.
+							// translators: 1: Current page number, 2: Total number of pages.
 							_x(
-								'<div>Page</div><CurrentPage /><div>of %s</div>',
+								'<div>Page</div>%1$s<div>of %2$s</div>',
 								'paging'
 							),
+							'<CurrentPage />',
 							totalPages
 						),
 						{

From c4a4cd1d3c17670a2f1b88b84c0c510f9a10ff83 Mon Sep 17 00:00:00 2001
From: James Koster <james@jameskoster.co.uk>
Date: Tue, 13 Aug 2024 11:23:05 +0100
Subject: [PATCH 13/14] Styling adjustments

---
 .../src/components/dataviews-pagination/index.tsx     |  2 +-
 .../src/components/dataviews-pagination/style.scss    | 11 ++++++++++-
 2 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/packages/dataviews/src/components/dataviews-pagination/index.tsx b/packages/dataviews/src/components/dataviews-pagination/index.tsx
index ba9a3325a851c7..f022b382cdb70d 100644
--- a/packages/dataviews/src/components/dataviews-pagination/index.tsx
+++ b/packages/dataviews/src/components/dataviews-pagination/index.tsx
@@ -84,7 +84,7 @@ function DataViewsPagination() {
 											page: +newValue,
 										} );
 									} }
-									size="compact"
+									size="small"
 									__nextHasNoMarginBottom
 									variant="minimal"
 								/>
diff --git a/packages/dataviews/src/components/dataviews-pagination/style.scss b/packages/dataviews/src/components/dataviews-pagination/style.scss
index a514c5ca1d24f6..70153c32e8e4bb 100644
--- a/packages/dataviews/src/components/dataviews-pagination/style.scss
+++ b/packages/dataviews/src/components/dataviews-pagination/style.scss
@@ -13,7 +13,16 @@
 
 .dataviews-pagination__page-select {
 	color: $gray-900;
-	font-size: 13px;
+	font-size: 11px;
+	font-weight: 500;
+	text-transform: uppercase;
+
+	@include break-small() {
+		.components-select-control__input {
+			font-size: 11px !important;
+			font-weight: 500;
+		}
+	}
 }
 
 /* stylelint-disable-next-line scss/at-rule-no-unknown -- '@container' not globally permitted */

From 21122052f033705d4f9f6d509dadeb6287013152 Mon Sep 17 00:00:00 2001
From: James Koster <james@jameskoster.co.uk>
Date: Tue, 13 Aug 2024 14:47:23 +0100
Subject: [PATCH 14/14] Remove unnecessary style

---
 .../dataviews/src/components/dataviews-pagination/style.scss    | 2 --
 1 file changed, 2 deletions(-)

diff --git a/packages/dataviews/src/components/dataviews-pagination/style.scss b/packages/dataviews/src/components/dataviews-pagination/style.scss
index 70153c32e8e4bb..16f064cc3a5178 100644
--- a/packages/dataviews/src/components/dataviews-pagination/style.scss
+++ b/packages/dataviews/src/components/dataviews-pagination/style.scss
@@ -5,14 +5,12 @@
 	background-color: $white;
 	padding: $grid-unit-15 $grid-unit-60;
 	border-top: $border-width solid $gray-100;
-	color: $gray-700;
 	flex-shrink: 0;
 	transition: padding ease-out 0.1s;
 	@include reduce-motion("transition");
 }
 
 .dataviews-pagination__page-select {
-	color: $gray-900;
 	font-size: 11px;
 	font-weight: 500;
 	text-transform: uppercase;