@wordpress/edit-site 5.19.0 → 5.19.1

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

@@ -3,8 +3,6 @@
  */
 import { __, sprintf } from '@wordpress/i18n';
 import { useContext } from '@wordpress/element';
-import { Icon } from '@wordpress/components';
-import { chevronRight } from '@wordpress/icons';
 
 /**
  * Internal dependencies
@@ -28,12 +26,7 @@ function LibraryFontCard( { font, ...props } ) {
 	);
 
 	return (
-		<FontCard
-			font={ font }
-			variantsText={ variantsText }
-			actionHandler={ <Icon icon={ chevronRight } /> }
-			{ ...props }
-		/>
+		<FontCard font={ font } variantsText={ variantsText } { ...props } />
 	);
 }
 

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

@@ -10,13 +10,12 @@ import {
  * Internal dependencies
  */
 import LibraryFontVariant from './library-font-variant';
+import { sortFontFaces } from './utils/sort-font-faces';
 
 function LibraryFontDetails( { font } ) {
 	const fontFaces =
 		font.fontFace && font.fontFace.length
-			? font.fontFace.sort( ( a, b ) =>
-					a.fontWeight > b.fontWeight ? 1 : -1
-			  )
+			? sortFontFaces( font.fontFace )
 			: [
 					{
 						fontFamily: font.fontFamily,

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

@@ -27,3 +27,19 @@ export async function fetchUninstallFonts( fonts ) {
 	};
 	return apiFetch( config );
 }
+
+export async function fetchFontCollections() {
+	const config = {
+		path: '/wp/v2/fonts/collections',
+		method: 'GET',
+	};
+	return apiFetch( config );
+}
+
+export async function fetchFontCollection( id ) {
+	const config = {
+		path: `/wp/v2/fonts/collections/${ id }`,
+		method: 'GET',
+	};
+	return apiFetch( config );
+}

package/src/components/global-styles/font-library-modal/style.scss

@@ -1,4 +1,14 @@
 .font-library-modal {
+	// @todo: If a new prop is added to the Modal component that constrains
+	// the content width, we should use that prop instead of this style.
+	// see https://github.com/WordPress/gutenberg/issues/54471.
+	&.font-library-modal {
+
+		@include break-medium() {
+			width: 65vw;
+		}
+	}
+
 	.components-modal__header {
 		border-bottom: none;
 	}
@@ -111,3 +121,19 @@
 		background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));
 	}
 }
+
+.font-library__google-fonts-confirm {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+
+	h3 {
+		font-size: 1.4rem;
+	}
+
+	.components-card {
+		width: 50%;
+		min-width: 250px;
+		max-width: 350px;
+	}
+}

package/src/components/global-styles/font-library-modal/tab-layout.js

