From e4574e2681996355c873489f13933f511c8350c0 Mon Sep 17 00:00:00 2001 From: Luigi Teschio Date: Wed, 28 Feb 2024 15:47:31 +0100 Subject: [PATCH] CYS - Core: fix font load when user opts out of tracking (#45185) * CYS - Core: fix font load when user opts out of tracking * remove comment * Add changefile(s) from automation for the following project(s): woocommerce * fix array to pass to FontFamiliesLoader * fix crash * fix font pair selected after the setup --------- Co-authored-by: github-actions --- .../assembler-hub/preload-fonts.tsx | 12 ++++- .../font-pairing-variations/constants.ts | 50 ++++--------------- .../font-families-loader.tsx | 24 +++++---- .../font-pairing-variations/index.tsx | 37 +++++++++++++- .../design-without-ai/fonts.ts | 4 +- .../design-without-ai/services.ts | 22 ++++++-- .../client/customize-store/types/font.ts | 2 +- ...-load-fonts-when-user-opts-out-of-tracking | 4 ++ 8 files changed, 98 insertions(+), 57 deletions(-) create mode 100644 plugins/woocommerce/changelog/45185-45138-cys-core-font-preview-and-site-preview-fail-to-load-fonts-when-user-opts-out-of-tracking diff --git a/plugins/woocommerce-admin/client/customize-store/assembler-hub/preload-fonts.tsx b/plugins/woocommerce-admin/client/customize-store/assembler-hub/preload-fonts.tsx index 84b7db3533b..25624729f1b 100644 --- a/plugins/woocommerce-admin/client/customize-store/assembler-hub/preload-fonts.tsx +++ b/plugins/woocommerce-admin/client/customize-store/assembler-hub/preload-fonts.tsx @@ -46,6 +46,13 @@ export const PreloadFonts = () => { } ) => void ] = useGlobalSetting( 'typography.fontFamilies' ); + // theme.json file font families + const [ baseFontFamilies ] = useGlobalSetting( + 'typography.fontFamilies', + undefined, + 'base' + ); + const { context } = useContext( CustomizeStoreContext ); const { globalStylesId, installedFontFamilies } = useSelect( ( select ) => { @@ -176,7 +183,10 @@ export const PreloadFonts = () => { ) ) } { isNoAIFlow( context.flowType ) && ( ) } diff --git a/plugins/woocommerce-admin/client/customize-store/assembler-hub/sidebar/global-styles/font-pairing-variations/constants.ts b/plugins/woocommerce-admin/client/customize-store/assembler-hub/sidebar/global-styles/font-pairing-variations/constants.ts index 85752e3c155..5a999908c2b 100644 --- a/plugins/woocommerce-admin/client/customize-store/assembler-hub/sidebar/global-styles/font-pairing-variations/constants.ts +++ b/plugins/woocommerce-admin/client/customize-store/assembler-hub/sidebar/global-styles/font-pairing-variations/constants.ts @@ -505,7 +505,8 @@ export const FONT_PAIRINGS_WHEN_USER_DID_NOT_ALLOW_TRACKING = [ theme: [ { fontFamily: 'Cardo', - slug: 'cardo', + // Use the theme-defined variable: https://github.com/WordPress/twentytwentyfour/blob/trunk/theme.json#L240 + slug: 'heading', }, { fontFamily: 'System Sans-serif', @@ -519,7 +520,7 @@ export const FONT_PAIRINGS_WHEN_USER_DID_NOT_ALLOW_TRACKING = [ elements: { heading: { typography: { - fontFamily: 'var(--wp--preset--font-family--cardo)', + fontFamily: 'var(--wp--preset--font-family--heading)', fontStyle: 'normal', fontWeight: '300', }, @@ -530,41 +531,6 @@ export const FONT_PAIRINGS_WHEN_USER_DID_NOT_ALLOW_TRACKING = [ }, }, }, - { - title: 'Jost + Instrument Sans', - version: 2, - lookAndFeel: [] as Look[], - settings: { - typography: { - fontFamilies: { - theme: [ - { - fontFamily: 'Jost', - slug: 'jost', - }, - { - fontFamily: 'Instrument Sans', - slug: 'instrument-sans', - }, - ], - }, - }, - }, - styles: { - elements: { - heading: { - typography: { - fontFamily: 'var(--wp--preset--font-family--jost)', - fontStyle: 'normal', - fontWeight: '100 900', - }, - }, - }, - typography: { - fontFamily: 'var(--wp--preset--font-family--instrument-sans)', - }, - }, - }, { title: 'Inter + Cardo Font', version: 2, @@ -575,11 +541,13 @@ export const FONT_PAIRINGS_WHEN_USER_DID_NOT_ALLOW_TRACKING = [ theme: [ { fontFamily: 'Inter', - slug: 'inter', + // Use the theme-defined variable: https://github.com/WordPress/twentytwentyfour/blob/trunk/theme.json#L215 + slug: 'body', }, { fontFamily: 'Cardo', - slug: 'cardo', + // Use the theme-defined variable: https://github.com/WordPress/twentytwentyfour/blob/trunk/theme.json#L240 + slug: 'heading', }, ], }, @@ -589,14 +557,14 @@ export const FONT_PAIRINGS_WHEN_USER_DID_NOT_ALLOW_TRACKING = [ elements: { heading: { typography: { - fontFamily: 'var(--wp--preset--font-family--inter)', + fontFamily: 'var(--wp--preset--font-family--body)', fontStyle: 'normal', fontWeight: '300', }, }, }, typography: { - fontFamily: 'var(--wp--preset--font-family--cardo)', + fontFamily: 'var(--wp--preset--font-family--heading)', }, }, }, diff --git a/plugins/woocommerce-admin/client/customize-store/assembler-hub/sidebar/global-styles/font-pairing-variations/font-families-loader.tsx b/plugins/woocommerce-admin/client/customize-store/assembler-hub/sidebar/global-styles/font-pairing-variations/font-families-loader.tsx index 6444fdec056..58a0fd4fa71 100644 --- a/plugins/woocommerce-admin/client/customize-store/assembler-hub/sidebar/global-styles/font-pairing-variations/font-families-loader.tsx +++ b/plugins/woocommerce-admin/client/customize-store/assembler-hub/sidebar/global-styles/font-pairing-variations/font-families-loader.tsx @@ -55,19 +55,19 @@ export const FontFamiliesLoader = ( { }; } ); - const themeUrl = - site?.url + '/wp-content/themes/' + currentTheme?.stylesheet; - useEffect( () => { - if ( ! Array.isArray( fontFamilies ) ) { + if ( ! Array.isArray( fontFamilies ) || ! site ) { return; } + + const themeUrl = + site?.url + '/wp-content/themes/' + currentTheme?.stylesheet; fontFamilies.forEach( async ( fontFamily ) => { fontFamily.fontFace?.forEach( async ( fontFace ) => { - const srcFont = getDisplaySrcFromFontFace( - fontFace.src, - themeUrl - ); + const src = Array.isArray( fontFace.src ) + ? fontFace.src[ 0 ] + : fontFace.src; + const srcFont = getDisplaySrcFromFontFace( src, themeUrl ); const dataSource = `url(${ srcFont })`; const newFont = new FontFace( fontFace.fontFamily, dataSource, { style: fontFace.fontStyle, @@ -85,7 +85,13 @@ export const FontFamiliesLoader = ( { } } ); } ); - }, [ fontFamilies, iframeInstance, onLoad, themeUrl ] ); + }, [ + currentTheme?.stylesheet, + fontFamilies, + iframeInstance, + onLoad, + site, + ] ); return <>; }; diff --git a/plugins/woocommerce-admin/client/customize-store/assembler-hub/sidebar/global-styles/font-pairing-variations/index.tsx b/plugins/woocommerce-admin/client/customize-store/assembler-hub/sidebar/global-styles/font-pairing-variations/index.tsx index 3ae9b6892b5..f093d87117d 100644 --- a/plugins/woocommerce-admin/client/customize-store/assembler-hub/sidebar/global-styles/font-pairing-variations/index.tsx +++ b/plugins/woocommerce-admin/client/customize-store/assembler-hub/sidebar/global-styles/font-pairing-variations/index.tsx @@ -51,6 +51,17 @@ export const FontPairing = () => { Array< FontFamily > ]; + // theme.json file font families + const [ baseFontFamilies ] = useGlobalSetting( + 'typography.fontFamilies', + undefined, + 'base' + ) as [ + { + theme: Array< FontFamily >; + } + ]; + const { context } = useContext( CustomizeStoreContext ); const aiOnline = context.flowType === FlowType.AIOnline; const isFontLibraryAvailable = context.isFontLibraryAvailable; @@ -71,7 +82,30 @@ export const FontPairing = () => { } if ( ! trackingAllowed || ! isFontLibraryAvailable ) { - return FONT_PAIRINGS_WHEN_USER_DID_NOT_ALLOW_TRACKING; + return FONT_PAIRINGS_WHEN_USER_DID_NOT_ALLOW_TRACKING.map( + ( pair ) => { + const fontFamilies = pair.settings.typography.fontFamilies; + + const fonts = baseFontFamilies.theme.filter( + ( baseFontFamily ) => + fontFamilies.theme.some( + ( themeFont ) => + themeFont.fontFamily === baseFontFamily.name + ) + ); + + return { + ...pair, + settings: { + typography: { + fontFamilies: { + theme: fonts, + }, + }, + }, + }; + } + ); } return FONT_PAIRINGS_WHEN_AI_IS_OFFLINE.map( ( pair ) => { @@ -96,6 +130,7 @@ export const FontPairing = () => { }, [ aiOnline, aiSuggestions?.lookAndFeel, + baseFontFamilies, context.flowType, custom, isFontLibraryAvailable, diff --git a/plugins/woocommerce-admin/client/customize-store/design-without-ai/fonts.ts b/plugins/woocommerce-admin/client/customize-store/design-without-ai/fonts.ts index 9d9badbc783..44129532b7e 100644 --- a/plugins/woocommerce-admin/client/customize-store/design-without-ai/fonts.ts +++ b/plugins/woocommerce-admin/client/customize-store/design-without-ai/fonts.ts @@ -187,7 +187,9 @@ export const installFontFace = async ( index: number ) => { const { fontFamilyId, ...font } = data; - const fontFaceAssets = await downloadFontFaceAssets( font.src ); + const fontFaceAssets = await downloadFontFaceAssets( + Array.isArray( font.src ) ? font.src[ 0 ] : font.src + ); const formData = new FormData(); const fontFile = await makeFontFacesFormData( diff --git a/plugins/woocommerce-admin/client/customize-store/design-without-ai/services.ts b/plugins/woocommerce-admin/client/customize-store/design-without-ai/services.ts index 4f621dc4c2c..c47b93230a1 100644 --- a/plugins/woocommerce-admin/client/customize-store/design-without-ai/services.ts +++ b/plugins/woocommerce-admin/client/customize-store/design-without-ai/services.ts @@ -5,6 +5,7 @@ import { Sender } from 'xstate'; import { recordEvent } from '@woocommerce/tracks'; import apiFetch from '@wordpress/api-fetch'; import { resolveSelect, dispatch } from '@wordpress/data'; +import { OPTIONS_STORE_NAME } from '@woocommerce/data'; // @ts-expect-error -- No types for this exist yet. // eslint-disable-next-line @woocommerce/dependency-group import { mergeBaseAndUserConfigs } from '@wordpress/edit-site/build-module/components/global-styles/global-styles-provider'; @@ -27,7 +28,11 @@ import { getFontFamiliesAndFontFaceToInstall, } from './fonts'; import { COLOR_PALETTES } from '../assembler-hub/sidebar/global-styles/color-palette-variations/constants'; -import { FONT_PAIRINGS_WHEN_AI_IS_OFFLINE } from '../assembler-hub/sidebar/global-styles/font-pairing-variations/constants'; +import { + FONT_PAIRINGS_WHEN_AI_IS_OFFLINE, + FONT_PAIRINGS_WHEN_USER_DID_NOT_ALLOW_TRACKING, +} from '../assembler-hub/sidebar/global-styles/font-pairing-variations/constants'; +import { DesignWithoutAIStateMachineContext } from './types'; const assembleSite = async () => { await updateTemplate( { @@ -150,10 +155,21 @@ const createProducts = async () => { } }; -const updateGlobalStylesWithDefaultValues = async () => { +const updateGlobalStylesWithDefaultValues = async ( + context: DesignWithoutAIStateMachineContext +) => { // We are using the first color palette and font pairing that are displayed on the color/font picker on the sidebar. const colorPalette = COLOR_PALETTES[ 0 ]; - const fontPairing = FONT_PAIRINGS_WHEN_AI_IS_OFFLINE[ 0 ]; + + const allowTracking = + ( await resolveSelect( OPTIONS_STORE_NAME ).getOption( + 'woocommerce_allow_tracking' + ) ) === 'yes'; + + const fontPairing = + context.isFontLibraryAvailable && allowTracking + ? FONT_PAIRINGS_WHEN_AI_IS_OFFLINE[ 0 ] + : FONT_PAIRINGS_WHEN_USER_DID_NOT_ALLOW_TRACKING[ 0 ]; // @ts-expect-error No types for this exist yet. const { invalidateResolutionForStoreSelector } = dispatch( coreStore ); diff --git a/plugins/woocommerce-admin/client/customize-store/types/font.ts b/plugins/woocommerce-admin/client/customize-store/types/font.ts index 60ff9797318..7c8128be4d1 100644 --- a/plugins/woocommerce-admin/client/customize-store/types/font.ts +++ b/plugins/woocommerce-admin/client/customize-store/types/font.ts @@ -19,5 +19,5 @@ export type FontFace = { fontStretch?: string; fontStyle: string; fontWeight: string; - src: string; + src: Array< string > | string; }; diff --git a/plugins/woocommerce/changelog/45185-45138-cys-core-font-preview-and-site-preview-fail-to-load-fonts-when-user-opts-out-of-tracking b/plugins/woocommerce/changelog/45185-45138-cys-core-font-preview-and-site-preview-fail-to-load-fonts-when-user-opts-out-of-tracking new file mode 100644 index 00000000000..61c21e63ffe --- /dev/null +++ b/plugins/woocommerce/changelog/45185-45138-cys-core-font-preview-and-site-preview-fail-to-load-fonts-when-user-opts-out-of-tracking @@ -0,0 +1,4 @@ +Significance: minor +Type: fix + +CYS - Core: fix font load when user opts out of tracking. \ No newline at end of file