From c0616c63b9c3924dd2c0ad0dff7a75813cabe2d5 Mon Sep 17 00:00:00 2001 From: scruffian Date: Thu, 7 Dec 2023 17:43:53 +0000 Subject: [PATCH] refactor --- .../screen-typography-typesets.js | 79 ------------------- .../global-styles/variations-typography.js | 46 +++++------ 2 files changed, 24 insertions(+), 101 deletions(-) diff --git a/packages/edit-site/src/components/global-styles/screen-typography-typesets.js b/packages/edit-site/src/components/global-styles/screen-typography-typesets.js index 8491572e2d85e0..9e631632e9d472 100644 --- a/packages/edit-site/src/components/global-styles/screen-typography-typesets.js +++ b/packages/edit-site/src/components/global-styles/screen-typography-typesets.js @@ -1,94 +1,15 @@ /** * WordPress dependencies */ -import { store as coreStore } from '@wordpress/core-data'; -import { useSelect } from '@wordpress/data'; -import { useContext } from '@wordpress/element'; 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 { getVariationsByProperty } from './utils'; import TypographyVariations from './variations-typography'; import ScreenHeader from './header'; -const { GlobalStylesContext } = unlock( blockEditorPrivateApis ); - -const getFontFamilies = ( themeJson ) => { - const headingFontFamilyCSS = - themeJson?.styles?.elements?.heading?.typography?.fontFamily; - const headingFontFamilyVariable = - headingFontFamilyCSS && - headingFontFamilyCSS.replace( 'var(', '' ).replace( ')', '' ); - const headingFontFamilySlug = headingFontFamilyVariable - ?.split( '--' ) - .slice( -1 )[ 0 ]; - - const bodyFontFamilyVariable = themeJson?.styles?.typography?.fontFamily - .replace( 'var(', '' ) - .replace( ')', '' ); - - const bodyFontFamilySlug = bodyFontFamilyVariable - ?.split( '--' ) - .slice( -1 )[ 0 ]; - - const fontFamilies = themeJson?.settings?.typography?.fontFamilies?.theme; // TODO this could not be under theme. - - const bodyFontFamily = fontFamilies.find( - ( fontFamily ) => fontFamily.slug === bodyFontFamilySlug - ); - - let headingFontFamily = fontFamilies.find( - ( fontFamily ) => fontFamily.slug === headingFontFamilySlug - ); - - if ( ! headingFontFamily ) { - headingFontFamily = bodyFontFamily; - } - - return [ bodyFontFamily, headingFontFamily ]; -}; -const getFontFamilyNames = ( themeJson ) => { - const [ bodyFontFamily, headingFontFamily ] = getFontFamilies( themeJson ); - return [ bodyFontFamily?.name, headingFontFamily?.name ]; -}; - export default function ScreenTypographyTypesets() { - const variations = useSelect( ( select ) => { - return select( - coreStore - ).__experimentalGetCurrentThemeGlobalStylesVariations(); - }, [] ); - - const { base, user } = useContext( GlobalStylesContext ); - - const typographyVariations = - variations && getVariationsByProperty( user, variations, 'typography' ); - - const uniqueTypographyVariations = []; - const uniqueTypographyNames = []; - const isDup = ( x, y ) => { - return uniqueTypographyNames.find( ( it ) => { - return JSON.stringify( it ) === JSON.stringify( [ x, y ] ); - } ); - }; - - typographyVariations?.forEach( ( variation ) => { - const [ bodyFontFamilyName, headingFontFamilyName ] = - getFontFamilyNames( mergeBaseAndUserConfigs( base, variation ) ); - if ( ! isDup( bodyFontFamilyName, headingFontFamilyName ) ) { - uniqueTypographyVariations.push( variation ); - uniqueTypographyNames.push( [ - bodyFontFamilyName, - headingFontFamilyName, - ] ); - } - } ); - return ( <> { - const headingFontFamilyCSS = - themeJson?.styles?.elements?.heading?.typography?.fontFamily; - const headingFontFamilyVariable = - headingFontFamilyCSS && - headingFontFamilyCSS.replace( 'var(', '' ).replace( ')', '' ); - const headingFontFamilySlug = headingFontFamilyVariable - ?.split( '--' ) - .slice( -1 )[ 0 ]; +function getFontFamilyFromSetting( fontFamilies, setting ) { + if ( ! setting ) { + return null; + } - const bodyFontFamilyVariable = themeJson?.styles?.typography?.fontFamily - .replace( 'var(', '' ) - .replace( ')', '' ); + const fontFamilyVariable = setting.replace( 'var(', '' ).replace( ')', '' ); + const fontFamilySlug = fontFamilyVariable?.split( '--' ).slice( -1 )[ 0 ]; - const bodyFontFamilySlug = bodyFontFamilyVariable - ?.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 bodyFontFamily = fontFamilies.find( - ( fontFamily ) => fontFamily.slug === bodyFontFamilySlug + const bodyFontFamilySetting = themeJson?.styles?.typography?.fontFamily; + const bodyFontFamily = getFontFamilyFromSetting( + fontFamilies, + bodyFontFamilySetting ); - let headingFontFamily = fontFamilies.find( - ( fontFamily ) => fontFamily.slug === headingFontFamilySlug - ); + const headingFontFamilySetting = + themeJson?.styles?.elements?.heading?.typography?.fontFamily; - if ( ! headingFontFamily ) { + let headingFontFamily; + if ( ! headingFontFamilySetting ) { headingFontFamily = bodyFontFamily; + } else { + headingFontFamily = getFontFamilyFromSetting( + fontFamilies, + themeJson?.styles?.elements?.heading?.typography?.fontFamily + ); } return [ bodyFontFamily, headingFontFamily ];