@wordpress/edit-site 6.33.3 → 6.34.0

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

@@ -1,575 +0,0 @@
-/**
- * WordPress dependencies
- */
-import {
-	useContext,
-	useEffect,
-	useState,
-	useMemo,
-	createInterpolateElement,
-} from '@wordpress/element';
-import {
-	__experimentalSpacer as Spacer,
-	__experimentalText as Text,
-	__experimentalHStack as HStack,
-	__experimentalVStack as VStack,
-	Navigator,
-	__experimentalHeading as Heading,
-	Notice,
-	SelectControl,
-	FlexItem,
-	Flex,
-	Button,
-	DropdownMenu,
-	SearchControl,
-	ProgressBar,
-	CheckboxControl,
-} from '@wordpress/components';
-import { debounce } from '@wordpress/compose';
-import { sprintf, __, _x, isRTL } from '@wordpress/i18n';
-import {
-	moreVertical,
-	next,
-	previous,
-	chevronLeft,
-	chevronRight,
-} from '@wordpress/icons';
-
-/**
- * Internal dependencies
- */
-import { FontLibraryContext } from './context';
-import FontCard from './font-card';
-import filterFonts from './utils/filter-fonts';
-import { toggleFont } from './utils/toggleFont';
-import {
-	getFontsOutline,
-	isFontFontFaceInOutline,
-} from './utils/fonts-outline';
-import GoogleFontsConfirmDialog from './google-fonts-confirm-dialog';
-import { downloadFontFaceAssets } from './utils';
-import { sortFontFaces } from './utils/sort-font-faces';
-import CollectionFontVariant from './collection-font-variant';
-
-const DEFAULT_CATEGORY = {
-	slug: 'all',
-	name: _x( 'All', 'font categories' ),
-};
-
-const LOCAL_STORAGE_ITEM = 'wp-font-library-google-fonts-permission';
-const MIN_WINDOW_HEIGHT = 500;
-
-function FontCollection( { slug } ) {
-	const requiresPermission = slug === 'google-fonts';
-
-	const getGoogleFontsPermissionFromStorage = () => {
-		return window.localStorage.getItem( LOCAL_STORAGE_ITEM ) === 'true';
-	};
-
-	const [ selectedFont, setSelectedFont ] = useState( null );
-	const [ notice, setNotice ] = useState( false );
-	const [ fontsToInstall, setFontsToInstall ] = useState( [] );
-	const [ page, setPage ] = useState( 1 );
-	const [ filters, setFilters ] = useState( {} );
-	const [ renderConfirmDialog, setRenderConfirmDialog ] = useState(
-		requiresPermission && ! getGoogleFontsPermissionFromStorage()
-	);
-	const { collections, getFontCollection, installFonts, isInstalling } =
-		useContext( FontLibraryContext );
-	const selectedCollection = collections.find(
-		( collection ) => collection.slug === slug
-	);
-
-	useEffect( () => {
-		const handleStorage = () => {
-			setRenderConfirmDialog(
-				requiresPermission && ! getGoogleFontsPermissionFromStorage()
-			);
-		};
-		handleStorage();
-		window.addEventListener( 'storage', handleStorage );
-		return () => window.removeEventListener( 'storage', handleStorage );
-	}, [ slug, requiresPermission ] );
-
-	const revokeAccess = () => {
-		window.localStorage.setItem( LOCAL_STORAGE_ITEM, 'false' );
-		window.dispatchEvent( new Event( 'storage' ) );
-	};
-
-	useEffect( () => {
-		const fetchFontCollection = async () => {
-			try {
-				await getFontCollection( slug );
-				resetFilters();
-			} catch ( e ) {
-				if ( ! notice ) {
-					setNotice( {
-						type: 'error',
-						message: e?.message,
-					} );
-				}
-			}
-		};
-		fetchFontCollection();
-	}, [ slug, getFontCollection, setNotice, notice ] );
-
-	useEffect( () => {
-		setSelectedFont( null );
-	}, [ slug ] );
-
-	useEffect( () => {
-		// If the selected fonts change, reset the selected fonts to install
-		setFontsToInstall( [] );
-	}, [ selectedFont ] );
-
-	const collectionFonts = useMemo(
-		() => selectedCollection?.font_families ?? [],
-		[ selectedCollection ]
-	);
-	const collectionCategories = selectedCollection?.categories ?? [];
-
-	const categories = [ DEFAULT_CATEGORY, ...collectionCategories ];
-
-	const fonts = useMemo(
-		() => filterFonts( collectionFonts, filters ),
-		[ collectionFonts, filters ]
-	);
-
-	const isLoading = ! selectedCollection?.font_families && ! notice;
-
-	// NOTE: The height of the font library modal unavailable to use for rendering font family items is roughly 417px
-	// The height of each font family item is 61px.
-	const windowHeight = Math.max( window.innerHeight, MIN_WINDOW_HEIGHT );
-	const pageSize = Math.floor( ( windowHeight - 417 ) / 61 );
-	const totalPages = Math.ceil( fonts.length / pageSize );
-	const itemsStart = ( page - 1 ) * pageSize;
-	const itemsLimit = page * pageSize;
-	const items = fonts.slice( itemsStart, itemsLimit );
-
-	const handleCategoryFilter = ( category ) => {
-		setFilters( { ...filters, category } );
-		setPage( 1 );
-	};
-
-	const handleUpdateSearchInput = ( value ) => {
-		setFilters( { ...filters, search: value } );
-		setPage( 1 );
-	};
-
-	const debouncedUpdateSearchInput = debounce( handleUpdateSearchInput, 300 );
-
-	const resetFilters = () => {
-		setFilters( {} );
-		setPage( 1 );
-	};
-
-	const handleToggleVariant = ( font, face ) => {
-		const newFontsToInstall = toggleFont( font, face, fontsToInstall );
-		setFontsToInstall( newFontsToInstall );
-	};
-
-	const fontToInstallOutline = getFontsOutline( fontsToInstall );
-
-	const resetFontsToInstall = () => {
-		setFontsToInstall( [] );
-	};
-
-	const selectFontCount =
-		fontsToInstall.length > 0 ? fontsToInstall[ 0 ]?.fontFace?.length : 0;
-
-	// Check if any fonts are selected.
-	const isIndeterminate =
-		selectFontCount > 0 &&
-		selectFontCount !== selectedFont?.fontFace?.length;
-
-	// Check if all fonts are selected.
-	const isSelectAllChecked =
-		selectFontCount === selectedFont?.fontFace?.length;
-
-	// Toggle select all fonts.
-	const toggleSelectAll = () => {
-		const newFonts = isSelectAllChecked ? [] : [ selectedFont ];
-
-		setFontsToInstall( newFonts );
-	};
-
-	const handleInstall = async () => {
-		setNotice( null );
-
-		const fontFamily = fontsToInstall[ 0 ];
-
-		try {
-			if ( fontFamily?.fontFace ) {
-				await Promise.all(
-					fontFamily.fontFace.map( async ( fontFace ) => {
-						if ( fontFace.src ) {
-							fontFace.file = await downloadFontFaceAssets(
-								fontFace.src
-							);
-						}
-					} )
-				);
-			}
-		} catch ( error ) {
-			// If any of the fonts fail to download,
-			// show an error notice and stop the request from being sent.
-			setNotice( {
-				type: 'error',
-				message: __(
-					'Error installing the fonts, could not be downloaded.'
-				),
-			} );
-			return;
-		}
-
-		try {
-			await installFonts( [ fontFamily ] );
-			setNotice( {
-				type: 'success',
-				message: __( 'Fonts were installed successfully.' ),
-			} );
-		} catch ( error ) {
-			setNotice( {
-				type: 'error',
-				message: error.message,
-			} );
-		}
-		resetFontsToInstall();
-	};
-
-	const getSortedFontFaces = ( fontFamily ) => {
-		if ( ! fontFamily ) {
-			return [];
-		}
-		if ( ! fontFamily.fontFace || ! fontFamily.fontFace.length ) {
-			return [
-				{
-					fontFamily: fontFamily.fontFamily,
-					fontStyle: 'normal',
-					fontWeight: '400',
-				},
-			];
-		}
-		return sortFontFaces( fontFamily.fontFace );
-	};
-
-	if ( renderConfirmDialog ) {
-		return <GoogleFontsConfirmDialog />;
-	}
-
-	const ActionsComponent = () => {
-		if ( slug !== 'google-fonts' || renderConfirmDialog || selectedFont ) {
-			return null;
-		}
-		return (
-			<DropdownMenu
-				icon={ moreVertical }
-				label={ __( 'Actions' ) }
-				popoverProps={ {
-					position: 'bottom left',
-				} }
-				controls={ [
-					{
-						title: __( 'Revoke access to Google Fonts' ),
-						onClick: revokeAccess,
-					},
-				] }
-			/>
-		);
-	};
-
-	return (
-		<div className="font-library-modal__tabpanel-layout">
-			{ isLoading && (
-				<div className="font-library-modal__loading">
-					<ProgressBar />
-				</div>
-			) }
-
-			{ ! isLoading && (
-				<>
-					<Navigator
-						initialPath="/"
-						className="font-library-modal__tabpanel-layout"
-					>
-						<Navigator.Screen path="/">
-							<HStack justify="space-between">
-								<VStack>
-									<Heading level={ 2 } size={ 13 }>
-										{ selectedCollection.name }
-									</Heading>
-									<Text>
-										{ selectedCollection.description }
-									</Text>
-								</VStack>
-								<ActionsComponent />
-							</HStack>
-							<Spacer margin={ 4 } />
-							<Flex>
-								<FlexItem>
-									<SearchControl
-										className="font-library-modal__search"
-										value={ filters.search }
-										placeholder={ __( 'Font name…' ) }
-										label={ __( 'Search' ) }
-										onChange={ debouncedUpdateSearchInput }
-										__nextHasNoMarginBottom
-										hideLabelFromVision={ false }
-									/>
-								</FlexItem>
-								<FlexItem>
-									<SelectControl
-										__nextHasNoMarginBottom
-										__next40pxDefaultSize
-										label={ __( 'Category' ) }
-										value={ filters.category }
-										onChange={ handleCategoryFilter }
-									>
-										{ categories &&
-											categories.map( ( category ) => (
-												<option
-													value={ category.slug }
-													key={ category.slug }
-												>
-													{ category.name }
-												</option>
-											) ) }
-									</SelectControl>
-								</FlexItem>
-							</Flex>
-
-							<Spacer margin={ 4 } />
-
-							{ !! selectedCollection?.font_families?.length &&
-								! fonts.length && (
-									<Text>
-										{ __(
-											'No fonts found. Try with a different search term.'
-										) }
-									</Text>
-								) }
-
-							<div className="font-library-modal__fonts-grid__main">
-								{ /*
-								 * Disable reason: The `list` ARIA role is redundant but
-								 * Safari+VoiceOver won't announce the list otherwise.
-								 */
-								/* eslint-disable jsx-a11y/no-redundant-roles */ }
-								<ul
-									role="list"
-									className="font-library-modal__fonts-list"
-								>
-									{ items.map( ( font ) => (
-										<li
-											key={
-												font.font_family_settings.slug
-											}
-											className="font-library-modal__fonts-list-item"
-										>
-											<FontCard
-												font={
-													font.font_family_settings
-												}
-												navigatorPath="/fontFamily"
-												onClick={ () => {
-													setSelectedFont(
-														font.font_family_settings
-													);
-												} }
-											/>
-										</li>
-									) ) }
-								</ul>
-								{ /* eslint-enable jsx-a11y/no-redundant-roles */ }
-							</div>
-						</Navigator.Screen>
-
-						<Navigator.Screen path="/fontFamily">
-							<Flex justify="flex-start">
-								<Navigator.BackButton
-									icon={
-										isRTL() ? chevronRight : chevronLeft
-									}
-									size="small"
-									onClick={ () => {
-										setSelectedFont( null );
-										setNotice( null );
-									} }
-									label={ __( 'Back' ) }
-								/>
-								<Heading
-									level={ 2 }
-									size={ 13 }
-									className="edit-site-global-styles-header"
-								>
-									{ selectedFont?.name }
-								</Heading>
-							</Flex>
-							{ notice && (
-								<>
-									<Spacer margin={ 1 } />
-									<Notice
-										status={ notice.type }
-										onRemove={ () => setNotice( null ) }
-									>
-										{ notice.message }
-									</Notice>
-									<Spacer margin={ 1 } />
-								</>
-							) }
-							<Spacer margin={ 4 } />
-							<Text>
-								{ __( 'Select font variants to install.' ) }
-							</Text>
-							<Spacer margin={ 4 } />
-							<CheckboxControl
-								className="font-library-modal__select-all"
-								label={ __( 'Select all' ) }
-								checked={ isSelectAllChecked }
-								onChange={ toggleSelectAll }
-								indeterminate={ isIndeterminate }
-								__nextHasNoMarginBottom
-							/>
-							<VStack spacing={ 0 }>
-								{ /*
-								 * Disable reason: The `list` ARIA role is redundant but
-								 * Safari+VoiceOver won't announce the list otherwise.
-								 */
-								/* eslint-disable jsx-a11y/no-redundant-roles */ }
-								<ul
-									role="list"
-									className="font-library-modal__fonts-list"
-								>
-									{ getSortedFontFaces( selectedFont ).map(
-										( face, i ) => (
-											<li
-												key={ `face${ i }` }
-												className="font-library-modal__fonts-list-item"
-											>
-												<CollectionFontVariant
-													font={ selectedFont }
-													face={ face }
-													handleToggleVariant={
-														handleToggleVariant
-													}
-													selected={ isFontFontFaceInOutline(
-														selectedFont.slug,
-														selectedFont.fontFace
-															? face
-															: null, // If the font has no fontFace, we want to check if the font is in the outline
-														fontToInstallOutline
-													) }
-												/>
-											</li>
-										)
-									) }
-								</ul>
-								{ /* eslint-enable jsx-a11y/no-redundant-roles */ }
-							</VStack>
-							<Spacer margin={ 16 } />
-						</Navigator.Screen>
-					</Navigator>
-
-					{ selectedFont && (
-						<Flex
-							justify="flex-end"
-							className="font-library-modal__footer"
-						>
-							<Button
-								__next40pxDefaultSize
-								variant="primary"
-								onClick={ handleInstall }
-								isBusy={ isInstalling }
-								disabled={
-									fontsToInstall.length === 0 || isInstalling
-								}
-								accessibleWhenDisabled
-							>
-								{ __( 'Install' ) }
-							</Button>
-						</Flex>
-					) }
-
-					{ ! selectedFont && (
-						<HStack
-							expanded={ false }
-							className="font-library-modal__footer"
-							justify="end"
-							spacing={ 6 }
-						>
-							<HStack
-								justify="flex-start"
-								expanded={ false }
-								spacing={ 1 }
-								className="font-library-modal__page-selection"
-							>
-								{ createInterpolateElement(
-									sprintf(
-										// translators: 1: Current page number, 2: Total number of pages.
-										_x(
-											'<div>Page</div>%1$s<div>of %2$s</div>',
-											'paging'
-										),
-										'<CurrentPage />',
-										totalPages
-									),
-									{
-										div: <div aria-hidden />,
-										CurrentPage: (
-											<SelectControl
-												aria-label={ __(
-													'Current page'
-												) }
-												value={ page }
-												options={ [
-													...Array( totalPages ),
-												].map( ( e, i ) => {
-													return {
-														label: i + 1,
-														value: i + 1,
-													};
-												} ) }
-												onChange={ ( newPage ) =>
-													setPage(
-														parseInt( newPage )
-													)
-												}
-												size="small"
-												__nextHasNoMarginBottom
-												variant="minimal"
-											/>
-										),
-									}
-								) }
-							</HStack>
-							<HStack expanded={ false } spacing={ 1 }>
-								<Button
-									onClick={ () => setPage( page - 1 ) }
-									disabled={ page === 1 }
-									accessibleWhenDisabled
-									label={ __( 'Previous page' ) }
-									icon={ isRTL() ? next : previous }
-									showTooltip
-									size="compact"
-									tooltipPosition="top"
-								/>
-								<Button
-									onClick={ () => setPage( page + 1 ) }
-									disabled={ page === totalPages }
-									accessibleWhenDisabled
-									label={ __( 'Next page' ) }
-									icon={ isRTL() ? previous : next }
-									showTooltip
-									size="compact"
-									tooltipPosition="top"
-								/>
-							</HStack>
-						</HStack>
-					) }
-				</>
-			) }
-		</div>
-	);
-}
-
-export default FontCollection;

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

