@wordpress/edit-site 5.29.0 → 5.31.0

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

@@ -8,7 +8,10 @@ import { useContext, useEffect, useState, useRef } from '@wordpress/element';
  * Internal dependencies
  */
 import { FontLibraryContext } from './context';
-import { getFacePreviewStyle } from './utils/preview-styles';
+import {
+	getFacePreviewStyle,
+	getFamilyPreviewStyle,
+} from './utils/preview-styles';
 
 function getPreviewUrl( fontFace ) {
 	if ( fontFace.preview ) {
@@ -19,8 +22,39 @@ function getPreviewUrl( fontFace ) {
 	}
 }
 
-function FontFaceDemo( { customPreviewUrl, fontFace, text, style = {} } ) {
+function getDisplayFontFace( font ) {
+	// if this IS a font face return it
+	if ( font.fontStyle || font.fontWeight ) {
+		return font;
+	}
+	// if this is a font family with a collection of font faces
+	// return the first one that is normal and 400 OR just the first one
+	if ( font.fontFace && font.fontFace.length ) {
+		return (
+			font.fontFace.find(
+				( face ) =>
+					face.fontStyle === 'normal' && face.fontWeight === '400'
+			) || font.fontFace[ 0 ]
+		);
+	}
+	// This must be a font family with no font faces
+	// return a fake font face
+	return {
+		fontStyle: 'normal',
+		fontWeight: '400',
+		fontFamily: font.fontFamily,
+		fake: true,
+	};
+}
+
+function FontDemo( { font, text } ) {
 	const ref = useRef( null );
+
+	const fontFace = getDisplayFontFace( font );
+	const style = getFamilyPreviewStyle( font );
+	text = text || font.name;
+	const customPreviewUrl = font.preview;
+
 	const [ isIntersecting, setIsIntersecting ] = useState( false );
 	const [ isAssetLoaded, setIsAssetLoaded ] = useState( false );
 	const { loadFontFaceAsset } = useContext( FontLibraryContext );
@@ -34,8 +68,8 @@ function FontFaceDemo( { customPreviewUrl, fontFace, text, style = {} } ) {
 		fontSize: '18px',
 		lineHeight: 1,
 		opacity: isAssetLoaded ? '1' : '0',
-		...faceStyles,
 		...style,
+		...faceStyles,
 	};
 
 	useEffect( () => {
@@ -79,4 +113,4 @@ function FontFaceDemo( { customPreviewUrl, fontFace, text, style = {} } ) {
 	);
 }
 
-export default FontFaceDemo;
+export default FontDemo;

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/index.js

@@ -6,6 +6,8 @@ import {
 	Modal,
 	privateApis as componentsPrivateApis,
 } from '@wordpress/components';
+import { store as coreStore } from '@wordpress/core-data';
+import { useSelect } from '@wordpress/data';
 import { useContext } from '@wordpress/element';
 
 /**
@@ -19,16 +21,15 @@ import { unlock } from '../../../lock-unlock';
 
 const { Tabs } = unlock( componentsPrivateApis );
 
-const DEFAULT_TABS = [
-	{
-		id: 'installed-fonts',
-		title: __( 'Library' ),
-	},
-	{
-		id: 'upload-fonts',
-		title: __( 'Upload' ),
-	},
-];
+const DEFAULT_TAB = {
+	id: 'installed-fonts',
+	title: __( 'Library' ),
+};
+
+const UPLOAD_TAB = {
+	id: 'upload-fonts',
+	title: __( 'Upload' ),
+};
 
 const tabsFromCollections = ( collections ) =>
 	collections.map( ( { slug, name } ) => ( {
@@ -41,14 +42,20 @@ const tabsFromCollections = ( collections ) =>
 
 function FontLibraryModal( {
 	onRequestClose,
-	initialTabId = 'installed-fonts',
+	defaultTabId = 'installed-fonts',
 } ) {
 	const { collections, setNotice } = useContext( FontLibraryContext );
+	const canUserCreate = useSelect( ( select ) => {
+		const { canUser } = select( coreStore );
+		return canUser( 'create', 'font-families' );
+	}, [] );
+
+	const tabs = [ DEFAULT_TAB ];
 
-	const tabs = [
-		...DEFAULT_TABS,
-		...tabsFromCollections( collections || [] ),
-	];
+	if ( canUserCreate ) {
+		tabs.push( UPLOAD_TAB );
+		tabs.push( ...tabsFromCollections( collections || [] ) );
+	}
 
 	// Reset notice when new tab is selected.
 	const onSelect = () => {
@@ -63,7 +70,7 @@ function FontLibraryModal( {
 			className="font-library-modal"
 		>
 			<div className="font-library-modal__tabs">
-				<Tabs initialTabId={ initialTabId } onSelect={ onSelect }>
+				<Tabs defaultTabId={ defaultTabId } onSelect={ onSelect }>
 					<Tabs.TabList>
 						{ tabs.map( ( { id, title } ) => (
 							<Tabs.Tab key={ id } tabId={ id }>

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

@@ -1,27 +1,37 @@
 /**
  * WordPress dependencies
  */
-import { __ } from '@wordpress/i18n';
-import { useContext, useEffect, useState } from '@wordpress/element';
 import {
-	privateApis as componentsPrivateApis,
+	Button,
+	__experimentalConfirmDialog as ConfirmDialog,
 	__experimentalHStack as HStack,
+	__experimentalHeading as Heading,
+	__experimentalNavigatorProvider as NavigatorProvider,
+	__experimentalNavigatorScreen as NavigatorScreen,
+	__experimentalNavigatorToParentButton as NavigatorToParentButton,
+	__experimentalUseNavigator as useNavigator,
 	__experimentalSpacer as Spacer,
 	__experimentalText as Text,
-	Button,
+	__experimentalVStack as VStack,
+	Flex,
+	Notice,
 	Spinner,
-	FlexItem,
+	privateApis as componentsPrivateApis,
 } from '@wordpress/components';
+import { store as coreStore } from '@wordpress/core-data';
+import { useSelect } from '@wordpress/data';
+import { useContext, useEffect, useState } from '@wordpress/element';
+import { __, sprintf } from '@wordpress/i18n';
+import { chevronLeft } from '@wordpress/icons';
 
 /**
  * Internal dependencies
  */
-import TabPanelLayout from './tab-panel-layout';
-import { FontLibraryContext } from './context';
-import LibraryFontDetails from './library-font-details';
-import LibraryFontCard from './library-font-card';
-import ConfirmDeleteDialog from './confirm-delete-dialog';
 import { unlock } from '../../../lock-unlock';
+import { FontLibraryContext } from './context';
+import FontCard from './font-card';
+import LibraryFontVariant from './library-font-variant';
+import { sortFontFaces } from './utils/sort-font-faces';
 const { ProgressBar } = unlock( componentsPrivateApis );
 
 function InstalledFonts() {
@@ -33,102 +43,115 @@ function InstalledFonts() {
 		refreshLibrary,
 		uninstallFontFamily,
 		isResolvingLibrary,
+		isInstalling,
+		saveFontFamilies,
+		getFontFacesActivated,
+		fontFamiliesHasChanges,
 		notice,
 		setNotice,
 	} = useContext( FontLibraryContext );
 	const [ isConfirmDeleteOpen, setIsConfirmDeleteOpen ] = useState( false );
+	const customFontFamilyId =
+		libraryFontSelected?.source === 'custom' && libraryFontSelected?.id;
 
-	const handleUnselectFont = () => {
-		handleSetLibraryFontSelected( null );
-	};
-
-	const handleSelectFont = ( font ) => {
-		handleSetLibraryFontSelected( font );
-	};
-
-	const handleConfirmUninstall = async () => {
-		setNotice( null );
-
-		try {
-			await uninstallFontFamily( libraryFontSelected );
-			setNotice( {
-				type: 'success',
-				message: __( 'Font family uninstalled successfully.' ),
-			} );
+	const canUserDelete = useSelect(
+		( select ) => {
+			const { canUser } = select( coreStore );
+			return (
+				customFontFamilyId &&
+				canUser( 'delete', 'font-families', customFontFamilyId )
+			);
+		},
+		[ customFontFamilyId ]
+	);
 
-			// If the font was succesfully uninstalled it is unselected.
-			handleUnselectFont();
-			setIsConfirmDeleteOpen( false );
-		} catch ( error ) {
-			setNotice( {
-				type: 'error',
-				message:
-					__( 'There was an error uninstalling the font family. ' ) +
-					error.message,
-			} );
-		}
-	};
+	const shouldDisplayDeleteButton =
+		!! libraryFontSelected &&
+		libraryFontSelected?.source !== 'theme' &&
+		canUserDelete;
 
-	const handleUninstallClick = async () => {
+	const handleUninstallClick = () => {
 		setIsConfirmDeleteOpen( true );
 	};
 
-	const handleCancelUninstall = () => {
-		setIsConfirmDeleteOpen( false );
+	const getFontFacesToDisplay = ( font ) => {
+		if ( ! font ) {
+			return [];
+		}
+		if ( ! font.fontFace || ! font.fontFace.length ) {
+			return [
+				{
+					fontFamily: font.fontFamily,
+					fontStyle: 'normal',
+					fontWeight: '400',
+				},
+			];
+		}
+		return sortFontFaces( font.fontFace );
 	};
 
-	const tabDescription = !! libraryFontSelected
-		? __(
-				'Choose font variants. Keep in mind that too many variants could make your site slower.'
-		  )
-		: null;
-
-	const shouldDisplayDeleteButton =
-		!! libraryFontSelected && libraryFontSelected?.source !== 'theme';
+	const getFontCardVariantsText = ( font ) => {
+		const variantsInstalled =
+			font?.fontFace?.length > 0 ? font.fontFace.length : 1;
+		const variantsActive = getFontFacesActivated(
+			font.slug,
+			font.source
+		).length;
+		return sprintf(
+			/* translators: 1: Active font variants, 2: Total font variants. */
+			__( '%1$s/%2$s variants active' ),
+			variantsActive,
+			variantsInstalled
+		);
+	};
 
 	useEffect( () => {
-		handleSelectFont( libraryFontSelected );
+		handleSetLibraryFontSelected( libraryFontSelected );
 		refreshLibrary();
-		// eslint-disable-next-line react-hooks/exhaustive-deps
 	}, [] );
 
 	return (
-		<TabPanelLayout
-			title={ libraryFontSelected?.name || '' }
-			description={ tabDescription }
-			notice={ notice }
-			handleBack={ !! libraryFontSelected && handleUnselectFont }
-			footer={
-				<Footer
-					shouldDisplayDeleteButton={ shouldDisplayDeleteButton }
-					handleUninstallClick={ handleUninstallClick }
-				/>
-			}
-		>
-			<ConfirmDeleteDialog
-				font={ libraryFontSelected }
-				isConfirmDeleteOpen={ isConfirmDeleteOpen }
-				handleConfirmUninstall={ handleConfirmUninstall }
-				handleCancelUninstall={ handleCancelUninstall }
-			/>
-
-			{ ! libraryFontSelected && (
-				<>
-					{ isResolvingLibrary && (
-						<FlexItem>
-							<Spacer margin={ 2 } />
-							<Spinner />
-							<Spacer margin={ 2 } />
-						</FlexItem>
+		<div className="font-library-modal__tabpanel-layout">
+			{ isResolvingLibrary && (
+				<HStack align="center">
+					<Spacer />
+					<Spinner />
+					<Spacer />
+				</HStack>
+			) }
+
+			<NavigatorProvider
+				initialPath={ libraryFontSelected ? '/fontFamily' : '/' }
+			>
+				<NavigatorScreen path="/">
+					{ notice && (
+						<>
+							<Spacer margin={ 1 } />
+							<Notice
+								status={ notice.type }
+								onRemove={ () => setNotice( null ) }
+							>
+								{ notice.message }
+							</Notice>
+							<Spacer margin={ 1 } />
+						</>
 					) }
 					{ baseCustomFonts.length > 0 && (
 						<>
+							<Text className="font-library-modal__subtitle">
+								{ __( 'Installed Fonts' ) }
+							</Text>
+							<Spacer margin={ 2 } />
 							{ baseCustomFonts.map( ( font ) => (
-								<LibraryFontCard
+								<FontCard
 									font={ font }
 									key={ font.slug }
+									navigatorPath={ '/fontFamily' }
+									variantsText={ getFontCardVariantsText(
+										font
+									) }
 									onClick={ () => {
-										handleSelectFont( font );
+										handleSetLibraryFontSelected( font );
 									} }
 								/>
 							) ) }
@@ -141,42 +164,93 @@ function InstalledFonts() {
 							<Text className="font-library-modal__subtitle">
 								{ __( 'Theme Fonts' ) }
 							</Text>
-
 							<Spacer margin={ 2 } />
 							{ baseThemeFonts.map( ( font ) => (
-								<LibraryFontCard
+								<FontCard
 									font={ font }
 									key={ font.slug }
+									navigatorPath={ '/fontFamily' }
+									variantsText={ getFontCardVariantsText(
+										font
+									) }
 									onClick={ () => {
-										handleSelectFont( font );
+										handleSetLibraryFontSelected( font );
 									} }
 								/>
 							) ) }
 						</>
 					) }
 					<Spacer margin={ 16 } />
-				</>
-			) }
+				</NavigatorScreen>
 
-			{ libraryFontSelected && (
-				<LibraryFontDetails
-					font={ libraryFontSelected }
-					isConfirmDeleteOpen={ isConfirmDeleteOpen }
-					handleConfirmUninstall={ handleConfirmUninstall }
-					handleCancelUninstall={ handleCancelUninstall }
-				/>
-			) }
-		</TabPanelLayout>
-	);
-}
+				<NavigatorScreen path="/fontFamily">
+					<ConfirmDeleteDialog
+						font={ libraryFontSelected }
+						isOpen={ isConfirmDeleteOpen }
+						setIsOpen={ setIsConfirmDeleteOpen }
+						setNotice={ setNotice }
+						uninstallFontFamily={ uninstallFontFamily }
+						handleSetLibraryFontSelected={
+							handleSetLibraryFontSelected
+						}
+					/>
 
-function Footer( { shouldDisplayDeleteButton, handleUninstallClick } ) {
-	const { saveFontFamilies, fontFamiliesHasChanges, isInstalling } =
-		useContext( FontLibraryContext );
-	return (
-		<HStack justify="flex-end">
-			{ isInstalling && <ProgressBar /> }
-			<div>
+					<Flex justify="flex-start">
+						<NavigatorToParentButton
+							icon={ chevronLeft }
+							size="small"
+							onClick={ () => {
+								handleSetLibraryFontSelected( null );
+							} }
+							label={ __( 'Back' ) }
+						/>
+						<Heading
+							level={ 2 }
+							size={ 13 }
+							className="edit-site-global-styles-header"
+						>
+							{ libraryFontSelected?.name }
+						</Heading>
+					</Flex>
+					{ notice && (
+						<>
+							<Spacer margin={ 1 } />
+							<Notice
+								status={ notice.type }
+								onRemove={ () => setNotice( null ) }
+							>
+								{ notice.message }
+							</Notice>
+							<Spacer margin={ 1 } />
+						</>
+					) }
+					<Spacer margin={ 4 } />
+					<Text>
+						{ __(
+							'Choose font variants. Keep in mind that too many variants could make your site slower.'
+						) }
+					</Text>
+					<Spacer margin={ 4 } />
+					<VStack spacing={ 0 }>
+						<Spacer margin={ 8 } />
+						{ getFontFacesToDisplay( libraryFontSelected ).map(
+							( face, i ) => (
+								<LibraryFontVariant
+									font={ libraryFontSelected }
+									face={ face }
+									key={ `face${ i }` }
+								/>
+							)
+						) }
+					</VStack>
+				</NavigatorScreen>
+			</NavigatorProvider>
+
+			<HStack
+				justify="flex-end"
+				className="font-library-modal__tabpanel-layout__footer"
+			>
+				{ isInstalling && <ProgressBar /> }
 				{ shouldDisplayDeleteButton && (
 					<Button
 						isDestructive
@@ -186,16 +260,71 @@ function Footer( { shouldDisplayDeleteButton, handleUninstallClick } ) {
 						{ __( 'Delete' ) }
 					</Button>
 				) }
-			</div>
-			<Button
-				variant="primary"
-				onClick={ saveFontFamilies }
-				disabled={ ! fontFamiliesHasChanges }
-				__experimentalIsFocusable
-			>
-				{ __( 'Update' ) }
-			</Button>
-		</HStack>
+				<Button
+					variant="primary"
+					onClick={ saveFontFamilies }
+					disabled={ ! fontFamiliesHasChanges }
+					__experimentalIsFocusable
+				>
+					{ __( 'Update' ) }
+				</Button>
+			</HStack>
+		</div>
+	);
+}
+
+function ConfirmDeleteDialog( {
+	font,
+	isOpen,
+	setIsOpen,
+	setNotice,
+	uninstallFontFamily,
+	handleSetLibraryFontSelected,
+} ) {
+	const navigator = useNavigator();
+
+	const handleConfirmUninstall = async () => {
+		setNotice( null );
+		setIsOpen( false );
+		try {
+			await uninstallFontFamily( font );
+			navigator.goBack();
+			handleSetLibraryFontSelected( null );
+			setNotice( {
+				type: 'success',
+				message: __( 'Font family uninstalled successfully.' ),
+			} );
+		} catch ( error ) {
+			setNotice( {
+				type: 'error',
+				message:
+					__( 'There was an error uninstalling the font family. ' ) +
+					error.message,
+			} );
+		}
+	};
+
+	const handleCancelUninstall = () => {
+		setIsOpen( false );
+	};
+
+	return (
+		<ConfirmDialog
+			isOpen={ isOpen }
+			cancelButtonText={ __( 'Cancel' ) }
+			confirmButtonText={ __( 'Delete' ) }
+			onCancel={ handleCancelUninstall }
+			onConfirm={ handleConfirmUninstall }
+		>
+			{ font &&
+				sprintf(
+					/* translators: %s: Name of the font. */
+					__(
+						'Are you sure you want to delete "%s" font and all its variants and assets?'
+					),
+					font.name
+				) }
+		</ConfirmDialog>
 	);
 }
 

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

@@ -13,7 +13,7 @@ import {
  */
 import { getFontFaceVariantName } from './utils';
 import { FontLibraryContext } from './context';
-import FontFaceDemo from './font-demo';
+import FontDemo from './font-demo';
 import { unlock } from '../../../lock-unlock';
 
 function LibraryFontVariant( { face, font } ) {
@@ -45,17 +45,17 @@ function LibraryFontVariant( { face, font } ) {
 	);
 
 	return (
-		<div className="font-library-modal__library-font-variant">
+		<div className="font-library-modal__font-card">
 			<Flex justify="flex-start" align="center" gap="1rem">
 				<CheckboxControl
 					checked={ isInstalled }
 					onChange={ handleToggleActivation }
-					__nextHasNoMarginBottom={ true }
+					__nextHasNoMarginBottom
 					id={ checkboxId }
 				/>
 				<label htmlFor={ checkboxId }>
-					<FontFaceDemo
-						fontFace={ face }
+					<FontDemo
+						font={ face }
 						text={ displayName }
 						onClick={ handleToggleActivation }
 					/>