Font Library: Show 'Add fonts' button when there are no fonts install…

…ed (#58580) Co-authored-by: ramonjd <ramonopoly@git.wordpress.org>
WordPress · Feb 2, 2024 · b859f54 · b859f54
1 parent 51b732c
commit b859f54
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 4 deletions.
diff --git a/packages/edit-site/src/components/global-styles/font-families.js b/packages/edit-site/src/components/global-styles/font-families.js
@@ -9,7 +9,7 @@ import {
 	Button,
 	Tooltip,
 } from '@wordpress/components';
-import { typography } from '@wordpress/icons';
+import { settings } from '@wordpress/icons';
 import { useContext } from '@wordpress/element';
 
 /**
@@ -33,7 +33,7 @@ function FontFamilies() {
 			{ !! modalTabOpen && (
 				<FontLibraryModal
 					onRequestClose={ () => toggleModal() }
-					initialTabName={ modalTabOpen }
+					initialTabId={ modalTabOpen }
 				/>
 			) }
 
@@ -47,7 +47,7 @@ function FontFamilies() {
 									toggleModal( 'installed-fonts' )
 								}
 								aria-label={ __( 'Manage fonts' ) }
-								icon={ typography }
+								icon={ settings }
 								size={ 'small' }
 							/>
 						</Tooltip>
@@ -63,7 +63,16 @@ function FontFamilies() {
 						) ) }
 					</ItemGroup>
 				) : (
-					<>{ __( 'No fonts installed.' ) }</>
+					<>
+						{ __( 'No fonts installed.' ) }
+						<Button
+							className="edit-site-global-styles-font-families__add-fonts"
+							variant="secondary"
+							onClick={ () => toggleModal( 'upload-fonts' ) }
+						>
+							{ __( 'Add fonts' ) }
+						</Button>
+					</>
 				) }
 			</VStack>
 		</>

diff --git a/packages/edit-site/src/components/global-styles/style.scss b/packages/edit-site/src/components/global-styles/style.scss
@@ -46,6 +46,10 @@
 	color: $gray-700;
 }
 
+.edit-site-global-styles-font-families__add-fonts {
+	justify-content: center;
+}
+
 .edit-site-global-styles-screen-colors {
 	margin: $grid-unit-20;