@wordpress/global-styles-ui 1.1.0

package/src/font-library-modal/utils/index.ts

@@ -0,0 +1,368 @@
+/**
+ * WordPress dependencies
+ */
+import { privateApis as componentsPrivateApis } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import { FONT_WEIGHTS, FONT_STYLES } from './constants';
+import { fetchInstallFontFace } from '../resolvers';
+import { formatFontFaceName } from './preview-styles';
+import type { FontFamily, FontFace, FontUploadResult } from '../types';
+import { unlock } from '../../lock-unlock';
+
+/**
+ * Browser dependencies
+ */
+const { File } = window;
+const { kebabCase } = unlock( componentsPrivateApis );
+
+export function setUIValuesNeeded(
+	font: FontFamily,
+	extraValues: Partial< FontFamily > = {}
+): FontFamily {
+	if ( ! font.name && ( font.fontFamily || font.slug ) ) {
+		font.name = font.fontFamily || font.slug;
+	}
+	return {
+		...font,
+		...extraValues,
+	};
+}
+
+export function isUrlEncoded( url: string ): boolean {
+	if ( typeof url !== 'string' ) {
+		return false;
+	}
+	return url !== decodeURIComponent( url );
+}
+
+export function getFontFaceVariantName( face: FontFace ): string {
+	const weightName = FONT_WEIGHTS[ face.fontWeight ?? '' ] || face.fontWeight;
+	const styleName =
+		face.fontStyle === 'normal'
+			? ''
+			: FONT_STYLES[ face.fontStyle ?? '' ] || face.fontStyle;
+	return `${ weightName } ${ styleName }`;
+}
+
+export function mergeFontFaces(
+	existing: FontFace[] = [],
+	incoming: FontFace[] = []
+): FontFace[] {
+	const map = new Map();
+	for ( const face of existing ) {
+		map.set( `${ face.fontWeight }${ face.fontStyle }`, face );
+	}
+	for ( const face of incoming ) {
+		// This will overwrite if the src already exists, keeping it unique.
+		map.set( `${ face.fontWeight }${ face.fontStyle }`, face );
+	}
+	return Array.from( map.values() );
+}
+
+export function mergeFontFamilies(
+	existing: FontFamily[] = [],
+	incoming: FontFamily[] = []
+): FontFamily[] {
+	const map = new Map();
+	// Add the existing array to the map.
+	for ( const font of existing ) {
+		map.set( font.slug, { ...font } );
+	}
+	// Add the incoming array to the map, overwriting existing values excepting fontFace that need to be merged.
+	for ( const font of incoming ) {
+		if ( map.has( font.slug ) ) {
+			const { fontFace: incomingFontFaces, ...restIncoming } = font;
+			const existingFont = map.get( font.slug );
+			// Merge the fontFaces existing with the incoming fontFaces.
+			const mergedFontFaces = mergeFontFaces(
+				existingFont.fontFace,
+				incomingFontFaces
+			);
+			// Except for the fontFace key all the other keys are overwritten with the incoming values.
+			map.set( font.slug, {
+				...restIncoming,
+				fontFace: mergedFontFaces,
+			} );
+		} else {
+			map.set( font.slug, { ...font } );
+		}
+	}
+	return Array.from( map.values() );
+}
+
+/*
+ * Loads the font face from a URL and adds it to the browser.
+ * It also adds it to the iframe document.
+ */
+export async function loadFontFaceInBrowser(
+	fontFace: FontFace,
+	source: string | File,
+	addTo: 'all' | 'document' | 'iframe' = 'all'
+): Promise< void > {
+	let dataSource;
+
+	if ( typeof source === 'string' ) {
+		dataSource = `url(${ source })`;
+		// eslint-disable-next-line no-undef
+	} else if ( source instanceof File ) {
+		dataSource = await source.arrayBuffer();
+	} else {
+		return;
+	}
+
+	const newFont = new window.FontFace(
+		formatFontFaceName( fontFace.fontFamily ),
+		dataSource,
+		{
+			style: fontFace.fontStyle,
+			weight: String( fontFace.fontWeight ),
+		}
+	);
+
+	const loadedFace = await newFont.load();
+
+	if ( addTo === 'document' || addTo === 'all' ) {
+		document.fonts.add( loadedFace );
+	}
+
+	if ( addTo === 'iframe' || addTo === 'all' ) {
+		const iframe = document.querySelector(
+			'iframe[name="editor-canvas"]'
+		) as HTMLIFrameElement;
+		if ( iframe?.contentDocument ) {
+			iframe.contentDocument.fonts.add( loadedFace );
+		}
+	}
+}
+
+/*
+ * Unloads the font face and remove it from the browser.
+ * It also removes it from the iframe document.
+ *
+ * Note that Font faces that were added to the set using the CSS @font-face rule
+ * remain connected to the corresponding CSS, and cannot be deleted.
+ *
+ * @see https://developer.mozilla.org/en-US/docs/Web/API/FontFaceSet/delete.
+ */
+export function unloadFontFaceInBrowser(
+	fontFace: FontFace,
+	removeFrom: 'all' | 'document' | 'iframe' = 'all'
+): void {
+	const unloadFontFace = ( fonts: FontFaceSet ) => {
+		fonts.forEach( ( f ) => {
+			if (
+				f.family === formatFontFaceName( fontFace?.fontFamily ) &&
+				f.weight === fontFace?.fontWeight &&
+				f.style === fontFace?.fontStyle
+			) {
+				fonts.delete( f );
+			}
+		} );
+	};
+
+	if ( removeFrom === 'document' || removeFrom === 'all' ) {
+		unloadFontFace( document.fonts );
+	}
+
+	if ( removeFrom === 'iframe' || removeFrom === 'all' ) {
+		const iframe = document.querySelector(
+			'iframe[name="editor-canvas"]'
+		) as HTMLIFrameElement;
+		if ( iframe?.contentDocument ) {
+			unloadFontFace( iframe.contentDocument.fonts );
+		}
+	}
+}
+
+/**
+ * Retrieves the display source from a font face src.
+ *
+ * @param {string|string[]} input - The font face src.
+ * @return {string|undefined} The display source or undefined if the input is invalid.
+ */
+export function getDisplaySrcFromFontFace(
+	input: string | string[]
+): string | undefined {
+	if ( ! input ) {
+		return;
+	}
+
+	let src;
+	if ( Array.isArray( input ) ) {
+		src = input[ 0 ];
+	} else {
+		src = input;
+	}
+	// It's expected theme fonts will already be loaded in the browser.
+	if ( src.startsWith( 'file:.' ) ) {
+		return;
+	}
+	if ( ! isUrlEncoded( src ) ) {
+		src = encodeURI( src );
+	}
+	return src;
+}
+
+export function makeFontFamilyFormData( fontFamily: FontFamily ): FormData {
+	const formData = new FormData();
+
+	// eslint-disable-next-line @typescript-eslint/no-unused-vars
+	const { fontFace, category, ...familyWithValidParameters } = fontFamily;
+	const fontFamilySettings = {
+		...familyWithValidParameters,
+		slug: kebabCase( fontFamily.slug ),
+	};
+
+	formData.append(
+		'font_family_settings',
+		JSON.stringify( fontFamilySettings )
+	);
+	return formData;
+}
+
+export function makeFontFacesFormData( font: FontFamily ): FormData[] {
+	const fontFacesFormData = ( font?.fontFace ?? [] ).map(
+		( item, faceIndex ) => {
+			const face = { ...item };
+			const formData = new FormData();
+			if ( face.file ) {
+				// Normalize to an array, since face.file may be a single file or an array of files.
+				const files = Array.isArray( face.file )
+					? face.file
+					: [ face.file ];
+				const src: string[] = [];
+
+				files.forEach( ( file, key ) => {
+					// Slugified file name because the it might contain spaces or characters treated differently on the server.
+					const fileId = `file-${ faceIndex }-${ key }`;
+					// Add the files to the formData
+					formData.append( fileId, file, file.name );
+					src.push( fileId );
+				} );
+
+				face.src = src.length === 1 ? src[ 0 ] : src;
+				delete face.file;
+
+				formData.append( 'font_face_settings', JSON.stringify( face ) );
+			} else {
+				formData.append( 'font_face_settings', JSON.stringify( face ) );
+			}
+			return formData;
+		}
+	);
+
+	return fontFacesFormData;
+}
+
+export async function batchInstallFontFaces(
+	fontFamilyId: string,
+	fontFacesData: FormData[]
+): Promise< FontUploadResult > {
+	const responses: {
+		status: 'fulfilled' | 'rejected';
+		value?: FontFace;
+		reason?: Error;
+	}[] = [];
+
+	/*
+	 * Uses the same response format as Promise.allSettled, but executes requests in sequence to work
+	 * around a race condition that can cause an error when the fonts directory doesn't exist yet.
+	 */
+	for ( const faceData of fontFacesData ) {
+		try {
+			const response = await fetchInstallFontFace(
+				fontFamilyId,
+				faceData
+			);
+			responses.push( { status: 'fulfilled', value: response } );
+		} catch ( error ) {
+			responses.push( { status: 'rejected', reason: error as Error } );
+		}
+	}
+
+	const results: {
+		successes: FontFace[];
+		errors: Array< {
+			data: FormData;
+			message: string;
+		} >;
+	} = {
+		errors: [],
+		successes: [],
+	};
+
+	responses.forEach( ( result, index ) => {
+		if ( result.status === 'fulfilled' && result.value ) {
+			const response = result.value;
+			results.successes.push( response );
+		} else if ( result.reason ) {
+			// Handle network errors or other fetch-related errors
+			results.errors.push( {
+				data: fontFacesData[ index ],
+				message: result.reason.message,
+			} );
+		}
+	} );
+
+	return results;
+}
+
+/*
+ * Downloads a font face asset from a URL to the client and returns a File object.
+ */
+export async function downloadFontFaceAssets(
+	src: string | string[]
+): Promise< File | File[] > {
+	// Normalize to an array, since `src` could be a string or array.
+	src = Array.isArray( src ) ? src : [ src ];
+
+	const files = await Promise.all(
+		src.map( async ( url ) => {
+			return fetch( new Request( url ) )
+				.then( ( response ) => {
+					if ( ! response.ok ) {
+						throw new Error(
+							`Error downloading font face asset from ${ url }. Server responded with status: ${ response.status }`
+						);
+					}
+					return response.blob();
+				} )
+				.then( ( blob ) => {
+					const filename = url.split( '/' ).pop() as string;
+					const file = new File( [ blob ], filename, {
+						type: blob.type,
+					} );
+					return file;
+				} );
+		} )
+	);
+
+	// If we only have one file return it (not the array).  Otherwise return all of them in the array.
+	return files.length === 1 ? files[ 0 ] : files;
+}
+
+/*
+ * Determine if a given Font Face is present in a given collection.
+ * We determine that a font face has been installed by comparing the fontWeight and fontStyle
+ *
+ * @param {Object} fontFace The Font Face to seek
+ * @param {Array} collection The Collection to seek in
+ * @returns True if the font face is found in the collection.  Otherwise False.
+ */
+export function checkFontFaceInstalled(
+	fontFace: FontFace,
+	collection: FontFace[]
+): boolean {
+	return (
+		-1 !==
+		collection.findIndex( ( collectionFontFace ) => {
+			return (
+				collectionFontFace.fontWeight === fontFace.fontWeight &&
+				collectionFontFace.fontStyle === fontFace.fontStyle
+			);
+		} )
+	);
+}

