@wordpress/edit-site 5.18.0 → 5.19.0

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

@@ -0,0 +1,29 @@
+/**
+ * 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 );
+}

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

@@ -0,0 +1,113 @@
+.font-library-modal {
+	.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));
+	}
+}

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 }
+									isSmall
+								/>
+							) }
+							{ 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>
+			</VStack>
+		</div>
+	);
+}
+
+export default TabLayout;

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

@@ -0,0 +1,31 @@
+/**
+ * WordPress dependencies
+ */
+import { __, _x } from '@wordpress/i18n';
+
+export const MODAL_TABS = [
+	{
+		name: 'installed-fonts',
+		title: __( 'Library' ),
+		className: 'installed-fonts',
+	},
+];
+
+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/get-intersecting-font-faces.js

@@ -0,0 +1,58 @@
+/**
+ * Retrieves intersecting font faces between two sets of fonts.
+ *
+ * For each font in the `incoming` list, the function checks for a corresponding match
+ * in the `existing` list based on the `slug` property. If a match is found and both
+ * have `fontFace` properties, it further narrows down to matching font faces based on
+ * the `fontWeight` and `fontStyle`. The result includes the properties of the matched
+ * existing font but only with intersecting font faces.
+ *
+ * @param {Array.<{ slug: string, fontFace?: Array.<{ fontWeight: string, fontStyle: string }> }>} incoming - The list of fonts to compare.
+ * @param {Array.<{ slug: string, fontFace?: Array.<{ fontWeight: string, fontStyle: string }> }>} existing - The reference list of fonts.
+ *
+ * @return {Array.<{ slug: string, fontFace?: Array.<{ fontWeight: string, fontStyle: string }> }>} An array of fonts from the `existing` list with intersecting font faces.
+ *
+ * @example
+ * const incomingFonts = [
+ *   { slug: 'arial', fontFace: [{ fontWeight: '400', fontStyle: 'normal' }] },
+ *   { slug: 'times-new', fontFace: [{ fontWeight: '700', fontStyle: 'italic' }] }
+ * ];
+ *
+ * const existingFonts = [
+ *   { slug: 'arial', fontFace: [{ fontWeight: '400', fontStyle: 'normal' }, { fontWeight: '700', fontStyle: 'italic' }] },
+ *   { slug: 'helvetica', fontFace: [{ fontWeight: '400', fontStyle: 'normal' }] }
+ * ];
+ *
+ * getIntersectingFontFaces(incomingFonts, existingFonts);
+ * // Returns:
+ * // [{ slug: 'arial', fontFace: [{ fontWeight: '400', fontStyle: 'normal' }] }]
+ */
+export default function getIntersectingFontFaces( incoming, existing ) {
+	const matches = [];
+
+	for ( const incomingFont of incoming ) {
+		const existingFont = existing.find(
+			( f ) => f.slug === incomingFont.slug
+		);
+
+		if ( existingFont ) {
+			if ( incomingFont?.fontFace ) {
+				const matchingFaces = incomingFont.fontFace.filter(
+					( face ) => {
+						return ( existingFont?.fontFace || [] ).find( ( f ) => {
+							return (
+								f.fontWeight === face.fontWeight &&
+								f.fontStyle === face.fontStyle
+							);
+						} );
+					}
+				);
+				matches.push( { ...existingFont, fontFace: matchingFaces } );
+			} else {
+				matches.push( incomingFont );
+			}
+		}
+	}
+
+	return matches;
+}

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

