@wordpress/edit-site 5.19.1 → 5.19.3

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/edit-site",
-	"version": "5.19.1",
+	"version": "5.19.3",
 	"description": "Edit Site Page module for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -27,44 +27,44 @@
 	"react-native": "src/index",
 	"dependencies": {
 		"@babel/runtime": "^7.16.0",
-		"@wordpress/a11y": "^3.42.1",
-		"@wordpress/api-fetch": "^6.39.1",
-		"@wordpress/block-editor": "^12.10.1",
-		"@wordpress/block-library": "^8.19.1",
-		"@wordpress/blocks": "^12.19.1",
-		"@wordpress/commands": "^0.13.1",
-		"@wordpress/components": "^25.8.1",
-		"@wordpress/compose": "^6.19.1",
-		"@wordpress/core-commands": "^0.11.1",
-		"@wordpress/core-data": "^6.19.1",
-		"@wordpress/data": "^9.12.1",
-		"@wordpress/date": "^4.42.1",
-		"@wordpress/deprecated": "^3.42.1",
-		"@wordpress/dom": "^3.42.1",
-		"@wordpress/editor": "^13.19.1",
-		"@wordpress/element": "^5.19.1",
-		"@wordpress/escape-html": "^2.42.1",
-		"@wordpress/hooks": "^3.42.1",
-		"@wordpress/html-entities": "^3.42.1",
-		"@wordpress/i18n": "^4.42.1",
-		"@wordpress/icons": "^9.33.1",
-		"@wordpress/interface": "^5.19.1",
-		"@wordpress/keyboard-shortcuts": "^4.19.1",
-		"@wordpress/keycodes": "^3.42.1",
-		"@wordpress/media-utils": "^4.33.1",
-		"@wordpress/notices": "^4.10.1",
-		"@wordpress/patterns": "^1.3.1",
-		"@wordpress/plugins": "^6.10.1",
-		"@wordpress/preferences": "^3.19.1",
-		"@wordpress/primitives": "^3.40.1",
-		"@wordpress/private-apis": "^0.24.1",
-		"@wordpress/reusable-blocks": "^4.19.1",
-		"@wordpress/router": "^0.11.1",
-		"@wordpress/style-engine": "^1.25.1",
-		"@wordpress/url": "^3.43.1",
-		"@wordpress/viewport": "^5.19.1",
-		"@wordpress/widgets": "^3.19.1",
-		"@wordpress/wordcount": "^3.42.1",
+		"@wordpress/a11y": "^3.42.3",
+		"@wordpress/api-fetch": "^6.39.3",
+		"@wordpress/block-editor": "^12.10.3",
+		"@wordpress/block-library": "^8.19.3",
+		"@wordpress/blocks": "^12.19.3",
+		"@wordpress/commands": "^0.13.3",
+		"@wordpress/components": "^25.8.3",
+		"@wordpress/compose": "^6.19.3",
+		"@wordpress/core-commands": "^0.11.3",
+		"@wordpress/core-data": "^6.19.3",
+		"@wordpress/data": "^9.12.3",
+		"@wordpress/date": "^4.42.3",
+		"@wordpress/deprecated": "^3.42.3",
+		"@wordpress/dom": "^3.42.3",
+		"@wordpress/editor": "^13.19.3",
+		"@wordpress/element": "^5.19.3",
+		"@wordpress/escape-html": "^2.42.3",
+		"@wordpress/hooks": "^3.42.3",
+		"@wordpress/html-entities": "^3.42.3",
+		"@wordpress/i18n": "^4.42.3",
+		"@wordpress/icons": "^9.33.3",
+		"@wordpress/interface": "^5.19.3",
+		"@wordpress/keyboard-shortcuts": "^4.19.3",
+		"@wordpress/keycodes": "^3.42.3",
+		"@wordpress/media-utils": "^4.33.3",
+		"@wordpress/notices": "^4.10.3",
+		"@wordpress/patterns": "^1.3.3",
+		"@wordpress/plugins": "^6.10.3",
+		"@wordpress/preferences": "^3.19.3",
+		"@wordpress/primitives": "^3.40.3",
+		"@wordpress/private-apis": "^0.24.3",
+		"@wordpress/reusable-blocks": "^4.19.3",
+		"@wordpress/router": "^0.11.3",
+		"@wordpress/style-engine": "^1.25.3",
+		"@wordpress/url": "^3.43.3",
+		"@wordpress/viewport": "^5.19.3",
+		"@wordpress/widgets": "^3.19.3",
+		"@wordpress/wordcount": "^3.42.3",
 		"change-case": "^4.1.2",
 		"classnames": "^2.3.1",
 		"colord": "^2.9.2",
@@ -84,5 +84,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "4987d16acb5c41b62704dc4f88225acb97ddd698"
+	"gitHead": "6256f93c37705d142f75a99f1fc808540ca7dca8"
 }