package/src/font-library-modal/utils/make-families-from-faces.ts

@@ -0,0 +1,34 @@
+/**
+ * WordPress dependencies
+ */
+import { privateApis as componentsPrivateApis } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import type { FontFamily, FontFace } from '../types';
+import { unlock } from '../../lock-unlock';
+
+const { kebabCase } = unlock( componentsPrivateApis );
+
+export default function makeFamiliesFromFaces(
+	fontFaces: FontFace[]
+): FontFamily[] {
+	const fontFamiliesObject = fontFaces.reduce(
+		( acc: Record< string, FontFamily >, item: FontFace ) => {
+			if ( ! acc[ item.fontFamily ] ) {
+				acc[ item.fontFamily ] = {
+					name: item.fontFamily,
+					fontFamily: item.fontFamily,
+					slug: kebabCase( item.fontFamily.toLowerCase() ),
+					fontFace: [],
+				};
+			}
+			// @ts-expect-error
+			acc[ item.fontFamily ].fontFace.push( item );
+			return acc;
+		},
+		{}
+	);
+	return Object.values( fontFamiliesObject ) as FontFamily[];
+}

package/src/font-library-modal/utils/preview-styles.ts

@@ -0,0 +1,167 @@
+/**
+ * External dependencies
+ */
+import type { CSSProperties } from 'react';
+
+/**
+ * Internal dependencies
+ */
+import type { FontFace, FontFamily } from '../types';
+
+function findNearest( input: number, numbers: number[] ) {
+	// If the numbers array is empty, return null
+	if ( numbers.length === 0 ) {
+		return null;
+	}
+	// Sort the array based on the absolute difference with the input
+	numbers.sort( ( a, b ) => Math.abs( input - a ) - Math.abs( input - b ) );
+	// Return the first element (which will be the nearest) from the sorted array
+	return numbers[ 0 ];
+}
+
+function extractFontWeights( fontFaces: FontFace[] ): number[] {
+	const result: number[] = [];
+
+	fontFaces.forEach( ( face ) => {
+		const weights = String( face.fontWeight ).split( ' ' );
+
+		if ( weights.length === 2 ) {
+			const start = parseInt( weights[ 0 ] );
+			const end = parseInt( weights[ 1 ] );
+
+			for ( let i = start; i <= end; i += 100 ) {
+				result.push( i );
+			}
+		} else if ( weights.length === 1 ) {
+			result.push( parseInt( weights[ 0 ] ) );
+		}
+	} );
+
+	return result;
+}
+
+/*
+ * Format the font family to use in the CSS font-family property of a CSS rule.
+ *
+ * The input can be a string with the font family name or a string with multiple font family names separated by commas.
+ * It follows the recommendations from the CSS Fonts Module Level 4.
+ * https://www.w3.org/TR/css-fonts-4/#font-family-prop
+ *
+ * @param {string} input - The font family.
+ * @return {string} The formatted font family.
+ *
+ * Example:
+ * formatFontFamily( "Open Sans, Font+Name, sans-serif" ) => '"Open Sans", "Font+Name", sans-serif'
+ * formatFontFamily( "'Open Sans', generic(kai), sans-serif" ) => '"Open Sans", sans-serif'
+ * formatFontFamily( "DotGothic16, Slabo 27px, serif" ) => '"DotGothic16","Slabo 27px",serif'
+ * formatFontFamily( "Mine's, Moe's Typography" ) => `"mine's","Moe's Typography"`
+ */
+export function formatFontFamily( input: string ) {
+	// Matches strings that are not exclusively alphabetic characters or hyphens, and do not exactly follow the pattern generic(alphabetic characters or hyphens).
+	const regex = /^(?!generic\([ a-zA-Z\-]+\)$)(?!^[a-zA-Z\-]+$).+/;
+	const output = input.trim();
+
+	const formatItem = ( item: string ) => {
+		item = item.trim();
+		if ( item.match( regex ) ) {
+			// removes leading and trailing quotes.
+			item = item.replace( /^["']|["']$/g, '' );
+			return `"${ item }"`;
+		}
+		return item;
+	};
+
+	if ( output.includes( ',' ) ) {
+		return output
+			.split( ',' )
+			.map( formatItem )
+			.filter( ( item ) => item !== '' )
+			.join( ', ' );
+	}
+
+	return formatItem( output );
+}
+
+/*
+ * Format the font face name to use in the font-family property of a font face.
+ *
+ * The input can be a string with the font face name or a string with multiple font face names separated by commas.
+ * It removes the leading and trailing quotes from the font face name.
+ *
+ * @param {string} input - The font face name.
+ * @return {string} The formatted font face name.
+ *
+ * Example:
+ * formatFontFaceName("Open Sans") => "Open Sans"
+ * formatFontFaceName("'Open Sans', sans-serif") => "Open Sans"
+ * formatFontFaceName(", 'Open Sans', 'Helvetica Neue', sans-serif") => "Open Sans"
+ */
+export function formatFontFaceName( input: string ) {
+	if ( ! input ) {
+		return '';
+	}
+
+	let output = input.trim();
+	if ( output.includes( ',' ) ) {
+		output = (
+			output
+				.split( ',' )
+				// finds the first item that is not an empty string.
+				.find( ( item ) => item.trim() !== '' ) ?? ''
+		).trim();
+	}
+	// removes leading and trailing quotes.
+	output = output.replace( /^["']|["']$/g, '' );
+
+	// Firefox needs the font name to be wrapped in double quotes meanwhile other browsers don't.
+	if ( window.navigator.userAgent.toLowerCase().includes( 'firefox' ) ) {
+		output = `"${ output }"`;
+	}
+	return output;
+}
+
+export function getFamilyPreviewStyle(
+	family: FontFamily | FontFace
+): CSSProperties {
+	const style: CSSProperties = {
+		fontFamily: formatFontFamily( family.fontFamily ),
+	};
+
+	if ( ! ( 'fontFace' in family ) || ! Array.isArray( family.fontFace ) ) {
+		style.fontWeight = '400';
+		style.fontStyle = 'normal';
+		return style;
+	}
+
+	if ( family.fontFace ) {
+		//get all the font faces with normal style
+		const normalFaces = family.fontFace.filter(
+			( face ) =>
+				face?.fontStyle && face.fontStyle.toLowerCase() === 'normal'
+		);
+		if ( normalFaces.length > 0 ) {
+			style.fontStyle = 'normal';
+			const normalWeights = extractFontWeights( normalFaces );
+			const nearestWeight = findNearest( 400, normalWeights );
+			style.fontWeight = String( nearestWeight ) || '400';
+		} else {
+			style.fontStyle =
+				( family.fontFace.length && family.fontFace[ 0 ].fontStyle ) ||
+				'normal';
+			style.fontWeight =
+				( family.fontFace.length &&
+					String( family.fontFace[ 0 ].fontWeight ) ) ||
+				'400';
+		}
+	}
+
+	return style;
+}
+
+export function getFacePreviewStyle( face: FontFace ): CSSProperties {
+	return {
+		fontFamily: formatFontFamily( face.fontFamily ),
+		fontStyle: face.fontStyle || 'normal',
+		fontWeight: face.fontWeight || '400',
+	};
+}

package/src/font-library-modal/utils/set-immutably.ts

@@ -0,0 +1,37 @@
+/**
+ * Immutably sets a value inside an object. Like `lodash#set`, but returning a
+ * new object. Treats nullish initial values as empty objects. Clones any
+ * nested objects. Supports arrays, too.
+ * Duplicated from `packages/global-styles-engine/src/utils/object.ts`
+ *
+ * @param object Object to set a value in.
+ * @param path   Path in the object to modify.
+ * @param value  New value to set.
+ * @return Cloned object with the new value set.
+ */
+export function setImmutably(
+	object: Object,
+	path: string | number | ( string | number )[],
+	value: any
+) {
+	// Normalize path
+	path = Array.isArray( path ) ? [ ...path ] : [ path ];
+
+	// Shallowly clone the base of the object
+	object = Array.isArray( object ) ? [ ...object ] : { ...object };
+
+	const leaf = path.pop();
+
+	// Traverse object from root to leaf, shallowly cloning at each level
+	let prev = object;
+	for ( const key of path ) {
+		// @ts-expect-error
+		const lvl = prev[ key ];
+		// @ts-expect-error
+		prev = prev[ key ] = Array.isArray( lvl ) ? [ ...lvl ] : { ...lvl };
+	}
+	// @ts-expect-error
+	prev[ leaf ] = value;
+
+	return object;
+}

package/src/font-library-modal/utils/sort-font-faces.ts

@@ -0,0 +1,46 @@
+/**
+ * Internal dependencies
+ */
+import type { FontFace } from '../types';
+
+function getNumericFontWeight( value: string ): number {
+	switch ( value ) {
+		case 'normal':
+			return 400;
+		case 'bold':
+			return 700;
+		case 'bolder':
+			return 500;
+		case 'lighter':
+			return 300;
+		default:
+			return parseInt( value, 10 );
+	}
+}
+
+export function sortFontFaces( faces: FontFace[] ): FontFace[] {
+	return faces.sort( ( a, b ) => {
+		// Ensure 'normal' fontStyle is always first
+		if ( a.fontStyle === 'normal' && b.fontStyle !== 'normal' ) {
+			return -1;
+		}
+		if ( b.fontStyle === 'normal' && a.fontStyle !== 'normal' ) {
+			return 1;
+		}
+
+		// If both fontStyles are the same, sort by fontWeight
+		if ( a.fontStyle === b.fontStyle ) {
+			return (
+				getNumericFontWeight( a.fontWeight?.toString() ?? 'normal' ) -
+				getNumericFontWeight( b.fontWeight?.toString() ?? 'normal' )
+			);
+		}
+
+		// Sort other fontStyles alphabetically
+		if ( ! a.fontStyle || ! b.fontStyle ) {
+			return ! a.fontStyle ? 1 : -1;
+		}
+
+		return a.fontStyle.localeCompare( b.fontStyle );
+	} );
+}