@wordpress/edit-site 5.27.1 → 5.28.0

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

@@ -12,10 +12,9 @@ import {
 	FlexItem,
 	Flex,
 	Button,
-	Notice,
 } from '@wordpress/components';
 import { debounce } from '@wordpress/compose';
-import { __ } from '@wordpress/i18n';
+import { __, _x } from '@wordpress/i18n';
 import { search, closeSmall } from '@wordpress/icons';
 
 /**
@@ -30,31 +29,30 @@ 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 { downloadFontFaceAsset } from './utils';
+import { downloadFontFaceAssets } from './utils';
 
 const DEFAULT_CATEGORY = {
 	slug: 'all',
-	name: __( 'All' ),
+	name: _x( 'All', 'font categories' ),
 };
 function FontCollection( { slug } ) {
-	const requiresPermission = slug === 'default-font-collection';
+	const requiresPermission = slug === 'google-fonts';
 
 	const getGoogleFontsPermissionFromStorage = () => {
 		return (
 			window.localStorage.getItem(
-				'wp-font-library-default-font-collection-permission'
+				'wp-font-library-google-fonts-permission'
 			) === 'true'
 		);
 	};
 
-	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, installFont } =
+	const { collections, getFontCollection, installFont, notice, setNotice } =
 		useContext( FontLibraryContext );
 	const selectedCollection = collections.find(
 		( collection ) => collection.slug === slug
@@ -77,36 +75,27 @@ function FontCollection( { slug } ) {
 				await getFontCollection( slug );
 				resetFilters();
 			} catch ( e ) {
-				setNotice( {
-					type: 'error',
-					message: e?.message,
-					duration: 0, // Don't auto-hide.
-				} );
+				if ( ! notice ) {
+					setNotice( {
+						type: 'error',
+						message: e?.message,
+					} );
+				}
 			}
 		};
 		fetchFontCollection();
-	}, [ slug, getFontCollection ] );
+	}, [ slug, getFontCollection, setNotice, notice ] );
 
 	useEffect( () => {
 		setSelectedFont( null );
 		setNotice( null );
-	}, [ slug ] );
+	}, [ slug, setNotice ] );
 
 	useEffect( () => {
 		// If the selected fonts change, reset the selected fonts to install
 		setFontsToInstall( [] );
 	}, [ selectedFont ] );
 
-	// Reset notice after 5 seconds
-	useEffect( () => {
-		if ( notice && notice?.duration !== 0 ) {
-			const timeout = setTimeout( () => {
-				setNotice( null );
-			}, notice.duration ?? 5000 );
-			return () => clearTimeout( timeout );
-		}
-	}, [ notice ] );
-
 	const collectionFonts = useMemo(
 		() => selectedCollection?.font_families ?? [],
 		[ selectedCollection ]
@@ -154,6 +143,8 @@ function FontCollection( { slug } ) {
 	};
 
 	const handleInstall = async () => {
+		setNotice( null );
+
 		const fontFamily = fontsToInstall[ 0 ];
 
 		try {
@@ -161,7 +152,7 @@ function FontCollection( { slug } ) {
 				await Promise.all(
 					fontFamily.fontFace.map( async ( fontFace ) => {
 						if ( fontFace.src ) {
-							fontFace.file = await downloadFontFaceAsset(
+							fontFace.file = await downloadFontFaceAssets(
 								fontFace.src
 							);
 						}
@@ -205,11 +196,13 @@ function FontCollection( { slug } ) {
 					? selectedCollection.description
 					: __( 'Select font variants to install.' )
 			}
+			notice={ notice }
 			handleBack={ !! selectedFont && handleUnselectFont }
 			footer={
-				fontsToInstall.length > 0 && (
-					<Footer handleInstall={ handleInstall } />
-				)
+				<Footer
+					handleInstall={ handleInstall }
+					isDisabled={ fontsToInstall.length === 0 }
+				/>
 			}
 		>
 			{ renderConfirmDialog && (
@@ -219,22 +212,6 @@ function FontCollection( { slug } ) {
 				</>
 			) }
 
-			{ 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>
@@ -314,7 +291,7 @@ function FontCollection( { slug } ) {
 	);
 }
 
-function Footer( { handleInstall } ) {
+function Footer( { handleInstall, isDisabled } ) {
 	const { isInstalling } = useContext( FontLibraryContext );
 
 	return (
@@ -323,7 +300,8 @@ function Footer( { handleInstall } ) {
 				variant="primary"
 				onClick={ handleInstall }
 				isBusy={ isInstalling }
-				disabled={ isInstalling }
+				disabled={ isDisabled || isInstalling }
+				__experimentalIsFocusable
 			>
 				{ __( 'Install' ) }
 			</Button>

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

@@ -31,18 +31,12 @@ function FontFaceDemo( { customPreviewUrl, fontFace, text, style = {} } ) {
 
 	const faceStyles = getFacePreviewStyle( fontFace );
 	const textDemoStyle = {
-		whiteSpace: 'nowrap',
-		flexShrink: 0,
 		fontSize: '18px',
+		lineHeight: 1,
 		opacity: isAssetLoaded ? '1' : '0',
-		transition: 'opacity 0.3s ease-in-out',
 		...faceStyles,
 		...style,
 	};
-	const imageDemoStyle = {
-		height: '23px',
-		width: 'auto',
-	};
 
 	useEffect( () => {
 		const observer = new window.IntersectionObserver( ( [ entry ] ) => {
@@ -62,7 +56,7 @@ function FontFaceDemo( { customPreviewUrl, fontFace, text, style = {} } ) {
 			}
 		};
 		loadAsset();
-	}, [ fontFace, isIntersecting, loadFontFaceAsset ] );
+	}, [ fontFace, isIntersecting, loadFontFaceAsset, isPreviewImage ] );
 
 	return (
 		<div ref={ ref }>
@@ -71,10 +65,15 @@ function FontFaceDemo( { customPreviewUrl, fontFace, text, style = {} } ) {
 					src={ previewUrl }
 					loading="lazy"
 					alt={ text }
-					style={ imageDemoStyle }
+					className="font-library-modal__font-variant_demo-image"
 				/>
 			) : (
-				<Text style={ textDemoStyle }>{ text }</Text>
+				<Text
+					style={ textDemoStyle }
+					className="font-library-modal__font-variant_demo-text"
+				>
+					{ text }
+				</Text>
 			) }
 		</div>
 	);

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

@@ -14,7 +14,7 @@ function GoogleFontsConfirmDialog() {
 	const handleConfirm = () => {
 		// eslint-disable-next-line no-undef
 		window.localStorage.setItem(
-			'wp-font-library-default-font-collection-permission',
+			'wp-font-library-google-fonts-permission',
 			'true'
 		);
 		window.dispatchEvent( new Event( 'storage' ) );
@@ -34,7 +34,7 @@ function GoogleFontsConfirmDialog() {
 					<Spacer margin={ 3 } />
 					<Text as="p">
 						{ __(
-							'You can alternatively upload files directly on the Library tab.'
+							'You can alternatively upload files directly on the Upload tab.'
 						) }
 					</Text>
 					<Spacer margin={ 6 } />

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

@@ -34,7 +34,7 @@ const tabsFromCollections = ( collections ) =>
 	collections.map( ( { slug, name } ) => ( {
 		id: slug,
 		title:
-			collections.length === 1 && slug === 'default-font-collection'
+			collections.length === 1 && slug === 'google-fonts'
 				? __( 'Install Fonts' )
 				: name,
 	} ) );
@@ -43,13 +43,18 @@ function FontLibraryModal( {
 	onRequestClose,
 	initialTabId = 'installed-fonts',
 } ) {
-	const { collections } = useContext( FontLibraryContext );
+	const { collections, setNotice } = useContext( FontLibraryContext );
 
 	const tabs = [
 		...DEFAULT_TABS,
 		...tabsFromCollections( collections || [] ),
 	];
 
+	// Reset notice when new tab is selected.
+	const onSelect = () => {
+		setNotice( null );
+	};
+
 	return (
 		<Modal
 			title={ __( 'Fonts' ) }
@@ -58,7 +63,7 @@ function FontLibraryModal( {
 			className="font-library-modal"
 		>
 			<div className="font-library-modal__tabs">
-				<Tabs initialTabId={ initialTabId }>
+				<Tabs initialTabId={ initialTabId } 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

@@ -9,7 +9,6 @@ import {
 	__experimentalSpacer as Spacer,
 	Button,
 	Spinner,
-	Notice,
 	FlexItem,
 } from '@wordpress/components';
 
@@ -34,6 +33,8 @@ function InstalledFonts() {
 		refreshLibrary,
 		uninstallFontFamily,
 		isResolvingLibrary,
+		notice,
+		setNotice,
 	} = useContext( FontLibraryContext );
 	const [ isConfirmDeleteOpen, setIsConfirmDeleteOpen ] = useState( false );
 
@@ -45,9 +46,9 @@ function InstalledFonts() {
 		handleSetLibraryFontSelected( font );
 	};
 
-	const [ notice, setNotice ] = useState( null );
-
 	const handleConfirmUninstall = async () => {
+		setNotice( null );
+
 		try {
 			await uninstallFontFamily( libraryFontSelected );
 			setNotice( {
@@ -91,20 +92,11 @@ function InstalledFonts() {
 		// 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 (
 		<TabPanelLayout
 			title={ libraryFontSelected?.name || '' }
 			description={ tabDescription }
+			notice={ notice }
 			handleBack={ !! libraryFontSelected && handleUnselectFont }
 			footer={
 				<Footer
@@ -120,28 +112,17 @@ 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 /> }
+					{ isResolvingLibrary && (
+						<FlexItem>
+							<Spacer margin={ 2 } />
+							<Spinner />
+							<Spacer margin={ 2 } />
+						</FlexItem>
+					) }
 					{ baseCustomFonts.length > 0 && (
 						<>
-							<Spacer margin={ 2 } />
 							<FontsGrid>
 								{ baseCustomFonts.map( ( font ) => (
 									<LibraryFontCard
@@ -191,19 +172,24 @@ function Footer( { shouldDisplayDeleteButton, handleUninstallClick } ) {
 	const { saveFontFamilies, fontFamiliesHasChanges, isInstalling } =
 		useContext( FontLibraryContext );
 	return (
-		<HStack justify="space-between">
+		<HStack justify="flex-end">
 			{ isInstalling && <ProgressBar /> }
 			<div>
 				{ shouldDisplayDeleteButton && (
-					<Button variant="tertiary" onClick={ handleUninstallClick }>
+					<Button
+						isDestructive
+						variant="tertiary"
+						onClick={ handleUninstallClick }
+					>
 						{ __( 'Delete' ) }
 					</Button>
 				) }
 			</div>
 			<Button
-				disabled={ ! fontFamiliesHasChanges }
 				variant="primary"
 				onClick={ saveFontFamilies }
+				disabled={ ! fontFamiliesHasChanges }
+				__experimentalIsFocusable
 			>
 				{ __( 'Update' ) }
 			</Button>

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

@@ -20,7 +20,7 @@ function LibraryFontCard( { font, ...props } ) {
 		font.source
 	).length;
 	const variantsText = sprintf(
-		/* translators: %1$d: Active font variants, %2$d: Total font variants */
+		/* translators: 1: Active font variants, 2: Total font variants. */
 		__( '%1$s/%2$s variants active' ),
 		variantsActive,
 		variantsInstalled

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

