@wordpress/global-styles-ui 1.1.0

package/src/font-library-modal/upload-fonts.tsx

@@ -0,0 +1,269 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import {
+	__experimentalSpacer as Spacer,
+	__experimentalText as Text,
+	__experimentalVStack as VStack,
+	Button,
+	DropZone,
+	Notice,
+	FormFileUpload,
+	FlexItem,
+	ProgressBar,
+} from '@wordpress/components';
+import { useContext, useState } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { ALLOWED_FILE_EXTENSIONS } from './utils/constants';
+import { FontLibraryContext } from './context';
+import { Font } from './lib/lib-font.browser';
+import makeFamiliesFromFaces from './utils/make-families-from-faces';
+import { loadFontFaceInBrowser } from './utils';
+import type { FontFace } from './types';
+
+function UploadFonts() {
+	const { installFonts } = useContext( FontLibraryContext );
+	const [ isUploading, setIsUploading ] = useState( false );
+	const [ notice, setNotice ] = useState< {
+		type: 'success' | 'error';
+		message: string;
+		errors?: string[];
+	} | null >( null );
+
+	const handleDropZone = ( files: File[] ) => {
+		handleFilesUpload( files );
+	};
+	const onFilesUpload = ( event: React.ChangeEvent< HTMLInputElement > ) => {
+		handleFilesUpload( event.target.files );
+	};
+
+	/**
+	 * Filters the selected files to only allow the ones with the allowed extensions
+	 *
+	 * @param {Array} files The files to be filtered
+	 * @return {void}
+	 */
+	const handleFilesUpload = async ( files: FileList | File[] | null ) => {
+		if ( ! files ) {
+			return;
+		}
+		setNotice( null );
+		setIsUploading( true );
+		const uniqueFilenames = new Set();
+		const selectedFiles = [ ...files ];
+		let hasInvalidFiles = false;
+
+		// Use map to create a promise for each file check, then filter with Promise.all.
+		const checkFilesPromises = selectedFiles.map( async ( file ) => {
+			const isFont = await isFontFile( file );
+			if ( ! isFont ) {
+				hasInvalidFiles = true;
+				return null; // Return null for invalid files.
+			}
+			// Check for duplicates
+			if ( uniqueFilenames.has( file.name ) ) {
+				return null; // Return null for duplicates.
+			}
+			// Check if the file extension is allowed.
+			const fileExtension = (
+				( ( file.name ?? '' ).split( '.' ) ?? [] ).pop() ?? ''
+			).toLowerCase();
+			if ( ALLOWED_FILE_EXTENSIONS.includes( fileExtension ) ) {
+				uniqueFilenames.add( file.name );
+				return file; // Return the file if it passes all checks.
+			}
+			return null; // Return null for disallowed file extensions.
+		} );
+
+		// Filter out the nulls after all promises have resolved.
+		const allowedFiles: File[] = (
+			await Promise.all( checkFilesPromises )
+		).filter( ( file ) => null !== file );
+
+		if ( allowedFiles.length > 0 ) {
+			loadFiles( allowedFiles );
+		} else {
+			const message = hasInvalidFiles
+				? __( 'Sorry, you are not allowed to upload this file type.' )
+				: __( 'No fonts found to install.' );
+
+			setNotice( {
+				type: 'error',
+				message,
+			} );
+			setIsUploading( false );
+		}
+	};
+
+	/**
+	 * Loads the selected files and reads the font metadata
+	 *
+	 * @param {Array} files The files to be loaded
+	 * @return {void}
+	 */
+	const loadFiles = async ( files: File[] ) => {
+		const fontFacesLoaded = await Promise.all(
+			files.map( async ( fontFile: File ) => {
+				const fontFaceData = await getFontFaceMetadata( fontFile );
+				await loadFontFaceInBrowser(
+					fontFaceData,
+					fontFaceData.file,
+					'all'
+				);
+				return fontFaceData;
+			} )
+		);
+		handleInstall( fontFacesLoaded );
+	};
+
+	/**
+	 * Checks if a file is a valid Font file.
+	 *
+	 * @param {File} file The file to be checked.
+	 * @return {boolean} Whether the file is a valid font file.
+	 */
+	async function isFontFile( file: File ) {
+		const font = new Font( 'Uploaded Font' );
+		try {
+			const buffer = await readFileAsArrayBuffer( file );
+			await font.fromDataBuffer( buffer, 'font' );
+			return true;
+			// eslint-disable-next-line @typescript-eslint/no-unused-vars
+		} catch ( error ) {
+			return false;
+		}
+	}
+
+	// Create a function to read the file as array buffer
+	async function readFileAsArrayBuffer( file: File ) {
+		return new Promise( ( resolve, reject ) => {
+			const reader = new window.FileReader();
+			reader.readAsArrayBuffer( file );
+			reader.onload = () => resolve( reader.result );
+			reader.onerror = reject;
+		} );
+	}
+
+	const getFontFaceMetadata = async ( fontFile: File ) => {
+		const buffer = await readFileAsArrayBuffer( fontFile );
+		const fontObj: Font & {
+			onload?: ( val: { detail: { font: any } } ) => void;
+		} = new Font( 'Uploaded Font' );
+		fontObj.fromDataBuffer( buffer, fontFile.name );
+		// Assuming that fromDataBuffer triggers onload event and returning a Promise
+		const onloadEvent: { detail: { font: any } } = await new Promise(
+			( resolve ) => ( fontObj.onload = resolve )
+		);
+		const font = onloadEvent.detail.font;
+		const { name } = font.opentype.tables;
+		const fontName = name.get( 16 ) || name.get( 1 );
+		const isItalic = name.get( 2 ).toLowerCase().includes( 'italic' );
+		const fontWeight =
+			font.opentype.tables[ 'OS/2' ].usWeightClass || 'normal';
+		const isVariable = !! font.opentype.tables.fvar;
+		const weightAxis =
+			isVariable &&
+			font.opentype.tables.fvar.axes.find(
+				( { tag }: { tag: string } ) => tag === 'wght'
+			);
+		const weightRange = weightAxis
+			? `${ weightAxis.minValue } ${ weightAxis.maxValue }`
+			: null;
+		return {
+			file: fontFile,
+			fontFamily: fontName,
+			fontStyle: isItalic ? 'italic' : 'normal',
+			fontWeight: weightRange || fontWeight,
+		};
+	};
+
+	/**
+	 * Creates the font family definition and sends it to the server
+	 *
+	 * @param {Array} fontFaces The font faces to be installed
+	 * @return {void}
+	 */
+	const handleInstall = async ( fontFaces: FontFace[] ) => {
+		const fontFamilies = makeFamiliesFromFaces( fontFaces );
+
+		try {
+			await installFonts( fontFamilies );
+			setNotice( {
+				type: 'success',
+				message: __( 'Fonts were installed successfully.' ),
+			} );
+		} catch ( error ) {
+			const typedError = error as Error & {
+				installationErrors?: string[];
+			};
+			setNotice( {
+				type: 'error',
+				message: typedError.message,
+				errors: typedError?.installationErrors,
+			} );
+		}
+
+		setIsUploading( false );
+	};
+
+	return (
+		<div className="font-library-modal__tabpanel-layout">
+			<DropZone onFilesDrop={ handleDropZone } />
+			<VStack className="font-library-modal__local-fonts">
+				{ notice && (
+					<Notice
+						status={ notice.type }
+						__unstableHTML
+						onRemove={ () => setNotice( null ) }
+					>
+						{ notice.message }
+						{ notice.errors && (
+							<ul>
+								{ notice.errors.map( ( error, index ) => (
+									<li key={ index }>{ error }</li>
+								) ) }
+							</ul>
+						) }
+					</Notice>
+				) }
+				{ isUploading && (
+					<FlexItem>
+						<div className="font-library-modal__upload-area">
+							<ProgressBar />
+						</div>
+					</FlexItem>
+				) }
+				{ ! isUploading && (
+					<FormFileUpload
+						accept={ ALLOWED_FILE_EXTENSIONS.map(
+							( ext ) => `.${ ext }`
+						).join( ',' ) }
+						multiple
+						onChange={ onFilesUpload }
+						render={ ( { openFileDialog } ) => (
+							<Button
+								__next40pxDefaultSize
+								className="font-library-modal__upload-area"
+								onClick={ openFileDialog }
+							>
+								{ __( 'Upload font' ) }
+							</Button>
+						) }
+					/>
+				) }
+				<Spacer margin={ 2 } />
+				<Text className="font-library-modal__upload-area__text">
+					{ __(
+						'Uploaded fonts appear in your library and can be used in your theme. Supported formats: .ttf, .otf, .woff, and .woff2.'
+					) }
+				</Text>
+			</VStack>
+		</div>
+	);
+}
+
+export default UploadFonts;

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

