@wordpress/edit-site 5.18.1-next.5a1d1283.0 → 5.19.1

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

@@ -0,0 +1,174 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { useContext, useEffect, useState } from '@wordpress/element';
+import {
+	privateApis as componentsPrivateApis,
+	__experimentalHStack as HStack,
+	__experimentalSpacer as Spacer,
+	Button,
+	Spinner,
+} from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import TabLayout from './tab-layout';
+import { FontLibraryContext } from './context';
+import FontsGrid from './fonts-grid';
+import LibraryFontDetails from './library-font-details';
+import LibraryFontCard from './library-font-card';
+import LocalFonts from './local-fonts';
+import ConfirmDeleteDialog from './confirm-delete-dialog';
+import { unlock } from '../../../lock-unlock';
+const { ProgressBar } = unlock( componentsPrivateApis );
+
+function InstalledFonts() {
+	const {
+		baseCustomFonts,
+		libraryFontSelected,
+		baseThemeFonts,
+		handleSetLibraryFontSelected,
+		refreshLibrary,
+		uninstallFont,
+		isResolvingLibrary,
+	} = useContext( FontLibraryContext );
+	const [ isConfirmDeleteOpen, setIsConfirmDeleteOpen ] = useState( false );
+
+	const handleUnselectFont = () => {
+		handleSetLibraryFontSelected( null );
+	};
+
+	const handleSelectFont = ( font ) => {
+		handleSetLibraryFontSelected( font );
+	};
+
+	const handleConfirmUninstall = async () => {
+		const result = await uninstallFont( libraryFontSelected );
+		// If the font was succesfully uninstalled it is unselected
+		if ( result ) {
+			handleUnselectFont();
+		}
+		setIsConfirmDeleteOpen( false );
+	};
+
+	const handleUninstallClick = async () => {
+		setIsConfirmDeleteOpen( true );
+	};
+
+	const handleCancelUninstall = () => {
+		setIsConfirmDeleteOpen( false );
+	};
+
+	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';
+
+	useEffect( () => {
+		refreshLibrary();
+	}, [] );
+
+	return (
+		<TabLayout
+			title={ libraryFontSelected?.name || '' }
+			description={ tabDescription }
+			handleBack={ !! libraryFontSelected && handleUnselectFont }
+			footer={
+				<Footer
+					shouldDisplayDeleteButton={ shouldDisplayDeleteButton }
+					handleUninstallClick={ handleUninstallClick }
+				/>
+			}
+		>
+			<ConfirmDeleteDialog
+				font={ libraryFontSelected }
+				isConfirmDeleteOpen={ isConfirmDeleteOpen }
+				handleConfirmUninstall={ handleConfirmUninstall }
+				handleCancelUninstall={ handleCancelUninstall }
+			/>
+
+			{ ! libraryFontSelected && (
+				<>
+					{ isResolvingLibrary && <Spinner /> }
+					{ baseCustomFonts.length > 0 && (
+						<>
+							<Spacer margin={ 2 } />
+							<FontsGrid>
+								{ baseCustomFonts.map( ( font ) => (
+									<LibraryFontCard
+										font={ font }
+										key={ font.slug }
+										onClick={ () => {
+											handleSelectFont( font );
+										} }
+									/>
+								) ) }
+							</FontsGrid>
+							<Spacer margin={ 8 } />
+						</>
+					) }
+
+					{ baseThemeFonts.length > 0 && (
+						<>
+							<FontsGrid title={ __( 'Theme Fonts' ) }>
+								{ baseThemeFonts.map( ( font ) => (
+									<LibraryFontCard
+										font={ font }
+										key={ font.slug }
+										onClick={ () => {
+											handleSelectFont( font );
+										} }
+									/>
+								) ) }
+							</FontsGrid>
+						</>
+					) }
+
+					<Spacer margin={ 8 } />
+					<LocalFonts />
+				</>
+			) }
+
+			{ libraryFontSelected && (
+				<LibraryFontDetails
+					font={ libraryFontSelected }
+					isConfirmDeleteOpen={ isConfirmDeleteOpen }
+					handleConfirmUninstall={ handleConfirmUninstall }
+					handleCancelUninstall={ handleCancelUninstall }
+				/>
+			) }
+		</TabLayout>
+	);
+}
+
+function Footer( { shouldDisplayDeleteButton, handleUninstallClick } ) {
+	const { saveFontFamilies, fontFamiliesHasChanges, isInstalling } =
+		useContext( FontLibraryContext );
+	return (
+		<HStack justify="space-between">
+			{ isInstalling && <ProgressBar /> }
+			<div>
+				{ shouldDisplayDeleteButton && (
+					<Button variant="tertiary" onClick={ handleUninstallClick }>
+						{ __( 'Delete' ) }
+					</Button>
+				) }
+			</div>
+			<Button
+				disabled={ ! fontFamiliesHasChanges }
+				variant="primary"
+				onClick={ saveFontFamilies }
+			>
+				{ __( 'Update' ) }
+			</Button>
+		</HStack>
+	);
+}
+
+export default InstalledFonts;

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

