@wordpress/edit-site 6.33.3 → 6.34.0

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

@@ -1,45 +0,0 @@
-/**
- * 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

@@ -1,60 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { useContext, useId } from '@wordpress/element';
-import { CheckboxControl, Flex } from '@wordpress/components';
-
-/**
- * Internal dependencies
- */
-import { getFontFaceVariantName } from './utils';
-import { FontLibraryContext } from './context';
-import FontDemo from './font-demo';
-
-function LibraryFontVariant( { face, font } ) {
-	const { isFontActivated, toggleActivateFont } =
-		useContext( FontLibraryContext );
-
-	const isInstalled =
-		font?.fontFace?.length > 0
-			? isFontActivated(
-					font.slug,
-					face.fontStyle,
-					face.fontWeight,
-					font.source
-			  )
-			: isFontActivated( font.slug, null, null, font.source );
-
-	const handleToggleActivation = () => {
-		if ( font?.fontFace?.length > 0 ) {
-			toggleActivateFont( font, face );
-			return;
-		}
-		toggleActivateFont( font );
-	};
-
-	const displayName = font.name + ' ' + getFontFaceVariantName( face );
-	const checkboxId = useId();
-
-	return (
-		<div className="font-library-modal__font-card">
-			<Flex justify="flex-start" align="center" gap="1rem">
-				<CheckboxControl
-					checked={ isInstalled }
-					onChange={ handleToggleActivation }
-					__nextHasNoMarginBottom
-					id={ checkboxId }
-				/>
-				<label htmlFor={ checkboxId }>
-					<FontDemo
-						font={ face }
-						text={ displayName }
-						onClick={ handleToggleActivation }
-					/>
-				</label>
-			</Flex>
-		</div>
-	);
-}
-
-export default LibraryFontVariant;

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

@@ -1,78 +0,0 @@
-/**
- * WordPress dependencies
- */
-import apiFetch from '@wordpress/api-fetch';
-
-const FONT_FAMILIES_URL = '/wp/v2/font-families';
-const FONT_COLLECTIONS_URL = '/wp/v2/font-collections';
-
-export async function fetchInstallFontFamily( data ) {
-	const config = {
-		path: FONT_FAMILIES_URL,
-		method: 'POST',
-		body: data,
-	};
-	const response = await apiFetch( config );
-	return {
-		id: response.id,
-		...response.font_family_settings,
-		fontFace: [],
-	};
-}
-
-export async function fetchInstallFontFace( fontFamilyId, data ) {
-	const config = {
-		path: `${ FONT_FAMILIES_URL }/${ fontFamilyId }/font-faces`,
-		method: 'POST',
-		body: data,
-	};
-	const response = await apiFetch( config );
-	return {
-		id: response.id,
-		...response.font_face_settings,
-	};
-}
-
-export async function fetchGetFontFamilyBySlug( slug ) {
-	const config = {
-		path: `${ FONT_FAMILIES_URL }?slug=${ slug }&_embed=true`,
-		method: 'GET',
-	};
-	const response = await apiFetch( config );
-	if ( ! response || response.length === 0 ) {
-		return null;
-	}
-	const fontFamilyPost = response[ 0 ];
-	return {
-		id: fontFamilyPost.id,
-		...fontFamilyPost.font_family_settings,
-		fontFace:
-			fontFamilyPost?._embedded?.font_faces.map(
-				( face ) => face.font_face_settings
-			) || [],
-	};
-}
-
-export async function fetchUninstallFontFamily( fontFamilyId ) {
-	const config = {
-		path: `${ FONT_FAMILIES_URL }/${ fontFamilyId }?force=true`,
-		method: 'DELETE',
-	};
-	return await apiFetch( config );
-}
-
-export async function fetchFontCollections() {
-	const config = {
-		path: `${ FONT_COLLECTIONS_URL }?_fields=slug,name,description`,
-		method: 'GET',
-	};
-	return await apiFetch( config );
-}
-
-export async function fetchFontCollection( id ) {
-	const config = {
-		path: `${ FONT_COLLECTIONS_URL }/${ id }`,
-		method: 'GET',
-	};
-	return await apiFetch( config );
-}

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

