switch to fonts tab after successfull upload of fonts

WordPress · Jan 24, 2024 · 9bdb4a4 · 9bdb4a4
1 parent 8db42b1
commit 9bdb4a4
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 7 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
@@ -44,6 +44,7 @@ function FontLibraryModal( {
 	initialTabId = 'installed-fonts',
 } ) {
 	const { collections } = useContext( FontLibraryContext );
+	const [ selectedTab, setSelectedTab ] = useState( initialTabId );
 
 	const tabs = [
 		...DEFAULT_TABS,
@@ -58,7 +59,7 @@ function FontLibraryModal( {
 			className="font-library-modal"
 		>
 			<div className="font-library-modal__tabs">
-				<Tabs initialTabId={ initialTabId }>
+				<Tabs selectedTabId={ selectedTab } onSelect={ setSelectedTab }>
 					<Tabs.TabList>
 						{ tabs.map( ( { id, title } ) => (
 							<Tabs.Tab key={ id } tabId={ id }>
@@ -70,7 +71,13 @@ function FontLibraryModal( {
 						let contents;
 						switch ( id ) {
 							case 'upload-fonts':
-								contents = <UploadFonts />;
+								contents = (
+									<UploadFonts
+										onUpload={ () =>
+											setSelectedTab( 'installed-fonts' )
+										}
+									/>
+								);
 								break;
 							case 'installed-fonts':
 								contents = <InstalledFonts />;

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
@@ -27,8 +27,9 @@ import { unlock } from '../../../lock-unlock';
 
 const { ProgressBar } = unlock( componentsPrivateApis );
 
-function LocalFonts() {
-	const { installFont } = useContext( FontLibraryContext );
+function LocalFonts( { onUpload } ) {
+	const { installFont, handleSetLibraryFontSelected } =
+		useContext( FontLibraryContext );
 	const [ notice, setNotice ] = useState( null );
 	const [ isUploading, setIsUploading ] = useState( false );
 	const supportedFormats =
@@ -170,6 +171,10 @@ function LocalFonts() {
 				type: 'success',
 				message: __( 'Fonts were installed successfully.' ),
 			} );
+			handleSetLibraryFontSelected( fontFamilies[ 0 ] );
+			if ( onUpload ) {
+				onUpload();
+			}
 		} catch ( error ) {
 			setNotice( {
 				type: 'error',

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( { onUpload } ) {
 	return (
 		<>
 			<Spacer margin={ 8 } />
-			<LocalFonts />
+			<LocalFonts onUpload={ onUpload } />
 		</>
 	);
 }