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..b4a6cd71a9a987 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,8 +2,11 @@
* WordPress dependencies
*/
import { __ } from '@wordpress/i18n';
-import { Modal, TabPanel } from '@wordpress/components';
-import { useContext } from '@wordpress/element';
+import {
+ Modal,
+ privateApis as componentsPrivateApis,
+} from '@wordpress/components';
+import { useState, useContext } from '@wordpress/element';
/**
* Internal dependencies
@@ -12,6 +15,9 @@ 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 = [
{
@@ -41,6 +47,7 @@ function FontLibraryModal( {
initialTabName = 'installed-fonts',
} ) {
const { collections } = useContext( FontLibraryContext );
+ const [ selectedTab, setSelectedTab ] = useState( initialTabName );
const tabs = [
...DEFAULT_TABS,
@@ -54,22 +61,30 @@ function FontLibraryModal( {
isFullScreen
className="font-library-modal"
>
-
- { ( tab ) => {
- switch ( tab.name ) {
- case 'upload-fonts':
- return ;
- case 'installed-fonts':
- return ;
- default:
- return ;
- }
- } }
-
+
+
+ { tabs.map( ( tab ) => (
+
+ { tab.title }
+
+ ) ) }
+
+
+
+
+
+
+
+ { tabsFromCollections( collections || [] ).map( ( tab ) => (
+
+
+
+ ) ) }
+
);
}
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..329f2bbf65104b 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
@@ -75,8 +75,8 @@
padding-bottom: 1rem;
}
-.font-library-modal__tab-panel {
- [role="tablist"] {
+.font-library-modal__tab-list {
+ &[role="tablist"] {
position: sticky;
top: 0;
width: calc(100% + 64px);