switch to fonts tab after successfull upload of fonts

WordPress · Nov 8, 2023 · 5c53e02 · 5c53e02
1 parent f5dfaa2
commit 5c53e02
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 9 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
@@ -6,7 +6,7 @@ import {
 	Modal,
 	privateApis as componentsPrivateApis,
 } from '@wordpress/components';
-import { useContext } from '@wordpress/element';
+import { useState, useContext } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -47,6 +47,7 @@ function FontLibraryModal( {
 	initialTabName = 'installed-fonts',
 } ) {
 	const { collections } = useContext( FontLibraryContext );
+	const [ selectedTab, setSelectedTab ] = useState( initialTabName );
 
 	const tabs = [
 		...DEFAULT_TABS,
@@ -60,10 +61,14 @@ function FontLibraryModal( {
 			isFullScreen
 			className="font-library-modal"
 		>
-			<Tabs initialTabId={ initialTabName }>
+			<Tabs selectedTabId={ selectedTab } onSelect={ setSelectedTab }>
 				<Tabs.TabList className="font-library-modal__tab-list">
 					{ tabs.map( ( tab ) => (
-						<Tabs.Tab key={ tab.name } id={ tab.name }>
+						<Tabs.Tab
+							key={ tab.name }
+							id={ tab.name }
+							className={ tab.className }
+						>
 							{ tab.title }
 						</Tabs.Tab>
 					) ) }
@@ -72,7 +77,11 @@ function FontLibraryModal( {
 					<InstalledFonts />
 				</Tabs.TabPanel>
 				<Tabs.TabPanel id={ 'upload-fonts' }>
-					<UploadFonts />
+					<UploadFonts
+						onRequestClose={ () =>
+							setSelectedTab( 'installed-fonts' )
+						}
+					/>
 				</Tabs.TabPanel>
 				{ tabsFromCollections( collections || [] ).map( ( tab ) => (
 					<Tabs.TabPanel key={ tab.name } id={ tab.name }>

diff --git a/packages/edit-site/src/components/global-styles/font-library-modal/local-fonts.js b/packages/edit-site/src/components/global-styles/font-library-modal/local-fonts.js
@@ -24,7 +24,7 @@ import makeFamiliesFromFaces from './utils/make-families-from-faces';
 import { loadFontFaceInBrowser } from './utils';
 import { getNoticeFromInstallResponse } from './utils/get-notice-from-response';
 
-function LocalFonts() {
+function LocalFonts( { onRequestClose } ) {
 	const { installFonts } = useContext( FontLibraryContext );
 	const [ notice, setNotice ] = useState( null );
 	const supportedFormats =
@@ -148,8 +148,12 @@ function LocalFonts() {
 	const handleInstall = async ( fontFaces ) => {
 		const fontFamilies = makeFamiliesFromFaces( fontFaces );
 		const response = await installFonts( fontFamilies );
-		const installNotice = getNoticeFromInstallResponse( response );
-		setNotice( installNotice );
+		if ( ! response.errors.length ) {
+			onRequestClose();
+		} else {
+			const installNotice = getNoticeFromInstallResponse( response );
+			setNotice( installNotice );
+		}
 	};
 
 	return (

diff --git a/packages/edit-site/src/components/global-styles/font-library-modal/upload-fonts.js b/packages/edit-site/src/components/global-styles/font-library-modal/upload-fonts.js
@@ -8,11 +8,11 @@ import { __experimentalSpacer as Spacer } from '@wordpress/components';
  */
 import LocalFonts from './local-fonts';
 
-function UploadFonts() {
+function UploadFonts( { onRequestClose } ) {
 	return (
 		<>
 			<Spacer margin={ 8 } />
-			<LocalFonts />
+			<LocalFonts onRequestClose={ onRequestClose } />
 		</>
 	);
 }