[WIP] CYS - Core: add integration with the font library

plugins/woocommerce-admin/client/customize-store/assembler-hub/auto-block-preview.tsx

@@ -23,12 +23,12 @@ import { noop } from 'lodash';
  * Internal dependencies
  */
 import { LogoBlockContext } from './logo-block-context';
-import {
-	FontFamiliesLoader,
-	FontFamily,
-} from './sidebar/global-styles/font-pairing-variations/font-families-loader';
 import { SYSTEM_FONT_SLUG } from './sidebar/global-styles/font-pairing-variations/constants';
 import { PreloadFonts } from './preload-fonts';
+import { FontFamily } from '../types/font';
+import { FontFamiliesLoaderDotCom } from './sidebar/global-styles/font-pairing-variations/font-families-loader-dot-com';
+import { CustomizeStoreContext } from '.';
+import { isAIFlow } from '../guards';
 
 // @ts-ignore No types for this exist yet.
 const { Provider: DisabledProvider } = Disabled.Context;
@@ -81,6 +81,8 @@ function ScaledBlockPreview( {
 		( { slug } ) => slug !== SYSTEM_FONT_SLUG
 	);
 
+	const { context } = useContext( CustomizeStoreContext );
+
 	if ( ! viewportWidth ) {
 		viewportWidth = containerWidth;
 	}
@@ -324,10 +326,12 @@ function ScaledBlockPreview( {
 					</style>
 					<MemoizedBlockList renderAppender={ false } />
 					<PreloadFonts />
-					<FontFamiliesLoader
-						fontFamilies={ externalFontFamilies }
-						onLoad={ noop }
-					/>
+					{ isAIFlow( context.flowType ) && (
+						<FontFamiliesLoaderDotCom
+							fontFamilies={ externalFontFamilies }
+							onLoad={ noop }
+						/>
+					) }
 				</CustomIframeComponent>
 			</div>
 		</DisabledProvider>

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

@@ -1,13 +1,129 @@
+/* eslint-disable @woocommerce/dependency-group */
+/**
+ * External dependencies
+ */
+// @ts-expect-error No types for this exist yet.
+import { store as coreStore } from '@wordpress/core-data';
+import { useSelect, useDispatch } from '@wordpress/data';
+import {
+	privateApis as blockEditorPrivateApis,
+	// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+	// @ts-expect-error No types for this exist yet.
+} from '@wordpress/block-editor';
+// @ts-expect-error No types for this exist yet.
+import { unlock } from '@wordpress/edit-site/build-module/lock-unlock';
+
 /**
  * Internal dependencies
  */
-import { FONT_PAIRINGS } from './sidebar/global-styles/font-pairing-variations/constants';
+import {
+	FONT_PAIRINGS,
+	FONT_FAMILIES_TO_INSTALL,
+} from './sidebar/global-styles/font-pairing-variations/constants';
 import { FontFamiliesLoader } from './sidebar/global-styles/font-pairing-variations/font-families-loader';
+import { useContext, useEffect } from '@wordpress/element';
+import { FontFamily } from '../types/font';
+import { FontFamiliesLoaderDotCom } from './sidebar/global-styles/font-pairing-variations/font-families-loader-dot-com';
+import { CustomizeStoreContext } from '.';
+import { isAIFlow, isNoAIFlow } from '../guards';
+
+const { useGlobalSetting } = unlock( blockEditorPrivateApis );
+
+let areFontsPreloaded = false;
 
 export const PreloadFonts = () => {
+	// @ts-expect-error No types for this exist yet.
+	const { __experimentalSaveSpecifiedEntityEdits: saveSpecifiedEntityEdits } =
+		useDispatch( coreStore );
+	const [ enabledFontFamilies, setFontFamilies ]: [
+		{
+			custom: Array< FontFamily >;
+			theme: Array< FontFamily >;
+		},
+		( font: {
+			custom: Array< FontFamily >;
+			theme: Array< FontFamily >;
+		} ) => void
+	] = useGlobalSetting( 'typography.fontFamilies' );
+
+	const { context } = useContext( CustomizeStoreContext );
+
+	const { globalStylesId, installedFontFamilies } = useSelect( ( select ) => {
+		// @ts-expect-error No types for this exist yet.
+		const { __experimentalGetCurrentGlobalStylesId, getEntityRecords } =
+			select( coreStore );
+		return {
+			globalStylesId: __experimentalGetCurrentGlobalStylesId(),
+			installedFontFamilies: getEntityRecords(
+				'postType',
+				'wp_font_family'
+			) as Array< {
+				content: { raw: string };
+				slug: string;
+			} >,
+		};
+	} );
+
+	useEffect( () => {
+		if (
+			areFontsPreloaded ||
+			installedFontFamilies === null ||
+			enabledFontFamilies === null
+		) {
+			return;
+		}
+
+		const { custom, theme } = enabledFontFamilies;
+
+		const enabledFontSlugs = [
+			...( custom ? custom.map( ( font ) => font.slug ) : [] ),
+			...( theme ? theme.map( ( font ) => font.slug ) : [] ),
+		];
+
+		const fontFamiliesToEnable = installedFontFamilies.reduce(
+			( acc, font ) => {
+				if (
+					enabledFontSlugs.includes( font.slug ) ||
+					FONT_FAMILIES_TO_INSTALL[ font.slug ] === undefined
+				) {
+					return acc;
+				}
+
+				return [
+					...acc,
+					{
+						...JSON.parse( font.content.raw ),
+					},
+				];
+			},
+			[] as Array< FontFamily >
+		);
+
+		setFontFamilies( {
+			...enabledFontFamilies,
+			custom: [
+				...( enabledFontFamilies.custom ?? [] ),
+				...( fontFamiliesToEnable ?? [] ),
+			],
+		} );
+
+		saveSpecifiedEntityEdits( 'root', 'globalStyles', globalStylesId, [
+			'settings.typography.fontFamilies',
+		] );
+
+		areFontsPreloaded = true;
+	}, [
+		enabledFontFamilies,
+		globalStylesId,
+		installedFontFamilies,
+		saveSpecifiedEntityEdits,
+		setFontFamilies,
+	] );
+
 	const allFontChoices = FONT_PAIRINGS.map(
 		( fontPair ) => fontPair?.settings?.typography?.fontFamilies?.theme
 	);
+
 	const fontFamilies = allFontChoices.map( ( fontPair ) => {
 		return [
 			...fontPair.map( ( font ) => {
@@ -21,13 +137,21 @@ export const PreloadFonts = () => {
 
 	return (
 		<>
-			{ fontFamilies.map( ( fontPair ) => (
+			{ isAIFlow( context.flowType ) &&
+				fontFamilies.map( ( fontPair ) => (
+					<FontFamiliesLoaderDotCom
+						fontFamilies={ fontPair }
+						key={ fontPair
+							.map( ( font ) => font.slug )
+							.join( '-' ) }
+						preload
+					/>
+				) ) }
+			{ isNoAIFlow( context.flowType ) && (
 				<FontFamiliesLoader
-					fontFamilies={ fontPair }
-					key={ fontPair.map( ( font ) => font.slug ).join( '-' ) }
-					preload
+					fontFamilies={ enabledFontFamilies.custom }
 				/>
-			) ) }
+			) }
 		</>
 	);
 };

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

@@ -1,6 +1,7 @@
 /**
  * Internal dependencies
  */
+import { FontFamiliesToInstall } from '~/customize-store/types/font';
 import { Look } from '~/customize-store/design-with-ai/types';
 
 export const FONT_PREVIEW_LARGE_WIDTH = 136;
@@ -9,6 +10,69 @@ export const FONT_PREVIEW_WIDTH = 120;
 export const FONT_PREVIEW_HEIGHT = 74;
 export const SYSTEM_FONT_SLUG = 'system-font';
 
+export const FONT_FAMILIES_TO_INSTALL = {
+	inter: {
+		fontFamily: 'Inter',
+		fontWeights: [ '400', '500', '600' ],
+		fontStyles: [ 'normal' ],
+	},
+	'bodoni-moda': {
+		fontFamily: 'Bodoni Moda',
+		fontWeights: [ '400' ],
+		fontStyles: [ 'normal' ],
+	},
+	overpass: {
+		fontFamily: 'Overpass',
+		fontWeights: [ '300', '400' ],
+		fontStyles: [ 'normal' ],
+	},
+	'albert-sans': {
+		fontFamily: 'Albert Sans',
+		fontWeights: [ '700' ],
+		fontStyles: [ 'normal' ],
+	},
+	lora: {
+		fontFamily: 'Lora',
+		fontWeights: [ '400' ],
+		fontStyles: [ 'normal' ],
+	},
+	montserrat: {
+		fontFamily: 'Montserrat',
+		fontWeights: [ '500', '700' ],
+		fontStyles: [ 'normal' ],
+	},
+	arvo: {
+		fontFamily: 'Arvo',
+		fontWeights: [ '400' ],
+		fontStyles: [ 'normal' ],
+	},
+	rubik: {
+		fontFamily: 'Rubik',
+		fontWeights: [ '400', '800' ],
+		fontStyles: [ 'normal' ],
+	},
+	newsreader: {
+		fontFamily: 'Newsreader',
+		fontWeights: [ '400' ],
+		fontStyles: [ 'normal' ],
+	},
+	cormorant: {
+		fontFamily: 'Cormorant',
+		fontWeights: [ '400', '500' ],
+		fontStyles: [ 'normal' ],
+	},
+	'work-sans': {
+		fontFamily: 'Work Sans',
+		fontWeights: [ '400' ],
+		fontStyles: [ 'normal' ],
+	},
+	raleway: {
+		fontFamily: 'Raleway',
+		fontWeights: [ '700' ],
+		fontStyles: [ 'normal' ],
+	},
+} as FontFamiliesToInstall;
+
 // Generated from /wpcom/v2/sites/{site_id}/global-styles-variation/font-pairings
 // TODO: Consider creating an API endpoint for this data
 export const FONT_PAIRINGS_WHEN_AI_IS_OFFLINE = [

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

@@ -0,0 +1,62 @@
+// TODO: When wp.com will upgrade to WordPress 6.5, we should remove this logic and use the FontFamiliesLoader component instead.
+// Load font families from wp.com.
+
+/**
+ * External dependencies
+ */
+import { useMemo } from '@wordpress/element';
+
+export type FontFamily = {
+	fontFamily: string;
+	name: string;
+	slug: string;
+};
+
+type Props = {
+	fontFamilies: FontFamily[];
+	onLoad?: () => void;
+	preload?: boolean;
+};
+
+// See https://developers.google.com/fonts/docs/css2
+const FONT_API_BASE = 'https://fonts-api.wp.com/css2';
+// this is the actual host that the .woff files are at, the above is the one for the .css files with the @font-face declarations
+const FONT_HOST = 'https://fonts.wp.com'; // used for preconnecting so that fonts can get loaded faster
+
+const FONT_AXIS = 'ital,wght@0,400;0,700;1,400;1,700';
+
+export const FontFamiliesLoaderDotCom = ( {
+	fontFamilies,
+	onLoad,
+	preload = false,
+}: Props ) => {
+	const params = useMemo(
+		() =>
+			new URLSearchParams( [
+				...fontFamilies.map( ( { fontFamily } ) => [
+					'family',
+					`${ fontFamily }:${ FONT_AXIS }`,
+				] ),
+				[ 'display', 'swap' ],
+			] ),
+		[ fontFamilies ]
+	);
+
+	if ( ! params.getAll( 'family' ).length ) {
+		return null;
+	}
+
+	return (
+		<>
+			{ preload ? <link rel="preconnect" href={ FONT_HOST } /> : null }
+			<link
+				rel={ preload ? 'preload' : 'stylesheet' }
+				type="text/css"
+				as={ preload ? 'style' : undefined }
+				href={ `${ FONT_API_BASE }?${ params }` }
+				onLoad={ onLoad }
+				onError={ onLoad }
+			/>
+		</>
+	);
+};