From faa6968936e8d996acafb8fd846d3ca08dad7088 Mon Sep 17 00:00:00 2001
From: Jeff Ong <jonger4@gmail.com>
Date: Fri, 27 Sep 2024 14:44:50 -0400
Subject: [PATCH] Remove additional Typeset screen and surface typesets in the
 typography panel (#65579)

* Remove additional Typeset screen and surface typesets in the typography panel.

* Merge custom and theme font families in getFontFamilyFromSetting.
---
 .../global-styles/screen-typeset.js           |  42 --------
 .../global-styles/screen-typography.js        |   4 +-
 .../global-styles/typeset-button.js           | 100 ------------------
 .../src/components/global-styles/ui.js        |   5 -
 4 files changed, 2 insertions(+), 149 deletions(-)
 delete mode 100644 packages/edit-site/src/components/global-styles/screen-typeset.js
 delete mode 100644 packages/edit-site/src/components/global-styles/typeset-button.js

diff --git a/packages/edit-site/src/components/global-styles/screen-typeset.js b/packages/edit-site/src/components/global-styles/screen-typeset.js
deleted file mode 100644
index ce754121dfe1b5..00000000000000
--- a/packages/edit-site/src/components/global-styles/screen-typeset.js
+++ /dev/null
@@ -1,42 +0,0 @@
-/**
- * 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 FontFamilies from './font-families';
-
-function ScreenTypeset() {
-	const fontLibraryEnabled = useSelect(
-		( select ) =>
-			select( editorStore ).getEditorSettings().fontLibraryEnabled,
-		[]
-	);
-
-	return (
-		<>
-			<ScreenHeader
-				title={ __( 'Typesets' ) }
-				description={ __(
-					'Fonts and typographic styling applied across the site.'
-				) }
-			/>
-			<div className="edit-site-global-styles-screen">
-				<VStack spacing={ 7 }>
-					<TypographyVariations />
-
-					{ fontLibraryEnabled && <FontFamilies /> }
-				</VStack>
-			</div>
-		</>
-	);
-}
-
-export default ScreenTypeset;
diff --git a/packages/edit-site/src/components/global-styles/screen-typography.js b/packages/edit-site/src/components/global-styles/screen-typography.js
index c23592c51a6a2a..70acf9e7ae3d4c 100644
--- a/packages/edit-site/src/components/global-styles/screen-typography.js
+++ b/packages/edit-site/src/components/global-styles/screen-typography.js
@@ -11,8 +11,8 @@ import { store as editorStore } from '@wordpress/editor';
  */
 import TypographyElements from './typography-elements';
 import ScreenHeader from './header';
+import TypographyVariations from './variations/variations-typography';
 import FontSizesCount from './font-sizes/font-sizes-count';
-import TypesetButton from './typeset-button';
 import FontFamilies from './font-families';
 
 function ScreenTypography() {
@@ -32,7 +32,7 @@ function ScreenTypography() {
 			/>
 			<div className="edit-site-global-styles-screen">
 				<VStack spacing={ 7 }>
-					<TypesetButton />
+					<TypographyVariations title={ __( 'Typesets' ) } />
 					{ fontLibraryEnabled && <FontFamilies /> }
 					<TypographyElements />
 					<FontSizesCount />
diff --git a/packages/edit-site/src/components/global-styles/typeset-button.js b/packages/edit-site/src/components/global-styles/typeset-button.js
deleted file mode 100644
index bcd450def06f8e..00000000000000
--- a/packages/edit-site/src/components/global-styles/typeset-button.js
+++ /dev/null
@@ -1,100 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { isRTL, __ } from '@wordpress/i18n';
-import {
-	__experimentalItemGroup as ItemGroup,
-	__experimentalVStack as VStack,
-	__experimentalHStack as HStack,
-	FlexItem,
-} from '@wordpress/components';
-import { store as coreStore } from '@wordpress/core-data';
-import { useSelect } from '@wordpress/data';
-import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
-import { privateApis as editorPrivateApis } from '@wordpress/editor';
-import { useMemo, 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';
-import {
-	filterObjectByProperties,
-	useCurrentMergeThemeStyleVariationsWithUserConfig,
-} from '../../hooks/use-theme-style-variations/use-theme-style-variations-by-property';
-
-const { GlobalStylesContext } = unlock( blockEditorPrivateApis );
-const { mergeBaseAndUserConfigs } = unlock( editorPrivateApis );
-
-function TypesetButton() {
-	const propertiesToFilter = [ 'typography' ];
-	const typographyVariations =
-		useCurrentMergeThemeStyleVariationsWithUserConfig( propertiesToFilter );
-	const hasTypographyVariations = typographyVariations?.length > 1;
-	const { base, user: userConfig } = useContext( GlobalStylesContext );
-	const config = mergeBaseAndUserConfigs( base, userConfig );
-	const allFontFamilies = getFontFamilies( config );
-	const hasFonts =
-		allFontFamilies.filter( ( font ) => font !== null ).length > 0;
-	const variations = useSelect( ( select ) => {
-		return select(
-			coreStore
-		).__experimentalGetCurrentThemeGlobalStylesVariations();
-	}, [] );
-	const userTypographyConfig = filterObjectByProperties(
-		userConfig,
-		'typography'
-	);
-
-	const title = useMemo( () => {
-		if ( Object.keys( userTypographyConfig ).length === 0 ) {
-			return __( 'Default' );
-		}
-		const activeVariation = variations?.find( ( variation ) => {
-			return (
-				JSON.stringify(
-					filterObjectByProperties( variation, 'typography' )
-				) === JSON.stringify( userTypographyConfig )
-			);
-		} );
-		if ( activeVariation ) {
-			return activeVariation.title;
-		}
-		return allFontFamilies.map( ( font ) => font?.name ).join( ', ' );
-	}, [ allFontFamilies, userTypographyConfig, variations ] );
-
-	return (
-		hasTypographyVariations &&
-		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>{ title }</FlexItem>
-							<Icon
-								icon={ isRTL() ? chevronLeft : chevronRight }
-							/>
-						</HStack>
-					</NavigationButtonAsItem>
-				</ItemGroup>
-			</VStack>
-		)
-	);
-}
-
-export default ( { ...props } ) => (
-	<FontLibraryProvider>
-		<TypesetButton { ...props } />
-	</FontLibraryProvider>
-);
diff --git a/packages/edit-site/src/components/global-styles/ui.js b/packages/edit-site/src/components/global-styles/ui.js
index bc6906a769af48..b1550d2a245131 100644
--- a/packages/edit-site/src/components/global-styles/ui.js
+++ b/packages/edit-site/src/components/global-styles/ui.js
@@ -32,7 +32,6 @@ 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 FontSize from './font-sizes/font-size';
 import FontSizes from './font-sizes/font-sizes';
@@ -312,10 +311,6 @@ function GlobalStylesUI() {
 				<FontSize />
 			</GlobalStylesNavigationScreen>
 
-			<GlobalStylesNavigationScreen path="/typography/typeset">
-				<ScreenTypeset />
-			</GlobalStylesNavigationScreen>
-
 			<GlobalStylesNavigationScreen path="/typography/text">
 				<ScreenTypographyElement element="text" />
 			</GlobalStylesNavigationScreen>