@wordpress/edit-site 5.28.3 → 5.28.5

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/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 } ) => ( {
@@ -44,11 +45,17 @@ function FontLibraryModal( {
 	initialTabId = '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 = () => {

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 }
+							isSmall
+							onClick={ () => {
+								handleSetLibraryFontSelected( null );
+							} }
+							aria-label={ __( 'Navigate to the previous view' ) }
+						/>
+						<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,7 +45,7 @@ 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 }
@@ -54,8 +54,8 @@ function LibraryFontVariant( { face, font } ) {
 					id={ checkboxId }
 				/>
 				<label htmlFor={ checkboxId }>
-					<FontFaceDemo
-						fontFace={ face }
+					<FontDemo
+						font={ face }
 						text={ displayName }
 						onClick={ handleToggleActivation }
 					/>

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

@@ -22,9 +22,17 @@
 		font-weight: 500;
 		font-size: 11px;
 	}
+
+	// Add padding so the focus state outline (box-shadow) of font list items is visible
+	.components-navigator-screen {
+		padding: 3px;
+	}
 }
 
 .font-library-modal__tabpanel-layout {
+
+	margin-top: $grid-unit-40;
+
 	.font-library-modal__tabpanel-layout__footer {
 		border-top: 1px solid $gray-300;
 		margin: 0 #{$grid-unit-40 * -1} #{$grid-unit-40 * -1};
@@ -47,6 +55,10 @@
 	padding: $grid-unit-20;
 	margin-top: -1px; /* To collapse the margin with the previous element */
 
+	&:hover {
+		background-color: $gray-100;
+	}
+
 	.font-library-modal__font-card__name {
 		font-weight: bold;
 	}
@@ -56,12 +68,6 @@
 	}
 }
 
-.font-library-modal__library-font-variant {
-	border: 1px solid $gray-200;
-	padding: $grid-unit-20;
-	margin-top: -1px; /* To collapse the margin with the previous element */
-}
-
 .font-library-modal__font-variant_demo-image {
 	display: block;
 	height: $grid-unit-30;
@@ -117,6 +123,7 @@ button.font-library-modal__upload-area {
 	display: flex;
 	justify-content: center;
 	align-items: center;
+	margin-top: $grid-unit-80;
 
 	h3 {
 		font-size: 1.4rem;
@@ -124,7 +131,7 @@ button.font-library-modal__upload-area {
 
 	.components-card {
 		width: 50%;
-		min-width: 250px;
-		max-width: 350px;
+		min-width: 350px;
+		max-width: 400px;
 	}
 }