@@ -0,0 +1,213 @@
+/**
+ * Internal dependencies
+ */
+import { FONT_WEIGHTS, FONT_STYLES } from './constants';
+
+export function setUIValuesNeeded( font, extraValues = {} ) {
+	if ( ! font.name && ( font.fontFamily || font.slug ) ) {
+		font.name = font.fontFamily || font.slug;
+	}
+	return {
+		...font,
+		...extraValues,
+	};
+}
+
+export function isUrlEncoded( url ) {
+	if ( typeof url !== 'string' ) {
+		return false;
+	}
+	return url !== decodeURIComponent( url );
+}
+
+export function getFontFaceVariantName( face ) {
+	const weightName = FONT_WEIGHTS[ face.fontWeight ] || face.fontWeight;
+	const styleName =
+		face.fontStyle === 'normal'
+			? ''
+			: FONT_STYLES[ face.fontStyle ] || face.fontStyle;
+	return `${ weightName } ${ styleName }`;
+}
+
+export function mergeFontFaces( existing = [], incoming = [] ) {
+	const map = new Map();
+	for ( const face of existing ) {
+		map.set( `${ face.fontWeight }${ face.fontStyle }`, face );
+	}
+	for ( const face of incoming ) {
+		// This will overwrite if the src already exists, keeping it unique.
+		map.set( `${ face.fontWeight }${ face.fontStyle }`, face );
+	}
+	return Array.from( map.values() );
+}
+
+export function mergeFontFamilies( existing = [], incoming = [] ) {
+	const map = new Map();
+	// Add the existing array to the map.
+	for ( const font of existing ) {
+		map.set( font.slug, { ...font } );
+	}
+	// Add the incoming array to the map, overwriting existing values excepting fontFace that need to be merged.
+	for ( const font of incoming ) {
+		if ( map.has( font.slug ) ) {
+			const { fontFace: incomingFontFaces, ...restIncoming } = font;
+			const existingFont = map.get( font.slug );
+			// Merge the fontFaces existing with the incoming fontFaces.
+			const mergedFontFaces = mergeFontFaces(
+				existingFont.fontFace,
+				incomingFontFaces
+			);
+			// Except for the fontFace key all the other keys are overwritten with the incoming values.
+			map.set( font.slug, {
+				...restIncoming,
+				fontFace: mergedFontFaces,
+			} );
+		} else {
+			map.set( font.slug, { ...font } );
+		}
+	}
+	return Array.from( map.values() );
+}
+
+/*
+ * Loads the font face from a URL and adds it to the browser.
+ * It also adds it to the iframe document.
+ */
+export async function loadFontFaceInBrowser( fontFace, source, addTo = 'all' ) {
+	let dataSource;
+
+	if ( typeof source === 'string' ) {
+		dataSource = `url(${ source })`;
+		// eslint-disable-next-line no-undef
+	} else if ( source instanceof File ) {
+		dataSource = await source.arrayBuffer();
+	}
+
+	// eslint-disable-next-line no-undef
+	const newFont = new FontFace( fontFace.fontFamily, dataSource, {
+		style: fontFace.fontStyle,
+		weight: fontFace.fontWeight,
+	} );
+
+	const loadedFace = await newFont.load();
+
+	if ( addTo === 'document' || addTo === 'all' ) {
+		document.fonts.add( loadedFace );
+	}
+
+	if ( addTo === 'iframe' || addTo === 'all' ) {
+		const iframeDocument = document.querySelector(
+			'iframe[name="editor-canvas"]'
+		).contentDocument;
+		iframeDocument.fonts.add( loadedFace );
+	}
+}
+
+export function getDisplaySrcFromFontFace( input, urlPrefix ) {
+	let src;
+	if ( Array.isArray( input ) ) {
+		src = input[ 0 ];
+	} else {
+		src = input;
+	}
+	// If it is a theme font, we need to make the url absolute
+	if ( src.startsWith( 'file:.' ) && urlPrefix ) {
+		src = src.replace( 'file:.', urlPrefix );
+	}
+	if ( ! isUrlEncoded( src ) ) {
+		src = encodeURI( src );
+	}
+	return src;
+}
+
+function findNearest( input, numbers ) {
+	// If the numbers array is empty, return null
+	if ( numbers.length === 0 ) {
+		return null;
+	}
+	// Sort the array based on the absolute difference with the input
+	numbers.sort( ( a, b ) => Math.abs( input - a ) - Math.abs( input - b ) );
+	// Return the first element (which will be the nearest) from the sorted array
+	return numbers[ 0 ];
+}
+
+function extractFontWeights( fontFaces ) {
+	const result = [];
+
+	fontFaces.forEach( ( face ) => {
+		const weights = String( face.fontWeight ).split( ' ' );
+
+		if ( weights.length === 2 ) {
+			const start = parseInt( weights[ 0 ] );
+			const end = parseInt( weights[ 1 ] );
+
+			for ( let i = start; i <= end; i += 100 ) {
+				result.push( i );
+			}
+		} else if ( weights.length === 1 ) {
+			result.push( parseInt( weights[ 0 ] ) );
+		}
+	} );
+
+	return result;
+}
+
+export function getPreviewStyle( family ) {
+	const style = { fontFamily: family.fontFamily };
+
+	if ( ! Array.isArray( family.fontFace ) ) {
+		style.fontWeight = '400';
+		style.fontStyle = 'normal';
+		return style;
+	}
+
+	if ( family.fontFace ) {
+		//get all the font faces with normal style
+		const normalFaces = family.fontFace.filter(
+			( face ) => face.fontStyle.toLowerCase() === 'normal'
+		);
+		if ( normalFaces.length > 0 ) {
+			style.fontStyle = 'normal';
+			const normalWeights = extractFontWeights( normalFaces );
+			const nearestWeight = findNearest( 400, normalWeights );
+			style.fontWeight = String( nearestWeight ) || '400';
+		} else {
+			style.fontStyle =
+				( family.fontFace.length && family.fontFace[ 0 ].fontStyle ) ||
+				'normal';
+			style.fontWeight =
+				( family.fontFace.length &&
+					String( family.fontFace[ 0 ].fontWeight ) ) ||
+				'400';
+		}
+	}
+
+	return style;
+}
+
+export function makeFormDataFromFontFamilies( fontFamilies ) {
+	const formData = new FormData();
+	const newFontFamilies = fontFamilies.map( ( family, familyIndex ) => {
+		if ( family?.fontFace ) {
+			family.fontFace = family.fontFace.map( ( face, faceIndex ) => {
+				if ( face.file ) {
+					// Slugified file name because the it might contain spaces or characters treated differently on the server.
+					const fileId = `file-${ familyIndex }-${ faceIndex }`;
+					// Add the files to the formData
+					formData.append( fileId, face.file, face.file.name );
+					// remove the file object from the face object the file is referenced by the uploadedFile key
+					const { file, ...faceWithoutFileProperty } = face;
+					const newFace = {
+						...faceWithoutFileProperty,
+						uploadedFile: fileId,
+					};
+					return newFace;
+				}
+				return face;
+			} );
+		}
+		return family;
+	} );
+	formData.append( 'fontFamilies', JSON.stringify( newFontFamilies ) );
+	return formData;
+}