@@ -0,0 +1,33 @@
+/**
+ * WordPress dependencies
+ */
+import { __, sprintf } from '@wordpress/i18n';
+import { useContext } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import FontCard from './font-card';
+import { FontLibraryContext } from './context';
+
+function LibraryFontCard( { font, ...props } ) {
+	const { getFontFacesActivated } = useContext( FontLibraryContext );
+
+	const variantsInstalled = font.fontFace?.length || 1;
+	const variantsActive = getFontFacesActivated(
+		font.slug,
+		font.source
+	).length;
+	const variantsText = sprintf(
+		/* translators: %1$d: Active font variants, %2$d: Total font variants */
+		__( '%1$s/%2$s variants active' ),
+		variantsActive,
+		variantsInstalled
+	);
+
+	return (
+		<FontCard font={ font } variantsText={ variantsText } { ...props } />
+	);
+}
+
+export default LibraryFontCard;

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

@@ -0,0 +1,45 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	__experimentalVStack as VStack,
+	__experimentalSpacer as Spacer,
+} from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import LibraryFontVariant from './library-font-variant';
+import { sortFontFaces } from './utils/sort-font-faces';
+
+function LibraryFontDetails( { font } ) {
+	const fontFaces =
+		font.fontFace && font.fontFace.length
+			? sortFontFaces( font.fontFace )
+			: [
+					{
+						fontFamily: font.fontFamily,
+						fontStyle: 'normal',
+						fontWeight: '400',
+					},
+			  ];
+
+	return (
+		<>
+			<Spacer margin={ 4 } />
+			<VStack spacing={ 0 }>
+				<Spacer margin={ 8 } />
+				{ fontFaces.map( ( face, i ) => (
+					<LibraryFontVariant
+						font={ font }
+						face={ face }
+						key={ `face${ i }` }
+					/>
+				) ) }
+			</VStack>
+			<Spacer margin={ 8 } />
+		</>
+	);
+}
+
+export default LibraryFontDetails;

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

@@ -0,0 +1,54 @@
+/**
+ * WordPress dependencies
+ */
+import { useContext } from '@wordpress/element';
+import { CheckboxControl, Flex } from '@wordpress/components';
+/**
+ * Internal dependencies
+ */
+import { getFontFaceVariantName } from './utils';
+
+/**
+ * Internal dependencies
+ */
+import { FontLibraryContext } from './context';
+import FontFaceDemo from './font-demo';
+
+function LibraryFontVariant( { face, font } ) {
+	const { isFontActivated, toggleActivateFont } =
+		useContext( FontLibraryContext );
+
+	const isIstalled = font?.fontFace
+		? isFontActivated(
+				font.slug,
+				face.fontStyle,
+				face.fontWeight,
+				font.source
+		  )
+		: isFontActivated( font.slug, null, null, font.source );
+
+	const handleToggleActivation = () => {
+		if ( font?.fontFace ) {
+			toggleActivateFont( font, face );
+			return;
+		}
+		toggleActivateFont( font );
+	};
+
+	const displayName = font.name + ' ' + getFontFaceVariantName( face );
+
+	return (
+		<div className="font-library-modal__library-font-variant">
+			<Flex justify="space-between" align="center" gap="1rem">
+				<FontFaceDemo fontFace={ face } text={ displayName } />
+				<CheckboxControl
+					checked={ isIstalled }
+					onChange={ handleToggleActivation }
+					__nextHasNoMarginBottom={ true }
+				/>
+			</Flex>
+		</div>
+	);
+}
+
+export default LibraryFontVariant;

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