@@ -1,220 +0,0 @@
-@use "@wordpress/base-styles/colors" as *;
-@use "@wordpress/base-styles/mixins" as *;
-@use "@wordpress/base-styles/variables" as *;
-
-// Fixed height for the modal footer.
-// Ensures that the footer is always visible when the modal content is scrollable.
-$footer-height: 70px;
-
-.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;
-		margin-bottom: $footer-height;
-	}
-
-	.font-library-modal__subtitle {
-		text-transform: uppercase;
-		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__loading {
-		width: 100%;
-		height: 100%;
-		display: flex;
-		position: absolute;
-		left: 0;
-		top: 0;
-		align-items: center;
-		justify-content: center;
-		// Push down so that the progress bar is centered vertically.
-		// It should be 120px (72px modal header height + 48px tab height)
-		padding-top: $header-height + $grid-unit-15 + $grid-unit-60;
-	}
-}
-
-.font-library-modal__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: $grid-unit-40;
-	width: 100%;
-	height: $footer-height;
-	background-color: $white;
-}
-
-.font-library-modal__page-selection {
-	font-size: 11px;
-	font-weight: 500;
-	text-transform: uppercase;
-
-	@include break-small() {
-		.components-select-control__input {
-			font-size: 11px !important;
-			font-weight: 500;
-		}
-	}
-}
-
-.font-library-modal__fonts-title {
-	text-transform: uppercase;
-	font-size: 11px;
-	font-weight: 600;
-	margin-top: 0;
-	margin-bottom: 0;
-}
-
-.font-library-modal__fonts-list {
-	margin-top: 0;
-	margin-bottom: 0;
-}
-
-.font-library-modal__fonts-list-item {
-	margin-bottom: 0;
-}
-
-.font-library-modal__font-card {
-	border: $border-width solid $gray-200;
-	width: 100%;
-
-	// Override the default 40px height set by the Button component.
-	// Ref - https://github.com/WordPress/gutenberg/pull/65258#discussion_r1756147260
-	height: auto !important;
-
-	padding: $grid-unit-20;
-	margin-top: -1px; /* To collapse the margin with the previous element */
-
-	&:hover {
-		background-color: $gray-100;
-	}
-
-	&:focus {
-		position: relative;
-	}
-
-	.font-library-modal__font-card__name {
-		font-weight: bold;
-	}
-
-	.font-library-modal__font-card__count {
-		color: $gray-700;
-	}
-
-	.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;
-
-		@media not (prefers-reduced-motion) {
-			transition: opacity 0.3s ease-in-out;
-		}
-	}
-}
-
-.font-library-modal__font-variant {
-	border-bottom: 1px solid $gray-200;
-	padding-bottom: $grid-unit-20;
-}
-
-.font-library-modal__tablist-container {
-	position: sticky;
-	top: 0;
-	border-bottom: 1px solid $gray-300;
-	background: $white;
-	margin: 0 #{$grid-unit-40 * -1};
-	padding: 0 $grid-unit-20;
-	z-index: 1;
-
-	[role="tablist"] {
-		margin-bottom: -1px;
-	}
-}
-
-.font-library-modal__upload-area {
-	align-items: center;
-	display: flex;
-	justify-content: center;
-
-	// Override the default 40px height set by the Button component.
-	// Ref - https://github.com/WordPress/gutenberg/pull/65258#discussion_r1756155039
-	height: $grid-unit-80 * 4 !important; // 256px
-
-	width: 100%;
-}
-
-button.font-library-modal__upload-area {
-	background-color: $gray-100;
-}
-
-.font-library-modal__local-fonts {
-	margin: 0 auto;
-	width: 80%;
-
-	.font-library-modal__upload-area__text {
-		color: $gray-700;
-	}
-}
-
-.font-library__google-fonts-confirm {
-	display: flex;
-	justify-content: center;
-	align-items: center;
-	margin-top: $grid-unit-80;
-
-	p {
-		line-height: $default-line-height;
-	}
-
-	h2 {
-		font-size: 1.2rem;
-		font-weight: 400;
-	}
-
-	.components-card {
-		padding: $grid-unit-20;
-		width: 400px;
-	}
-
-	.components-button {
-		width: 100%;
-		justify-content: center;
-	}
-}
-
-.font-library-modal__select-all {
-	padding:
-		$grid-unit-20 $grid-unit-20 $grid-unit-20 $grid-unit-20 +
-		$border-width;
-
-	.components-checkbox-control__label {
-		padding-left: $grid-unit-20;
-	}
-}

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

