diff --git a/packages/edit-site/src/components/global-styles/preview-typography.js b/packages/edit-site/src/components/global-styles/preview-typography.js new file mode 100644 index 0000000000000..0f9c721996d70 --- /dev/null +++ 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 ( + + + { _x( 'A', 'Uppercase letter A' ) } + + + { _x( 'a', 'Lowercase letter A' ) } + + + ); +} diff --git a/packages/edit-site/src/components/global-styles/preview.js b/packages/edit-site/src/components/global-styles/preview.js index 4e48c7ab76e76..eb58419ccec6b 100644 --- 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', } } > - - Aa - + { 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 index d4ce1e5363bf1..bcc0b940de4b2 100644 --- 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 } /> ) } diff --git a/packages/edit-site/src/components/global-styles/utils.js b/packages/edit-site/src/components/global-styles/utils.js index 05a004b878e5f..cb4644695df59 100644 --- 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 index 64a488ac0b79c..2e1222ba22dba 100644 --- 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 index 31b9d920ae75d..78c0b7d94f0b8 100644 --- 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,9 +5,8 @@ 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'; /** @@ -15,87 +14,14 @@ import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor'; */ 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 ( - - - { _x( 'A', 'Uppercase letter A' ) } - - - { _x( 'a', 'Lowercase letter A' ) } - - - ); -}; - 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 ( - - { () => ( - - ) } - - ); - } ) + ? uniqueTypographyVariations.map( ( variation, index ) => ( + + { () => ( + + ) } + + ) ) : null }