package/src/components/add-new-pattern/index.js

@@ -11,6 +11,7 @@ import {
 	privateApis as editPatternsPrivateApis,
 	store as patternsStore,
 } from '@wordpress/patterns';
+import { store as coreStore } from '@wordpress/core-data';
 import { store as noticesStore } from '@wordpress/notices';
 
 /**
@@ -19,7 +20,6 @@ import { store as noticesStore } from '@wordpress/notices';
 import CreateTemplatePartModal from '../create-template-part-modal';
 import SidebarButton from '../sidebar-button';
 import { unlock } from '../../lock-unlock';
-import { store as editSiteStore } from '../../store';
 import {
 	PATTERN_TYPES,
 	PATTERN_DEFAULT_CATEGORY,
@@ -36,9 +36,8 @@ export default function AddNewPattern() {
 	const [ showPatternModal, setShowPatternModal ] = useState( false );
 	const [ showTemplatePartModal, setShowTemplatePartModal ] =
 		useState( false );
-	const isTemplatePartsMode = useSelect( ( select ) => {
-		const settings = select( editSiteStore ).getSettings();
-		return !! settings.supportsTemplatePartsMode;
+	const isBlockBasedTheme = useSelect( ( select ) => {
+		return select( coreStore ).getCurrentTheme()?.is_block_theme;
 	}, [] );
 	const { createPatternFromFile } = unlock( useDispatch( patternsStore ) );
 	const { createSuccessNotice, createErrorNotice } =
@@ -52,7 +51,7 @@ export default function AddNewPattern() {
 		history.push( {
 			postId: pattern.id,
 			postType: PATTERN_TYPES.user,
-			categoryType: PATTERN_TYPES.user,
+			categoryType: PATTERN_TYPES.theme,
 			categoryId,
 			canvas: 'edit',
 		} );
@@ -82,9 +81,7 @@ export default function AddNewPattern() {
 		},
 	];
 
-	// Remove condition when command palette issues are resolved.
-	// See: https://github.com/WordPress/gutenberg/issues/52154.
-	if ( ! isTemplatePartsMode ) {
+	if ( isBlockBasedTheme ) {
 		controls.push( {
 			icon: symbolFilled,
 			onClick: () => setShowTemplatePartModal( true ),

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

@@ -64,8 +64,12 @@ function FontFamilies() {
 	);
 }
 
-export default ( { ...props } ) => (
+const FontFamiliesComponent = ( { ...props } ) => (
 	<FontLibraryProvider>
 		<FontFamilies { ...props } />
 	</FontLibraryProvider>
 );
+
+export default process.env.IS_GUTENBERG_PLUGIN
+	? FontFamiliesComponent
+	: undefined;

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

@@ -42,7 +42,7 @@ function CollectionFontDetails( {
 						handleToggleVariant={ handleToggleVariant }
 						selected={ isFontFontFaceInOutline(
 							font.slug,
-							face,
+							font.fontFace ? face : null, // If the font has no fontFace, we want to check if the font is in the outline
 							fontToInstallOutline
 						) }
 					/>

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

@@ -9,8 +9,6 @@ import {
 	useEntityRecords,
 	store as coreStore,
 } from '@wordpress/core-data';
-import { store as noticesStore } from '@wordpress/notices';
-import { __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
@@ -51,8 +49,6 @@ function FontLibraryProvider( { children } ) {
 	const fontFamiliesHasChanges =
 		!! globalStyles?.edits?.settings?.typography?.fontFamilies;
 
-	const { createErrorNotice } = useDispatch( noticesStore );
-
 	const [ isInstalling, setIsInstalling ] = useState( false );
 	const [ refreshKey, setRefreshKey ] = useState( 0 );
 
@@ -202,7 +198,8 @@ function FontLibraryProvider( { children } ) {
 			// Prepare formData to install.
 			const formData = makeFormDataFromFontFamilies( fonts );
 			// Install the fonts (upload the font files to the server and create the post in the database).
-			const fontsInstalled = await fetchInstallFonts( formData );
+			const response = await fetchInstallFonts( 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(
@@ -217,41 +214,40 @@ function FontLibraryProvider( { children } ) {
 			] );
 			refreshLibrary();
 			setIsInstalling( false );
-			return true;
-		} catch ( e ) {
-			// eslint-disable-next-line no-console
-			console.error( e );
-			createErrorNotice( __( 'Error installing fonts.' ), {
-				type: 'snackbar',
-			} );
+
+			return response;
+		} catch ( error ) {
 			setIsInstalling( false );
-			return false;
+			return {
+				errors: [ error ],
+			};
 		}
 	}
 
 	async function uninstallFont( font ) {
 		try {
 			// Uninstall the font (remove the font files from the server and the post from the database).
-			await fetchUninstallFonts( [ font ] );
+			const response = await fetchUninstallFonts( [ font ] );
 			// Deactivate the font family (remove the font family from the global styles).
-			deactivateFontFamily( font );
-			// Save the global styles to the database.
-			await saveSpecifiedEntityEdits(
-				'root',
-				'globalStyles',
-				globalStylesId,
-				[ 'settings.typography.fontFamilies' ]
-			);
+			if ( ! response.errors ) {
+				deactivateFontFamily( font );
+				// Save the global styles to the database.
+				await saveSpecifiedEntityEdits(
+					'root',
+					'globalStyles',
+					globalStylesId,
+					[ 'settings.typography.fontFamilies' ]
+				);
+			}
 			// Refresh the library (the the library font families from database).
 			refreshLibrary();
-			return true;
-		} catch ( e ) {
+			return response;
+		} catch ( error ) {
 			// eslint-disable-next-line no-console
-			console.error( e );
-			createErrorNotice( __( 'Error uninstalling fonts.' ), {
-				type: 'snackbar',
-			} );
-			return false;
+			console.error( error );
+			return {
+				errors: [ error ],
+			};
 		}
 	}
 
@@ -281,14 +277,16 @@ function FontLibraryProvider( { children } ) {
 		} );
 		// Add custom fonts to the browser.
 		fontsToAdd.forEach( ( font ) => {
-			font.fontFace.forEach( ( face ) => {
-				// Load font faces just in the iframe because they already are in the document.
-				loadFontFaceInBrowser(
-					face,
-					getDisplaySrcFromFontFace( face.src ),
-					'iframe'
-				);
-			} );
+			if ( font.fontFace ) {
+				font.fontFace.forEach( ( face ) => {
+					// Load font faces just in the iframe because they already are in the document.
+					loadFontFaceInBrowser(
+						face,
+						getDisplaySrcFromFontFace( face.src ),
+						'iframe'
+					);
+				} );
+			}
 		} );
 	};
 
@@ -311,7 +309,7 @@ function FontLibraryProvider( { children } ) {
 		// Get the src of the font.
 		const src = getDisplaySrcFromFontFace( fontFace.src, themeUrl );
 		// If the font is already loaded, don't load it again.
-		if ( loadedFontUrls.has( src ) ) return;
+		if ( ! src || loadedFontUrls.has( src ) ) return;
 		// Load the font in the browser.
 		loadFontFaceInBrowser( fontFace, src, 'document' );
 		// Add the font to the loaded fonts list.

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

@@ -12,6 +12,7 @@ import {
 	FlexItem,
 	Flex,
 	Button,
+	Notice,
 } from '@wordpress/components';
 import { debounce } from '@wordpress/compose';
 import { __ } from '@wordpress/i18n';
@@ -29,6 +30,7 @@ import CollectionFontDetails from './collection-font-details';
 import { toggleFont } from './utils/toggleFont';
 import { getFontsOutline } from './utils/fonts-outline';
 import GoogleFontsConfirmDialog from './google-fonts-confirm-dialog';
+import { getNoticeFromInstallResponse } from './utils/get-notice-from-response';
 
 const DEFAULT_CATEGORY = {
 	id: 'all',
@@ -45,13 +47,15 @@ function FontCollection( { id } ) {
 		);
 	};
 
+	const [ notice, setNotice ] = useState( null );
 	const [ selectedFont, setSelectedFont ] = useState( null );
 	const [ fontsToInstall, setFontsToInstall ] = useState( [] );
 	const [ filters, setFilters ] = useState( {} );
 	const [ renderConfirmDialog, setRenderConfirmDialog ] = useState(
 		requiresPermission && ! getGoogleFontsPermissionFromStorage()
 	);
-	const { collections, getFontCollection } = useContext( FontLibraryContext );
+	const { collections, getFontCollection, installFonts } =
+		useContext( FontLibraryContext );
 	const selectedCollection = collections.find(
 		( collection ) => collection.id === id
 	);
@@ -76,6 +80,16 @@ function FontCollection( { id } ) {
 		setSelectedFont( null );
 	}, [ id ] );
 
+	// Reset notice after 5 seconds
+	useEffect( () => {
+		if ( notice ) {
+			const timeout = setTimeout( () => {
+				setNotice( null );
+			}, 5000 );
+			return () => clearTimeout( timeout );
+		}
+	}, [ notice ] );
+
 	const collectionFonts = useMemo(
 		() => selectedCollection?.data?.fontFamilies ?? [],
 		[ selectedCollection ]
@@ -122,6 +136,13 @@ function FontCollection( { id } ) {
 		setFontsToInstall( [] );
 	};
 
+	const handleInstall = async () => {
+		const response = await installFonts( fontsToInstall );
+		const installNotice = getNoticeFromInstallResponse( response );
+		setNotice( installNotice );
+		resetFontsToInstall();
+	};
+
 	return (
 		<TabLayout
 			title={
@@ -135,10 +156,7 @@ function FontCollection( { id } ) {
 			handleBack={ !! selectedFont && handleUnselectFont }
 			footer={
 				fontsToInstall.length > 0 && (
-					<Footer
-						fontsToInstall={ fontsToInstall }
-						resetFontsToInstall={ resetFontsToInstall }
-					/>
+					<Footer handleInstall={ handleInstall } />
 				)
 			}
 		>
@@ -153,6 +171,22 @@ function FontCollection( { id } ) {
 				<Spinner />
 			) }
 
+			{ notice && (
+				<>
+					<FlexItem>
+						<Spacer margin={ 2 } />
+						<Notice
+							isDismissible={ false }
+							status={ notice.type }
+							className="font-library-modal__font-collection__notice"
+						>
+							{ notice.message }
+						</Notice>
+					</FlexItem>
+					<Spacer margin={ 2 } />
+				</>
+			) }
+
 			{ ! renderConfirmDialog && ! selectedFont && (
 				<Flex>
 					<FlexItem>
@@ -232,13 +266,8 @@ function FontCollection( { id } ) {
 	);
 }
 
-function Footer( { fontsToInstall, resetFontsToInstall } ) {
-	const { installFonts, isInstalling } = useContext( FontLibraryContext );
-
-	const handleInstall = async () => {
-		await installFonts( fontsToInstall );
-		resetFontsToInstall();
-	};
+function Footer( { handleInstall } ) {
+	const { isInstalling } = useContext( FontLibraryContext );
 
 	return (
 		<Flex justify="flex-end">

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

@@ -10,13 +10,21 @@ import { useContext } from '@wordpress/element';
  */
 import InstalledFonts from './installed-fonts';
 import FontCollection from './font-collection';