@@ -1,253 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { __ } from '@wordpress/i18n';
-import {
-	__experimentalSpacer as Spacer,
-	__experimentalText as Text,
-	__experimentalVStack as VStack,
-	Button,
-	DropZone,
-	Notice,
-	FormFileUpload,
-	FlexItem,
-	ProgressBar,
-} from '@wordpress/components';
-import { useContext, useState } 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 UploadFonts() {
-	const { installFonts } = useContext( FontLibraryContext );
-	const [ isUploading, setIsUploading ] = useState( false );
-	const [ notice, setNotice ] = useState( false );
-
-	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 = async ( files ) => {
-		setNotice( null );
-		setIsUploading( true );
-		const uniqueFilenames = new Set();
-		const selectedFiles = [ ...files ];
-		let hasInvalidFiles = false;
-
-		// Use map to create a promise for each file check, then filter with Promise.all.
-		const checkFilesPromises = selectedFiles.map( async ( file ) => {
-			const isFont = await isFontFile( file );
-			if ( ! isFont ) {
-				hasInvalidFiles = true;
-				return null; // Return null for invalid files.
-			}
-			// Check for duplicates
-			if ( uniqueFilenames.has( file.name ) ) {
-				return null; // Return null for duplicates.
-			}
-			// Check if the file extension is allowed.
-			const fileExtension = file.name.split( '.' ).pop().toLowerCase();
-			if ( ALLOWED_FILE_EXTENSIONS.includes( fileExtension ) ) {
-				uniqueFilenames.add( file.name );
-				return file; // Return the file if it passes all checks.
-			}
-			return null; // Return null for disallowed file extensions.
-		} );
-
-		// Filter out the nulls after all promises have resolved.
-		const allowedFiles = ( await Promise.all( checkFilesPromises ) ).filter(
-			( file ) => null !== file
-		);
-
-		if ( allowedFiles.length > 0 ) {
-			loadFiles( allowedFiles );
-		} else {
-			const message = hasInvalidFiles
-				? __( 'Sorry, you are not allowed to upload this file type.' )
-				: __( 'No fonts found to install.' );
-
-			setNotice( {
-				type: 'error',
-				message,
-			} );
-			setIsUploading( false );
-		}
-	};
-
-	/**
-	 * 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;
-			} )
-		);
-		handleInstall( fontFacesLoaded );
-	};
-
-	/**
-	 * Checks if a file is a valid Font file.
-	 *
-	 * @param {File} file The file to be checked.
-	 * @return {boolean} Whether the file is a valid font file.
-	 */
-	async function isFontFile( file ) {
-		const font = new Font( 'Uploaded Font' );
-		try {
-			const buffer = await readFileAsArrayBuffer( file );
-			await font.fromDataBuffer( buffer, 'font' );
-			return true;
-		} catch ( error ) {
-			return false;
-		}
-	}
-
-	// 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 );
-
-		try {
-			await installFonts( fontFamilies );
-			setNotice( {
-				type: 'success',
-				message: __( 'Fonts were installed successfully.' ),
-			} );
-		} catch ( error ) {
-			setNotice( {
-				type: 'error',
-				message: error.message,
-				errors: error?.installationErrors,
-			} );
-		}
-
-		setIsUploading( false );
-	};
-
-	return (
-		<div className="font-library-modal__tabpanel-layout">
-			<DropZone onFilesDrop={ handleDropZone } />
-			<VStack className="font-library-modal__local-fonts">
-				{ notice && (
-					<Notice
-						status={ notice.type }
-						__unstableHTML
-						onRemove={ () => setNotice( null ) }
-					>
-						{ notice.message }
-						{ notice.errors && (
-							<ul>
-								{ notice.errors.map( ( error, index ) => (
-									<li key={ index }>{ error }</li>
-								) ) }
-							</ul>
-						) }
-					</Notice>
-				) }
-				{ isUploading && (
-					<FlexItem>
-						<div className="font-library-modal__upload-area">
-							<ProgressBar />
-						</div>
-					</FlexItem>
-				) }
-				{ ! isUploading && (
-					<FormFileUpload
-						accept={ ALLOWED_FILE_EXTENSIONS.map(
-							( ext ) => `.${ ext }`
-						).join( ',' ) }
-						multiple
-						onChange={ onFilesUpload }
-						render={ ( { openFileDialog } ) => (
-							<Button
-								__next40pxDefaultSize
-								className="font-library-modal__upload-area"
-								onClick={ openFileDialog }
-							>
-								{ __( 'Upload font' ) }
-							</Button>
-						) }
-					/>
-				) }
-				<Spacer margin={ 2 } />
-				<Text className="font-library-modal__upload-area__text">
-					{ __(
-						'Uploaded fonts appear in your library and can be used in your theme. Supported formats: .ttf, .otf, .woff, and .woff2.'
-					) }
-				</Text>
-			</VStack>
-		</div>
-	);
-}
-
-export default UploadFonts;

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

