From 7cb2e5c2de9d7790e20f738b5ee8f4808038c7da Mon Sep 17 00:00:00 2001
From: chad1008 <13856531+chad1008@users.noreply.github.com>
Date: Mon, 18 Dec 2023 13:54:34 -0500
Subject: [PATCH 1/5] implement `Tabs`

---
 .../global-styles/font-library-modal/index.js | 60 ++++++++++++-------
 1 file changed, 40 insertions(+), 20 deletions(-)

diff --git a/packages/edit-site/src/components/global-styles/font-library-modal/index.js b/packages/edit-site/src/components/global-styles/font-library-modal/index.js
index 1128ca0811977e..3d81ea37a32452 100644
--- a/packages/edit-site/src/components/global-styles/font-library-modal/index.js
+++ b/packages/edit-site/src/components/global-styles/font-library-modal/index.js
@@ -2,7 +2,10 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { Modal, TabPanel } from '@wordpress/components';
+import {
+	Modal,
+	privateApis as componentsPrivateApis,
+} from '@wordpress/components';
 import { useContext } from '@wordpress/element';
 
 /**
@@ -12,17 +15,18 @@ import InstalledFonts from './installed-fonts';
 import FontCollection from './font-collection';
 import UploadFonts from './upload-fonts';
 import { FontLibraryContext } from './context';
+import { unlock } from '../../../lock-unlock';
+
+const { Tabs } = unlock( componentsPrivateApis );
 
 const DEFAULT_TABS = [
 	{
 		name: 'installed-fonts',
 		title: __( 'Library' ),
-		className: 'installed-fonts',
 	},
 	{
 		name: 'upload-fonts',
 		title: __( 'Upload' ),
-		className: 'upload-fonts',
 	},
 ];
 
@@ -33,7 +37,6 @@ const tabsFromCollections = ( collections ) =>
 			collections.length === 1 && id === 'default-font-collection'
 				? __( 'Install Fonts' )
 				: name,
-		className: 'collection',
 	} ) );
 
 function FontLibraryModal( {
@@ -54,22 +57,39 @@ function FontLibraryModal( {
 			isFullScreen
 			className="font-library-modal"
 		>
-			<TabPanel
-				className="font-library-modal__tab-panel"
-				initialTabName={ initialTabName }
-				tabs={ tabs }
-			>
-				{ ( tab ) => {
-					switch ( tab.name ) {
-						case 'upload-fonts':
-							return <UploadFonts />;
-						case 'installed-fonts':
-							return <InstalledFonts />;
-						default:
-							return <FontCollection id={ tab.name } />;
-					}
-				} }
-			</TabPanel>
+			<div className="font-library-modal__tab-panel">
+				<Tabs initialTabId={ initialTabName }>
+					<Tabs.TabList>
+						{ tabs.map( ( { name, title } ) => (
+							<Tabs.Tab key={ name } tabId={ name }>
+								{ title }
+							</Tabs.Tab>
+						) ) }
+					</Tabs.TabList>
+					{ tabs.map( ( { name } ) => {
+						let contents;
+						switch ( name ) {
+							case 'upload-fonts':
+								contents = <UploadFonts />;
+								break;
+							case 'installed-fonts':
+								contents = <InstalledFonts />;
+								break;
+							default:
+								contents = <FontCollection id={ name } />;
+						}
+						return (
+							<Tabs.TabPanel
+								key={ name }
+								tabId={ name }
+								focusable="false"
+							>
+								{ contents }
+							</Tabs.TabPanel>
+						);
+					} ) }
+				</Tabs>
+			</div>
 		</Modal>
 	);
 }

From d937145e515522d2f6d73cebb7a38ff4bcc9f8c9 Mon Sep 17 00:00:00 2001
From: chad1008 <13856531+chad1008@users.noreply.github.com>
Date: Mon, 18 Dec 2023 13:56:53 -0500
Subject: [PATCH 2/5] update class names

---
 .../src/components/global-styles/font-library-modal/index.js  | 2 +-
 .../components/global-styles/font-library-modal/style.scss    | 4 ++--
 .../components/global-styles/font-library-modal/tab-layout.js | 2 +-
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/edit-site/src/components/global-styles/font-library-modal/index.js b/packages/edit-site/src/components/global-styles/font-library-modal/index.js
index 3d81ea37a32452..e3215c7b976954 100644
--- a/packages/edit-site/src/components/global-styles/font-library-modal/index.js
+++ b/packages/edit-site/src/components/global-styles/font-library-modal/index.js
@@ -57,7 +57,7 @@ function FontLibraryModal( {
 			isFullScreen
 			className="font-library-modal"
 		>
-			<div className="font-library-modal__tab-panel">
+			<div className="font-library-modal__tabs">
 				<Tabs initialTabId={ initialTabName }>
 					<Tabs.TabList>
 						{ tabs.map( ( { name, title } ) => (
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 86cac4244dea93..cf7de98d6fbbb1 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
@@ -24,7 +24,7 @@
 	}
 }
 
-.font-library-modal__tab-layout {
+.font-library-modal__tabpanel-layout {
 
 	main {
 		padding-bottom: 4rem;
@@ -75,7 +75,7 @@
 	padding-bottom: 1rem;
 }
 
-.font-library-modal__tab-panel {
+.font-library-modal__tabs {
 	[role="tablist"] {
 		position: sticky;
 		top: 0;
diff --git a/packages/edit-site/src/components/global-styles/font-library-modal/tab-layout.js b/packages/edit-site/src/components/global-styles/font-library-modal/tab-layout.js
index 07f27cd31ea79c..66a58e6fc32606 100644
--- a/packages/edit-site/src/components/global-styles/font-library-modal/tab-layout.js
+++ b/packages/edit-site/src/components/global-styles/font-library-modal/tab-layout.js
@@ -13,7 +13,7 @@ import { chevronLeft } from '@wordpress/icons';
 
 function TabLayout( { title, description, handleBack, children, footer } ) {
 	return (
-		<div className="font-library-modal__tab-layout">
+		<div className="font-library-modal__tabpanel-layout">
 			<Spacer margin={ 4 } />
 			<VStack spacing={ 4 } justify="space-between">
 				<header>

From 8c2a183ce23a7df47efe422de6f561e9c950d612 Mon Sep 17 00:00:00 2001
From: chad1008 <13856531+chad1008@users.noreply.github.com>
Date: Mon, 18 Dec 2023 14:46:07 -0500
Subject: [PATCH 3/5] simplify `name` vs `id` in variables and props

---
 .../global-styles/font-library-modal/index.js | 24 +++++++++----------
 1 file changed, 12 insertions(+), 12 deletions(-)

diff --git a/packages/edit-site/src/components/global-styles/font-library-modal/index.js b/packages/edit-site/src/components/global-styles/font-library-modal/index.js
index e3215c7b976954..c8db3722e73d18 100644
--- a/packages/edit-site/src/components/global-styles/font-library-modal/index.js
+++ b/packages/edit-site/src/components/global-styles/font-library-modal/index.js
@@ -21,18 +21,18 @@ const { Tabs } = unlock( componentsPrivateApis );
 
 const DEFAULT_TABS = [
 	{
-		name: 'installed-fonts',
+		id: 'installed-fonts',
 		title: __( 'Library' ),
 	},
 	{
-		name: 'upload-fonts',
+		id: 'upload-fonts',
 		title: __( 'Upload' ),
 	},
 ];
 
 const tabsFromCollections = ( collections ) =>
 	collections.map( ( { id, name } ) => ( {
-		name: id,
+		id,
 		title:
 			collections.length === 1 && id === 'default-font-collection'
 				? __( 'Install Fonts' )
@@ -41,7 +41,7 @@ const tabsFromCollections = ( collections ) =>
 
 function FontLibraryModal( {
 	onRequestClose,
-	initialTabName = 'installed-fonts',
+	initialTabId = 'installed-fonts',
 } ) {
 	const { collections } = useContext( FontLibraryContext );
 
@@ -58,17 +58,17 @@ function FontLibraryModal( {
 			className="font-library-modal"
 		>
 			<div className="font-library-modal__tabs">
-				<Tabs initialTabId={ initialTabName }>
+				<Tabs initialTabId={ initialTabId }>
 					<Tabs.TabList>
-						{ tabs.map( ( { name, title } ) => (
-							<Tabs.Tab key={ name } tabId={ name }>
+						{ tabs.map( ( { id, title } ) => (
+							<Tabs.Tab key={ id } tabId={ id }>
 								{ title }
 							</Tabs.Tab>
 						) ) }
 					</Tabs.TabList>
-					{ tabs.map( ( { name } ) => {
+					{ tabs.map( ( { id } ) => {
 						let contents;
-						switch ( name ) {
+						switch ( id ) {
 							case 'upload-fonts':
 								contents = <UploadFonts />;
 								break;
@@ -76,12 +76,12 @@ function FontLibraryModal( {
 								contents = <InstalledFonts />;
 								break;
 							default:
-								contents = <FontCollection id={ name } />;
+								contents = <FontCollection id={ id } />;
 						}
 						return (
 							<Tabs.TabPanel
-								key={ name }
-								tabId={ name }
+								key={ id }
+								tabId={ id }
 								focusable="false"
 							>
 								{ contents }

From 1def6f193a48f57ffe82f71116b22bfa672c8718 Mon Sep 17 00:00:00 2001
From: chad1008 <13856531+chad1008@users.noreply.github.com>
Date: Tue, 2 Jan 2024 12:50:56 -0500
Subject: [PATCH 4/5] fix typing error

---
 .../src/components/global-styles/font-library-modal/index.js    | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/edit-site/src/components/global-styles/font-library-modal/index.js b/packages/edit-site/src/components/global-styles/font-library-modal/index.js
index c8db3722e73d18..65a284560687cc 100644
--- a/packages/edit-site/src/components/global-styles/font-library-modal/index.js
+++ b/packages/edit-site/src/components/global-styles/font-library-modal/index.js
@@ -82,7 +82,7 @@ function FontLibraryModal( {
 							<Tabs.TabPanel
 								key={ id }
 								tabId={ id }
-								focusable="false"
+								focusable={ false }
 							>
 								{ contents }
 							</Tabs.TabPanel>

From 1ea53e4a9648d1d04cb5ef663d9d04f32e8f2ff4 Mon Sep 17 00:00:00 2001
From: chad1008 <13856531+chad1008@users.noreply.github.com>
Date: Wed, 3 Jan 2024 16:41:41 -0500
Subject: [PATCH 5/5] rename TabLayout to TabPanelLayout

---
 .../font-library-modal/font-collection.js              |  6 +++---
 .../font-library-modal/installed-fonts.js              |  6 +++---
 .../{tab-layout.js => tab-panel-layout.js}             | 10 ++++++++--
 3 files changed, 14 insertions(+), 8 deletions(-)
 rename packages/edit-site/src/components/global-styles/font-library-modal/{tab-layout.js => tab-panel-layout.js} (90%)

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 08ff1a95d6e41a..062ad232e3ca98 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
@@ -21,7 +21,7 @@ import { search, closeSmall } from '@wordpress/icons';
 /**
  * Internal dependencies
  */
