@wordpress/edit-site 5.25.1-next.79a6196f.0 → 5.27.0

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

@@ -51,6 +51,7 @@
 
 .font-library-modal__font-card {
 	border: 1px solid #e5e5e5;
+	width: 100%;
 	height: auto;
 	padding: 1rem;
 	margin-top: -1px; /* To collapse the margin with the previous element */

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-typography.js

@@ -3,6 +3,8 @@
  */
 import { __ } from '@wordpress/i18n';
 import { __experimentalVStack as VStack } from '@wordpress/components';
+import { store as editorStore } from '@wordpress/editor';
+import { useSelect } from '@wordpress/data';
 
 /**
  * Internal dependencies
@@ -12,6 +14,12 @@ import FontFamilies from './font-families';
 import ScreenHeader from './header';
 
 function ScreenTypography() {
+	const fontLibraryEnabled = useSelect(
+		( select ) =>
+			select( editorStore ).getEditorSettings().fontLibraryEnabled,
+		[]
+	);
+
 	return (
 		<>
 			<ScreenHeader
@@ -22,9 +30,7 @@ function ScreenTypography() {
 			/>
 			<div className="edit-site-global-styles-screen-typography">
 				<VStack spacing={ 6 }>
-					{ ! window.__experimentalDisableFontLibrary && (
-						<FontFamilies />
-					) }
+					{ fontLibraryEnabled && <FontFamilies /> }
 					<TypographyElements />
 				</VStack>
 			</div>

package/src/components/global-styles/style.scss

@@ -42,6 +42,10 @@
 	border-radius: $radius-block-ui;
 }
 
+.edit-site-global-styles-screen-typography__font-variants-count {
+	color: $gray-700;
+}
+
 .edit-site-global-styles-screen-colors {
 	margin: $grid-unit-20;
 

package/src/components/header-edit-mode/style.scss

@@ -143,16 +143,26 @@ $header-toolbar-min-width: 335px;
 	}
 
 	.block-editor-block-mover {
+		// Modified group borders.
 		border-left: none;
 
 		&::before {
 			content: "";
 			width: $border-width;
-			margin-top: $grid-unit + $grid-unit-05;
-			margin-bottom: $grid-unit + $grid-unit-05;
+			margin-top: $grid-unit-15;
+			margin-bottom: $grid-unit-15;
 			background-color: $gray-300;
 			margin-left: $grid-unit;
 		}
+
+		// Modified block movers horizontal separator.
+		.block-editor-block-mover__move-button-container {
+			&::before {
+				width: calc(100% - #{$grid-unit-30});
+				background: $gray-300;
+				left: calc(50% + 1px);
+			}
+		}
 	}
 }
 
@@ -164,7 +174,7 @@ $header-toolbar-min-width: 335px;
 			border-bottom: 0;
 		}
 
-		// Modified group borders
+		// Modified group borders.
 		.components-toolbar-group,
 		.components-toolbar {
 			border-right: none;
@@ -172,8 +182,8 @@ $header-toolbar-min-width: 335px;
 			&::after {
 				content: "";
 				width: $border-width;
-				margin-top: $grid-unit + $grid-unit-05;
-				margin-bottom: $grid-unit + $grid-unit-05;
+				margin-top: $grid-unit-15;
+				margin-bottom: $grid-unit-15;
 				background-color: $gray-300;
 				margin-left: $grid-unit;
 			}

package/src/components/layout/hooks.js

@@ -46,16 +46,17 @@ export function useIsSiteEditorLoading() {
 	useEffect( () => {
 		if ( inLoadingPause ) {
 			/*
-			 * We're using an arbitrary 1s timeout here to catch brief moments
-			 * without any resolving selectors that would result in displaying
-			 * brief flickers of loading state and loaded state.
+			 * We're using an arbitrary 100ms timeout here to catch brief
+			 * moments without any resolving selectors that would result in
+			 * displaying brief flickers of loading state and loaded state.
 			 *
 			 * It's worth experimenting with different values, since this also
-			 * adds 1s of artificial delay after loading has finished.
+			 * adds 100ms of artificial delay after loading has finished.
 			 */
+			const ARTIFICIAL_DELAY = 100;
 			const timeout = setTimeout( () => {
 				setLoaded( true );
-			}, 1000 );
+			}, ARTIFICIAL_DELAY );
 
 			return () => {
 				clearTimeout( timeout );