Refactor typography previews (#59503)

use the typography preview in style panels Pass through the font size
WordPress · Mar 4, 2024 · 5319e96 · 5319e96
1 parent 941d580
commit 5319e96
Show file tree

Hide file tree

Showing 6 changed files with 119 additions and 104 deletions.
diff --git a/packages/edit-site/src/components/global-styles/preview-typography.js b/packages/edit-site/src/components/global-styles/preview-typography.js
@@ -0,0 +1,62 @@
+/**
+ * WordPress dependencies
+ */
+import { useContext } from '@wordpress/element';
+import { __unstableMotion as motion } from '@wordpress/components';
+import { _x } from '@wordpress/i18n';
+import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
+
+/**
+ * Internal dependencies
+ */
+import { mergeBaseAndUserConfigs } from './global-styles-provider';
+import { unlock } from '../../lock-unlock';
+import { getFamilyPreviewStyle } from './font-library-modal/utils/preview-styles';
+import { getFontFamilies } from './utils';
+
+const { GlobalStylesContext } = unlock( blockEditorPrivateApis );
+
+export default function PreviewTypography( { fontSize, variation } ) {
+	const { base } = useContext( GlobalStylesContext );
+	let config = base;
+	if ( variation ) {
+		config = mergeBaseAndUserConfigs( base, variation );
+	}
+	const [ bodyFontFamilies, headingFontFamilies ] = getFontFamilies( config );
+	const bodyPreviewStyle = bodyFontFamilies
+		? getFamilyPreviewStyle( bodyFontFamilies )
+		: {};
+	const headingPreviewStyle = headingFontFamilies
+		? getFamilyPreviewStyle( headingFontFamilies )
+		: {};
+
+	if ( fontSize ) {
+		bodyPreviewStyle.fontSize = fontSize;
+		headingPreviewStyle.fontSize = fontSize;
+	}
+
+	return (
+		<motion.div
+			className="edit-site-global-styles_preview-typography"
+			animate={ {
+				scale: 1,
+				opacity: 1,
+			} }
+			initial={ {
+				scale: 0.1,
+				opacity: 0,
+			} }
+			transition={ {
+				delay: 0.3,
+				type: 'tween',
+			} }
+		>
+			<span style={ headingPreviewStyle }>
+				{ _x( 'A', 'Uppercase letter A' ) }
+			</span>
+			<span style={ bodyPreviewStyle }>
+				{ _x( 'a', 'Lowercase letter A' ) }
+			</span>
+		</motion.div>
+	);
+}
diff --git a/packages/edit-site/src/components/global-styles/preview.js b/packages/edit-site/src/components/global-styles/preview.js
@@ -23,6 +23,7 @@ import { useLayoutEffect, useState, useMemo } from '@wordpress/element';
  */
 import { unlock } from '../../lock-unlock';
 import { useStylesPreviewColors } from './hooks';
+import PreviewTypography from './preview-typography';
 
 const { useGlobalStyle, useGlobalStylesOutput } = unlock(
 	blockEditorPrivateApis
@@ -71,7 +72,7 @@ const THROTTLE_OPTIONS = {
 	trailing: true,
 };
 
-const StylesPreview = ( { label, isFocused, withHoverView } ) => {
+const StylesPreview = ( { label, isFocused, withHoverView, variation } ) => {
 	const [ fontWeight ] = useGlobalStyle( 'typography.fontWeight' );
 	const [ fontFamily = 'serif' ] = useGlobalStyle( 'typography.fontFamily' );
 	const [ headingFontFamily = fontFamily ] = useGlobalStyle(
@@ -198,19 +199,10 @@ const StylesPreview = ( { label, isFocused, withHoverView } ) => {
 									overflow: 'hidden',
 								} }
 							>
-								<motion.div
-									style={ {
-										fontFamily: headingFontFamily,
-										fontSize: 65 * ratio,
-										color: headingColor,
-										fontWeight: headingFontWeight,
-									} }
-									animate={ { scale: 1, opacity: 1 } }
-									initial={ { scale: 0.1, opacity: 0 } }
-									transition={ { delay: 0.3, type: 'tween' } }
-								>
-									Aa
-								</motion.div>
+								<PreviewTypography
+									fontSize={ 65 * ratio }
+									variation={ variation }
+								/>
 								<VStack spacing={ 4 * ratio }>
 									{ highlightedColors.map(
 										( { slug, color }, index ) => (

diff --git a/packages/edit-site/src/components/global-styles/style-variations-container.js b/packages/edit-site/src/components/global-styles/style-variations-container.js
@@ -47,6 +47,7 @@ export default function StyleVariationsContainer() {
 							label={ variation?.title }
 							withHoverView
 							isFocused={ isFocused }
+							variation={ variation }
 						/>
 					) }
 				</Variation>

diff --git a/packages/edit-site/src/components/global-styles/utils.js b/packages/edit-site/src/components/global-styles/utils.js
@@ -10,3 +10,40 @@ export function getVariationClassName( variation ) {
 	}
 	return `is-style-${ variation }`;
 }
+
+function getFontFamilyFromSetting( fontFamilies, setting ) {
+	if ( ! setting ) {
+		return null;
+	}
+
+	const fontFamilyVariable = setting.replace( 'var(', '' ).replace( ')', '' );
+	const fontFamilySlug = fontFamilyVariable?.split( '--' ).slice( -1 )[ 0 ];
+
+	return fontFamilies.find(
+		( fontFamily ) => fontFamily.slug === fontFamilySlug
+	);
+}
+
+export function getFontFamilies( themeJson ) {
+	const fontFamilies = themeJson?.settings?.typography?.fontFamilies?.theme; // TODO this could not be under theme.
+	const bodyFontFamilySetting = themeJson?.styles?.typography?.fontFamily;
+	const bodyFontFamily = getFontFamilyFromSetting(
+		fontFamilies,
+		bodyFontFamilySetting
+	);
+
+	const headingFontFamilySetting =
+		themeJson?.styles?.elements?.heading?.typography?.fontFamily;
+
+	let headingFontFamily;
+	if ( ! headingFontFamilySetting ) {
+		headingFontFamily = bodyFontFamily;
+	} else {
+		headingFontFamily = getFontFamilyFromSetting(
+			fontFamilies,
+			themeJson?.styles?.elements?.heading?.typography?.fontFamily
+		);
+	}
+
+	return [ bodyFontFamily, headingFontFamily ];
+}
diff --git a/packages/edit-site/src/components/global-styles/variations/style.scss b/packages/edit-site/src/components/global-styles/variations/style.scss
@@ -37,7 +37,7 @@
 	}
 }
 
-.edit-site-global-styles-variations__type-preview {
+.edit-site-global-styles_preview-typography {
 	font-size: 22px;
 	line-height: 44px;
 	text-align: center;

diff --git a/packages/edit-site/src/components/global-styles/variations/variations-typography.js b/packages/edit-site/src/components/global-styles/variations/variations-typography.js
@@ -5,97 +5,23 @@ import { useContext } from '@wordpress/element';
 import {
 	__experimentalGrid as Grid,
 	__experimentalVStack as VStack,
-	__unstableMotion as motion,
 } from '@wordpress/components';
-import { __, _x } from '@wordpress/i18n';
+import { __ } from '@wordpress/i18n';
 import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
 
 /**
  * Internal dependencies
  */
 import { mergeBaseAndUserConfigs } from '../global-styles-provider';
 import { unlock } from '../../../lock-unlock';
-import { getFamilyPreviewStyle } from '../font-library-modal/utils/preview-styles';
 import { useCurrentMergeThemeStyleVariationsWithUserConfig } from '../../../hooks/use-theme-style-variations/use-theme-style-variations-by-property';
+import PreviewTypography from '../preview-typography';
 import Subtitle from '../subtitle';
+import { getFontFamilies } from '../utils';
 import Variation from './variation';
 
 const { GlobalStylesContext } = unlock( blockEditorPrivateApis );
 
-function getFontFamilyFromSetting( fontFamilies, setting ) {
-	if ( ! setting ) {
-		return null;
-	}
-
-	const fontFamilyVariable = setting.replace( 'var(', '' ).replace( ')', '' );
-	const fontFamilySlug = fontFamilyVariable?.split( '--' ).slice( -1 )[ 0 ];
-
-	return fontFamilies.find(
-		( fontFamily ) => fontFamily.slug === fontFamilySlug
-	);
-}
-
-const getFontFamilies = ( themeJson ) => {
-	const fontFamilies = themeJson?.settings?.typography?.fontFamilies?.theme; // TODO this could not be under theme.
-	const bodyFontFamilySetting = themeJson?.styles?.typography?.fontFamily;
-	const bodyFontFamily = getFontFamilyFromSetting(
-		fontFamilies,
-		bodyFontFamilySetting
-	);
-
-	const headingFontFamilySetting =
-		themeJson?.styles?.elements?.heading?.typography?.fontFamily;
-
-	let headingFontFamily;
-	if ( ! headingFontFamilySetting ) {
-		headingFontFamily = bodyFontFamily;
-	} else {
-		headingFontFamily = getFontFamilyFromSetting(
-			fontFamilies,
-			themeJson?.styles?.elements?.heading?.typography?.fontFamily
-		);
-	}
-
-	return [ bodyFontFamily, headingFontFamily ];
-};
-
-const TypePreview = ( { variation } ) => {
-	const { base } = useContext( GlobalStylesContext );
-	const [ bodyFontFamilies, headingFontFamilies ] = getFontFamilies(
-		mergeBaseAndUserConfigs( base, variation )
-	);
-	const bodyPreviewStyle = bodyFontFamilies
-		? getFamilyPreviewStyle( bodyFontFamilies )
-		: {};
-	const headingPreviewStyle = headingFontFamilies
-		? getFamilyPreviewStyle( headingFontFamilies )
-		: {};
-	return (
-		<motion.div
-			className="edit-site-global-styles-variations__type-preview"
-			animate={ {
-				scale: 1,
-				opacity: 1,
-			} }
-			initial={ {
-				scale: 0.1,
-				opacity: 0,
-			} }
-			transition={ {
-				delay: 0.3,
-				type: 'tween',
-			} }
-		>
-			<span style={ headingPreviewStyle }>
-				{ _x( 'A', 'Uppercase letter A' ) }
-			</span>
-			<span style={ bodyPreviewStyle }>
-				{ _x( 'a', 'Lowercase letter A' ) }
-			</span>
-		</motion.div>
-	);
-};
-
 export default function TypographyVariations() {
 	const typographyVariations =
 		useCurrentMergeThemeStyleVariationsWithUserConfig( {
@@ -143,18 +69,15 @@ export default function TypographyVariations() {
 				className="edit-site-global-styles-style-variations-container"
 			>
 				{ typographyVariations && typographyVariations.length
-					? uniqueTypographyVariations.map( ( variation, index ) => {
-							return (
-								<Variation
-									key={ index }
-									variation={ variation }
-								>
-									{ () => (
-										<TypePreview variation={ variation } />
-									) }
-								</Variation>
-							);
-					  } )
+					? uniqueTypographyVariations.map( ( variation, index ) => (
+							<Variation key={ index } variation={ variation }>
+								{ () => (
+									<PreviewTypography
+										variation={ variation }
+									/>
+								) }
+							</Variation>
+					  ) )
 					: null }
 			</Grid>
 		</VStack>