@wordpress/edit-site 5.30.0 → 5.32.0

package/src/components/block-editor/editor-canvas.js

@@ -22,13 +22,21 @@ import {
 	FOCUSABLE_ENTITIES,
 	NAVIGATION_POST_TYPE,
 } from '../../utils/constants';
+import { computeIFrameScale } from '../../utils/math';
 
 const { EditorCanvas: EditorCanvasRoot } = unlock( editorPrivateApis );
 
-function EditorCanvas( { enableResizing, settings, children, ...props } ) {
-	const { hasBlocks, isFocusMode, templateType, canvasMode } = useSelect(
-		( select ) => {
-			const { getBlockCount } = select( blockEditorStore );
+function EditorCanvas( {
+	enableResizing,
+	settings,
+	children,
+	onClick,
+	...props
+} ) {
+	const { hasBlocks, isFocusMode, templateType, canvasMode, isZoomOutMode } =
+		useSelect( ( select ) => {
+			const { getBlockCount, __unstableGetEditorMode } =
+				select( blockEditorStore );
 			const { getEditedPostType, getCanvasMode } = unlock(
 				select( editSiteStore )
 			);
@@ -37,12 +45,11 @@ function EditorCanvas( { enableResizing, settings, children, ...props } ) {
 			return {
 				templateType: _templateType,
 				isFocusMode: FOCUSABLE_ENTITIES.includes( _templateType ),
+				isZoomOutMode: __unstableGetEditorMode() === 'zoom-out',
 				canvasMode: getCanvasMode(),
 				hasBlocks: !! getBlockCount(),
 			};
-		},
-		[]
-	);
+		}, [] );
 	const { setCanvasMode } = unlock( useDispatch( editSiteStore ) );
 	const [ isFocused, setIsFocused ] = useState( false );
 
@@ -68,7 +75,13 @@ function EditorCanvas( { enableResizing, settings, children, ...props } ) {
 				setCanvasMode( 'edit' );
 			}
 		},
-		onClick: () => setCanvasMode( 'edit' ),
+		onClick: () => {
+			if ( !! onClick ) {
+				onClick();
+			} else {
+				setCanvasMode( 'edit' );
+			}
+		},
 		readonly: true,
 	};
 	const isTemplateTypeNavigation = templateType === NAVIGATION_POST_TYPE;
@@ -102,6 +115,17 @@ function EditorCanvas( { enableResizing, settings, children, ...props } ) {
 		[ settings.styles, enableResizing, canvasMode ]
 	);
 
+	const frameSize = isZoomOutMode ? 20 : undefined;
+
+	const scale = isZoomOutMode
+		? ( contentWidth ) =>
+				computeIFrameScale(
+					{ width: 1000, scale: 0.45 },
+					{ width: 400, scale: 0.9 },
+					contentWidth
+				)
+		: undefined;
+
 	return (
 		<EditorCanvasRoot
 			className={ classnames( 'edit-site-editor-canvas__block-list', {
@@ -110,7 +134,8 @@ function EditorCanvas( { enableResizing, settings, children, ...props } ) {
 			renderAppender={ showBlockAppender }
 			styles={ styles }
 			iframeProps={ {
-				shouldZoom: true,
+				scale,
+				frameSize,
 				className: classnames(
 					'edit-site-visual-editor__editor-canvas',
 					{

package/src/components/block-editor/site-editor-canvas.js

@@ -7,6 +7,7 @@ import classnames from 'classnames';
  */
 import { useSelect } from '@wordpress/data';
 import { useViewportMatch, useResizeObserver } from '@wordpress/compose';
+import { store as blockEditorStore } from '@wordpress/block-editor';
 
 /**
  * Internal dependencies
@@ -26,24 +27,23 @@ import { privateApis as routerPrivateApis } from '@wordpress/router';
 
 const { useLocation } = unlock( routerPrivateApis );
 
-export default function SiteEditorCanvas() {
+export default function SiteEditorCanvas( { onClick } ) {
 	const location = useLocation();
-	const { templateType, isFocusableEntity, isViewMode } = useSelect(
-		( select ) => {
+	const { templateType, isFocusableEntity, isViewMode, isZoomOutMode } =
+		useSelect( ( select ) => {
 			const { getEditedPostType, getCanvasMode } = unlock(
 				select( editSiteStore )
 			);
-
+			const { __unstableGetEditorMode } = select( blockEditorStore );
 			const _templateType = getEditedPostType();
 
 			return {
 				templateType: _templateType,
 				isFocusableEntity: FOCUSABLE_ENTITIES.includes( _templateType ),
 				isViewMode: getCanvasMode() === 'view',
+				isZoomOutMode: __unstableGetEditorMode() === 'zoom-out',
 			};
-		},
-		[]
-	);
+		}, [] );
 	const isFocusMode = location.params.focusMode || isFocusableEntity;
 	const [ resizeObserver, sizes ] = useResizeObserver();
 
@@ -55,6 +55,8 @@ export default function SiteEditorCanvas() {
 		! isViewMode &&
 		// Disable resizing in mobile viewport.
 		! isMobileViewport &&
+		// Dsiable resizing in zoomed-out mode.
+		! isZoomOutMode &&
 		// Disable resizing when editing a template in focus mode.
 		templateType !== TEMPLATE_POST_TYPE;
 
@@ -87,6 +89,7 @@ export default function SiteEditorCanvas() {
 							<EditorCanvas
 								enableResizing={ enableResizing }
 								settings={ settings }
+								onClick={ onClick }
 							>
 								{ resizeObserver }
 							</EditorCanvas>

package/src/components/block-editor/use-site-editor-settings.js

@@ -101,8 +101,6 @@ function useNavigateToPreviousEntityRecord() {
 			( location.params.postId &&
 				FOCUSABLE_ENTITIES.includes( location.params.postType ) );
 		const didComeFromEditorCanvas =
-			previousLocation?.params.postId &&
-			previousLocation?.params.postType &&
 			previousLocation?.params.canvas === 'edit';
 		const showBackButton = isFocusMode && didComeFromEditorCanvas;
 		return showBackButton ? () => history.back() : undefined;

package/src/components/editor/index.js

@@ -6,7 +6,7 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import { useSelect } from '@wordpress/data';
+import { useDispatch, useSelect } from '@wordpress/data';
 import { Notice } from '@wordpress/components';
 import { useInstanceId, useViewportMatch } from '@wordpress/compose';
 import { store as preferencesStore } from '@wordpress/preferences';
@@ -72,7 +72,7 @@ const interfaceLabels = {
 	footer: __( 'Editor footer' ),
 };
 
-export default function Editor( { isLoading } ) {
+export default function Editor( { isLoading, onClick } ) {
 	const {
 		record: editedPost,
 		getTitle,
@@ -174,6 +174,8 @@ export default function Editor( { isLoading } ) {
 		'edit-site-editor__loading-progress'
 	);
 
+	const { closeGeneralSidebar } = useDispatch( editSiteStore );
+
 	const settings = useSpecificEditorSettings();
 	const isReady =
 		! isLoading &&
@@ -225,7 +227,7 @@ export default function Editor( { isLoading } ) {
 										{ ! isLargeViewport && (
 											<BlockToolbar hideDragHandle />
 										) }
-										<SiteEditorCanvas />
+										<SiteEditorCanvas onClick={ onClick } />
 										<PatternModal />
 									</>
 								) }
@@ -243,7 +245,12 @@ export default function Editor( { isLoading } ) {
 						}
 						secondarySidebar={
 							isEditMode &&
-							( ( shouldShowInserter && <InserterSidebar /> ) ||
+							( ( shouldShowInserter && (
+								<InserterSidebar
+									closeGeneralSidebar={ closeGeneralSidebar }
+									isRightSidebarOpen={ isRightSidebarOpen }
+								/>
+							) ) ||
 								( shouldShowListView && <ListViewSidebar /> ) )
 						}
 						sidebar={

package/src/components/editor-canvas-container/index.js

@@ -134,7 +134,6 @@ function EditorCanvasContainer( {
 							icon={ closeSmall }
 							label={ closeButtonLabel || __( 'Close' ) }
 							onClick={ onCloseContainer }
-							showTooltip={ false }
 						/>
 					) }
 					{ childrenWithProps }

package/src/components/global-styles/background-panel.js

@@ -0,0 +1,34 @@
+/**
+ * WordPress dependencies
+ */
+import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
+
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../../lock-unlock';
+
+const {
+	useGlobalStyle,
+	useGlobalSetting,
+	BackgroundPanel: StylesBackgroundPanel,
+} = unlock( blockEditorPrivateApis );
+
+export default function BackgroundPanel() {
+	const [ style ] = useGlobalStyle( '', undefined, 'user', {
+		shouldDecodeEncode: false,
+	} );
+	const [ inheritedStyle, setStyle ] = useGlobalStyle( '', undefined, 'all', {
+		shouldDecodeEncode: false,
+	} );
+	const [ settings ] = useGlobalSetting( '' );
+
+	return (
+		<StylesBackgroundPanel
+			inheritedValue={ inheritedStyle }
+			value={ style }
+			onChange={ setStyle }
+			settings={ settings }
+		/>
+	);
+}

package/src/components/global-styles/color-palette-panel.js

@@ -13,8 +13,6 @@ import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
  * Internal dependencies
  */
 import { unlock } from '../../lock-unlock';
-import ColorVariations from './variations/variations-color';
-import { useCurrentMergeThemeStyleVariationsWithUserConfig } from '../../hooks/use-theme-style-variations/use-theme-style-variations-by-property';
 
 const { useGlobalSetting } = unlock( blockEditorPrivateApis );
 const mobilePopoverProps = { placement: 'bottom-start', offset: 8 };
@@ -47,12 +45,6 @@ export default function ColorPalettePanel( { name } ) {
 		'color.defaultPalette',
 		name
 	);
-	const colorVariations = useCurrentMergeThemeStyleVariationsWithUserConfig( {
-		property: 'color',
-		filter: ( variation ) =>
-			variation?.settings?.color &&
-			Object.keys( variation?.settings?.color ).length,
-	} );
 	const isMobileViewport = useViewportMatch( 'small', '<' );
 	const popoverProps = isMobileViewport ? mobilePopoverProps : undefined;
 
@@ -85,9 +77,6 @@ export default function ColorPalettePanel( { name } ) {
 						popoverProps={ popoverProps }
 					/>
 				) }
-			{ !! colorVariations.length && (
-				<ColorVariations variations={ colorVariations } />
-			) }
 			<PaletteEdit
 				colors={ customColors }
 				onChange={ setCustomColors }

package/src/components/global-styles/font-families.js

@@ -37,7 +37,7 @@ function FontFamilies() {
 				/>
 			) }
 
-			<VStack spacing={ 3 }>
+			<VStack spacing={ 2 }>
 				<HStack justify="space-between">
 					<Subtitle level={ 3 }>{ __( 'Fonts' ) }</Subtitle>
 					<HStack justify="flex-end">

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

@@ -9,7 +9,7 @@ import {
 	useEntityRecords,
 	store as coreStore,
 } from '@wordpress/core-data';
-import { __, sprintf } from '@wordpress/i18n';
+import { __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
@@ -105,18 +105,31 @@ function FontLibraryProvider( { children } ) {
 	const [ modalTabOpen, setModalTabOpen ] = useState( false );
 	const [ libraryFontSelected, setLibraryFontSelected ] = useState( null );
 
-	const baseThemeFonts = baseFontFamilies?.theme
-		? baseFontFamilies.theme
-				.map( ( f ) => setUIValuesNeeded( f, { source: 'theme' } ) )
-				.sort( ( a, b ) => a.name.localeCompare( b.name ) )
-		: [];
-
+	// Themes Fonts are the fonts defined in the global styles (database persisted theme.json data).
 	const themeFonts = fontFamilies?.theme
 		? fontFamilies.theme
 				.map( ( f ) => setUIValuesNeeded( f, { source: 'theme' } ) )
 				.sort( ( a, b ) => a.name.localeCompare( b.name ) )
 		: [];
 
+	const themeFontsSlugs = new Set( themeFonts.map( ( f ) => f.slug ) );
+
+	/*
+	 * Base Theme Fonts are the fonts defined in the theme.json *file*.
+	 *
+	 * Uses the fonts from global styles + the ones from the theme.json file that hasn't repeated slugs.
+	 * Avoids incosistencies with the fonts listed in the font library modal as base (unactivated).
+	 * These inconsistencies can happen when the active theme fonts in global styles aren't defined in theme.json file as when a theme style variation is applied.
+	 */
+	const baseThemeFonts = baseFontFamilies?.theme
+		? themeFonts.concat(
+				baseFontFamilies.theme
+					.filter( ( f ) => ! themeFontsSlugs.has( f.slug ) )
+					.map( ( f ) => setUIValuesNeeded( f, { source: 'theme' } ) )
+					.sort( ( a, b ) => a.name.localeCompare( b.name ) )
+		  )
+		: [];
+
 	const customFonts = fontFamilies?.custom
 		? fontFamilies.custom
 				.map( ( f ) => setUIValuesNeeded( f, { source: 'custom' } ) )
@@ -144,8 +157,7 @@ function FontLibraryProvider( { children } ) {
 			return;
 		}
 
-		const fonts =
-			font.source === 'theme' ? baseThemeFonts : baseCustomFonts;
+		const fonts = font.source === 'theme' ? themeFonts : baseCustomFonts;
 
 		// Tries to find the font in the installed fonts
 		const fontSelected = fonts.find( ( f ) => f.slug === font.slug );
@@ -269,13 +281,29 @@ function FontLibraryProvider( { children } ) {
 					sucessfullyInstalledFontFaces?.length > 0 ||
 					alreadyInstalledFontFaces?.length > 0
 				) {
-					fontFamilyToInstall.fontFace = [
+					// Use font data from REST API not from client to ensure
+					// correct font information is used.
+					installedFontFamily.fontFace = [
 						...sucessfullyInstalledFontFaces,
-						...alreadyInstalledFontFaces,
 					];
-					fontFamiliesToActivate.push( fontFamilyToInstall );
-				} else if ( isANewFontFamily ) {
-					// If the font family is new, delete it to avoid having font families without font faces.
+
+					fontFamiliesToActivate.push( installedFontFamily );
+				}
+
+				// If it's a system font but was installed successfully, activate it.
+				if (
+					installedFontFamily &&
+					! fontFamilyToInstall?.fontFace?.length
+				) {
+					fontFamiliesToActivate.push( installedFontFamily );
+				}
+
+				// If the font family is new and is not a system font, delete it to avoid having font families without font faces.
+				if (
+					isANewFontFamily &&
+					fontFamilyToInstall?.fontFace?.length > 0 &&
+					sucessfullyInstalledFontFaces?.length === 0
+				) {
 					await fetchUninstallFontFamily( installedFontFamily.id );
 				}
 
@@ -284,6 +312,14 @@ function FontLibraryProvider( { children } ) {
 				);
 			}
 
+			installationErrors = installationErrors.reduce(
+				( unique, item ) =>
+					unique.includes( item.message )
+						? unique
+						: [ ...unique, item.message ],
+				[]
+			);
+
 			if ( fontFamiliesToActivate.length > 0 ) {
 				// Activate the font family (add the font family to the global styles).
 				activateCustomFontFamilies( fontFamiliesToActivate );
@@ -300,18 +336,13 @@ function FontLibraryProvider( { children } ) {
 			}
 
 			if ( installationErrors.length > 0 ) {
-				throw new Error(
-					sprintf(
-						/* translators: %s: Specific error message returned from server. */
-						__( 'There were some errors installing fonts. %s' ),
-						installationErrors.reduce(
-							( errorMessageCollection, error ) => {
-								return `${ errorMessageCollection } ${ error.message }`;
-							},
-							''
-						)
-					)
+				const installError = new Error(
+					__( 'There was an error installing fonts.' )
 				);
+
+				installError.installationErrors = installationErrors;
+
+				throw installError;
 			}
 		} finally {
 			setIsInstalling( false );
@@ -373,14 +404,29 @@ function FontLibraryProvider( { children } ) {
 	};
 
 	const activateCustomFontFamilies = ( fontsToAdd ) => {
-		// Merge the existing custom fonts with the new fonts.
+		// Removes the id from the families and faces to avoid saving that to global styles post content.
+		const fontsToActivate = fontsToAdd.map(
+			( { id: _familyDbId, fontFace, ...font } ) => ( {
+				...font,
+				...( fontFace && fontFace.length > 0
+					? {
+							fontFace: fontFace.map(
+								( { id: _faceDbId, ...face } ) => face
+							),
+					  }
+					: {} ),
+			} )
+		);
+
 		// Activate the fonts by set the new custom fonts array.
 		setFontFamilies( {
 			...fontFamilies,
-			custom: mergeFontFamilies( fontFamilies?.custom, fontsToAdd ),
+			// Merge the existing custom fonts with the new fonts.
+			custom: mergeFontFamilies( fontFamilies?.custom, fontsToActivate ),
 		} );
+
 		// Add custom fonts to the browser.
-		fontsToAdd.forEach( ( font ) => {
+		fontsToActivate.forEach( ( font ) => {
 			if ( font.fontFace ) {
 				font.fontFace.forEach( ( face ) => {
 					// Load font faces just in the iframe because they already are in the document.
@@ -408,15 +454,15 @@ function FontLibraryProvider( { children } ) {
 
 		const isFaceActivated = isFontActivated(
 			font.slug,
-			face.fontStyle,
-			face.fontWeight,
+			face?.fontStyle,
+			face?.fontWeight,
 			font.source
 		);
 
 		if ( isFaceActivated ) {
 			loadFontFaceInBrowser(
 				face,
-				getDisplaySrcFromFontFace( face.src ),
+				getDisplaySrcFromFontFace( face?.src ),
 				'all'
 			);
 		} else {

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

@@ -344,8 +344,9 @@ function FontCollection( { slug } ) {
 							size="small"
 							onClick={ () => {
 								setSelectedFont( null );
+								setNotice( null );
 							} }
-							aria-label={ __( 'Navigate to the previous view' ) }
+							label={ __( 'Back' ) }
 						/>
 						<Heading
 							level={ 2 }
@@ -441,13 +442,13 @@ function FontCollection( { slug } ) {
 							sprintf(
 								// translators: %s: Total number of pages.
 								_x(
-									'Page <CurrenPageControl /> of %s',
+									'Page <CurrentPageControl /> of %s',
 									'paging'
 								),
 								totalPages
 							),
 							{
-								CurrenPageControl: (
+								CurrentPageControl: (
 									<SelectControl
 										aria-label={ __( 'Current page' ) }
 										value={ page }

package/src/components/global-styles/font-library-modal/google-fonts-confirm-dialog.js

@@ -6,6 +6,7 @@ import {
 	Button,
 	Card,
 	CardBody,
+	__experimentalHeading as Heading,
 	__experimentalText as Text,
 	__experimentalSpacer as Spacer,
 } from '@wordpress/components';
@@ -24,7 +25,9 @@ function GoogleFontsConfirmDialog() {
 		<div className="font-library__google-fonts-confirm">
 			<Card>
 				<CardBody>
-					<Text as="h3">{ __( 'Connect to Google Fonts' ) }</Text>
+					<Heading level={ 2 }>
+						{ __( 'Connect to Google Fonts' ) }
+					</Heading>
 					<Spacer margin={ 6 } />
 					<Text as="p">
 						{ __(
@@ -38,7 +41,11 @@ function GoogleFontsConfirmDialog() {
 						) }
 					</Text>
 					<Spacer margin={ 6 } />
-					<Button variant="primary" onClick={ handleConfirm }>
+					<Button
+						__next40pxDefaultSize
+						variant="primary"
+						onClick={ handleConfirm }
+					>
 						{ __( 'Allow access to Google Fonts' ) }
 					</Button>
 				</CardBody>

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

@@ -202,7 +202,7 @@ function InstalledFonts() {
 							onClick={ () => {
 								handleSetLibraryFontSelected( null );
 							} }
-							aria-label={ __( 'Navigate to the previous view' ) }
+							label={ __( 'Back' ) }
 						/>
 						<Heading
 							level={ 2 }

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

@@ -1,5 +1,5 @@
 .font-library-modal {
-	// @todo: If a new prop is added to the Modal component that constrains
+	// @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 {
@@ -125,13 +125,22 @@ button.font-library-modal__upload-area {
 	align-items: center;
 	margin-top: $grid-unit-80;
 
-	h3 {
-		font-size: 1.4rem;
+	p {
+		line-height: $default-line-height;
+	}
+
+	h2 {
+		font-size: 1.2rem;
+		font-weight: 400;
 	}
 
 	.components-card {
-		width: 50%;
-		min-width: 350px;
-		max-width: 400px;
+		padding: $grid-unit-20;
+		width: 400px;
+	}
+
+	.components-button {
+		width: 100%;
+		justify-content: center;
 	}
 }

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

@@ -45,29 +45,48 @@ function UploadFonts() {
 	 * @param {Array} files The files to be filtered
 	 * @return {void}
 	 */
-	const handleFilesUpload = ( files ) => {
+	const handleFilesUpload = async ( files ) => {
 		setNotice( null );
 		setIsUploading( true );
 		const uniqueFilenames = new Set();
 		const selectedFiles = [ ...files ];
-		const allowedFiles = selectedFiles.filter( ( file ) => {
+		let hasInvalidFiles = false;
+
+		// Use map to create a promise for each file check, then filter with Promise.all.
+		const checkFilesPromises = selectedFiles.map( async ( file ) => {
+			const isFont = await isFontFile( file );
+			if ( ! isFont ) {
+				hasInvalidFiles = true;
+				return null; // Return null for invalid files.
+			}
+			// Check for duplicates
 			if ( uniqueFilenames.has( file.name ) ) {
-				return false; // Discard duplicates
+				return null; // Return null for duplicates.
 			}
-			// Eliminates files that are not allowed
+			// Check if the file extension is allowed.
 			const fileExtension = file.name.split( '.' ).pop().toLowerCase();
 			if ( ALLOWED_FILE_EXTENSIONS.includes( fileExtension ) ) {
 				uniqueFilenames.add( file.name );
-				return true; // Keep file if the extension is allowed
+				return file; // Return the file if it passes all checks.
 			}
-			return false; // Discard file extension not allowed
+			return null; // Return null for disallowed file extensions.
 		} );
+
+		// Filter out the nulls after all promises have resolved.
+		const allowedFiles = ( await Promise.all( checkFilesPromises ) ).filter(
+			( file ) => null !== file
+		);
+
 		if ( allowedFiles.length > 0 ) {
 			loadFiles( allowedFiles );
 		} else {
+			const message = hasInvalidFiles
+				? __( 'Sorry, you are not allowed to upload this file type.' )
+				: __( 'No fonts found to install.' );
+
 			setNotice( {
 				type: 'error',
-				message: __( 'No fonts found to install.' ),
+				message,
 			} );
 			setIsUploading( false );
 		}
@@ -94,6 +113,23 @@ function UploadFonts() {
 		handleInstall( fontFacesLoaded );
 	};
 
+	/**
+	 * Checks if a file is a valid Font file.
+	 *
+	 * @param {File} file The file to be checked.
+	 * @return {boolean} Whether the file is a valid font file.
+	 */
+	async function isFontFile( file ) {
+		const font = new Font( 'Uploaded Font' );
+		try {
+			const buffer = await readFileAsArrayBuffer( file );
+			await font.fromDataBuffer( buffer, 'font' );
+			return true;
+		} catch ( error ) {
+			return false;
+		}
+	}
+
 	// Create a function to read the file as array buffer
 	async function readFileAsArrayBuffer( file ) {
 		return new Promise( ( resolve, reject ) => {
@@ -154,6 +190,7 @@ function UploadFonts() {
 			setNotice( {
 				type: 'error',
 				message: error.message,
+				errors: error?.installationErrors,
 			} );
 		}
 
@@ -167,9 +204,17 @@ function UploadFonts() {
 				{ notice && (
 					<Notice
 						status={ notice.type }
+						__unstableHTML
 						onRemove={ () => setNotice( null ) }
 					>
 						{ notice.message }
+						{ notice.errors && (
+							<ul>
+								{ notice.errors.map( ( error, index ) => (
+									<li key={ index }>{ error }</li>
+								) ) }
+							</ul>
+						) }
 					</Notice>
 				) }
 				{ isUploading && (
@@ -199,7 +244,7 @@ function UploadFonts() {
 				<Spacer margin={ 2 } />
 				<Text className="font-library-modal__upload-area__text">
 					{ __(
-						'Uploaded fonts appear in your library and can be used in your theme. Supported formats: .tff, .otf, .woff, and .woff2.'
+						'Uploaded fonts appear in your library and can be used in your theme. Supported formats: .ttf, .otf, .woff, and .woff2.'
 					) }
 				</Text>
 			</VStack>