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

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

@@ -14,7 +14,7 @@ import {
  * Internal dependencies
  */
 import {
-	fetchInstallFonts,
+	fetchInstallFont,
 	fetchUninstallFonts,
 	fetchFontCollections,
 	fetchFontCollection,
@@ -26,7 +26,7 @@ import {
 	mergeFontFamilies,
 	loadFontFaceInBrowser,
 	getDisplaySrcFromFontFace,
-	makeFormDataFromFontFamilies,
+	makeFormDataFromFontFamily,
 } from './utils';
 import { toggleFont } from './utils/toggleFont';
 import getIntersectingFontFaces from './utils/get-intersecting-font-faces';
@@ -192,19 +192,19 @@ function FontLibraryProvider( { children } ) {
 		return getActivatedFontsOutline( source )[ slug ] || [];
 	};
 
-	async function installFonts( fonts ) {
+	async function installFont( font ) {
 		setIsInstalling( true );
 		try {
 			// Prepare formData to install.
-			const formData = makeFormDataFromFontFamilies( fonts );
+			const formData = makeFormDataFromFontFamily( font );
 			// Install the fonts (upload the font files to the server and create the post in the database).
-			const response = await fetchInstallFonts( formData );
+			const response = await fetchInstallFont( formData );
 			const fontsInstalled = response?.successes || [];
 			// Get intersecting font faces between the fonts we tried to installed and the fonts that were installed
 			// (to avoid activating a non installed font).
 			const fontToBeActivated = getIntersectingFontFaces(
 				fontsInstalled,
-				fonts
+				[ font ]
 			);
 			// Activate the font families (add the font families to the global styles).
 			activateCustomFontFamilies( fontToBeActivated );
@@ -229,7 +229,7 @@ function FontLibraryProvider( { children } ) {
 			// Uninstall the font (remove the font files from the server and the post from the database).
 			const response = await fetchUninstallFonts( [ font ] );
 			// Deactivate the font family (remove the font family from the global styles).
-			if ( ! response.errors ) {
+			if ( 0 === response.errors.length ) {
 				deactivateFontFamily( font );
 				// Save the global styles to the database.
 				await saveSpecifiedEntityEdits(
@@ -358,7 +358,7 @@ function FontLibraryProvider( { children } ) {
 				isFontActivated,
 				getFontFacesActivated,
 				loadFontFaceAsset,
-				installFonts,
+				installFont,
 				uninstallFont,
 				toggleActivateFont,
 				getAvailableFontsOutline,

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

@@ -21,7 +21,7 @@ import { search, closeSmall } from '@wordpress/icons';
 /**
  * Internal dependencies
  */
-import TabLayout from './tab-layout';
+import TabPanelLayout from './tab-panel-layout';
 import { FontLibraryContext } from './context';
 import FontsGrid from './fonts-grid';
 import FontCard from './font-card';
@@ -54,7 +54,7 @@ function FontCollection( { id } ) {
 	const [ renderConfirmDialog, setRenderConfirmDialog ] = useState(
 		requiresPermission && ! getGoogleFontsPermissionFromStorage()
 	);
-	const { collections, getFontCollection, installFonts } =
+	const { collections, getFontCollection, installFont } =
 		useContext( FontLibraryContext );
 	const selectedCollection = collections.find(
 		( collection ) => collection.id === id
@@ -92,6 +92,11 @@ function FontCollection( { id } ) {
 		setNotice( null );
 	}, [ id ] );
 
+	useEffect( () => {
+		// If the selected fonts change, reset the selected fonts to install
+		setFontsToInstall( [] );
+	}, [ selectedFont ] );
+
 	// Reset notice after 5 seconds
 	useEffect( () => {
 		if ( notice && notice?.duration !== 0 ) {
@@ -149,14 +154,14 @@ function FontCollection( { id } ) {
 	};
 
 	const handleInstall = async () => {
-		const response = await installFonts( fontsToInstall );
+		const response = await installFont( fontsToInstall[ 0 ] );
 		const installNotice = getNoticeFromInstallResponse( response );
 		setNotice( installNotice );
 		resetFontsToInstall();
 	};
 
 	return (
-		<TabLayout
+		<TabPanelLayout
 			title={
 				! selectedFont ? selectedCollection.name : selectedFont.name
 			}
@@ -270,7 +275,7 @@ function FontCollection( { id } ) {
 					) ) }
 				</FontsGrid>
 			) }
-		</TabLayout>
+		</TabPanelLayout>
 	);
 }
 

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

@@ -2,7 +2,10 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { Modal, TabPanel } from '@wordpress/components';
+import {
+	Modal,
+	privateApis as componentsPrivateApis,
+} from '@wordpress/components';
 import { useContext } from '@wordpress/element';
 
 /**
@@ -12,33 +15,33 @@ import InstalledFonts from './installed-fonts';
 import FontCollection from './font-collection';
 import UploadFonts from './upload-fonts';
 import { FontLibraryContext } from './context';
+import { unlock } from '../../../lock-unlock';
+
+const { Tabs } = unlock( componentsPrivateApis );
 
 const DEFAULT_TABS = [
 	{
-		name: 'installed-fonts',
+		id: 'installed-fonts',
 		title: __( 'Library' ),
-		className: 'installed-fonts',
 	},
 	{
-		name: 'upload-fonts',
+		id: 'upload-fonts',
 		title: __( 'Upload' ),
-		className: 'upload-fonts',
 	},
 ];
 
 const tabsFromCollections = ( collections ) =>
 	collections.map( ( { id, name } ) => ( {
-		name: id,
+		id,
 		title:
 			collections.length === 1 && id === 'default-font-collection'
 				? __( 'Install Fonts' )
 				: name,
-		className: 'collection',
 	} ) );
 
 function FontLibraryModal( {
 	onRequestClose,
-	initialTabName = 'installed-fonts',
+	initialTabId = 'installed-fonts',
 } ) {
 	const { collections } = useContext( FontLibraryContext );
 
@@ -54,22 +57,39 @@ function FontLibraryModal( {
 			isFullScreen
 			className="font-library-modal"
 		>
-			<TabPanel
-				className="font-library-modal__tab-panel"
-				initialTabName={ initialTabName }
-				tabs={ tabs }
-			>
-				{ ( tab ) => {
-					switch ( tab.name ) {
-						case 'upload-fonts':
-							return <UploadFonts />;
-						case 'installed-fonts':
-							return <InstalledFonts />;
-						default:
-							return <FontCollection id={ tab.name } />;
-					}
-				} }
-			</TabPanel>
+			<div className="font-library-modal__tabs">
+				<Tabs initialTabId={ initialTabId }>
+					<Tabs.TabList>
+						{ tabs.map( ( { id, title } ) => (
+							<Tabs.Tab key={ id } tabId={ id }>
+								{ title }
+							</Tabs.Tab>
+						) ) }
+					</Tabs.TabList>
+					{ tabs.map( ( { id } ) => {
+						let contents;
+						switch ( id ) {
+							case 'upload-fonts':
+								contents = <UploadFonts />;
+								break;
+							case 'installed-fonts':
+								contents = <InstalledFonts />;
+								break;
+							default:
+								contents = <FontCollection id={ id } />;
+						}
+						return (
+							<Tabs.TabPanel
+								key={ id }
+								tabId={ id }
+								focusable={ false }
+							>
+								{ contents }
+							</Tabs.TabPanel>
+						);
+					} ) }
+				</Tabs>
+			</div>
 		</Modal>
 	);
 }

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

@@ -16,7 +16,7 @@ import {
 /**
  * Internal dependencies
  */
-import TabLayout from './tab-layout';
+import TabPanelLayout from './tab-panel-layout';
 import { FontLibraryContext } from './context';
 import FontsGrid from './fonts-grid';
 import LibraryFontDetails from './library-font-details';
@@ -92,7 +92,7 @@ function InstalledFonts() {
 	}, [ notice ] );
 
 	return (
-		<TabLayout
+		<TabPanelLayout
 			title={ libraryFontSelected?.name || '' }
 			description={ tabDescription }
 			handleBack={ !! libraryFontSelected && handleUnselectFont }
@@ -173,7 +173,7 @@ function InstalledFonts() {
 					handleCancelUninstall={ handleCancelUninstall }
 				/>
 			) }
-		</TabLayout>
+		</TabPanelLayout>
 	);
 }
 

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

@@ -2,17 +2,19 @@
  * WordPress dependencies
  */
 import { useContext } from '@wordpress/element';
-import { CheckboxControl, Flex } from '@wordpress/components';
-/**
- * Internal dependencies
- */
-import { getFontFaceVariantName } from './utils';
+import {
+	CheckboxControl,
+	Flex,
+	privateApis as componentsPrivateApis,
+} from '@wordpress/components';
 
 /**
  * Internal dependencies
  */
+import { getFontFaceVariantName } from './utils';
 import { FontLibraryContext } from './context';
 import FontFaceDemo from './font-demo';
+import { unlock } from '../../../lock-unlock';
 
 function LibraryFontVariant( { face, font } ) {
 	const { isFontActivated, toggleActivateFont } =
@@ -36,18 +38,27 @@ function LibraryFontVariant( { face, font } ) {
 	};
 
 	const displayName = font.name + ' ' + getFontFaceVariantName( face );
+	const { kebabCase } = unlock( componentsPrivateApis );
+	const checkboxId = kebabCase(
+		`${ font.slug }-${ getFontFaceVariantName( face ) }`
+	);
 
 	return (
-		<div className="font-library-modal__library-font-variant">
+		<label
+			className="font-library-modal__library-font-variant"
+			htmlFor={ checkboxId }
+		>
 			<Flex justify="space-between" align="center" gap="1rem">
 				<FontFaceDemo fontFace={ face } text={ displayName } />
 				<CheckboxControl
 					checked={ isIstalled }
 					onChange={ handleToggleActivation }
 					__nextHasNoMarginBottom={ true }
+					id={ checkboxId }
+					label={ false }
 				/>
 			</Flex>
-		</div>
+		</label>
 	);
 }
 

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

@@ -11,6 +11,7 @@ import {
 	FormFileUpload,
 	Notice,
 	FlexItem,
+	privateApis as componentsPrivateApis,
 } from '@wordpress/components';
 import { useContext, useState, useEffect } from '@wordpress/element';
 
@@ -23,10 +24,14 @@ import { Font } from '../../../../lib/lib-font.browser';
 import makeFamiliesFromFaces from './utils/make-families-from-faces';
 import { loadFontFaceInBrowser } from './utils';
 import { getNoticeFromInstallResponse } from './utils/get-notice-from-response';
+import { unlock } from '../../../lock-unlock';
+
+const { ProgressBar } = unlock( componentsPrivateApis );
 
 function LocalFonts() {
-	const { installFonts } = useContext( FontLibraryContext );
+	const { installFont } = useContext( FontLibraryContext );
 	const [ notice, setNotice ] = useState( null );
+	const [ isUploading, setIsUploading ] = useState( false );
 	const supportedFormats =
 		ALLOWED_FILE_EXTENSIONS.slice( 0, -1 )
 			.map( ( extension ) => `.${ extension }` )
@@ -58,6 +63,7 @@ function LocalFonts() {
 	 */
 	const handleFilesUpload = ( files ) => {
 		setNotice( null );
+		setIsUploading( true );
 		const uniqueFilenames = new Set();
 		const selectedFiles = [ ...files ];
 		const allowedFiles = selectedFiles.filter( ( file ) => {
@@ -147,9 +153,21 @@ function LocalFonts() {
 	 */
 	const handleInstall = async ( fontFaces ) => {
 		const fontFamilies = makeFamiliesFromFaces( fontFaces );
-		const response = await installFonts( fontFamilies );
+
+		if ( fontFamilies.length > 1 ) {
+			setNotice( {
+				type: 'error',
+				message: __(
+					'Variants from only one font family can be uploaded at a time.'
+				),
+			} );
+			return;
+		}
+
+		const response = await installFont( fontFamilies[ 0 ] );
 		const installNotice = getNoticeFromInstallResponse( response );
 		setNotice( installNotice );
+		setIsUploading( false );
 	};
 
 	return (
@@ -157,31 +175,28 @@ function LocalFonts() {
 			<Spacer margin={ 16 } />
 			<DropZone onFilesDrop={ handleDropZone } />
 			<VStack className="font-library-modal__local-fonts">
-				<FormFileUpload
-					accept={ ALLOWED_FILE_EXTENSIONS.map(
-						( ext ) => `.${ ext }`
-					).join( ',' ) }
-					multiple={ true }
-					onChange={ onFilesUpload }
-					render={ ( { openFileDialog } ) => (
-						<Button
-							className="font-library-modal__upload-area"
-							onClick={ openFileDialog }
-						>
-							<span>{ __( 'Upload font' ) }</span>
-						</Button>
-					) }
-				/>
-				{ notice && (
+				{ ! isUploading && (
+					<FormFileUpload
+						accept={ ALLOWED_FILE_EXTENSIONS.map(
+							( ext ) => `.${ ext }`
+						).join( ',' ) }
+						multiple={ true }
+						onChange={ onFilesUpload }
+						render={ ( { openFileDialog } ) => (
+							<Button
+								className="font-library-modal__upload-area"
+								onClick={ openFileDialog }
+							>
+								<span>{ __( 'Upload font' ) }</span>
+							</Button>
+						) }
+					/>
+				) }
+				{ isUploading && (
 					<FlexItem>
-						<Spacer margin={ 2 } />
-						<Notice
-							isDismissible={ false }
-							status={ notice.type }
-							className="font-library-modal__upload-area__notice"
-						>
-							{ notice.message }
-						</Notice>
+						<div className="font-library-modal__upload-area">
+							<ProgressBar />
+						</div>
 					</FlexItem>
 				) }
 				<Spacer margin={ 2 } />
@@ -194,6 +209,18 @@ function LocalFonts() {
 						supportedFormats
 					) }
 				</Text>
+				{ ! isUploading && notice && (
+					<FlexItem>
+						<Spacer margin={ 2 } />
+						<Notice
+							isDismissible={ false }
+							status={ notice.type }
+							className="font-library-modal__upload-area__notice"
+						>
+							{ notice.message }
+						</Notice>
+					</FlexItem>
+				) }
 			</VStack>
 		</>
 	);

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

@@ -7,9 +7,9 @@
  */
 import apiFetch from '@wordpress/api-fetch';
 
-export async function fetchInstallFonts( data ) {
+export async function fetchInstallFont( data ) {
 	const config = {
-		path: '/wp/v2/fonts',
+		path: '/wp/v2/font-families',
 		method: 'POST',
 		body: data,
 	};
@@ -21,7 +21,7 @@ export async function fetchUninstallFonts( fonts ) {
 		font_families: fonts,
 	};
 	const config = {
-		path: '/wp/v2/fonts',
+		path: '/wp/v2/font-families',
 		method: 'DELETE',
 		data,
 	};
@@ -30,7 +30,7 @@ export async function fetchUninstallFonts( fonts ) {
 
 export async function fetchFontCollections() {
 	const config = {
-		path: '/wp/v2/fonts/collections',
+		path: '/wp/v2/font-collections',
 		method: 'GET',
 	};
 	return apiFetch( config );
@@ -38,7 +38,7 @@ export async function fetchFontCollections() {
 
 export async function fetchFontCollection( id ) {
 	const config = {
-		path: `/wp/v2/fonts/collections/${ id }`,
+		path: `/wp/v2/font-collections/${ id }`,
 		method: 'GET',
 	};
 	return apiFetch( config );

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

@@ -24,7 +24,7 @@
 	}
 }
 
-.font-library-modal__tab-layout {
+.font-library-modal__tabpanel-layout {
 
 	main {
 		padding-bottom: 4rem;
@@ -75,7 +75,7 @@
 	padding-bottom: 1rem;
 }
 
-.font-library-modal__tab-panel {
+.font-library-modal__tabs {
 	[role="tablist"] {
 		position: sticky;
 		top: 0;
@@ -94,6 +94,9 @@
 	justify-content: center;
 	height: 250px;
 	width: 100%;
+}
+
+button.font-library-modal__upload-area {
 	background-color: #f0f0f0;
 }
 

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

@@ -11,9 +11,15 @@ import {
 } from '@wordpress/components';
 import { chevronLeft } from '@wordpress/icons';
 
-function TabLayout( { title, description, handleBack, children, footer } ) {
+function TabPanelLayout( {
+	title,
+	description,
+	handleBack,
+	children,
+	footer,
+} ) {
 	return (
-		<div className="font-library-modal__tab-layout">
+		<div className="font-library-modal__tabpanel-layout">
 			<Spacer margin={ 4 } />
 			<VStack spacing={ 4 } justify="space-between">
 				<header>
@@ -47,4 +53,4 @@ function TabLayout( { title, description, handleBack, children, footer } ) {
 	);
 }
 
-export default TabLayout;
+export default TabPanelLayout;

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

@@ -1,12 +1,13 @@
 /**
- * External dependencies
+ * WordPress dependencies
  */
-import { paramCase as kebabCase } from 'change-case';
+import { privateApis as componentsPrivateApis } from '@wordpress/components';
 
 /**
  * Internal dependencies
  */
 import { FONT_WEIGHTS, FONT_STYLES } from './constants';
+import { unlock } from '../../../../lock-unlock';
 
 export function setUIValuesNeeded( font, extraValues = {} ) {
 	if ( ! font.name && ( font.fontFamily || font.slug ) ) {
@@ -129,25 +130,21 @@ export function getDisplaySrcFromFontFace( input, urlPrefix ) {
 	return src;
 }
 
-// This function replicates one behavior of _wp_to_kebab_case().
-// Additional context: https://github.com/WordPress/gutenberg/issues/53695
-export function wpKebabCase( str ) {
-	// If a string contains a digit followed by a number, insert a dash between them.
-	return kebabCase( str ).replace(
-		/([a-zA-Z])(\d)|(\d)([a-zA-Z])/g,
-		'$1$3-$2$4'
-	);
-}
-
-export function makeFormDataFromFontFamilies( fontFamilies ) {
+export function makeFormDataFromFontFamily( fontFamily ) {
 	const formData = new FormData();
-	const newFontFamilies = fontFamilies.map( ( family, familyIndex ) => {
-		family.slug = wpKebabCase( family.slug );
-		if ( family?.fontFace ) {
-			family.fontFace = family.fontFace.map( ( face, faceIndex ) => {
+	const { kebabCase } = unlock( componentsPrivateApis );
+
+	const newFontFamily = {
+		...fontFamily,
+		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-${ familyIndex }-${ faceIndex }`;
+					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
@@ -159,10 +156,11 @@ export function makeFormDataFromFontFamilies( fontFamilies ) {
 					return newFace;
 				}
 				return face;
-			} );
-		}
-		return family;
-	} );
-	formData.append( 'font_families', JSON.stringify( newFontFamilies ) );
+			}
+		);
+		newFontFamily.fontFace = newFontFaces;
+	}
+
+	formData.append( 'font_family_settings', JSON.stringify( newFontFamily ) );
 	return formData;
 }

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

@@ -0,0 +1,58 @@
+/**
+ * Internal dependencies
+ */
+import { makeFormDataFromFontFamily } from '../index';
+
+/* global File */
+
+describe( 'makeFormDataFromFontFamily', () => {
+	it( 'should process fontFamilies and return FormData', () => {
+		const mockFontFamily = {
+			slug: 'bebas',
+			name: 'Bebas',
+			fontFamily: 'Bebas',
+			fontFace: [
+				{
+					file: new File( [ 'content' ], 'test-font1.woff2' ),
+					fontWeight: '500',
+					fontStyle: 'normal',
+				},
+				{
+					file: new File( [ 'content' ], 'test-font2.woff2' ),
+					fontWeight: '400',
+					fontStyle: 'normal',
+				},
+			],
+		};
+
+		const formData = makeFormDataFromFontFamily( mockFontFamily );
+
+		expect( formData instanceof FormData ).toBeTruthy();
+
+		// Check if files are added correctly
+		expect( formData.get( 'file-0' ).name ).toBe( 'test-font1.woff2' );
+		expect( formData.get( 'file-1' ).name ).toBe( 'test-font2.woff2' );
+
+		// Check if 'fontFamilies' key in FormData is correct
+		const expectedFontFamily = {
+			fontFace: [
+				{
+					fontWeight: '500',
+					fontStyle: 'normal',
+					uploadedFile: 'file-0',
+				},
+				{
+					fontWeight: '400',
+					fontStyle: 'normal',
+					uploadedFile: 'file-1',
+				},
+			],
+			slug: 'bebas',
+			name: 'Bebas',
+			fontFamily: 'Bebas',
+		};
+		expect( JSON.parse( formData.get( 'font_family_settings' ) ) ).toEqual(
+			expectedFontFamily
+		);
+	} );
+} );