@@ -24,7 +24,7 @@ function TabLayout( { title, description, handleBack, children, footer } ) {
 									variant="tertiary"
 									onClick={ handleBack }
 									icon={ chevronLeft }
-									isSmall
+									size="small"
 								/>
 							) }
 							{ title && (
@@ -41,7 +41,7 @@ function TabLayout( { title, description, handleBack, children, footer } ) {
 					</VStack>
 				</header>
 				<main>{ children }</main>
-				<footer>{ footer }</footer>
+				{ footer && <footer>{ footer }</footer> }
 			</VStack>
 		</div>
 	);

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

@@ -1,15 +1,7 @@
 /**
  * WordPress dependencies
  */
-import { __, _x } from '@wordpress/i18n';
-
-export const MODAL_TABS = [
-	{
-		name: 'installed-fonts',
-		title: __( 'Library' ),
-		className: 'installed-fonts',
-	},
-];
+import { _x } from '@wordpress/i18n';
 
 export const ALLOWED_FILE_EXTENSIONS = [ 'otf', 'ttf', 'woff', 'woff2' ];
 

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/index.js

@@ -2,6 +2,7 @@
  * 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 ) ) {
@@ -84,10 +85,14 @@ export async function loadFontFaceInBrowser( fontFace, source, addTo = 'all' ) {
 	}
 
 	// eslint-disable-next-line no-undef
-	const newFont = new FontFace( fontFace.fontFamily, dataSource, {
-		style: fontFace.fontStyle,
-		weight: fontFace.fontWeight,
-	} );
+	const newFont = new FontFace(
+		formatFontFamily( fontFace.fontFamily ),
+		dataSource,
+		{
+			style: fontFace.fontStyle,
+			weight: fontFace.fontWeight,
+		}
+	);
 
 	const loadedFace = await newFont.load();
 
@@ -120,71 +125,6 @@ export function getDisplaySrcFromFontFace( input, urlPrefix ) {
 	return src;
 }
 
-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 getPreviewStyle( family ) {
-	const style = { fontFamily: 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 makeFormDataFromFontFamilies( fontFamilies ) {
 	const formData = new FormData();
 	const newFontFamilies = fontFamilies.map( ( family, familyIndex ) => {

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/{getPreviewStyle.spec.js → preview-styles.spec.js}

@@ -1,12 +1,12 @@
 /**
  * Internal dependencies
  */
-import { getPreviewStyle } from '../index';
+import { getFamilyPreviewStyle, formatFontFamily } from '../preview-styles';
 
-describe( 'getPreviewStyle', () => {
+describe( 'getFamilyPreviewStyle', () => {
 	it( 'should return default fontStyle and fontWeight if fontFace is not provided', () => {
 		const family = { fontFamily: 'Rosario' };
-		const result = getPreviewStyle( family );
+		const result = getFamilyPreviewStyle( family );
 		const expected = {
 			fontFamily: 'Rosario',
 			fontWeight: '400',
@@ -23,7 +23,7 @@ describe( 'getPreviewStyle', () => {
 				{ fontStyle: 'normal', fontWeight: '600' },
 			],
 		};
-		const result = getPreviewStyle( family );
+		const result = getFamilyPreviewStyle( family );
 		const expected = {
 			fontFamily: 'Rosario',
 			fontStyle: 'normal',
@@ -40,7 +40,7 @@ describe( 'getPreviewStyle', () => {
 				{ fontStyle: 'italic', fontWeight: '600' },
 			],
 		};
-		const result = getPreviewStyle( family );
+		const result = getFamilyPreviewStyle( family );
 		const expected = {
 			fontFamily: 'Rosario',
 			fontStyle: 'italic',
@@ -57,7 +57,7 @@ describe( 'getPreviewStyle', () => {
 				{ fontStyle: 'normal', fontWeight: '700' },
 			],
 		};
-		const result = getPreviewStyle( family );
+		const result = getFamilyPreviewStyle( family );
 		const expected = {
 			fontFamily: 'Rosario',
 			fontStyle: 'normal',
@@ -74,7 +74,7 @@ describe( 'getPreviewStyle', () => {
 				{ fontStyle: 'normal', fontWeight: '400' },
 			],
 		};
-		const result = getPreviewStyle( family );
+		const result = getFamilyPreviewStyle( family );
 		const expected = {
 			fontFamily: 'Rosario',
 			fontStyle: 'normal',
@@ -92,7 +92,7 @@ describe( 'getPreviewStyle', () => {
 				{ fontStyle: 'normal', fontWeight: '600' },
 			],
 		};
-		const result = getPreviewStyle( family );
+		const result = getFamilyPreviewStyle( family );
 		const expected = {
 			fontFamily: 'Rosario',
 			fontStyle: 'normal',
@@ -110,7 +110,7 @@ describe( 'getPreviewStyle', () => {
 				{ fontStyle: 'italic', fontWeight: '200 900' },
 			],
 		};
-		const result = getPreviewStyle( family );
+		const result = getFamilyPreviewStyle( family );
 		const expected = {
 			fontFamily: 'Rosario',
 			fontStyle: 'normal',
@@ -119,3 +119,43 @@ describe( 'getPreviewStyle', () => {
 		expect( result ).toEqual( expected );
 	} );
 } );
+
+describe( 'formatFontFamily', () => {
+	it( 'should transform "Baloo 2, system-ui" correctly', () => {
+		expect( formatFontFamily( 'Baloo 2, system-ui' ) ).toBe(
+			"'Baloo 2', system-ui"
+		);
+	} );
+
+	it( 'should ignore extra spaces', () => {
+		expect( formatFontFamily( '  Baloo 2   , system-ui' ) ).toBe(
+			"'Baloo 2', system-ui"
+		);
+	} );
+
+	it( 'should keep quoted strings unchanged', () => {
+		expect(
+			formatFontFamily(
+				"Seravek, 'Gill Sans Nova', Ubuntu, Calibri, 'DejaVu Sans', source-sans-pro, sans-serif"
+			)
+		).toBe(
+			"Seravek, 'Gill Sans Nova', Ubuntu, Calibri, 'DejaVu Sans', source-sans-pro, sans-serif"
+		);
+	} );
+
+	it( 'should wrap single font name with spaces in quotes', () => {
+		expect( formatFontFamily( 'Baloo 2' ) ).toBe( "'Baloo 2'" );
+	} );
+
+	it( 'should wrap multiple font names with spaces in quotes', () => {
+		expect( formatFontFamily( 'Baloo Bhai 2, Baloo 2' ) ).toBe(
+			"'Baloo Bhai 2', 'Baloo 2'"
+		);
+	} );
+
+	it( 'should wrap only those font names with spaces which are not already quoted', () => {
+		expect( formatFontFamily( 'Baloo Bhai 2, Arial' ) ).toBe(
+			"'Baloo Bhai 2', Arial"
+		);
+	} );
+} );