package/src/components/global-styles/font-library-modal/utils/make-families-from-faces.js

@@ -0,0 +1,15 @@
+export default function makeFamiliesFromFaces( fontFaces ) {
+	const fontFamiliesObject = fontFaces.reduce( ( acc, item ) => {
+		if ( ! acc[ item.fontFamily ] ) {
+			acc[ item.fontFamily ] = {
+				name: item.fontFamily,
+				fontFamily: item.fontFamily,
+				slug: item.fontFamily.replace( /\s+/g, '-' ).toLowerCase(),
+				fontFace: [],
+			};
+		}
+		acc[ item.fontFamily ].fontFace.push( item );
+		return acc;
+	}, {} );
+	return Object.values( fontFamiliesObject );
+}

package/src/components/global-styles/font-library-modal/utils/test/getDisplaySrcFromFontFace.spec.js

@@ -0,0 +1,53 @@
+/**
+ * Internal dependencies
+ */
+import { getDisplaySrcFromFontFace } from '../index';
+
+describe( 'getDisplaySrcFromFontFace', () => {
+	it( 'returns the first item when input is an array', () => {
+		const input = [
+			'http://example.com/font-asset-1.ttf',
+			'http://example.com/font-asset-2.ttf',
+		];
+		expect( getDisplaySrcFromFontFace( input ) ).toBe(
+			'http://example.com/font-asset-1.ttf'
+		);
+	} );
+
+	it( 'returns the input when it is a string', () => {
+		const input = 'http://example.com/font-asset-1.ttf';
+		expect( getDisplaySrcFromFontFace( input ) ).toBe(
+			'http://example.com/font-asset-1.ttf'
+		);
+	} );
+
+	it( 'makes URL absolute when it starts with file:. and urlPrefix is given', () => {
+		const input = 'file:./font1';
+		const urlPrefix = 'http://example.com';
+		expect( getDisplaySrcFromFontFace( input, urlPrefix ) ).toBe(
+			'http://example.com/font1'
+		);
+	} );
+
+	it( 'does not modify URL if it does not start with file:.', () => {
+		const input = [ 'http://some-other-place.com/font1' ];
+		const urlPrefix = 'http://example.com';
+		expect( getDisplaySrcFromFontFace( input, urlPrefix ) ).toBe(
+			'http://some-other-place.com/font1'
+		);
+	} );
+
+	it( 'encodes the URL if it is not encoded', () => {
+		const input = 'file:./assets/font one with spaces.ttf';
+		expect( getDisplaySrcFromFontFace( input ) ).toBe(
+			'file:./assets/font%20one%20with%20spaces.ttf'
+		);
+	} );
+
+	it( 'does not encode the URL if it is already encoded', () => {
+		const input = 'file:./font%20one';
+		expect( getDisplaySrcFromFontFace( input ) ).toBe(
+			'file:./font%20one'
+		);
+	} );
+} );

package/src/components/global-styles/font-library-modal/utils/test/getFontFaceVariantName.spec.js

@@ -0,0 +1,30 @@
+/**
+ * Internal dependencies
+ */
+import { getFontFaceVariantName } from '../index';
+
+describe( 'getFontFaceVariantName', () => {
+	it( 'should return "Normal" for fontWeight 400 and fontStyle "normal"', () => {
+		const face = { fontWeight: 400, fontStyle: 'normal' };
+		const result = getFontFaceVariantName( face );
+		expect( result ).toBe( 'Normal ' );
+	} );
+
+	it( 'should return "Bold Italic" for fontWeight 700 and fontStyle "italic"', () => {
+		const face = { fontWeight: 700, fontStyle: 'italic' };
+		const result = getFontFaceVariantName( face );
+		expect( result ).toBe( 'Bold Italic' );
+	} );
+
+	it( 'should return the numerical weight when fontWeight is not recognized', () => {
+		const face = { fontWeight: 150, fontStyle: 'normal' };
+		const result = getFontFaceVariantName( face );
+		expect( result ).toBe( '150 ' );
+	} );
+
+	it( 'should return the raw style when fontStyle is not recognized', () => {
+		const face = { fontWeight: 400, fontStyle: 'oblique' };
+		const result = getFontFaceVariantName( face );
+		expect( result ).toBe( 'Normal oblique' );
+	} );
+} );