@wordpress/edit-site 5.18.1-next.5a1d1283.0 → 5.19.1

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

@@ -0,0 +1,23 @@
+/**
+ * WordPress dependencies
+ */
+import { _x } from '@wordpress/i18n';
+
+export const ALLOWED_FILE_EXTENSIONS = [ 'otf', 'ttf', 'woff', 'woff2' ];
+
+export const FONT_WEIGHTS = {
+	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 = {
+	normal: _x( 'Normal', 'font style' ),
+	italic: _x( 'Italic', 'font style' ),
+};

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

@@ -0,0 +1,18 @@
+export default function filterFonts( fonts, filters ) {
+	const { category, search } = filters;
+	let filteredFonts = fonts || [];
+
+	if ( category && category !== 'all' ) {
+		filteredFonts = filteredFonts.filter(
+			( font ) => font.category === category
+		);
+	}
+
+	if ( search ) {
+		filteredFonts = filteredFonts.filter( ( font ) =>
+			font.name.toLowerCase().includes( search.toLowerCase() )
+		);
+	}
+
+	return filteredFonts;
+}

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

@@ -0,0 +1,21 @@
+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 ) {
+	return (
+		outline[ slug ]?.[ `${ face.fontStyle }-${ face.fontWeight }` ] || false
+	);
+}

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

@@ -0,0 +1,58 @@
+/**
+ * Retrieves intersecting font faces between two sets of fonts.
+ *
+ * For each font in the `incoming` list, the function checks for a corresponding match
+ * in the `existing` list based on the `slug` property. If a match is found and both
+ * have `fontFace` properties, it further narrows down to matching font faces based on
+ * the `fontWeight` and `fontStyle`. The result includes the properties of the matched
+ * existing font but only with intersecting font faces.
+ *
+ * @param {Array.<{ slug: string, fontFace?: Array.<{ fontWeight: string, fontStyle: string }> }>} incoming - The list of fonts to compare.
+ * @param {Array.<{ slug: string, fontFace?: Array.<{ fontWeight: string, fontStyle: string }> }>} existing - The reference list of fonts.
+ *
+ * @return {Array.<{ slug: string, fontFace?: Array.<{ fontWeight: string, fontStyle: string }> }>} An array of fonts from the `existing` list with intersecting font faces.
+ *
+ * @example
+ * const incomingFonts = [
+ *   { slug: 'arial', fontFace: [{ fontWeight: '400', fontStyle: 'normal' }] },
+ *   { slug: 'times-new', fontFace: [{ fontWeight: '700', fontStyle: 'italic' }] }
+ * ];
+ *
+ * const existingFonts = [
+ *   { slug: 'arial', fontFace: [{ fontWeight: '400', fontStyle: 'normal' }, { fontWeight: '700', fontStyle: 'italic' }] },
+ *   { slug: 'helvetica', fontFace: [{ fontWeight: '400', fontStyle: 'normal' }] }
+ * ];
+ *
+ * getIntersectingFontFaces(incomingFonts, existingFonts);
+ * // Returns:
+ * // [{ slug: 'arial', fontFace: [{ fontWeight: '400', fontStyle: 'normal' }] }]
+ */
+export default function getIntersectingFontFaces( incoming, existing ) {
+	const matches = [];
+
+	for ( const incomingFont of incoming ) {
+		const existingFont = existing.find(
+			( f ) => f.slug === incomingFont.slug
+		);
+
+		if ( existingFont ) {
+			if ( incomingFont?.fontFace ) {
+				const matchingFaces = incomingFont.fontFace.filter(
+					( face ) => {
+						return ( existingFont?.fontFace || [] ).find( ( f ) => {
+							return (
+								f.fontWeight === face.fontWeight &&
+								f.fontStyle === face.fontStyle
+							);
+						} );
+					}
+				);
+				matches.push( { ...existingFont, fontFace: matchingFaces } );
+			} else {
+				matches.push( incomingFont );
+			}
+		}
+	}
+
+	return matches;
+}

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