@@ -1,23 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { _x } from '@wordpress/i18n';
-
-export const ALLOWED_FILE_EXTENSIONS = [ 'otf', 'ttf', 'woff', 'woff2' ];
-
-export const FONT_WEIGHTS = {
-	100: _x( 'Thin', 'font weight' ),
-	200: _x( 'Extra-light', 'font weight' ),
-	300: _x( 'Light', 'font weight' ),
-	400: _x( 'Normal', 'font weight' ),
-	500: _x( 'Medium', 'font weight' ),
-	600: _x( 'Semi-bold', 'font weight' ),
-	700: _x( 'Bold', 'font weight' ),
-	800: _x( 'Extra-bold', 'font weight' ),
-	900: _x( 'Black', 'font weight' ),
-};
-
-export const FONT_STYLES = {
-	normal: _x( 'Normal', 'font style' ),
-	italic: _x( 'Italic', 'font style' ),
-};

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

@@ -1,35 +0,0 @@
-/**
- * Filters a list of fonts based on the specified filters.
- *
- * This function filters a given array of fonts based on the criteria provided in the filters object.
- * It supports filtering by category and a search term. If the category is provided and not equal to 'all',
- * the function filters the fonts array to include only those fonts that belong to the specified category.
- * Additionally, if a search term is provided, it filters the fonts array to include only those fonts
- * whose name includes the search term, case-insensitively.
- *
- * @param {Array}  fonts   Array of font objects in font-collection schema fashion to be filtered. Each font object should have a 'categories' property and a 'font_family_settings' property with a 'name' key.
- * @param {Object} filters Object containing the filter criteria. It should have a 'category' key and/or a 'search' key.
- *                         The 'category' key is a string representing the category to filter by.
- *                         The 'search' key is a string representing the search term to filter by.
- * @return {Array} Array of filtered font objects based on the provided criteria.
- */
-export default function filterFonts( fonts, filters ) {
-	const { category, search } = filters;
-	let filteredFonts = fonts || [];
-
-	if ( category && category !== 'all' ) {
-		filteredFonts = filteredFonts.filter(
-			( font ) => font.categories.indexOf( category ) !== -1
-		);
-	}
-
-	if ( search ) {
-		filteredFonts = filteredFonts.filter( ( font ) =>
-			font.font_family_settings.name
-				.toLowerCase()
-				.includes( search.toLowerCase() )
-		);
-	}
-
-	return filteredFonts;
-}