+import UploadFonts from './upload-fonts';
 import { FontLibraryContext } from './context';
 
-const INSTALLED_FONTS_TAB = {
-	name: 'installed-fonts',
-	title: __( 'Library' ),
-	className: 'installed-fonts',
-};
+const DEFAULT_TABS = [
+	{
+		name: 'installed-fonts',
+		title: __( 'Library' ),
+		className: 'installed-fonts',
+	},
+	{
+		name: 'upload-fonts',
+		title: __( 'Upload' ),
+		className: 'upload-fonts',
+	},
+];
 
 const tabsFromCollections = ( collections ) =>
 	collections.map( ( { id, name } ) => ( {
@@ -35,7 +43,7 @@ function FontLibraryModal( {
 	const { collections } = useContext( FontLibraryContext );
 
 	const tabs = [
-		INSTALLED_FONTS_TAB,
+		...DEFAULT_TABS,
 		...tabsFromCollections( collections || [] ),
 	];
 
@@ -53,6 +61,8 @@ function FontLibraryModal( {
 			>
 				{ ( tab ) => {
 					switch ( tab.name ) {
+						case 'upload-fonts':
+							return <UploadFonts />;
 						case 'installed-fonts':
 							return <InstalledFonts />;
 						default:

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

@@ -9,6 +9,8 @@ import {
 	__experimentalSpacer as Spacer,
 	Button,
 	Spinner,
+	Notice,
+	FlexItem,
 } from '@wordpress/components';
 
 /**
@@ -19,8 +21,8 @@ import { FontLibraryContext } from './context';
 import FontsGrid from './fonts-grid';
 import LibraryFontDetails from './library-font-details';
 import LibraryFontCard from './library-font-card';
-import LocalFonts from './local-fonts';
 import ConfirmDeleteDialog from './confirm-delete-dialog';
+import { getNoticeFromUninstallResponse } from './utils/get-notice-from-response';
 import { unlock } from '../../../lock-unlock';
 const { ProgressBar } = unlock( componentsPrivateApis );
 
@@ -44,10 +46,14 @@ function InstalledFonts() {
 		handleSetLibraryFontSelected( font );
 	};
 
+	const [ notice, setNotice ] = useState( null );
+
 	const handleConfirmUninstall = async () => {
-		const result = await uninstallFont( libraryFontSelected );
+		const response = await uninstallFont( libraryFontSelected );
+		const uninstallNotice = getNoticeFromUninstallResponse( response );
+		setNotice( uninstallNotice );
 		// If the font was succesfully uninstalled it is unselected
-		if ( result ) {
+		if ( ! response?.errors?.length ) {
 			handleUnselectFont();
 		}
 		setIsConfirmDeleteOpen( false );
@@ -72,8 +78,19 @@ function InstalledFonts() {
 
 	useEffect( () => {
 		refreshLibrary();
+		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [] );
 
+	// Reset notice after 5 seconds
+	useEffect( () => {
+		if ( notice ) {
+			const timeout = setTimeout( () => {
+				setNotice( null );
+			}, 5000 );
+			return () => clearTimeout( timeout );
+		}
+	}, [ notice ] );
+
 	return (
 		<TabLayout
 			title={ libraryFontSelected?.name || '' }
@@ -93,6 +110,22 @@ function InstalledFonts() {
 				handleCancelUninstall={ handleCancelUninstall }
 			/>
 
+			{ notice && (
+				<>
+					<FlexItem>
+						<Spacer margin={ 2 } />
+						<Notice
+							isDismissible={ false }
+							status={ notice.type }
+							className="font-library-modal__font-collection__notice"
+						>
+							{ notice.message }
+						</Notice>
+					</FlexItem>
+					<Spacer margin={ 4 } />
+				</>
+			) }
+
 			{ ! libraryFontSelected && (
 				<>
 					{ isResolvingLibrary && <Spinner /> }
@@ -129,9 +162,6 @@ function InstalledFonts() {
 							</FontsGrid>
 						</>
 					) }
-
-					<Spacer margin={ 8 } />
-					<LocalFonts />
 				</>
 			) }
 

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

@@ -1,15 +1,18 @@
 /**
  * WordPress dependencies
  */
-import { __ } from '@wordpress/i18n';
+import { __, sprintf } from '@wordpress/i18n';
 import {
 	Button,
 	DropZone,
 	__experimentalSpacer as Spacer,
 	__experimentalText as Text,
+	__experimentalVStack as VStack,
 	FormFileUpload,
+	Notice,
+	FlexItem,
 } from '@wordpress/components';
-import { useContext } from '@wordpress/element';
+import { useContext, useState, useEffect } from '@wordpress/element';
 
 /**
  * Internal dependencies
@@ -19,9 +22,16 @@ import { FontLibraryContext } from './context';
 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';
 
 function LocalFonts() {
 	const { installFonts } = useContext( FontLibraryContext );
+	const [ notice, setNotice ] = useState( null );
+	const supportedFormats =
+		ALLOWED_FILE_EXTENSIONS.slice( 0, -1 )
+			.map( ( extension ) => `.${ extension }` )
+			.join( ', ' ) +
+		` ${ __( 'and' ) } .${ ALLOWED_FILE_EXTENSIONS.slice( -1 ) }`;
 
 	const handleDropZone = ( files ) => {
 		handleFilesUpload( files );
@@ -30,6 +40,16 @@ function LocalFonts() {
 		handleFilesUpload( event.target.files );
 	};
 
+	// Reset notice after 5 seconds
+	useEffect( () => {
+		if ( notice ) {
+			const timeout = setTimeout( () => {
+				setNotice( null );
+			}, 5000 );
+			return () => clearTimeout( timeout );
+		}
+	}, [ notice ] );
+
 	/**
 	 * Filters the selected files to only allow the ones with the allowed extensions
 	 *
@@ -37,6 +57,7 @@ function LocalFonts() {
 	 * @return {void}
 	 */
 	const handleFilesUpload = ( files ) => {
+		setNotice( null );
 		const uniqueFilenames = new Set();
 		const selectedFiles = [ ...files ];
 		const allowedFiles = selectedFiles.filter( ( file ) => {
@@ -126,33 +147,54 @@ function LocalFonts() {
 	 */
 	const handleInstall = async ( fontFaces ) => {
 		const fontFamilies = makeFamiliesFromFaces( fontFaces );
-		await installFonts( fontFamilies );
+		const response = await installFonts( fontFamilies );
+		const installNotice = getNoticeFromInstallResponse( response );
+		setNotice( installNotice );
 	};
 
 	return (
 		<>
-			<Text className="font-library-modal__subtitle">
-				{ __( 'Upload Fonts' ) }
-			</Text>
-			<Spacer margin={ 2 } />
+			<Spacer margin={ 16 } />
 			<DropZone onFilesDrop={ handleDropZone } />
-			<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>
-							{ __( 'Drag and drop your font files here.' ) }
-						</span>
-					</Button>
+			<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 && (
+					<FlexItem>
+						<Spacer margin={ 2 } />
+						<Notice
+							isDismissible={ false }
+							status={ notice.type }
+							className="font-library-modal__upload-area__notice"
+						>
+							{ notice.message }
+						</Notice>
+					</FlexItem>
 				) }
-			/>
+				<Spacer margin={ 2 } />
+				<Text className="font-library-modal__upload-area__text">
+					{ sprintf(
+						/* translators: %s: supported font formats: ex: .ttf, .woff and .woff2 */
+						__(
+							'Uploaded fonts appear in your library and can be used in your theme. Supported formats: %s.'
+						),
+						supportedFormats
+					) }
+				</Text>
+			</VStack>
 		</>
 	);
 }