@@ -0,0 +1,160 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import {
+	Button,
+	DropZone,
+	__experimentalSpacer as Spacer,
+	__experimentalText as Text,
+	FormFileUpload,
+} from '@wordpress/components';
+import { useContext } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { ALLOWED_FILE_EXTENSIONS } from './utils/constants';
+import { FontLibraryContext } from './context';
+import { Font } from '../../../../lib/lib-font.browser';
+import makeFamiliesFromFaces from './utils/make-families-from-faces';
+import { loadFontFaceInBrowser } from './utils';
+
+function LocalFonts() {
+	const { installFonts } = useContext( FontLibraryContext );
+
+	const handleDropZone = ( files ) => {
+		handleFilesUpload( files );
+	};
+	const onFilesUpload = ( event ) => {
+		handleFilesUpload( event.target.files );
+	};
+
+	/**
+	 * Filters the selected files to only allow the ones with the allowed extensions
+	 *
+	 * @param {Array} files The files to be filtered
+	 * @return {void}
+	 */
+	const handleFilesUpload = ( files ) => {
+		const uniqueFilenames = new Set();
+		const selectedFiles = [ ...files ];
+		const allowedFiles = selectedFiles.filter( ( file ) => {
+			if ( uniqueFilenames.has( file.name ) ) {
+				return false; // Discard duplicates
+			}
+			// Eliminates files that are not allowed
+			const fileExtension = file.name.split( '.' ).pop().toLowerCase();
+			if ( ALLOWED_FILE_EXTENSIONS.includes( fileExtension ) ) {
+				uniqueFilenames.add( file.name );
+				return true; // Keep file if the extension is allowed
+			}
+			return false; // Discard file extension not allowed
+		} );
+		if ( allowedFiles.length > 0 ) {
+			loadFiles( allowedFiles );
+		}
+	};
+
+	/**
+	 * Loads the selected files and reads the font metadata
+	 *
+	 * @param {Array} files The files to be loaded
+	 * @return {void}
+	 */
+	const loadFiles = async ( files ) => {
+		const fontFacesLoaded = await Promise.all(
+			files.map( async ( fontFile ) => {
+				const fontFaceData = await getFontFaceMetadata( fontFile );
+				await loadFontFaceInBrowser(
+					fontFaceData,
+					fontFaceData.file,
+					'all'
+				);
+				return fontFaceData;
+			} )
+		);
+		await handleInstall( fontFacesLoaded );
+	};
+
+	// Create a function to read the file as array buffer
+	async function readFileAsArrayBuffer( file ) {
+		return new Promise( ( resolve, reject ) => {
+			const reader = new window.FileReader();
+			reader.readAsArrayBuffer( file );
+			reader.onload = () => resolve( reader.result );
+			reader.onerror = reject;
+		} );
+	}
+
+	const getFontFaceMetadata = async ( fontFile ) => {
+		const buffer = await readFileAsArrayBuffer( fontFile );
+		const fontObj = new Font( 'Uploaded Font' );
+		fontObj.fromDataBuffer( buffer, fontFile.name );
+		// Assuming that fromDataBuffer triggers onload event and returning a Promise
+		const onloadEvent = await new Promise(
+			( resolve ) => ( fontObj.onload = resolve )
+		);
+		const font = onloadEvent.detail.font;
+		const { name } = font.opentype.tables;
+		const fontName = name.get( 16 ) || name.get( 1 );
+		const isItalic = name.get( 2 ).toLowerCase().includes( 'italic' );
+		const fontWeight =
+			font.opentype.tables[ 'OS/2' ].usWeightClass || 'normal';
+		const isVariable = !! font.opentype.tables.fvar;
+		const weightAxis =
+			isVariable &&
+			font.opentype.tables.fvar.axes.find(
+				( { tag } ) => tag === 'wght'
+			);
+		const weightRange = weightAxis
+			? `${ weightAxis.minValue } ${ weightAxis.maxValue }`
+			: null;
+		return {
+			file: fontFile,
+			fontFamily: fontName,
+			fontStyle: isItalic ? 'italic' : 'normal',
+			fontWeight: weightRange || fontWeight,
+		};
+	};
+
+	/**
+	 * Creates the font family definition and sends it to the server
+	 *
+	 * @param {Array} fontFaces The font faces to be installed
+	 * @return {void}
+	 */
+	const handleInstall = async ( fontFaces ) => {
+		const fontFamilies = makeFamiliesFromFaces( fontFaces );
+		await installFonts( fontFamilies );
+	};
+
+	return (
+		<>
+			<Text className="font-library-modal__subtitle">
+				{ __( 'Upload Fonts' ) }
+			</Text>
+			<Spacer margin={ 2 } />
+			<DropZone onFilesDrop={ handleDropZone } />
+			<FormFileUpload
+				accept={ ALLOWED_FILE_EXTENSIONS.map(
+					( ext ) => `.${ ext }`
+				).join( ',' ) }
+				multiple={ true }
+				onChange={ onFilesUpload }
+				render={ ( { openFileDialog } ) => (
+					<Button
+						className="font-library-modal__upload-area"
+						onClick={ openFileDialog }
+					>
+						<span>
+							{ __( 'Drag and drop your font files here.' ) }
+						</span>
+					</Button>
+				) }
+			/>
+		</>
+	);
+}
+
+export default LocalFonts;

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