-import TabLayout from './tab-layout';
+import TabPanelLayout from './tab-panel-layout';
 import { FontLibraryContext } from './context';
 import FontsGrid from './fonts-grid';
 import FontCard from './font-card';
@@ -156,7 +156,7 @@ function FontCollection( { id } ) {
 	};
 
 	return (
-		<TabLayout
+		<TabPanelLayout
 			title={
 				! selectedFont ? selectedCollection.name : selectedFont.name
 			}
@@ -270,7 +270,7 @@ function FontCollection( { id } ) {
 					) ) }
 				</FontsGrid>
 			) }
-		</TabLayout>
+		</TabPanelLayout>
 	);
 }
 
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 2a8d1e591e084f..d493a2a297b18b 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
@@ -16,7 +16,7 @@ import {
 /**
  * Internal dependencies
  */
-import TabLayout from './tab-layout';
+import TabPanelLayout from './tab-panel-layout';
 import { FontLibraryContext } from './context';
 import FontsGrid from './fonts-grid';
 import LibraryFontDetails from './library-font-details';
@@ -92,7 +92,7 @@ function InstalledFonts() {
 	}, [ notice ] );
 
 	return (
-		<TabLayout
+		<TabPanelLayout
 			title={ libraryFontSelected?.name || '' }
 			description={ tabDescription }
 			handleBack={ !! libraryFontSelected && handleUnselectFont }
@@ -173,7 +173,7 @@ function InstalledFonts() {
 					handleCancelUninstall={ handleCancelUninstall }
 				/>
 			) }
