From 4696cd4285da7c44603b6ed988f4930a9b17e75c Mon Sep 17 00:00:00 2001
From: Aki Hamano <tetsuaki.hamano@gmail.com>
Date: Sat, 6 Jul 2024 11:38:02 +0900
Subject: [PATCH 1/2] Font Library Modal: enhance pagination appearance

---
 .../font-library-modal/font-collection.js     | 96 +++++++++++--------
 .../font-library-modal/installed-fonts.js     |  2 +-
 .../font-library-modal/style.scss             | 27 ++++--
 3 files changed, 73 insertions(+), 52 deletions(-)

diff --git a/packages/edit-site/src/components/global-styles/font-library-modal/font-collection.js b/packages/edit-site/src/components/global-styles/font-library-modal/font-collection.js
index 9cb446b1d16ab0..dbdbe42dfb7b9c 100644
--- a/packages/edit-site/src/components/global-styles/font-library-modal/font-collection.js
+++ b/packages/edit-site/src/components/global-styles/font-library-modal/font-collection.js
@@ -28,7 +28,13 @@ import {
 } from '@wordpress/components';
 import { debounce } from '@wordpress/compose';
 import { sprintf, __, _x } from '@wordpress/i18n';
-import { moreVertical, chevronLeft } from '@wordpress/icons';
+import {
+	moreVertical,
+	chevronLeft,
+	chevronRight,
+	previous,
+	next,
+} from '@wordpress/icons';
 
 /**
  * Internal dependencies
@@ -429,7 +435,7 @@ function FontCollection( { slug } ) {
 					{ selectedFont && (
 						<Flex
 							justify="flex-end"
-							className="font-library-modal__tabpanel-layout__footer"
+							className="font-library-modal__footer"
 						>
 							<Button
 								variant="primary"
@@ -446,32 +452,38 @@ function FontCollection( { slug } ) {
 					) }
 
 					{ ! selectedFont && (
-						<Flex
+						<HStack
+							spacing={ 4 }
 							justify="center"
-							className="font-library-modal__tabpanel-layout__footer"
+							className="font-library-modal__footer"
 						>
-							<Button
-								label={ __( 'First page' ) }
-								size="compact"
-								onClick={ () => setPage( 1 ) }
-								disabled={ page === 1 }
-								accessibleWhenDisabled
-							>
-								<span>«</span>
-							</Button>
-							<Button
-								label={ __( 'Previous page' ) }
-								size="compact"
-								onClick={ () => setPage( page - 1 ) }
-								disabled={ page === 1 }
-								accessibleWhenDisabled
-							>
-								<span>‹</span>
-							</Button>
+							<HStack expanded={ false } spacing={ 1 }>
+								<Button
+									label={ __( 'First page' ) }
+									size="compact"
+									onClick={ () => setPage( 1 ) }
+									disabled={ page === 1 }
+									showTooltip
+									accessibleWhenDisabled
+									icon={ previous }
+									tooltipPosition="top"
+								/>
+								<Button
+									label={ __( 'Previous page' ) }
+									size="compact"
+									onClick={ () => setPage( page - 1 ) }
+									disabled={ page === 1 }
+									showTooltip
+									accessibleWhenDisabled
+									icon={ chevronLeft }
+									tooltipPosition="top"
+								/>
+							</HStack>
 							<HStack
 								justify="flex-start"
 								expanded={ false }
 								spacing={ 2 }
+								className="font-library-modal__page-selection"
 							>
 								{ createInterpolateElement(
 									sprintf(
@@ -509,25 +521,27 @@ function FontCollection( { slug } ) {
 									}
 								) }
 							</HStack>
-							<Button
-								label={ __( 'Next page' ) }
-								size="compact"
-								onClick={ () => setPage( page + 1 ) }
-								disabled={ page === totalPages }
-								accessibleWhenDisabled
-							>
-								<span>›</span>
-							</Button>
-							<Button
-								label={ __( 'Last page' ) }
-								size="compact"
-								onClick={ () => setPage( totalPages ) }
-								disabled={ page === totalPages }
-								accessibleWhenDisabled
-							>
-								<span>»</span>
-							</Button>
-						</Flex>
+							<HStack expanded={ false } spacing={ 1 }>
+								<Button
+									label={ __( 'Next page' ) }
+									size="compact"
+									onClick={ () => setPage( page + 1 ) }
+									disabled={ page === totalPages }
+									accessibleWhenDisabled
+									icon={ chevronRight }
+									tooltipPosition="top"
+								/>
+								<Button
+									label={ __( 'Last page' ) }
+									size="compact"
+									onClick={ () => setPage( totalPages ) }
+									disabled={ page === totalPages }
+									accessibleWhenDisabled
+									icon={ next }
+									tooltipPosition="top"
+								/>
+							</HStack>
+						</HStack>
 					) }
 				</>
 			) }
diff --git a/packages/edit-site/src/components/global-styles/font-library-modal/installed-fonts.js b/packages/edit-site/src/components/global-styles/font-library-modal/installed-fonts.js
index 464540bc2b4ea7..7d3fa0cd703b64 100644
--- a/packages/edit-site/src/components/global-styles/font-library-modal/installed-fonts.js
+++ b/packages/edit-site/src/components/global-styles/font-library-modal/installed-fonts.js
@@ -311,7 +311,7 @@ function InstalledFonts() {
 
 					<HStack
 						justify="flex-end"
-						className="font-library-modal__tabpanel-layout__footer"
+						className="font-library-modal__footer"
 					>
 						{ isInstalling && <ProgressBar /> }
 						{ shouldDisplayDeleteButton && (
diff --git a/packages/edit-site/src/components/global-styles/font-library-modal/style.scss b/packages/edit-site/src/components/global-styles/font-library-modal/style.scss
index fb87f6fae505a4..5b9b595a1e6478 100644
--- a/packages/edit-site/src/components/global-styles/font-library-modal/style.scss
+++ b/packages/edit-site/src/components/global-styles/font-library-modal/style.scss
@@ -49,17 +49,24 @@ $footer-height: 70px;
 		// It should be 120px (72px modal header height + 48px tab height)
 		padding-top: $header-height + $grid-unit-15 + $grid-unit-60;
 	}
+}
 
-	.font-library-modal__tabpanel-layout__footer {
-		border-top: 1px solid $gray-300;
-		margin: 0 #{$grid-unit-40 * -1} #{$grid-unit-40 * -1};
-		padding: $grid-unit-20 $grid-unit-40;
-		position: absolute;
-		bottom: $grid-unit-40;
-		width: 100%;
-		height: $footer-height;
-		background-color: $white;
-	}
+.font-library-modal__footer {
+	border-top: 1px solid $gray-300;
+	margin: 0 #{$grid-unit-40 * -1} #{$grid-unit-40 * -1};
+	padding: $grid-unit-20 $grid-unit-40;
+	position: absolute;
+	bottom: $grid-unit-40;
+	width: 100%;
+	height: $footer-height;
+	background-color: $white;
+}
+
+.font-library-modal__page-selection {
+	font-size: 11px;
+	text-transform: uppercase;
+	font-weight: 500;
+	color: $gray-900;
 }
 
 .font-library-modal__tabpanel-layout .components-base-control__field {

From 5f210da2f96c3877112264b3ee2776184a672ee3 Mon Sep 17 00:00:00 2001
From: Aki Hamano <tetsuaki.hamano@gmail.com>
Date: Tue, 9 Jul 2024 13:39:29 +0900
Subject: [PATCH 2/2] Remove first/last page buttons

---
 .../font-library-modal/font-collection.js     | 69 ++++++-------------
 1 file changed, 20 insertions(+), 49 deletions(-)

diff --git a/packages/edit-site/src/components/global-styles/font-library-modal/font-collection.js b/packages/edit-site/src/components/global-styles/font-library-modal/font-collection.js
index dbdbe42dfb7b9c..b6f8dc46aa5641 100644
--- a/packages/edit-site/src/components/global-styles/font-library-modal/font-collection.js
+++ b/packages/edit-site/src/components/global-styles/font-library-modal/font-collection.js
@@ -28,13 +28,7 @@ import {
 } from '@wordpress/components';
 import { debounce } from '@wordpress/compose';
 import { sprintf, __, _x } from '@wordpress/i18n';
-import {
-	moreVertical,
-	chevronLeft,
-	chevronRight,
-	previous,
-	next,
-} from '@wordpress/icons';
+import { moreVertical, chevronLeft, chevronRight } from '@wordpress/icons';
 
 /**
  * Internal dependencies
@@ -457,28 +451,16 @@ function FontCollection( { slug } ) {
 							justify="center"
 							className="font-library-modal__footer"
 						>
-							<HStack expanded={ false } spacing={ 1 }>
-								<Button
-									label={ __( 'First page' ) }
-									size="compact"
-									onClick={ () => setPage( 1 ) }
-									disabled={ page === 1 }
-									showTooltip
-									accessibleWhenDisabled
-									icon={ previous }
-									tooltipPosition="top"
-								/>
-								<Button
-									label={ __( 'Previous page' ) }
-									size="compact"
-									onClick={ () => setPage( page - 1 ) }
-									disabled={ page === 1 }
-									showTooltip
-									accessibleWhenDisabled
-									icon={ chevronLeft }
-									tooltipPosition="top"
-								/>
-							</HStack>
+							<Button
+								label={ __( 'Previous page' ) }
+								size="compact"
+								onClick={ () => setPage( page - 1 ) }
+								disabled={ page === 1 }
+								showTooltip
+								accessibleWhenDisabled
+								icon={ chevronLeft }
+								tooltipPosition="top"
+							/>
 							<HStack
 								justify="flex-start"
 								expanded={ false }
@@ -521,26 +503,15 @@ function FontCollection( { slug } ) {
 									}
 								) }
 							</HStack>
-							<HStack expanded={ false } spacing={ 1 }>
-								<Button
-									label={ __( 'Next page' ) }
-									size="compact"
-									onClick={ () => setPage( page + 1 ) }
-									disabled={ page === totalPages }
-									accessibleWhenDisabled
-									icon={ chevronRight }
-									tooltipPosition="top"
-								/>
-								<Button
-									label={ __( 'Last page' ) }
-									size="compact"
-									onClick={ () => setPage( totalPages ) }
-									disabled={ page === totalPages }
-									accessibleWhenDisabled
-									icon={ next }
-									tooltipPosition="top"
-								/>
-							</HStack>
+							<Button
+								label={ __( 'Next page' ) }
+								size="compact"
+								onClick={ () => setPage( page + 1 ) }
+								disabled={ page === totalPages }
+								accessibleWhenDisabled
+								icon={ chevronRight }
+								tooltipPosition="top"
+							/>
 						</HStack>
 					) }
 				</>