@@ -1,116 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { __experimentalText as Text } from '@wordpress/components';
-import { useContext, useEffect, useState, useRef } from '@wordpress/element';
-
-/**
- * Internal dependencies
- */
-import { FontLibraryContext } from './context';
-import {
-	getFacePreviewStyle,
-	getFamilyPreviewStyle,
-} from './utils/preview-styles';
-
-function getPreviewUrl( fontFace ) {
-	if ( fontFace.preview ) {
-		return fontFace.preview;
-	}
-	if ( fontFace.src ) {
-		return Array.isArray( fontFace.src ) ? fontFace.src[ 0 ] : fontFace.src;
-	}
-}
-
-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 );
-
-	const previewUrl = customPreviewUrl ?? getPreviewUrl( fontFace );
-	const isPreviewImage =
-		previewUrl && previewUrl.match( /\.(png|jpg|jpeg|gif|svg)$/i );
-
-	const faceStyles = getFacePreviewStyle( fontFace );
-	const textDemoStyle = {
-		fontSize: '18px',
-		lineHeight: 1,
-		opacity: isAssetLoaded ? '1' : '0',
-		...style,
-		...faceStyles,
-	};
-
-	useEffect( () => {
-		const observer = new window.IntersectionObserver( ( [ entry ] ) => {
-			setIsIntersecting( entry.isIntersecting );
-		}, {} );
-		observer.observe( ref.current );
-		return () => observer.disconnect();
-	}, [ ref ] );
-
-	useEffect( () => {
-		const loadAsset = async () => {
-			if ( isIntersecting ) {
-				if ( ! isPreviewImage && fontFace.src ) {
-					await loadFontFaceAsset( fontFace );
-				}
-				setIsAssetLoaded( true );
-			}
-		};
-		loadAsset();
-	}, [ fontFace, isIntersecting, loadFontFaceAsset, isPreviewImage ] );
-
-	return (
-		<div ref={ ref }>
-			{ isPreviewImage ? (
-				<img
-					src={ previewUrl }
-					loading="lazy"
-					alt={ text }
-					className="font-library-modal__font-variant_demo-image"
-				/>
-			) : (
-				<Text
-					style={ textDemoStyle }
-					className="font-library-modal__font-variant_demo-text"
-				>
-					{ text }
-				</Text>
-			) }
-		</div>
-	);
-}
-
-export default FontDemo;