update typesets to contain font families

WordPress · Jun 19, 2024 · 09b9d32 · 09b9d32
1 parent fc682e8
commit 09b9d32
Show file tree

Hide file tree

Showing 5 changed files with 34 additions and 21 deletions.
diff --git a/packages/edit-site/src/components/global-styles/screen-typeset.js b/packages/edit-site/src/components/global-styles/screen-typeset.js
@@ -2,28 +2,38 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
+import { useSelect } from '@wordpress/data';
+import { store as editorStore } from '@wordpress/editor';
 import { __experimentalVStack as VStack } from '@wordpress/components';
 
 /**
  * Internal dependencies
  */
 import TypographyVariations from './variations/variations-typography';
 import ScreenHeader from './header';
-import Typeset from './typeset';
+import FontFamilies from './font-families';
 
 function ScreenTypeset() {
+	const fontLibraryEnabled = useSelect(
+		( select ) =>
+			select( editorStore ).getEditorSettings().fontLibraryEnabled,
+		[]
+	);
+
 	return (
 		<>
 			<ScreenHeader
 				title={ __( 'Typesets' ) }
 				description={ __(
-					'Font pairings and typographic styling applied across the site.'
+					'Fonts and typographic styling applied across the site.'
 				) }
 			/>
 			<div className="edit-site-global-styles-screen">
 				<VStack spacing={ 7 }>
-					<Typeset />
-					<TypographyVariations title={ __( 'Presets' ) } />
+					<TypographyVariations />
+
+					{ ! window.__experimentalDisableFontLibrary &&
+						fontLibraryEnabled && <FontFamilies /> }
 				</VStack>
 			</div>
 		</>

diff --git a/packages/edit-site/src/components/global-styles/screen-typography.js b/packages/edit-site/src/components/global-styles/screen-typography.js
@@ -3,24 +3,15 @@
  */
 import { __ } from '@wordpress/i18n';
 import { __experimentalVStack as VStack } from '@wordpress/components';
-import { store as editorStore } from '@wordpress/editor';
-import { useSelect } from '@wordpress/data';
 
 /**
  * Internal dependencies
  */
 import TypographyElements from './typography-elements';
-import FontFamilies from './font-families';
 import ScreenHeader from './header';
 import TypesetButton from './typeset-button';
 
 function ScreenTypography() {
-	const fontLibraryEnabled = useSelect(
-		( select ) =>
-			select( editorStore ).getEditorSettings().fontLibraryEnabled,
-		[]
-	);
-
 	return (
 		<>
 			<ScreenHeader
@@ -32,8 +23,6 @@ function ScreenTypography() {
 			<div className="edit-site-global-styles-screen">
 				<VStack spacing={ 7 }>
 					<TypesetButton />
-					{ ! window.__experimentalDisableFontLibrary &&
-						fontLibraryEnabled && <FontFamilies /> }
 					<TypographyElements />
 				</VStack>
 			</div>

diff --git a/packages/edit-site/src/components/global-styles/typeset-button.js b/packages/edit-site/src/components/global-styles/typeset-button.js
@@ -47,7 +47,7 @@ function TypesetButton() {
 						<HStack direction="row">
 							<FlexItem>
 								{ allFontFamilies
-									.map( ( font ) => font.name )
+									.map( ( font ) => font?.name )
 									.join( ', ' ) }
 							</FlexItem>
 							<Icon

diff --git a/packages/edit-site/src/components/global-styles/typeset.js b/packages/edit-site/src/components/global-styles/typeset.js
@@ -47,12 +47,18 @@ function Typesets() {
 
 				<VStack spacing={ 2 }>
 					<HStack justify="space-between">
-						<Subtitle level={ 3 }>{ __( 'Typeset' ) }</Subtitle>
+						<Subtitle level={ 3 }>{ __( 'Fonts' ) }</Subtitle>
 					</HStack>
 					<ItemGroup isBordered isSeparated>
-						{ allFontFamilies.map( ( font ) => (
-							<FontFamilyItem key={ font.slug } font={ font } />
-						) ) }
+						{ allFontFamilies.map(
+							( font ) =>
+								font && (
+									<FontFamilyItem
+										key={ font.slug }
+										font={ font }
+									/>
+								)
+						) }
 					</ItemGroup>
 				</VStack>
 			</>

diff --git a/packages/edit-site/src/components/global-styles/utils.js b/packages/edit-site/src/components/global-styles/utils.js
@@ -52,7 +52,15 @@ function getFontFamilyFromSetting( fontFamilies, setting ) {
 }
 
 export function getFontFamilies( themeJson ) {
-	const fontFamilies = themeJson?.settings?.typography?.fontFamilies?.theme; // TODO this could not be under theme.
+	const themeFontFamilies =
+		themeJson?.settings?.typography?.fontFamilies?.theme;
+	const customFontFamilies =
+		themeJson?.settings?.typography?.fontFamilies?.custom;
+
+	let fontFamilies = themeFontFamilies;
+	if ( customFontFamilies ) {
+		fontFamilies = [ ...themeFontFamilies, ...customFontFamilies ];
+	}
 	const bodyFontFamilySetting = themeJson?.styles?.typography?.fontFamily;
 	const bodyFontFamily = getFontFamilyFromSetting(
 		fontFamilies,