@@ -0,0 +1,153 @@
+/**
+ * Internal dependencies
+ */
+import { FONT_WEIGHTS, FONT_STYLES } from './constants';
+import { formatFontFamily } from './preview-styles';
+
+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();
+	}
+
+	// eslint-disable-next-line no-undef
+	const newFont = new FontFace(
+		formatFontFamily( 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 );
+	}
+}
+
+export function getDisplaySrcFromFontFace( input, urlPrefix ) {
+	let src;
+	if ( Array.isArray( input ) ) {
+		src = input[ 0 ];
+	} else {
+		src = input;
+	}
+	// If it is a theme font, we need to make the url absolute
+	if ( src.startsWith( 'file:.' ) && urlPrefix ) {
+		src = src.replace( 'file:.', urlPrefix );
+	}
+	if ( ! isUrlEncoded( src ) ) {
+		src = encodeURI( src );
+	}
+	return src;
+}
+
+export function makeFormDataFromFontFamilies( fontFamilies ) {
+	const formData = new FormData();
+	const newFontFamilies = fontFamilies.map( ( family, familyIndex ) => {
+		if ( family?.fontFace ) {
+			family.fontFace = family.fontFace.map( ( face, faceIndex ) => {
+				if ( face.file ) {
+					// Slugified file name because the it might contain spaces or characters treated differently on the server.
+					const fileId = `file-${ familyIndex }-${ faceIndex }`;
+					// Add the files to the formData
+					formData.append( fileId, face.file, face.file.name );
+					// remove the file object from the face object the file is referenced by the uploadedFile key
+					const { file, ...faceWithoutFileProperty } = face;
+					const newFace = {
+						...faceWithoutFileProperty,
+						uploadedFile: fileId,
+					};
+					return newFace;
+				}
+				return face;
+			} );
+		}
+		return family;
+	} );
+	formData.append( 'fontFamilies', JSON.stringify( newFontFamilies ) );
+	return formData;
+}

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

@@ -0,0 +1,15 @@
+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: item.fontFamily.replace( /\s+/g, '-' ).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

@@ -0,0 +1,86 @@
+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;
+}
+
+export function formatFontFamily( input ) {
+	return input
+		.split( ',' )
+		.map( ( font ) => {
+			font = font.trim(); // Remove any leading or trailing white spaces
+			// If the font doesn't have single quotes and contains a space, then add single quotes around it
+			if ( ! font.startsWith( "'" ) && font.indexOf( ' ' ) !== -1 ) {
+				return `'${ font }'`;
+			}
+			return font; // Return font as is if no transformation is needed
+		} )
+		.join( ', ' );
+}
+
+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.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

@@ -0,0 +1,33 @@
+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

