Font Library: Font Collections frontend

lib/compat/wordpress-6.4/fonts/font-face/class-wp-font-face-resolver.php

@@ -56,10 +56,10 @@
 		foreach ( $settings['typography']['fontFamilies'] as $font_families ) {
 			foreach ( $font_families as $definition ) {
 
-				// Skip if font-family "name" is not defined.
-				if ( empty( $definition['name'] ) ) {
-					continue;
-				}
+				// // Skip if font-family "name" is not defined.
+				// if ( empty( $definition['name'] ) ) {
+				// 	continue;
+				// }
 
 				// Skip if "fontFace" is not defined, meaning there are no variations.
 				if ( empty( $definition['fontFace'] ) ) {

lib/experimental/fonts/font-library/class-wp-font-collection.php

@@ -82,7 +82,7 @@ public function get_data() {
 			return new WP_Error( 'font_collection_file_error', __( 'Font Collection data JSON file does not exist.', 'gutenberg' ) );
 		}
 
-		$data = file_get_contents( $this->config['data_json_file'] );
+		$data = wp_json_file_decode( $this->config['data_json_file'] );
 		if ( empty( $data ) ) {
 			return new WP_Error( 'font_collection_read_error', __( 'Error reading the Font Collection data JSON file contents.', 'gutenberg' ) );
 		}

lib/experimental/fonts/font-library/font-library.php

@@ -56,10 +56,18 @@
 	}
 }
 
-// @core-merge: This code needs to be removed.
 add_action(
 	'enqueue_block_editor_assets',
 	function () {
 		wp_add_inline_script( 'wp-block-editor', 'window.__experimentalFontLibrary = true', 'before' );
 	}
 );
+
+$default_font_collection = array(
+	'id'             => 'google-fonts',
+	'name'           => 'Google Fonts',
+	'description'    => __( 'Add from Google Fonts. Fonts are copied to and serverd, from your server.' ),
+	'data_json_file' => path_join( __DIR__, 'google-fonts.json' ),
+);
+
+wp_register_font_collection( $default_font_collection );

packages/edit-site/src/components/global-styles/font-family-item.js

@@ -13,7 +13,7 @@ import { useContext } from '@wordpress/element';
  * Internal dependencies
  */
 import { FontLibraryContext } from './font-library-modal/context';
-import { getPreviewStyle } from './font-library-modal/utils';
+import { getFamilyPreviewStyle } from './font-library-modal/utils/preview-styles';
 
 function FontFamilyItem( { font } ) {
 	const { handleSetLibraryFontSelected, toggleModal } =
@@ -26,7 +26,7 @@ function FontFamilyItem( { font } ) {
 		toggleModal( 'installed-fonts' );
 	};
 
-	const previewStyle = getPreviewStyle( font );
+	const previewStyle = getFamilyPreviewStyle( font );
 
 	return (
 		<Item onClick={ handleClick }>

packages/edit-site/src/components/global-styles/font-library-modal/collection-font-details.js

@@ -0,0 +1,55 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	__experimentalVStack as VStack,
+	__experimentalSpacer as Spacer,
+} from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import CollectionFontVariant from './collection-font-variant';
+import { isFontFontFaceInOutline } from './utils/fonts-outline';
+
+function CollectionFontDetails( {
+	font,
+	handleToggleVariant,
+	fontToInstallOutline,
+} ) {
+	const fontFaces =
+		font.fontFace && font.fontFace.length
+			? font.fontFace
+			: [
+					{
+						fontFamily: font.fontFamily,
+						fontStyle: 'normal',
+						fontWeight: '400',
+					},
+			  ];
+
+	return (
+		<>
+			<Spacer margin={ 4 } />
+			<VStack spacing={ 0 }>
+				<Spacer margin={ 8 } />
+				{ fontFaces.map( ( face, i ) => (
+					<CollectionFontVariant
+						font={ font }
+						face={ face }
+						key={ `face${ i }` }
+						handleToggleVariant={ handleToggleVariant }
+						selected={ isFontFontFaceInOutline(
+							font.slug,
+							face,
+							fontToInstallOutline
+						) }
+					/>
+				) ) }
+			</VStack>
+			<Spacer margin={ 8 } />
+		</>
+	);
+}
+
+export default CollectionFontDetails;

packages/edit-site/src/components/global-styles/font-library-modal/collection-font-variant.js

@@ -0,0 +1,45 @@
+/**
+ * WordPress dependencies
+ */
+import { CheckboxControl, Flex } from '@wordpress/components';
+/**
+ * Internal dependencies
+ */
+import { getFontFaceVariantName } from './utils';
+
+/**
+ * Internal dependencies
+ */
+import FontFaceDemo from './font-demo';
+
+function CollectionFontVariant( {
+	face,
+	font,
+	handleToggleVariant,
+	selected,
+} ) {
+	const handleToggleActivation = () => {
+		if ( font?.fontFace ) {
+			handleToggleVariant( font, face );
+			return;
+		}
+		handleToggleVariant( font );
+	};
+
+	const displayName = font.name + ' ' + getFontFaceVariantName( face );
+
+	return (
+		<div className="font-library-modal__library-font-variant">
+			<Flex justify="space-between" align="center" gap="1rem">
+				<FontFaceDemo fontFace={ face } text={ displayName } />
+				<CheckboxControl
+					checked={ selected }
+					onChange={ handleToggleActivation }
+					__nextHasNoMarginBottom={ true }
+				/>
+			</Flex>
+		</div>
+	);
+}
+
+export default CollectionFontVariant;

packages/edit-site/src/components/global-styles/font-library-modal/context.js

@@ -15,7 +15,12 @@ import { __ } from '@wordpress/i18n';
 /**
  * Internal dependencies
  */
-import { fetchInstallFonts, fetchUninstallFonts } from './resolvers';
+import {
+	fetchInstallFonts,
+	fetchUninstallFonts,
+	fetchFontCollections,
+	fetchFontCollection,
+} from './resolvers';
 import { unlock } from '../../../lock-unlock';
 const { useGlobalSetting } = unlock( blockEditorPrivateApis );
 import {
@@ -52,7 +57,7 @@ function FontLibraryProvider( { children } ) {
 	const [ refreshKey, setRefreshKey ] = useState( 0 );
 
 	const refreshLibrary = () => {
-		setRefreshKey( ( prevKey ) => prevKey + 1 );
+		setRefreshKey( Date.now() );
 	};
 
 	const {
@@ -313,6 +318,30 @@ function FontLibraryProvider( { children } ) {
 		loadedFontUrls.add( src );
 	};
 
+	// Font Collections
+	const [ collections, setFontCollections ] = useState( [] );
+	const getFontCollections = async () => {
+		const response = await fetchFontCollections();
+		setFontCollections( response );
+	};
+	const getFontCollection = async ( id ) => {
+		const hasData = !! collections.find(
+			( collection ) => collection.id === id
+		)?.data;
+		if ( hasData ) return;
+		const response = await fetchFontCollection( id );
+		const updatedCollections = collections.map( ( collection ) =>
+			collection.id === id
+				? { ...collection, data: { ...response?.data } }
+				: collection
+		);
+		setFontCollections( updatedCollections );
+	};
+
+	useEffect( () => {
+		getFontCollections();
+	}, [] );
+
 	return (
 		<FontLibraryContext.Provider
 			value={ {
@@ -337,6 +366,8 @@ function FontLibraryProvider( { children } ) {
 				isResolvingLibrary,
 				hasResolvedLibrary,
 				isInstalling,
+				collections,
+				getFontCollection,
 			} }
 		>
 			{ children }

packages/edit-site/src/components/global-styles/font-library-modal/font-card.js

@@ -7,15 +7,17 @@ import {
 	Button,
 	Flex,
 	FlexItem,
+	Icon,
 } from '@wordpress/components';
 
 /**
  * Internal dependencies
  */
 import FontDemo from './font-demo';
-import { getPreviewStyle } from './utils';
+import { getFamilyPreviewStyle } from './utils/preview-styles';
+import { chevronRight } from '@wordpress/icons';
 
-function FontCard( { font, onClick, actionHandler, variantsText } ) {
+function FontCard( { font, onClick, variantsText } ) {
 	const fakeFontFace = {
 		fontStyle: 'normal',
 		fontWeight: '400',
@@ -31,7 +33,7 @@ function FontCard( { font, onClick, actionHandler, variantsText } ) {
 			  ) || font.fontFace[ 0 ]
 			: fakeFontFace;
 
-	const demoStyle = getPreviewStyle( font );
+	const demoStyle = getFamilyPreviewStyle( font );
 
 	const variantsCount = font.fontFace?.length || 1;
 
@@ -47,6 +49,7 @@ function FontCard( { font, onClick, actionHandler, variantsText } ) {
 		>
 			<Flex justify="space-between" wrap={ false }>
 				<FontDemo
+					customPreviewUrl={ font.preview }
 					fontFace={ displayFontFace }
 					text={ font.name }
 					style={ demoStyle }
@@ -60,7 +63,9 @@ function FontCard( { font, onClick, actionHandler, variantsText } ) {
 									_n( 'variant', 'variants', variantsCount ) }
 						</Text>
 					</FlexItem>
-					<FlexItem>{ !! actionHandler && actionHandler }</FlexItem>
+					<FlexItem>
+						<Icon icon={ chevronRight } />
+					</FlexItem>
 				</Flex>
 			</Flex>
 		</Button>