Global Styles: Add a typesets section to Typography

Only show typesets if there are fonts

packages/edit-site/src/components/global-styles/screen-typeset.js

@@ -0,0 +1,33 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { __experimentalVStack as VStack } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import TypographyVariations from './variations/variations-typography';
+import ScreenHeader from './header';
+import Typeset from './typeset';
+
+function ScreenTypeset() {
+	return (
+		<>
+			<ScreenHeader
+				title={ __( 'Typesets' ) }
+				description={ __(
+					'Font pairings and typographic styling applied across the site.'
+				) }
+			/>
+			<div className="edit-site-global-styles-screen">
+				<VStack spacing={ 7 }>
+					<Typeset />
+					<TypographyVariations title={ __( 'Presets' ) } />
+				</VStack>
+			</div>
+		</>
+	);
+}
+
+export default ScreenTypeset;

packages/edit-site/src/components/global-styles/screen-typography.js

@@ -10,9 +10,9 @@ import { useSelect } from '@wordpress/data';
  * Internal dependencies
  */
 import TypographyElements from './typography-elements';
-import TypographyVariations from './variations/variations-typography';
 import FontFamilies from './font-families';
 import ScreenHeader from './header';
+import TypesetButton from './typeset-button';
 
 function ScreenTypography() {
 	const fontLibraryEnabled = useSelect(
@@ -31,10 +31,10 @@ function ScreenTypography() {
 			/>
 			<div className="edit-site-global-styles-screen">
 				<VStack spacing={ 7 }>
+					<TypesetButton />
 					{ ! window.__experimentalDisableFontLibrary &&
 						fontLibraryEnabled && <FontFamilies /> }
 					<TypographyElements />
-					<TypographyVariations title={ __( 'Presets' ) } />
 				</VStack>
 			</div>
 		</>

packages/edit-site/src/components/global-styles/typeset-button.js

@@ -0,0 +1,68 @@
+/**
+ * WordPress dependencies
+ */
+import { isRTL, __ } from '@wordpress/i18n';
+import {
+	__experimentalItemGroup as ItemGroup,
+	__experimentalVStack as VStack,
+	__experimentalHStack as HStack,
+	FlexItem,
+} from '@wordpress/components';
+import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
+import { privateApis as editorPrivateApis } from '@wordpress/editor';
+import { useContext } from '@wordpress/element';
+import { Icon, chevronLeft, chevronRight } from '@wordpress/icons';
+
+/**
+ * Internal dependencies
+ */
+import FontLibraryProvider from './font-library-modal/context';
+import { getFontFamilies } from './utils';
+import { NavigationButtonAsItem } from './navigation-button';
+import Subtitle from './subtitle';
+import { unlock } from '../../lock-unlock';
+
+const { GlobalStylesContext } = unlock( blockEditorPrivateApis );
+const { mergeBaseAndUserConfigs } = unlock( editorPrivateApis );
+
+function TypesetButton() {
+	const { base } = useContext( GlobalStylesContext );
+	const { user: userConfig } = useContext( GlobalStylesContext );
+	const config = mergeBaseAndUserConfigs( base, userConfig );
+	const allFontFamilies = getFontFamilies( config );
+	const hasFonts =
+		allFontFamilies.filter( ( font ) => font !== null ).length > 0;
+
+	return (
+		hasFonts && (
+			<VStack spacing={ 2 }>
+				<HStack justify="space-between">
+					<Subtitle level={ 3 }>{ __( 'Typeset' ) }</Subtitle>
+				</HStack>
+				<ItemGroup isBordered isSeparated>
+					<NavigationButtonAsItem
+						path="/typography/typeset"
+						aria-label={ __( 'Typeset' ) }
+					>
+						<HStack direction="row">
+							<FlexItem>
+								{ allFontFamilies
+									.map( ( font ) => font.name )
+									.join( ', ' ) }
+							</FlexItem>
+							<Icon
+								icon={ isRTL() ? chevronLeft : chevronRight }
+							/>
+						</HStack>
+					</NavigationButtonAsItem>
+				</ItemGroup>
+			</VStack>
+		)
+	);
+}
+
+export default ( { ...props } ) => (
+	<FontLibraryProvider>
+		<TypesetButton { ...props } />
+	</FontLibraryProvider>
+);

packages/edit-site/src/components/global-styles/typeset.js

@@ -0,0 +1,67 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import {
+	__experimentalItemGroup as ItemGroup,
+	__experimentalVStack as VStack,
+	__experimentalHStack as HStack,
+} from '@wordpress/components';
+import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
+import { privateApis as editorPrivateApis } from '@wordpress/editor';
+import { useContext } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import FontLibraryProvider, {
+	FontLibraryContext,
+} from './font-library-modal/context';
+import FontLibraryModal from './font-library-modal';
+import FontFamilyItem from './font-family-item';
+import Subtitle from './subtitle';
+import { getFontFamilies } from './utils';
+import { unlock } from '../../lock-unlock';
+
+const { GlobalStylesContext } = unlock( blockEditorPrivateApis );
+const { mergeBaseAndUserConfigs } = unlock( editorPrivateApis );
+
+function Typesets() {
+	const { modalTabOpen, setModalTabOpen } = useContext( FontLibraryContext );
+	const { base } = useContext( GlobalStylesContext );
+	const { user: userConfig } = useContext( GlobalStylesContext );
+	const config = mergeBaseAndUserConfigs( base, userConfig );
+	const allFontFamilies = getFontFamilies( config );
+	const hasFonts =
+		allFontFamilies.filter( ( font ) => font !== null ).length > 0;
+
+	return (
+		hasFonts && (
+			<>
+				{ !! modalTabOpen && (
+					<FontLibraryModal
+						onRequestClose={ () => setModalTabOpen( null ) }
+						defaultTabId={ modalTabOpen }
+					/>
+				) }
+
+				<VStack spacing={ 2 }>
+					<HStack justify="space-between">
+						<Subtitle level={ 3 }>{ __( 'Typeset' ) }</Subtitle>
+					</HStack>
+					<ItemGroup isBordered isSeparated>
+						{ allFontFamilies.map( ( font ) => (
+							<FontFamilyItem key={ font.slug } font={ font } />
+						) ) }
+					</ItemGroup>
+				</VStack>
+			</>
+		)
+	);
+}
+
+export default ( { ...props } ) => (
+	<FontLibraryProvider>
+		<Typesets { ...props } />
+	</FontLibraryProvider>
+);

packages/edit-site/src/components/global-styles/ui.js

@@ -32,6 +32,7 @@ import {
 } from './screen-block-list';
 import ScreenBlock from './screen-block';
 import ScreenTypography from './screen-typography';
+import ScreenTypeset from './screen-typeset';
 import ScreenTypographyElement from './screen-typography-element';
 import ScreenColors from './screen-colors';
 import ScreenColorPalette from './screen-color-palette';
@@ -313,6 +314,10 @@ function GlobalStylesUI() {
 				<ScreenTypography />
 			</GlobalStylesNavigationScreen>
 
+			<GlobalStylesNavigationScreen path="/typography/typeset">
+				<ScreenTypeset />
+			</GlobalStylesNavigationScreen>
+
 			<GlobalStylesNavigationScreen path="/typography/text">
 				<ScreenTypographyElement element="text" />
 			</GlobalStylesNavigationScreen>