@@ -0,0 +1,69 @@
+/**
+ * Internal dependencies
+ */
+import filterFonts from '../filter-fonts';
+
+describe( 'filterFonts', () => {
+	const mockFonts = [
+		{ name: 'Arial', category: 'sans-serif' },
+		{ name: 'Arial Condensed', category: 'sans-serif' },
+		{ name: 'Times New Roman', category: 'serif' },
+		{ name: 'Courier New', category: 'monospace' },
+		{ name: 'Romantic', category: '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( [
+			{ name: 'Times New Roman', category: '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( [
+			{ name: 'Arial', category: 'sans-serif' },
+			{ name: 'Arial Condensed', category: 'sans-serif' },
+		] );
+	} );
+
+	it( 'should be case insensitive when filtering by search', () => {
+		const result = filterFonts( mockFonts, { search: 'RoMANtic' } );
+		expect( result ).toEqual( [
+			{ name: 'Romantic', category: 'cursive' },
+		] );
+	} );
+
+	it( 'should filter by both category and search', () => {
+		const result = filterFonts( mockFonts, {
+			category: 'serif',
+			search: 'Times',
+		} );
+		expect( result ).toEqual( [
+			{ name: 'Times New Roman', category: '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( [] );
+	} );
+} );

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

@@ -0,0 +1,109 @@
+/**
+ * Internal dependencies
+ */
+import { getFontsOutline, isFontFontFaceInOutline } from '../fonts-outline';
+
+describe( 'getFontsOutline', () => {
+	test( 'should return an empty object for an empty fonts array', () => {
+		const fonts = [];
+		const result = getFontsOutline( fonts );
+		expect( result ).toEqual( {} );
+	} );
+
+	test( 'should handle fonts with no fontFace property', () => {
+		const fonts = [
+			{ slug: 'font1' },
+			{
+				slug: 'font2',
+				fontFace: [ { fontStyle: 'normal', fontWeight: '400' } ],
+			},
+		];
+		const result = getFontsOutline( fonts );
+		expect( result ).toEqual( {
+			font1: {},
+			font2: { 'normal-400': true },
+		} );
+	} );
+
+	test( 'should handle fonts with an empty fontFace array', () => {
+		const fonts = [ { slug: 'font1', fontFace: [] } ];
+		const result = getFontsOutline( fonts );
+		expect( result ).toEqual( {
+			font1: {},
+		} );
+	} );
+
+	test( 'should handle fonts with multiple font faces', () => {
+		const fonts = [
+			{
+				slug: 'font1',
+				fontFace: [
+					{ fontStyle: 'normal', fontWeight: '400' },
+					{ fontStyle: 'italic', fontWeight: '700' },
+				],
+			},
+		];
+		const result = getFontsOutline( fonts );
+		expect( result ).toEqual( {
+			font1: {
+				'normal-400': true,
+				'italic-700': true,
+			},
+		} );
+	} );
+} );
+
+describe( 'isFontFontFaceInOutline', () => {
+	test( 'should return false for an empty outline', () => {
+		const slug = 'font1';
+		const face = { fontStyle: 'normal', fontWeight: '400' };
+		const outline = {};
+
+		const result = isFontFontFaceInOutline( slug, face, outline );
+
+		expect( result ).toBe( false );
+	} );
+
+	test( 'should return false when outline has the slug but no matching fontStyle-fontWeight', () => {
+		const slug = 'font1';
+		const face = { fontStyle: 'normal', fontWeight: '400' };
+		const outline = {
+			font1: {
+				'italic-700': true,
+			},
+		};
+
+		const result = isFontFontFaceInOutline( slug, face, outline );
+
+		expect( result ).toBe( false );
+	} );
+
+	test( 'should return false when outline does not have the slug', () => {
+		const slug = 'font1';
+		const face = { fontStyle: 'normal', fontWeight: '400' };
+		const outline = {
+			font2: {
+				'normal-400': true,
+			},
+		};
+
+		const result = isFontFontFaceInOutline( slug, face, outline );
+
+		expect( result ).toBe( false );
+	} );
+
+	test( 'should return true when outline has the slug and the matching fontStyle-fontWeight', () => {
+		const slug = 'font1';
+		const face = { fontStyle: 'normal', fontWeight: '400' };
+		const outline = {
+			font1: {
+				'normal-400': true,
+				'italic-700': true,
+			},
+		};
+
+		const result = isFontFontFaceInOutline( slug, face, outline );
+
+		expect( result ).toBe( true );
+	} );
+} );

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

@@ -0,0 +1,53 @@
+/**
+ * Internal dependencies
+ */
+import { getDisplaySrcFromFontFace } from '../index';
+
+describe( 'getDisplaySrcFromFontFace', () => {
+	it( 'returns the first item when input is an array', () => {
+		const input = [
+			'http://example.com/font-asset-1.ttf',
+			'http://example.com/font-asset-2.ttf',
+		];
+		expect( getDisplaySrcFromFontFace( input ) ).toBe(
+			'http://example.com/font-asset-1.ttf'
+		);
+	} );
+
+	it( 'returns the input when it is a string', () => {
+		const input = 'http://example.com/font-asset-1.ttf';
+		expect( getDisplaySrcFromFontFace( input ) ).toBe(
+			'http://example.com/font-asset-1.ttf'
+		);
+	} );
+
+	it( 'makes URL absolute when it starts with file:. and urlPrefix is given', () => {
+		const input = 'file:./font1';
+		const urlPrefix = 'http://example.com';
+		expect( getDisplaySrcFromFontFace( input, urlPrefix ) ).toBe(
+			'http://example.com/font1'
+		);
+	} );
+
+	it( 'does not modify URL if it does not start with file:.', () => {
+		const input = [ 'http://some-other-place.com/font1' ];
+		const urlPrefix = 'http://example.com';
+		expect( getDisplaySrcFromFontFace( input, urlPrefix ) ).toBe(
+			'http://some-other-place.com/font1'
+		);
+	} );
+
+	it( 'encodes the URL if it is not encoded', () => {
+		const input = 'file:./assets/font one with spaces.ttf';
+		expect( getDisplaySrcFromFontFace( input ) ).toBe(
+			'file:./assets/font%20one%20with%20spaces.ttf'
+		);
+	} );
+
+	it( 'does not encode the URL if it is already encoded', () => {
+		const input = 'file:./font%20one';
+		expect( getDisplaySrcFromFontFace( input ) ).toBe(
+			'file:./font%20one'
+		);
+	} );
+} );

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

@@ -0,0 +1,30 @@
+/**
+ * Internal dependencies
+ */
+import { getFontFaceVariantName } from '../index';
+
+describe( 'getFontFaceVariantName', () => {
+	it( 'should return "Normal" for fontWeight 400 and fontStyle "normal"', () => {
+		const face = { fontWeight: 400, fontStyle: 'normal' };
+		const result = getFontFaceVariantName( face );
+		expect( result ).toBe( 'Normal ' );
+	} );
+
+	it( 'should return "Bold Italic" for fontWeight 700 and fontStyle "italic"', () => {
+		const face = { fontWeight: 700, fontStyle: 'italic' };
+		const result = getFontFaceVariantName( face );
+		expect( result ).toBe( 'Bold Italic' );
+	} );
+
+	it( 'should return the numerical weight when fontWeight is not recognized', () => {
+		const face = { fontWeight: 150, fontStyle: 'normal' };
+		const result = getFontFaceVariantName( face );
+		expect( result ).toBe( '150 ' );
+	} );
+
+	it( 'should return the raw style when fontStyle is not recognized', () => {
+		const face = { fontWeight: 400, fontStyle: 'oblique' };
+		const result = getFontFaceVariantName( face );
+		expect( result ).toBe( 'Normal oblique' );
+	} );
+} );