-		</TabLayout>
+		</TabPanelLayout>
 	);
 }
 
diff --git a/packages/edit-site/src/components/global-styles/font-library-modal/tab-layout.js b/packages/edit-site/src/components/global-styles/font-library-modal/tab-panel-layout.js
similarity index 90%
rename from packages/edit-site/src/components/global-styles/font-library-modal/tab-layout.js
rename to packages/edit-site/src/components/global-styles/font-library-modal/tab-panel-layout.js
index 66a58e6fc32606..a7151c6e908d61 100644
--- a/packages/edit-site/src/components/global-styles/font-library-modal/tab-layout.js
+++ b/packages/edit-site/src/components/global-styles/font-library-modal/tab-panel-layout.js
@@ -11,7 +11,13 @@ import {
 } from '@wordpress/components';
 import { chevronLeft } from '@wordpress/icons';
 
-function TabLayout( { title, description, handleBack, children, footer } ) {
+function TabPanelLayout( {
+	title,
+	description,
+	handleBack,
+	children,
+	footer,
+} ) {
 	return (
 		<div className="font-library-modal__tabpanel-layout">
 			<Spacer margin={ 4 } />
@@ -47,4 +53,4 @@ function TabLayout( { title, description, handleBack, children, footer } ) {
 	);
 }
 
-export default TabLayout;
+export default TabPanelLayout;