@wordpress/edit-site 5.26.0 → 5.27.1

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

@@ -1,45 +1,78 @@
-/**
- * WordPress dependencies
- *
- */
 /**
  * WordPress dependencies
  */
 import apiFetch from '@wordpress/api-fetch';
 
-export async function fetchInstallFont( data ) {
+const FONT_FAMILIES_URL = '/wp/v2/font-families';
+const FONT_COLLECTIONS_URL = '/wp/v2/font-collections';
+
+export async function fetchInstallFontFamily( data ) {
 	const config = {
-		path: '/wp/v2/font-families',
+		path: FONT_FAMILIES_URL,
 		method: 'POST',
 		body: data,
 	};
-	return apiFetch( config );
+	const response = await apiFetch( config );
+	return {
+		id: response.id,
+		...response.font_family_settings,
+		fontFace: [],
+	};
 }
 
-export async function fetchUninstallFonts( fonts ) {
-	const data = {
-		font_families: fonts,
+export async function fetchInstallFontFace( fontFamilyId, data ) {
+	const config = {
+		path: `${ FONT_FAMILIES_URL }/${ fontFamilyId }/font-faces`,
+		method: 'POST',
+		body: data,
+	};
+	const response = await apiFetch( config );
+	return {
+		id: response.id,
+		...response.font_face_settings,
 	};
+}
+
+export async function fetchGetFontFamilyBySlug( slug ) {
+	const config = {
+		path: `${ FONT_FAMILIES_URL }?slug=${ slug }&_embed=true`,
+		method: 'GET',
+	};
+	const response = await apiFetch( config );
+	if ( ! response || response.length === 0 ) {
+		return null;
+	}
+	const fontFamilyPost = response[ 0 ];
+	return {
+		id: fontFamilyPost.id,
+		...fontFamilyPost.font_family_settings,
+		fontFace:
+			fontFamilyPost?._embedded?.font_faces.map(
+				( face ) => face.font_face_settings
+			) || [],
+	};
+}
+
+export async function fetchUninstallFontFamily( fontFamilyId ) {
 	const config = {
-		path: '/wp/v2/font-families',
+		path: `${ FONT_FAMILIES_URL }/${ fontFamilyId }?force=true`,
 		method: 'DELETE',
-		data,
 	};
-	return apiFetch( config );
+	return await apiFetch( config );
 }
 
 export async function fetchFontCollections() {
 	const config = {
-		path: '/wp/v2/font-collections',
+		path: FONT_COLLECTIONS_URL,
 		method: 'GET',
 	};
-	return apiFetch( config );
+	return await apiFetch( config );
 }
 
 export async function fetchFontCollection( id ) {
 	const config = {
-		path: `/wp/v2/font-collections/${ id }`,
+		path: `${ FONT_COLLECTIONS_URL }/${ id }`,
 		method: 'GET',
 	};
-	return apiFetch( config );
+	return await apiFetch( config );
 }

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

@@ -26,18 +26,18 @@
 
 .font-library-modal__tabpanel-layout {
 
-	main {
-		padding-bottom: 4rem;
+	.font-library-modal__tabpanel-layout__main {
+		padding-bottom: $grid-unit-80;
 	}
 
-	footer {
-		border-top: 1px solid #e5e5e5;
-		margin: 0 -32px -32px;
-		padding: 16px 32px;
+	.font-library-modal__tabpanel-layout__footer {
+		border-top: 1px solid $gray-300;
+		margin: 0 #{$grid-unit-40 * -1} #{$grid-unit-40 * -1};
+		padding: $grid-unit-20 $grid-unit-40;
 		position: absolute;
-		bottom: 32px;
+		bottom: $grid-unit-40;
 		width: 100%;
-		background-color: #fff;
+		background-color: $white;
 	}
 
 }
@@ -50,9 +50,10 @@
 }
 
 .font-library-modal__font-card {
-	border: 1px solid #e5e5e5;
+	border: 1px solid $gray-200;
+	width: 100%;
 	height: auto;
-	padding: 1rem;
+	padding: $grid-unit-20;
 	margin-top: -1px; /* To collapse the margin with the previous element */
 
 	.font-library-modal__font-card__name {
@@ -60,30 +61,29 @@
 	}
 
 	.font-library-modal__font-card__count {
-		color: #6e6e6e;
+		color: $gray-700;
 	}
 }
 
 .font-library-modal__library-font-variant {
-	border: 1px solid #e5e5e5;
-	padding: 1rem;
+	border: 1px solid $gray-200;
+	padding: $grid-unit-20;
 	margin-top: -1px; /* To collapse the margin with the previous element */
 }
 
 .font-library-modal__font-variant {
-	border-bottom: 1px solid #e5e5e5;
-	padding-bottom: 1rem;
+	border-bottom: 1px solid $gray-200;
+	padding-bottom: $grid-unit-20;
 }
 
 .font-library-modal__tabs {
 	[role="tablist"] {
 		position: sticky;
 		top: 0;
-		width: calc(100% + 64px);
-		border-bottom: 1px solid #e6e6e6;
-		background: #fff;
-		margin: 0 -32px;
-		padding: 0 16px;
+		border-bottom: 1px solid $gray-300;
+		background: $white;
+		margin: 0 #{$grid-unit-40 * -1};
+		padding: 0 $grid-unit-20;
 		z-index: 1;
 	}
 }
@@ -92,12 +92,12 @@
 	align-items: center;
 	display: flex;
 	justify-content: center;
-	height: 250px;
+	height: $grid-unit-80 * 4; // 256px
 	width: 100%;
 }
 
 button.font-library-modal__upload-area {
-	background-color: #f0f0f0;
+	background-color: $gray-100;
 }
 
 .font-library-modal__local-fonts {
@@ -105,7 +105,7 @@ button.font-library-modal__upload-area {
 	width: 80%;
 
 	.font-library-modal__upload-area__text {
-		color: #6e6e6e;
+		color: $gray-700;
 	}
 
 	.font-library-modal__upload-area__notice {
@@ -113,14 +113,6 @@ button.font-library-modal__upload-area {
 	}
 }
 
-.font-library-modal__font-name {
-	font-weight: bold;
-}
-
-.font-library-modal__font-filename {
-	color: #6e6e6e;
-}
-
 .font-library-modal__font-variant_demo-wrapper {
 	white-space: nowrap;
 	overflow: hidden;
@@ -153,7 +145,3 @@ button.font-library-modal__upload-area {
 		max-width: 350px;
 	}
 }
-
-.font-library-modal__font-collection__notice {
-	margin: 0;
-}

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

@@ -22,32 +22,36 @@ function TabPanelLayout( {
 		<div className="font-library-modal__tabpanel-layout">
 			<Spacer margin={ 4 } />
 			<VStack spacing={ 4 } justify="space-between">
-				<header>
-					<VStack spacing={ 2 }>
-						<HStack justify="flex-start">
-							{ !! handleBack && (
-								<Button
-									variant="tertiary"
-									onClick={ handleBack }
-									icon={ chevronLeft }
-									size="small"
-								/>
-							) }
-							{ title && (
-								<Heading
-									level={ 2 }
-									size={ 13 }
-									className="edit-site-global-styles-header"
-								>
-									{ title }
-								</Heading>
-							) }
-						</HStack>
-						{ description && <Text>{ description }</Text> }
-					</VStack>
-				</header>
-				<main>{ children }</main>
-				{ footer && <footer>{ footer }</footer> }
+				<VStack spacing={ 2 }>
+					<HStack justify="flex-start">
+						{ !! handleBack && (
+							<Button
+								variant="tertiary"
+								onClick={ handleBack }
+								icon={ chevronLeft }
+								size="small"
+							/>
+						) }
+						{ title && (
+							<Heading
+								level={ 2 }
+								size={ 13 }
+								className="edit-site-global-styles-header"
+							>
+								{ title }
+							</Heading>
+						) }
+					</HStack>
+					{ description && <Text>{ description }</Text> }
+				</VStack>
+				<div className="font-library-modal__tabpanel-layout__main">
+					{ children }
+				</div>
+				{ footer && (
+					<div className="font-library-modal__tabpanel-layout__footer">
+						{ footer }
+					</div>
+				) }
 			</VStack>
 		</div>
 	);

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

@@ -1,16 +1,33 @@
+/**
+ * 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 {Array}  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 {Object} filters Object containing the filter criteria. It should have a 'category' key and/or a 'search' key.
+ *                         The 'category' key is a string representing the category to filter by.
+ *                         The 'search' key is a string representing the search term to filter by.
+ * @return {Array} Array of filtered font objects based on the provided criteria.
+ */
 export default function filterFonts( fonts, filters ) {
 	const { category, search } = filters;
 	let filteredFonts = fonts || [];
 
 	if ( category && category !== 'all' ) {
 		filteredFonts = filteredFonts.filter(
-			( font ) => font.category === category
+			( font ) => font.categories.indexOf( category ) !== -1
 		);
 	}
 
 	if ( search ) {
 		filteredFonts = filteredFonts.filter( ( font ) =>
-			font.name.toLowerCase().includes( search.toLowerCase() )
+			font.font_family_settings.name
+				.toLowerCase()
+				.includes( search.toLowerCase() )
 		);
 	}
 

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

@@ -8,6 +8,13 @@ import { privateApis as componentsPrivateApis } from '@wordpress/components';
  */
 import { FONT_WEIGHTS, FONT_STYLES } from './constants';
 import { unlock } from '../../../../lock-unlock';
+import { fetchInstallFontFace } from '../resolvers';
+import { formatFontFamily } from './preview-styles';
+
+/**
+ * Browser dependencies
+ */
+const { File } = window;
 
 export function setUIValuesNeeded( font, extraValues = {} ) {
 	if ( ! font.name && ( font.fontFamily || font.slug ) ) {
@@ -87,13 +94,18 @@ export async function loadFontFaceInBrowser( fontFace, source, addTo = 'all' ) {
 		// eslint-disable-next-line no-undef
 	} else if ( source instanceof File ) {
 		dataSource = await source.arrayBuffer();
+	} else {
+		return;
 	}
 
-	// eslint-disable-next-line no-undef
-	const newFont = new FontFace( fontFace.fontFamily, dataSource, {
-		style: fontFace.fontStyle,
-		weight: fontFace.fontWeight,
-	} );
+	const newFont = new window.FontFace(
+		formatFontFamily( fontFace.fontFamily ),
+		dataSource,
+		{
+			style: fontFace.fontStyle,
+			weight: fontFace.fontWeight,
+		}
+	);
 
 	const loadedFace = await newFont.load();
 
@@ -130,37 +142,132 @@ export function getDisplaySrcFromFontFace( input, urlPrefix ) {
 	return src;
 }
 
-export function makeFormDataFromFontFamily( fontFamily ) {
+export function makeFontFamilyFormData( fontFamily ) {
 	const formData = new FormData();
 	const { kebabCase } = unlock( componentsPrivateApis );
 
-	const newFontFamily = {
-		...fontFamily,
+	const { fontFace, category, ...familyWithValidParameters } = fontFamily;
+	const fontFamilySettings = {
+		...familyWithValidParameters,
 		slug: kebabCase( fontFamily.slug ),
 	};
 
-	if ( newFontFamily?.fontFace ) {
-		const newFontFaces = newFontFamily.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-${ 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;
+	formData.append(
+		'font_family_settings',
+		JSON.stringify( fontFamilySettings )
+	);
+	return formData;
+}
+
+export function makeFontFacesFormData( font ) {
+	if ( font?.fontFace ) {
+		const fontFacesFormData = font.fontFace.map( ( face, faceIndex ) => {
+			const formData = new FormData();
+			if ( face.file ) {
+				// Slugified file name because the it might contain spaces or characters treated differently on the server.
+				const fileId = `file-${ 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 in src
+				const { file, ...faceWithoutFileProperty } = face;
+				const fontFaceSettings = {
+					...faceWithoutFileProperty,
+					src: fileId,
+				};
+				formData.append(
+					'font_face_settings',
+					JSON.stringify( fontFaceSettings )
+				);
+			} else {
+				formData.append( 'font_face_settings', JSON.stringify( face ) );
 			}
-		);
-		newFontFamily.fontFace = newFontFaces;
+			return formData;
+		} );
+
+		return fontFacesFormData;
 	}
+}
 
-	formData.append( 'font_family_settings', JSON.stringify( newFontFamily ) );
-	return formData;
+export async function batchInstallFontFaces( fontFamilyId, fontFacesData ) {
+	const promises = fontFacesData.map( ( faceData ) =>
+		fetchInstallFontFace( fontFamilyId, faceData )
+	);
+	const responses = await Promise.allSettled( promises );
+
+	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: `Fetch error: ${ result.reason.message }`,
+			} );
+		}
+	} );
+
+	return results;
+}
+
+/*
+ * Downloads a font face asset from a URL to the client and returns a File object.
+ */
+export async function downloadFontFaceAsset( 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;
+		} )
+		.catch( ( error ) => {
+			// eslint-disable-next-line no-console
+			console.error(
+				`Error downloading font face asset from ${ url }:`,
+				error
+			);
+			throw error;
+		} );
+}
+
+/*
+ * 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/preview-styles.js

@@ -35,9 +35,13 @@ export function formatFontFamily( 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 }'`;
+			// If the font doesn't start with quotes and contains a space, then wrap in quotes.
+			// Check that string starts with a single or double quote and not a space
+			if (
+				! ( font.startsWith( '"' ) || font.startsWith( "'" ) ) &&
+				font.indexOf( ' ' ) !== -1
+			) {
+				return `"${ font }"`;
 			}
 			return font; // Return font as is if no transformation is needed
 		} )

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

@@ -5,11 +5,26 @@ 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' },
+		{
+			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', () => {
@@ -20,7 +35,10 @@ describe( 'filterFonts', () => {
 	it( 'should filter by category', () => {
 		const result = filterFonts( mockFonts, { category: 'serif' } );
 		expect( result ).toEqual( [
-			{ name: 'Times New Roman', category: 'serif' },
+			{
+				font_family_settings: { name: 'Times New Roman' },
+				categories: [ 'serif' ],
+			},
 		] );
 	} );
 
@@ -32,15 +50,24 @@ describe( 'filterFonts', () => {
 	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' },
+			{
+				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( [
-			{ name: 'Romantic', category: 'cursive' },
+			{
+				font_family_settings: { name: 'Romantic' },
+				categories: [ 'cursive' ],
+			},
 		] );
 	} );
 
@@ -50,7 +77,10 @@ describe( 'filterFonts', () => {
 			search: 'Times',
 		} );
 		expect( result ).toEqual( [
-			{ name: 'Times New Roman', category: 'serif' },
+			{
+				font_family_settings: { name: 'Times New Roman' },
+				categories: [ 'serif' ],
+			},
 		] );
 	} );
 

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

@@ -123,13 +123,13 @@ describe( 'getFamilyPreviewStyle', () => {
 describe( 'formatFontFamily', () => {
 	it( 'should transform "Baloo 2, system-ui" correctly', () => {
 		expect( formatFontFamily( 'Baloo 2, system-ui' ) ).toBe(
-			"'Baloo 2', system-ui"
+			'"Baloo 2", system-ui'
 		);
 	} );
 
 	it( 'should ignore extra spaces', () => {
 		expect( formatFontFamily( '  Baloo 2   , system-ui' ) ).toBe(
-			"'Baloo 2', system-ui"
+			'"Baloo 2", system-ui'
 		);
 	} );
 
@@ -144,18 +144,18 @@ describe( 'formatFontFamily', () => {
 	} );
 
 	it( 'should wrap single font name with spaces in quotes', () => {
-		expect( formatFontFamily( 'Baloo 2' ) ).toBe( "'Baloo 2'" );
+		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'"
+			'"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"
+			'"Baloo Bhai 2", Arial'
 		);
 	} );
 } );

package/src/components/global-styles/screen-block.js

@@ -109,6 +109,16 @@ function ScreenBlock( { name, variation } ) {
 		settings.spacing.blockGap = false;
 	}
 
+	// Only allow `aspectRatio` support if the block is not the grouping block.
+	// The grouping block allows the user to use Group, Row and Stack variations,
+	// and it is highly likely that the user will not want to set an aspect ratio
+	// for all three at once. Until there is the ability to set a different aspect
+	// ratio for each variation, we disable the aspect ratio controls for the
+	// grouping block in global styles.
+	if ( settings?.dimensions?.aspectRatio && name === 'core/group' ) {
+		settings.dimensions.aspectRatio = false;
+	}
+
 	const blockVariations = useBlockVariations( name );
 	const hasTypographyPanel = useHasTypographyPanel( settings );
 	const hasColorPanel = useHasColorPanel( settings );