Font Library: Font Collections frontend (#54566)

* remove wrong comment around code merge

* registering google fonts collection

* registering google fonts collection

* TEMPORAL: Adding Google Fonts list data as JSON file

* removing unused constant

* add data resolvers to fetch font collections

* fetching collections data from context

* adding collections tabs in font library modal

* refactor google-fonts categories

* add filter fonts functions

* add filterFonts functions tests

* move actionHandler into FontCard component

* adding ui filters for font collections

* add font collections selected variants indicator

* add tests for fonts-outline functions

* install fonts

* fixing the css font family name in the previews to handle font names with spaces

* add tests for previews styles functions

* change value used for refresh font library posts

* removing not needed prefix on slug

* updating google fonts data file with previews

* loading svg previews

* fixing categories in google fonts json file

* format php

* adding google fonts confirmation

* Removing ordering because it is not needed here. Use the default order provided by the font colletion data

* updating google fonts preview urls to load from the new repo

* update wording

Co-authored-by: Brian Alexander <824344+ironprogrammer@users.noreply.github.com>

* update wording

Co-authored-by: Brian Alexander <824344+ironprogrammer@users.noreply.github.com>

* update wording

Co-authored-by: Brian Alexander <824344+ironprogrammer@users.noreply.github.com>

* changing src by downloadFromUrl

* use window.localStorage instead of localStorage

* fixing font collection getData test

* refactor getFontCollections php unit tests to the the default font collection too

* renaming Google Fonts to Default Font Collection

* adding font name to tab title when a font is selected

* replace button deprecated prop

* implement a fontface sort function

* adding unit tests for fontface sorting function

* use fontface sorting'

* use Google fonts as tab title

* format php

* revert  unwanted  changes

* add translation domain

---------

Co-authored-by: Brian Alexander <824344+ironprogrammer@users.noreply.github.com>

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

@@ -56,10 +56,10 @@ private static function parse_settings( array $settings ) {
 		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'], array( 'associative' => true ) );
 		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

@@ -57,10 +57,18 @@ function wp_register_font_collection( $config ) {
 	}
 }
 
-// @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'             => 'default-font-collection',
+	'name'           => 'Google Fonts',
+	'description'    => __( 'Add from Google Fonts. Fonts are copied to and served from your site.', 'gutenberg' ),
+	'data_json_file' => path_join( __DIR__, 'default-font-collection.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,56 @@
+/**
+ * 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';
+import { sortFontFaces } from './utils/sort-font-faces';
+
+function CollectionFontDetails( {
+	font,
+	handleToggleVariant,
+	fontToInstallOutline,
+} ) {
+	const fontFaces =
+		font.fontFace && font.fontFace.length
+			? sortFontFaces( 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>