@wordpress/edit-site 5.19.2 → 5.19.3

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>
 		</>
 	);
 }

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

@@ -92,11 +92,24 @@
 	align-items: center;
 	display: flex;
 	justify-content: center;
-	height: 100px;
+	height: 250px;
 	width: 100%;
 	background-color: #f0f0f0;
 }
 
+.font-library-modal__local-fonts {
+	margin: 0 auto;
+	width: 80%;
+
+	.font-library-modal__upload-area__text {
+		color: #6e6e6e;
+	}
+
+	.font-library-modal__upload-area__notice {
+		margin: 0;
+	}
+}
+
 .font-library-modal__font-name {
 	font-weight: bold;
 }
@@ -137,3 +150,7 @@
 		max-width: 350px;
 	}
 }
+
+.font-library-modal__font-collection__notice {
+	margin: 0;
+}

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

@@ -0,0 +1,20 @@
+/**
+ * WordPress dependencies
+ */
+import { __experimentalSpacer as Spacer } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import LocalFonts from './local-fonts';
+
+function UploadFonts() {
+	return (
+		<>
+			<Spacer margin={ 8 } />
+			<LocalFonts />
+		</>
+	);
+}
+
+export default UploadFonts;

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

@@ -15,7 +15,8 @@ export function getFontsOutline( fonts ) {
 }
 
 export function isFontFontFaceInOutline( slug, face, outline ) {
-	return (
-		outline[ slug ]?.[ `${ face.fontStyle }-${ face.fontWeight }` ] || false
-	);
+	if ( ! face ) {
+		return !! outline[ slug ];
+	}
+	return !! outline[ slug ]?.[ `${ face.fontStyle }-${ face.fontWeight }` ];
 }

package/src/components/global-styles/font-library-modal/utils/get-notice-from-response.js

@@ -0,0 +1,62 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+
+export function getNoticeFromInstallResponse( response ) {
+	const { errors = [], successes = [] } = response;
+	// Everything failed.
+	if ( errors.length && ! successes.length ) {
+		return {
+			type: 'error',
+			message: __( 'Error installing the fonts.' ),
+		};
+	}
+
+	// Eveerything succeeded.
+	if ( ! errors.length && successes.length ) {
+		return {
+			type: 'success',
+			message: __( 'Fonts were installed successfully.' ),
+		};
+	}
+
+	// Some succeeded, some failed.
+	if ( errors.length && successes.length ) {
+		return {
+			type: 'warning',
+			message: __(
+				'Some fonts were installed successfully and some failed.'
+			),
+		};
+	}
+}
+
+export function getNoticeFromUninstallResponse( response ) {
+	const { errors = [], successes = [] } = response;
+	// Everything failed.
+	if ( errors.length && ! successes.length ) {
+		return {
+			type: 'error',
+			message: __( 'Error uninstalling the fonts.' ),
+		};
+	}
+
+	// Everything succeeded.
+	if ( ! errors.length && successes.length ) {
+		return {
+			type: 'success',
+			message: __( 'Fonts were uninstalled successfully.' ),
+		};
+	}
+
+	// Some succeeded, some failed.
+	if ( errors.length && successes.length ) {
+		return {
+			type: 'warning',
+			message: __(
+				'Some fonts were uninstalled successfully and some failed.'
+			),
+		};
+	}
+}

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

@@ -109,6 +109,10 @@ export async function loadFontFaceInBrowser( fontFace, source, addTo = 'all' ) {
 }
 
 export function getDisplaySrcFromFontFace( input, urlPrefix ) {
+	if ( ! input ) {
+		return;
+	}
+
 	let src;
 	if ( Array.isArray( input ) ) {
 		src = input[ 0 ];

package/src/components/page-patterns/grid.js

@@ -9,7 +9,7 @@ export default function Grid( { categoryId, items, ...props } ) {
 	}
 
 	return (
-		<ul role="listbox" className="edit-site-patterns__grid" { ...props }>
+		<ul className="edit-site-patterns__grid" { ...props }>
 			{ items.map( ( item ) => (
 				<GridItem
 					key={ item.name }

package/src/components/page-patterns/patterns-list.js

@@ -35,7 +35,7 @@ const { useLocation, useHistory } = unlock( routerPrivateApis );
 const SYNC_FILTERS = {
 	all: __( 'All' ),
 	[ PATTERN_SYNC_TYPES.full ]: __( 'Synced' ),
-	[ PATTERN_SYNC_TYPES.unsynced ]: __( 'Standard' ),
+	[ PATTERN_SYNC_TYPES.unsynced ]: __( 'Not synced' ),
 };
 
 const SYNC_DESCRIPTIONS = {

package/src/components/page-patterns/use-patterns.js

@@ -155,9 +155,13 @@ const selectPatterns = createSelector(
 		];
 
 		if ( syncStatus ) {
-			patterns = patterns.filter(
-				( pattern ) => pattern.syncStatus === syncStatus
-			);
+			// User patterns can have their sync statuses checked directly
+			// Non-user patterns are all unsynced for the time being.
+			patterns = patterns.filter( ( pattern ) => {
+				return pattern.id
+					? pattern.syncStatus === syncStatus
+					: syncStatus === PATTERN_SYNC_TYPES.unsynced;
+			} );
 		}
 
 		if ( categoryId ) {