add variation name to typesets

WordPress · Jun 19, 2024 · 06dae66 · 06dae66
1 parent 09b9d32
commit 06dae66
Showing 1 changed file with 27 additions and 7 deletions.
diff --git a/packages/edit-site/src/components/global-styles/typeset-button.js b/packages/edit-site/src/components/global-styles/typeset-button.js
@@ -8,9 +8,11 @@ import {
 	__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 { useContext } from '@wordpress/element';
+import { useMemo, useContext } from '@wordpress/element';
 import { Icon, chevronLeft, chevronRight } from '@wordpress/icons';
 
 /**
@@ -22,7 +24,9 @@ import { NavigationButtonAsItem } from './navigation-button';
 import Subtitle from './subtitle';
 import { unlock } from '../../lock-unlock';
 
-const { GlobalStylesContext } = unlock( blockEditorPrivateApis );
+const { GlobalStylesContext, areGlobalStyleConfigsEqual } = unlock(
+	blockEditorPrivateApis
+);
 const { mergeBaseAndUserConfigs } = unlock( editorPrivateApis );
 
 function TypesetButton() {
@@ -32,6 +36,26 @@ function TypesetButton() {
 	const allFontFamilies = getFontFamilies( config );
 	const hasFonts =
 		allFontFamilies.filter( ( font ) => font !== null ).length > 0;
+	const variations = useSelect( ( select ) => {
+		return select(
+			coreStore
+		).__experimentalGetCurrentThemeGlobalStylesVariations();
+	}, [] );
+
+	const activeVariation = useMemo(
+		() =>
+			variations.find( ( variation ) =>
+				areGlobalStyleConfigsEqual( userConfig, variation )
+			),
+		[ ( userConfig, variations ) ]
+	);
+
+	let title;
+	if ( activeVariation ) {
+		title = activeVariation.title;
+	} else {
+		title = allFontFamilies.map( ( font ) => font?.name ).join( ', ' );
+	}
 
 	return (
 		hasFonts && (
@@ -45,11 +69,7 @@ function TypesetButton() {
 						aria-label={ __( 'Typeset' ) }
 					>
 						<HStack direction="row">
-							<FlexItem>
-								{ allFontFamilies
-									.map( ( font ) => font?.name )
-									.join( ', ' ) }
-							</FlexItem>
+							<FlexItem>{ title }</FlexItem>
 							<Icon
 								icon={ isRTL() ? chevronLeft : chevronRight }
 							/>