Steve-Dee-Designs
/
woocommerce
mirror of https://github.com/woocommerce/woocommerce.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

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 <github-actions@github.com>
This commit is contained in:
Luigi Teschio 2024-02-28 15:47:31 +01:00 committed by GitHub
parent 63f6650759
commit e4574e2681
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
8 changed files with 98 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
plugins/woocommerce-admin/client/customize-store/assembler-hub/preload-fonts.tsx
View File

@ -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 ) && (
<FontFamiliesLoader
fontFamilies={ enabledFontFamilies.custom }
fontFamilies={ [
...( enabledFontFamilies.custom ?? [] ),
...baseFontFamilies.theme,
] }
iframeInstance={ iframeInstance }
/>
) }

50
plugins/woocommerce-admin/client/customize-store/assembler-hub/sidebar/global-styles/font-pairing-variations/constants.ts
View File

@ -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)',
},
},
},

24
plugins/woocommerce-admin/client/customize-store/assembler-hub/sidebar/global-styles/font-pairing-variations/font-families-loader.tsx
View File

@ -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 <></>;
};

37
plugins/woocommerce-admin/client/customize-store/assembler-hub/sidebar/global-styles/font-pairing-variations/index.tsx
View File

@ -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,

4
plugins/woocommerce-admin/client/customize-store/design-without-ai/fonts.ts
View File

@ -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(

22
plugins/woocommerce-admin/client/customize-store/design-without-ai/services.ts
View File

@ -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 );

2
plugins/woocommerce-admin/client/customize-store/types/font.ts
View File

@ -19,5 +19,5 @@ export type FontFace = {
fontStretch?: string;
fontStyle: string;
fontWeight: string;
src: string;
src: Array< string > | string;
};

4
plugins/woocommerce/changelog/45185-45138-cys-core-font-preview-and-site-preview-fail-to-load-fonts-when-user-opts-out-of-tracking Normal file
View File

@ -0,0 +1,4 @@
Significance: minor
Type: fix
CYS - Core: fix font load when user opts out of tracking.