@wordpress/edit-site 5.27.0 → 5.27.2

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

@@ -12,7 +12,6 @@ import {
 	FlexItem,
 	Flex,
 	Button,
-	Notice,
 } from '@wordpress/components';
 import { debounce } from '@wordpress/compose';
 import { __ } from '@wordpress/i18n';
@@ -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' ),
 };
 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,6 +196,7 @@ function FontCollection( { slug } ) {
 					? selectedCollection.description
 					: __( 'Select font variants to install.' )
 			}
+			notice={ notice }
 			handleBack={ !! selectedFont && handleUnselectFont }
 			footer={
 				fontsToInstall.length > 0 && (
@@ -219,22 +211,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>

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

@@ -62,7 +62,7 @@ function FontFaceDemo( { customPreviewUrl, fontFace, text, style = {} } ) {
 			}
 		};
 		loadAsset();
-	}, [ fontFace, isIntersecting, loadFontFaceAsset ] );
+	}, [ fontFace, isIntersecting, loadFontFaceAsset, isPreviewImage ] );
 
 	return (
 		<div ref={ ref }>

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' ) );

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

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,
@@ -52,7 +52,7 @@ function LibraryFontVariant( { face, font } ) {
 			<Flex justify="space-between" align="center" gap="1rem">
 				<FontFaceDemo fontFace={ face } text={ displayName } />
 				<CheckboxControl
-					checked={ isIstalled }
+					checked={ isInstalled }
 					onChange={ handleToggleActivation }
 					__nextHasNoMarginBottom={ true }
 					id={ checkboxId }

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,21 +25,15 @@
 }
 
 .font-library-modal__tabpanel-layout {
-
-	main {
-		padding-bottom: 4rem;
-	}
-
-	footer {
-		border-top: 1px solid #e5e5e5;
-		margin: 0 -32px -32px;
-		padding: 16px 32px;
+	.font-library-modal__tabpanel-layout__footer {
+		border-top: 1px solid $gray-300;
+		margin: 0 #{$grid-unit-40 * -1} #{$grid-unit-40 * -1};
+		padding: $grid-unit-20 $grid-unit-40;
 		position: absolute;
-		bottom: 32px;
+		bottom: $grid-unit-40;
 		width: 100%;
-		background-color: #fff;
+		background-color: $white;
 	}
-
 }
 
 .font-library-modal__fonts-grid {
@@ -50,10 +44,10 @@
 }
 
 .font-library-modal__font-card {
-	border: 1px solid #e5e5e5;
+	border: 1px solid $gray-200;
 	width: 100%;
 	height: auto;
-	padding: 1rem;
+	padding: $grid-unit-20;
 	margin-top: -1px; /* To collapse the margin with the previous element */
 
 	.font-library-modal__font-card__name {
@@ -61,30 +55,29 @@
 	}
 
 	.font-library-modal__font-card__count {
-		color: #6e6e6e;
+		color: $gray-700;
 	}
 }
 
 .font-library-modal__library-font-variant {
-	border: 1px solid #e5e5e5;
-	padding: 1rem;
+	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 {
-	border-bottom: 1px solid #e5e5e5;
-	padding-bottom: 1rem;
+	border-bottom: 1px solid $gray-200;
+	padding-bottom: $grid-unit-20;
 }
 
 .font-library-modal__tabs {
 	[role="tablist"] {
 		position: sticky;
 		top: 0;
-		width: calc(100% + 64px);
-		border-bottom: 1px solid #e6e6e6;
-		background: #fff;
-		margin: 0 -32px;
-		padding: 0 16px;
+		border-bottom: 1px solid $gray-300;
+		background: $white;
+		margin: 0 #{$grid-unit-40 * -1};
+		padding: 0 $grid-unit-20;
 		z-index: 1;
 	}
 }
@@ -93,12 +86,12 @@
 	align-items: center;
 	display: flex;
 	justify-content: center;
-	height: 250px;
+	height: $grid-unit-80 * 4; // 256px
 	width: 100%;
 }
 
 button.font-library-modal__upload-area {
-	background-color: #f0f0f0;
+	background-color: $gray-100;
 }
 
 .font-library-modal__local-fonts {
@@ -106,22 +99,10 @@ button.font-library-modal__upload-area {
 	width: 80%;
 
 	.font-library-modal__upload-area__text {
-		color: #6e6e6e;
-	}
-
-	.font-library-modal__upload-area__notice {
-		margin: 0;
+		color: $gray-700;
 	}
 }
 
-.font-library-modal__font-name {
-	font-weight: bold;
-}
-
-.font-library-modal__font-filename {
-	color: #6e6e6e;
-}
-
 .font-library-modal__font-variant_demo-wrapper {
 	white-space: nowrap;
 	overflow: hidden;
@@ -154,7 +135,3 @@ button.font-library-modal__upload-area {
 		max-width: 350px;
 	}
 }
-
-.font-library-modal__font-collection__notice {
-	margin: 0;
-}

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

@@ -8,12 +8,15 @@ import {
 	__experimentalSpacer as Spacer,
 	__experimentalHStack as HStack,
 	Button,
+	Notice,
+	FlexBlock,
 } from '@wordpress/components';
 import { chevronLeft } from '@wordpress/icons';
 
 function TabPanelLayout( {
 	title,
 	description,
+	notice,
 	handleBack,
 	children,
 	footer,
@@ -22,32 +25,48 @@ function TabPanelLayout( {
 		<div className="font-library-modal__tabpanel-layout">
 			<Spacer margin={ 4 } />
 			<VStack spacing={ 4 } justify="space-between">
-				<header>
-					<VStack spacing={ 2 }>
-						<HStack justify="flex-start">
-							{ !! handleBack && (
-								<Button
-									variant="tertiary"
-									onClick={ handleBack }
-									icon={ chevronLeft }
-									size="small"
-								/>
-							) }
-							{ title && (
-								<Heading
-									level={ 2 }
-									size={ 13 }
-									className="edit-site-global-styles-header"
-								>
-									{ title }
-								</Heading>
-							) }
-						</HStack>
-						{ description && <Text>{ description }</Text> }
-					</VStack>
-				</header>
-				<main>{ children }</main>
-				{ footer && <footer>{ footer }</footer> }
+				<VStack spacing={ 2 }>
+					<HStack justify="flex-start">
+						{ !! handleBack && (
+							<Button
+								variant="tertiary"
+								onClick={ handleBack }
+								icon={ chevronLeft }
+								size="small"
+							/>
+						) }
+						{ title && (
+							<Heading
+								level={ 2 }
+								size={ 13 }
+								className="edit-site-global-styles-header"
+							>
+								{ title }
+							</Heading>
+						) }
+					</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 }
+				</div>
+				{ footer && (
+					<div className="font-library-modal__tabpanel-layout__footer">
+						{ footer }
+					</div>
+				) }
 			</VStack>
 		</div>
 	);