@@ -0,0 +1,23 @@
+/**
+ * WordPress dependencies
+ */
+import { _x } from '@wordpress/i18n';
+
+export const ALLOWED_FILE_EXTENSIONS = [ 'otf', 'ttf', 'woff', 'woff2' ];
+
+export const FONT_WEIGHTS: Record< string, string > = {
+	100: _x( 'Thin', 'font weight' ),
+	200: _x( 'Extra-light', 'font weight' ),
+	300: _x( 'Light', 'font weight' ),
+	400: _x( 'Normal', 'font weight' ),
+	500: _x( 'Medium', 'font weight' ),
+	600: _x( 'Semi-bold', 'font weight' ),
+	700: _x( 'Bold', 'font weight' ),
+	800: _x( 'Extra-bold', 'font weight' ),
+	900: _x( 'Black', 'font weight' ),
+};
+
+export const FONT_STYLES: Record< string, string > = {
+	normal: _x( 'Normal', 'font style' ),
+	italic: _x( 'Italic', 'font style' ),
+};

package/src/font-library-modal/utils/filter-fonts.ts

@@ -0,0 +1,47 @@
+/**
+ * Internal dependencies
+ */
+import type { CollectionFontFamily } from '../types';
+
+/**
+ * Filters a list of fonts based on the specified filters.
+ *
+ * This function filters a given array of fonts based on the criteria provided in the filters object.
+ * It supports filtering by category and a search term. If the category is provided and not equal to 'all',
+ * the function filters the fonts array to include only those fonts that belong to the specified category.
+ * Additionally, if a search term is provided, it filters the fonts array to include only those fonts
+ * whose name includes the search term, case-insensitively.
+ *
+ * @param fonts            Array of font objects in font-collection schema fashion to be filtered. Each font object should have a 'categories' property and a 'font_family_settings' property with a 'name' key.
+ * @param filters          Object containing the filter criteria. It should have a 'category' key and/or a 'search' key.
+ * @param filters.category The category to filter fonts by. If 'all', no category filtering is applied.
+ * @param filters.search   The search term to filter fonts by. If provided, only fonts whose
+ *
+ * @return Array of filtered font objects based on the provided criteria.
+ */
+export default function filterFonts(
+	fonts: CollectionFontFamily[],
+	filters: { category?: string; search?: string }
+): CollectionFontFamily[] {
+	const { category, search } = filters;
+	let filteredFonts = fonts || [];
+
+	if ( category && category !== 'all' ) {
+		filteredFonts = filteredFonts.filter(
+			( font ) =>
+				font.categories && font.categories.indexOf( category ) !== -1
+		);
+	}
+
+	if ( search ) {
+		filteredFonts = filteredFonts.filter(
+			( font ) =>
+				font.font_family_settings &&
+				font.font_family_settings.name
+					.toLowerCase()
+					.includes( search.toLowerCase() )
+		);
+	}
+
+	return filteredFonts;
+}

package/src/font-library-modal/utils/fonts-outline.ts

@@ -0,0 +1,33 @@
+/**
+ * Internal dependencies
+ */
+import type { FontFace, FontFamily } from '../types';
+
+export function getFontsOutline(
+	fonts: FontFamily[]
+): Record< string, Record< string, boolean > > {
+	return fonts.reduce(
+		( acc, font ) => ( {
+			...acc,
+			[ font.slug ]: ( font?.fontFace || [] ).reduce(
+				( faces, face ) => ( {
+					...faces,
+					[ `${ face.fontStyle }-${ face.fontWeight }` ]: true,
+				} ),
+				{}
+			),
+		} ),
+		{}
+	);
+}
+
+export function isFontFontFaceInOutline(
+	slug: string,
+	face: FontFace | null,
+	outline: Record< string, Record< string, boolean > >
+): boolean {
+	if ( ! face ) {
+		return !! outline[ slug ];
+	}
+	return !! outline[ slug ]?.[ `${ face.fontStyle }-${ face.fontWeight }` ];
+}