@wordpress/edit-site 6.33.3-next.36001005c.0 → 6.34.0

package/src/components/global-styles/font-library-modal/utils/fonts-outline.js

@@ -1,22 +0,0 @@
-export function getFontsOutline( fonts ) {
-	return fonts.reduce(
-		( acc, font ) => ( {
-			...acc,
-			[ font.slug ]: ( font?.fontFace || [] ).reduce(
-				( faces, face ) => ( {
-					...faces,
-					[ `${ face.fontStyle }-${ face.fontWeight }` ]: true,
-				} ),
-				{}
-			),
-		} ),
-		{}
-	);
-}
-
-export function isFontFontFaceInOutline( slug, face, outline ) {
-	if ( ! face ) {
-		return !! outline[ slug ];
-	}
-	return !! outline[ slug ]?.[ `${ face.fontStyle }-${ face.fontWeight }` ];
-}

package/src/components/global-styles/font-library-modal/utils/index.js

@@ -1,333 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { privateApis as componentsPrivateApis } from '@wordpress/components';
-
-/**
- * Internal dependencies
- */
-import { FONT_WEIGHTS, FONT_STYLES } from './constants';
-import { unlock } from '../../../../lock-unlock';
-import { fetchInstallFontFace } from '../resolvers';
-import { formatFontFaceName } from './preview-styles';
-
-/**
- * Browser dependencies
- */
-const { File } = window;
-const { kebabCase } = unlock( componentsPrivateApis );
-
-export function setUIValuesNeeded( font, extraValues = {} ) {
-	if ( ! font.name && ( font.fontFamily || font.slug ) ) {
-		font.name = font.fontFamily || font.slug;
-	}
-	return {
-		...font,
-		...extraValues,
-	};
-}
-
-export function isUrlEncoded( url ) {
-	if ( typeof url !== 'string' ) {
-		return false;
-	}
-	return url !== decodeURIComponent( url );
-}
-
-export function getFontFaceVariantName( face ) {
-	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 = [], incoming = [] ) {
-	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 = [], incoming = [] ) {
-	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, source, addTo = 'all' ) {
-	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: fontFace.fontWeight,
-		}
-	);
-
-	const loadedFace = await newFont.load();
-
-	if ( addTo === 'document' || addTo === 'all' ) {
-		document.fonts.add( loadedFace );
-	}
-
-	if ( addTo === 'iframe' || addTo === 'all' ) {
-		const iframeDocument = document.querySelector(
-			'iframe[name="editor-canvas"]'
-		).contentDocument;
-		iframeDocument.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, removeFrom = 'all' ) {
-	const unloadFontFace = ( fonts ) => {
-		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 iframeDocument = document.querySelector(
-			'iframe[name="editor-canvas"]'
-		).contentDocument;
-		unloadFontFace( iframeDocument.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 ) {
-	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 ) {
-	const formData = new FormData();
-
-	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 ) {
-	if ( font?.fontFace ) {
-		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 = [];
-
-				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, fontFacesData ) {
-	const responses = [];
-
-	/*
-	 * 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 } );
-		}
-	}
-
-	const results = {
-		errors: [],
-		successes: [],
-	};
-
-	responses.forEach( ( result, index ) => {
-		if ( result.status === 'fulfilled' ) {
-			const response = result.value;
-			if ( response.id ) {
-				results.successes.push( response );
-			} else {
-				results.errors.push( {
-					data: fontFacesData[ index ],
-					message: `Error: ${ response.message }`,
-				} );
-			}
-		} else {
-			// 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 ) {
-	// 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();
-					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, collection ) {
-	return (
-		-1 !==
-		collection.findIndex( ( collectionFontFace ) => {
-			return (
-				collectionFontFace.fontWeight === fontFace.fontWeight &&
-				collectionFontFace.fontStyle === fontFace.fontStyle
-			);
-		} )
-	);
-}

package/src/components/global-styles/font-library-modal/utils/make-families-from-faces.js

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

package/src/components/global-styles/font-library-modal/utils/preview-styles.js

@@ -1,152 +0,0 @@
-function findNearest( input, numbers ) {
-	// 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 ) {
-	const result = [];
-
-	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 ) {
-	// 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 ) => {
-		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 ) {
-	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 ) {
-	const style = { fontFamily: formatFontFamily( family.fontFamily ) };
-
-	if ( ! 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 ) {
-	return {
-		fontFamily: formatFontFamily( face.fontFamily ),
-		fontStyle: face.fontStyle || 'normal',
-		fontWeight: face.fontWeight || '400',
-	};
-}

package/src/components/global-styles/font-library-modal/utils/sort-font-faces.js

@@ -1,37 +0,0 @@
-function getNumericFontWeight( value ) {
-	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 ) {
-	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 ) -
-				getNumericFontWeight( b.fontWeight )
-			);
-		}
-
-		// Sort other fontStyles alphabetically
-		return a.fontStyle.localeCompare( b.fontStyle );
-	} );
-}

package/src/components/global-styles/font-library-modal/utils/test/filter-fonts.spec.js

@@ -1,99 +0,0 @@
-/**
- * Internal dependencies
- */
-import filterFonts from '../filter-fonts';
-
-describe( 'filterFonts', () => {
-	const mockFonts = [
-		{
-			font_family_settings: { name: 'Arial' },
-			categories: [ 'sans-serif' ],
-		},
-		{
-			font_family_settings: { name: 'Arial Condensed' },
-			categories: [ 'sans-serif' ],
-		},
-		{
-			font_family_settings: { name: 'Times New Roman' },
-			categories: [ 'serif' ],
-		},
-		{
-			font_family_settings: { name: 'Courier New' },
-			categories: [ 'monospace' ],
-		},
-		{
-			font_family_settings: { name: 'Romantic' },
-			categories: [ 'cursive' ],
-		},
-	];
-
-	it( 'should return all fonts if no filters are provided', () => {
-		const result = filterFonts( mockFonts, {} );
-		expect( result ).toEqual( mockFonts );
-	} );
-
-	it( 'should filter by category', () => {
-		const result = filterFonts( mockFonts, { category: 'serif' } );
-		expect( result ).toEqual( [
-			{
-				font_family_settings: { name: 'Times New Roman' },
-				categories: [ 'serif' ],
-			},
-		] );
-	} );
-
-	it( 'should return all fonts if category is "all"', () => {
-		const result = filterFonts( mockFonts, { category: 'all' } );
-		expect( result ).toEqual( mockFonts );
-	} );
-
-	it( 'should filter by search', () => {
-		const result = filterFonts( mockFonts, { search: 'ari' } );
-		expect( result ).toEqual( [
-			{
-				font_family_settings: { name: 'Arial' },
-				categories: [ 'sans-serif' ],
-			},
-			{
-				font_family_settings: { name: 'Arial Condensed' },
-				categories: [ 'sans-serif' ],
-			},
-		] );
-	} );
-
-	it( 'should be case insensitive when filtering by search', () => {
-		const result = filterFonts( mockFonts, { search: 'RoMANtic' } );
-		expect( result ).toEqual( [
-			{
-				font_family_settings: { name: 'Romantic' },
-				categories: [ 'cursive' ],
-			},
-		] );
-	} );
-
-	it( 'should filter by both category and search', () => {
-		const result = filterFonts( mockFonts, {
-			category: 'serif',
-			search: 'Times',
-		} );
-		expect( result ).toEqual( [
-			{
-				font_family_settings: { name: 'Times New Roman' },
-				categories: [ 'serif' ],
-			},
-		] );
-	} );
-
-	it( 'should return an empty array if no fonts match the filter criteria', () => {
-		const result = filterFonts( mockFonts, {
-			category: 'serif',
-			search: 'Arial',
-		} );
-		expect( result ).toEqual( [] );
-	} );
-
-	it( 'should return an empty array if fonts array is not provided', () => {
-		const result = filterFonts( undefined, { category: 'serif' } );
-		expect( result ).toEqual( [] );
-	} );
-} );