@@ -0,0 +1,45 @@
+/**
+ * WordPress dependencies
+ *
+ */
+/**
+ * WordPress dependencies
+ */
+import apiFetch from '@wordpress/api-fetch';
+
+export async function fetchInstallFonts( data ) {
+	const config = {
+		path: '/wp/v2/fonts',
+		method: 'POST',
+		body: data,
+	};
+	return apiFetch( config );
+}
+
+export async function fetchUninstallFonts( fonts ) {
+	const data = {
+		fontFamilies: fonts,
+	};
+	const config = {
+		path: '/wp/v2/fonts',
+		method: 'DELETE',
+		data,
+	};
+	return apiFetch( config );
+}
+
+export async function fetchFontCollections() {
+	const config = {
+		path: '/wp/v2/fonts/collections',
+		method: 'GET',
+	};
+	return apiFetch( config );
+}
+
+export async function fetchFontCollection( id ) {
+	const config = {
+		path: `/wp/v2/fonts/collections/${ id }`,
+		method: 'GET',
+	};
+	return apiFetch( config );
+}

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

@@ -0,0 +1,139 @@
+.font-library-modal {
+	// @todo: If a new prop is added to the Modal component that constrains
+	// the content width, we should use that prop instead of this style.
+	// see https://github.com/WordPress/gutenberg/issues/54471.
+	&.font-library-modal {
+
+		@include break-medium() {
+			width: 65vw;
+		}
+	}
+
+	.components-modal__header {
+		border-bottom: none;
+	}
+
+	.components-modal__content {
+		padding-top: 0;
+	}
+
+	.font-library-modal__subtitle {
+		text-transform: uppercase;
+		font-weight: 500;
+		font-size: 11px;
+	}
+}
+
+.font-library-modal__tab-layout {
+
+	main {
+		padding-bottom: 4rem;
+	}
+
+	footer {
+		border-top: 1px solid #e5e5e5;
+		margin: 0 -32px -32px;
+		padding: 16px 32px;
+		position: absolute;
+		bottom: 32px;
+		width: 100%;
+		background-color: #fff;
+	}
+
+}
+
+.font-library-modal__fonts-grid {
+	.font-library-modal__fonts-grid__main {
+		display: flex;
+		flex-direction: column;
+	}
+}
+
+.font-library-modal__font-card {
+	border: 1px solid #e5e5e5;
+	height: auto;
+	padding: 1rem;
+	margin-top: -1px; /* To collapse the margin with the previous element */
+
+	.font-library-modal__font-card__name {
+		font-weight: bold;
+	}
+
+	.font-library-modal__font-card__count {
+		color: #6e6e6e;
+	}
+}
+
+.font-library-modal__library-font-variant {
+	border: 1px solid #e5e5e5;
+	padding: 1rem;
+	margin-top: -1px; /* To collapse the margin with the previous element */
+}
+
+.font-library-modal__font-variant {
+	border-bottom: 1px solid #e5e5e5;
+	padding-bottom: 1rem;
+}
+
+.font-library-modal__tab-panel {
+	[role="tablist"] {
+		position: sticky;
+		top: 0;
+		width: calc(100% + 64px);
+		border-bottom: 1px solid #e6e6e6;
+		background: #fff;
+		margin: 0 -32px;
+		padding: 0 16px;
+		z-index: 1;
+	}
+}
+
+.font-library-modal__upload-area {
+	align-items: center;
+	display: flex;
+	justify-content: center;
+	height: 100px;
+	width: 100%;
+	background-color: #f0f0f0;
+}
+
+.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;
+	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 {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+
+	h3 {
+		font-size: 1.4rem;
+	}
+
+	.components-card {
+		width: 50%;
+		min-width: 250px;
+		max-width: 350px;
+	}
+}

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

@@ -0,0 +1,50 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	__experimentalText as Text,
+	__experimentalHeading as Heading,
+	__experimentalVStack as VStack,
+	__experimentalSpacer as Spacer,
+	__experimentalHStack as HStack,
+	Button,
+} from '@wordpress/components';
+import { chevronLeft } from '@wordpress/icons';
+
+function TabLayout( { title, description, handleBack, children, footer } ) {
+	return (
+		<div className="font-library-modal__tab-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>
+		</div>
+	);
+}
+
+export default TabLayout;