@@ -20,7 +20,7 @@ function LibraryFontVariant( { face, font } ) {
 	const { isFontActivated, toggleActivateFont } =
 		useContext( FontLibraryContext );
 
-	const isIstalled =
+	const isInstalled =
 		font?.fontFace?.length > 0
 			? isFontActivated(
 					font.slug,
@@ -45,21 +45,23 @@ function LibraryFontVariant( { face, font } ) {
 	);
 
 	return (
-		<label
-			className="font-library-modal__library-font-variant"
-			htmlFor={ checkboxId }
-		>
-			<Flex justify="space-between" align="center" gap="1rem">
-				<FontFaceDemo fontFace={ face } text={ displayName } />
+		<div className="font-library-modal__library-font-variant">
+			<Flex justify="flex-start" align="center" gap="1rem">
 				<CheckboxControl
-					checked={ isIstalled }
+					checked={ isInstalled }
 					onChange={ handleToggleActivation }
 					__nextHasNoMarginBottom={ true }
 					id={ checkboxId }
-					label={ false }
 				/>
+				<label htmlFor={ checkboxId }>
+					<FontFaceDemo
+						fontFace={ face }
+						text={ displayName }
+						onClick={ handleToggleActivation }
+					/>
+				</label>
 			</Flex>
-		</label>
+		</div>
 	);
 }
 

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

@@ -63,7 +63,7 @@ export async function fetchUninstallFontFamily( fontFamilyId ) {
 
 export async function fetchFontCollections() {
 	const config = {
-		path: FONT_COLLECTIONS_URL,
+		path: `${ FONT_COLLECTIONS_URL }?_fields=slug,name,description`,
 		method: 'GET',
 	};
 	return await apiFetch( config );

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

@@ -25,11 +25,6 @@
 }
 
 .font-library-modal__tabpanel-layout {
-
-	.font-library-modal__tabpanel-layout__main {
-		padding-bottom: $grid-unit-80;
-	}
-
 	.font-library-modal__tabpanel-layout__footer {
 		border-top: 1px solid $gray-300;
 		margin: 0 #{$grid-unit-40 * -1} #{$grid-unit-40 * -1};
@@ -39,7 +34,6 @@
 		width: 100%;
 		background-color: $white;
 	}
-
 }
 
 .font-library-modal__fonts-grid {
@@ -71,6 +65,19 @@
 	margin-top: -1px; /* To collapse the margin with the previous element */
 }
 
+.font-library-modal__font-variant_demo-image {
+	display: block;
+	height: $grid-unit-30;
+	width: auto;
+}
+
+.font-library-modal__font-variant_demo-text {
+	white-space: nowrap;
+	flex-shrink: 0;
+	transition: opacity 0.3s ease-in-out;
+	@include reduce-motion("transition");
+}
+
 .font-library-modal__font-variant {
 	border-bottom: 1px solid $gray-200;
 	padding-bottom: $grid-unit-20;
@@ -107,27 +114,6 @@ button.font-library-modal__upload-area {
 	.font-library-modal__upload-area__text {
 		color: $gray-700;
 	}
-
-	.font-library-modal__upload-area__notice {
-		margin: 0;
-	}
-}
-
-.font-library-modal__font-variant_demo-wrapper {
-	white-space: nowrap;
-	overflow: hidden;
-	width: 100%;
-	position: relative;
-
-	&::after {
-		content: "";
-		position: absolute;
-		bottom: 0;
-		right: 0;
-		width: 30vw;
-		height: 100%;
-		background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));
-	}
 }
 
 .font-library__google-fonts-confirm {

package/src/components/global-styles/font-library-modal/tab-panel-layout.js

@@ -8,12 +8,16 @@ import {
 	__experimentalSpacer as Spacer,
 	__experimentalHStack as HStack,
 	Button,
+	Notice,
+	FlexBlock,
 } from '@wordpress/components';
 import { chevronLeft } from '@wordpress/icons';
+import { __ } from '@wordpress/i18n';
 
 function TabPanelLayout( {
 	title,
 	description,
+	notice,
 	handleBack,
 	children,
 	footer,
@@ -30,6 +34,7 @@ function TabPanelLayout( {
 								onClick={ handleBack }
 								icon={ chevronLeft }
 								size="small"
+								label={ __( 'Back' ) }
 							/>
 						) }
 						{ title && (
@@ -43,6 +48,18 @@ function TabPanelLayout( {
 						) }
 					</HStack>
 					{ description && <Text>{ description }</Text> }
+					{ notice && (
+						<FlexBlock>
+							<Spacer margin={ 1 } />
+							<Notice
+								status={ notice.type }
+								onRemove={ notice.onRemove }
+							>
+								{ notice.message }
+							</Notice>
+							<Spacer margin={ 1 } />
+						</FlexBlock>
+					) }
 				</VStack>
 				<div className="font-library-modal__tabpanel-layout__main">
 					{ children }