Font Library: Improve 'No fonts installed' state when fonts are insta…

…lled but not activated (#63533)

* Change message when fonts are installed but not activated

* Add custom installed fonts condition for message

* Add installed fonts condition over button text and button action

* Fix e2e test

Co-authored-by: akasunil <sunil25393@git.wordpress.org>
Co-authored-by: t-hamano <wildworks@git.wordpress.org>
Co-authored-by: matiasbenedetto <mmaattiiaass@git.wordpress.org>
Co-authored-by: afercia <afercia@git.wordpress.org>

packages/edit-site/src/components/global-styles/font-families.js

@@ -26,8 +26,14 @@ import { unlock } from '../../lock-unlock';
 const { useGlobalSetting } = unlock( blockEditorPrivateApis );
 
 function FontFamilies() {
-	const { modalTabOpen, setModalTabOpen } = useContext( FontLibraryContext );
+	const { baseCustomFonts, modalTabOpen, setModalTabOpen } =
+		useContext( FontLibraryContext );
 	const [ fontFamilies ] = useGlobalSetting( 'typography.fontFamilies' );
+	const [ baseFontFamilies ] = useGlobalSetting(
+		'typography.fontFamilies',
+		undefined,
+		'base'
+	);
 	const themeFonts = fontFamilies?.theme
 		? fontFamilies.theme
 				.map( ( f ) => setUIValuesNeeded( f, { source: 'theme' } ) )
@@ -40,6 +46,11 @@ function FontFamilies() {
 		: [];
 	const hasFonts = 0 < customFonts.length || 0 < themeFonts.length;
 
+	const hasInstalledFonts =
+		hasFonts ||
+		baseFontFamilies?.theme?.length > 0 ||
+		baseCustomFonts?.length > 0;
+
 	return (
 		<>
 			{ !! modalTabOpen && (
@@ -89,7 +100,11 @@ function FontFamilies() {
 				{ ! hasFonts && (
 					<VStack>
 						<Subtitle level={ 3 }>{ __( 'Fonts' ) }</Subtitle>
-						<Text as="p">{ __( 'No fonts installed.' ) }</Text>
+						<Text as="p">
+							{ hasInstalledFonts
+								? __( 'No fonts activated.' )
+								: __( 'No fonts installed.' ) }
+						</Text>
 					</VStack>
 				) }
 				<Button
@@ -98,11 +113,15 @@ function FontFamilies() {
 					__next40pxDefaultSize
 					onClick={ () =>
 						setModalTabOpen(
-							hasFonts ? 'installed-fonts' : 'upload-fonts'
+							hasInstalledFonts
+								? 'installed-fonts'
+								: 'upload-fonts'
 						)
 					}
 				>
-					{ hasFonts ? __( 'Manage fonts' ) : __( 'Add fonts' ) }
+					{ hasInstalledFonts
+						? __( 'Manage fonts' )
+						: __( 'Add fonts' ) }
 				</Button>
 			</VStack>
 		</>