@wordpress/global-styles-ui 1.1.0

package/src/font-library-modal/library-font-details.tsx

@@ -0,0 +1,46 @@
+/**
+ * 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';
+import type { FontFamily } from './types';
+
+function LibraryFontDetails( { font }: { font: FontFamily } ) {
+	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/font-library-modal/library-font-variant.tsx

@@ -0,0 +1,67 @@
+/**
+ * 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';
+import type { FontFace, FontFamily } from './types';
+
+function LibraryFontVariant( {
+	face,
+	font,
+}: {
+	face: FontFace;
+	font: FontFamily;
+} ) {
+	const { isFontActivated, toggleActivateFont } =
+		useContext( FontLibraryContext );
+
+	const isInstalled =
+		( font?.fontFace?.length ?? 0 ) > 0
+			? isFontActivated(
+					font.slug,
+					face.fontStyle,
+					face.fontWeight,
+					font.source
+			  )
+			: isFontActivated( font.slug, undefined, undefined, font.source );
+
+	const handleToggleActivation = () => {
+		if ( ( font?.fontFace?.length ?? 0 ) > 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/font-library-modal/resolvers.tsx

@@ -0,0 +1,100 @@
+/**
+ * WordPress dependencies
+ */
+// The font library modal is pre-existent in Gutenberg
+// It needs to be refactored to move all the API calls to core-data.
+// eslint-disable-next-line no-restricted-imports
+import apiFetch from '@wordpress/api-fetch';
+
+/**
+ * Internal dependencies
+ */
+import type {
+	CollectionFontFace,
+	CollectionFontFamily,
+	FontCollection,
+	FontFace,
+} from './types';
+
+const FONT_FAMILIES_URL = '/wp/v2/font-families';
+const FONT_COLLECTIONS_URL = '/wp/v2/font-collections';
+
+export async function fetchInstallFontFamily( data: FormData ) {
+	const config = {
+		path: FONT_FAMILIES_URL,
+		method: 'POST',
+		body: data,
+	};
+	const response: CollectionFontFamily = await apiFetch( config );
+	return {
+		id: response.id as string,
+		...response.font_family_settings,
+		fontFace: [],
+	};
+}
+
+export async function fetchInstallFontFace(
+	fontFamilyId: string,
+	data: FormData
+): Promise< FontFace > {
+	const config = {
+		path: `${ FONT_FAMILIES_URL }/${ fontFamilyId }/font-faces`,
+		method: 'POST',
+		body: data,
+	};
+	const response = ( await apiFetch( config ) ) as CollectionFontFace;
+	return {
+		id: response.id,
+		...response.font_face_settings,
+	};
+}
+
+export async function fetchGetFontFamilyBySlug( slug: string ) {
+	const config = {
+		path: `${ FONT_FAMILIES_URL }?slug=${ slug }&_embed=true`,
+		method: 'GET',
+	};
+	const response = ( await apiFetch( config ) ) as
+		| CollectionFontFamily[]
+		| undefined;
+	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: string
+): Promise< {
+	deleted: boolean;
+} > {
+	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 ) ) as FontCollection[];
+}
+
+export async function fetchFontCollection( id: string ) {
+	const config = {
+		path: `${ FONT_COLLECTIONS_URL }/${ id }`,
+		method: 'GET',
+	};
+	return ( await apiFetch( config ) ) as FontCollection;
+}

package/src/font-library-modal/style.scss

@@ -0,0 +1,222 @@
+@use "@wordpress/base-styles/mixins";
+@use "@wordpress/base-styles/variables";
+@use "@wordpress/base-styles/colors";
+
+// 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 mixins.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: variables.$font-weight-medium;
+		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: variables.$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:
+			variables.$header-height + variables.$grid-unit-15 +
+			variables.$grid-unit-60;
+	}
+}
+
+.font-library-modal__footer {
+	border-top: 1px solid colors.$gray-300;
+	margin: 0 #{variables.$grid-unit-40 * -1} #{variables.$grid-unit-40 * -1};
+	padding: variables.$grid-unit-20 variables.$grid-unit-40;
+	position: absolute;
+	bottom: variables.$grid-unit-40;
+	width: 100%;
+	height: $footer-height;
+	background-color: colors.$white;
+}
+
+.font-library-modal__category-select {
+	min-width: 40%;
+}
+
+.font-library-modal__page-selection {
+	font-size: 11px;
+	font-weight: variables.$font-weight-medium;
+	text-transform: uppercase;
+
+	@include mixins.break-small() {
+		.font-library-modal__page-selection-trigger {
+			font-size: 11px !important;
+			font-weight: variables.$font-weight-medium;
+		}
+	}
+}
+
+.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 {
+	list-style: none;
+	padding: 0;
+	margin-top: 0;
+	margin-bottom: 0;
+}
+
+.font-library-modal__fonts-list-item {
+	margin-bottom: 0;
+}
+
+.font-library-modal__font-card {
+	border: variables.$border-width solid colors.$gray-300;
+	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: variables.$grid-unit-20;
+	margin-top: -1px; /* To collapse the margin with the previous element */
+
+	background-color: colors.$gray-100;
+
+	&:hover {
+		background-color: colors.$gray-100;
+	}
+
+	.font-library-modal__font-card__name {
+		font-weight: bold;
+	}
+
+	.font-library-modal__font-card__count {
+		color: colors.$gray-700;
+	}
+
+	.font-library-modal__font-variant_demo-image {
+		display: block;
+		height: variables.$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__tablist-container {
+	position: sticky;
+	top: 0;
+	border-bottom: 1px solid colors.$gray-300;
+	background: colors.$white;
+	margin: 0 #{variables.$grid-unit-40 * -1};
+	padding: 0 variables.$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: variables.$grid-unit-80 * 4 !important; // 256px
+
+	width: 100%;
+}
+
+button.font-library-modal__upload-area {
+	background-color: colors.$gray-100;
+}
+
+.font-library-modal__local-fonts {
+	margin: 0 auto;
+	width: 80%;
+
+	.font-library-modal__upload-area__text {
+		color: colors.$gray-700;
+	}
+}
+
+.font-library__google-fonts-confirm {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	margin-top: variables.$grid-unit-80;
+
+	p {
+		line-height: variables.$default-line-height;
+	}
+
+	h2 {
+		font-size: 1.2rem;
+		font-weight: 400;
+	}
+
+	.components-card {
+		padding: variables.$grid-unit-20;
+		width: 400px;
+	}
+
+	.components-button {
+		width: 100%;
+		justify-content: center;
+	}
+}
+
+.font-library-modal__select-all {
+	padding:
+		variables.$grid-unit-20 variables.$grid-unit-20
+		variables.$grid-unit-20 variables.$grid-unit-20 +
+		variables.$border-width;
+
+	.components-checkbox-control__label {
+		padding-left: variables.$grid-unit-20;
+	}
+}

package/src/font-library-modal/types.ts

@@ -0,0 +1,176 @@
+/**
+ * WordPress dependencies
+ */
+import type { FontFamilyPreset } from '@wordpress/global-styles-engine';
+
+export interface CollectionFontFace {
+	id: string;
+	font_face_settings: FontFace;
+}
+
+export interface FontFace {
+	fontFamily: string;
+	fontStyle?: string;
+	fontWeight?: string | number;
+	src?: string | string[];
+	preview?: string;
+	file?: File | File[];
+	fake?: boolean;
+	id?: string;
+	fontDisplay?: string;
+	fontStretch?: string;
+	fontVariant?: string;
+	fontFeatureSettings?: string;
+	fontVariationSettings?: string;
+	unicodeRange?: string;
+}
+
+export interface CollectionFontFamily {
+	id: string;
+	font_family_settings: FontFamily;
+	categories?: string[];
+	_embedded?: {
+		font_faces?: CollectionFontFace[];
+	};
+}
+
+export interface FontFamily {
+	name: string;
+	slug: string;
+	fontFamily: string;
+	fontFace?: FontFace[];
+	preview?: string;
+	id?: string;
+	source?: string;
+	version?: string;
+	author?: string;
+	license?: string;
+	description?: string;
+	tags?: string[];
+	variants?: FontFace[];
+	category?: string;
+}
+
+export interface FontCollection {
+	id: string;
+	slug: string;
+	name: string;
+	description?: string;
+	font_families?: CollectionFontFamily[];
+	categories?: {
+		slug: string;
+		name: string;
+	}[];
+}
+
+export interface FontLibraryState {
+	isInstalling: boolean;
+	fontFamilies: Record< string, FontFamilyPreset[] >;
+	notice?: {
+		type: 'success' | 'error' | 'info';
+		message: string;
+	};
+	loadFontFaceAsset: ( fontFace: FontFace ) => Promise< void >;
+	installFonts: ( fonts: FontFamily[] ) => Promise< void >;
+	uninstallFontFamily: ( fontFamily: FontFamily ) => Promise< {
+		deleted: boolean;
+	} >;
+	refreshLibrary: () => void;
+	// Additional properties found in the codebase
+	baseCustomFonts: FontFamily[];
+	modalTabOpen: string;
+	setModalTabOpen: ( tab: string ) => void;
+	handleSetLibraryFontSelected: ( font?: FontFamily ) => void;
+	libraryFontSelected?: FontFamily;
+	isFontActivated: (
+		slug: string,
+		style?: string,
+		weight?: string | number,
+		source?: string
+	) => boolean;
+	getFontFacesActivated: ( slug: string, source?: string ) => string[];
+	toggleActivateFont: ( font: FontFamily, face?: FontFace ) => void;
+	getAvailableFontsOutline: (
+		availableFontFamilies: FontFamily[]
+	) => Record< string, string[] >;
+	saveFontFamilies: (
+		fonts:
+			| FontFamilyPreset[]
+			| Record< string, FontFamilyPreset[] >
+			| undefined
+	) => Promise< void >;
+	isResolvingLibrary: boolean;
+	collections: FontCollection[];
+	getFontCollection: ( slug: string ) => Promise< FontCollection | void >;
+}
+
+export interface FontDemoProps {
+	font: FontFamily | FontFace;
+	text?: string;
+	onClick?: () => void;
+}
+
+export interface FontCardProps {
+	font: FontFamily;
+	onClick?: () => void;
+	variantsText?: string;
+}
+
+export interface FontVariantProps {
+	fontFace: FontFace;
+	fontFamily: FontFamily;
+	isSelected?: boolean;
+	onClick?: () => void;
+}
+
+export interface CollectionFontVariantProps {
+	face: FontFace;
+	font: FontFamily;
+	handleToggleVariant: ( font: FontFamily, face?: FontFace ) => void;
+	selected: boolean;
+}
+
+export interface FontUploadResult {
+	successes: FontFace[];
+	errors: Array< {
+		data: FormData;
+		message: string;
+	} >;
+}
+
+export interface GoogleFontsAPIResponse {
+	items: Array< {
+		family: string;
+		variants: string[];
+		subsets: string[];
+		version: string;
+		lastModified: string;
+		files: Record< string, string >;
+		category: string;
+		kind: string;
+		menu: string;
+	} >;
+}
+
+export type FontWeight =
+	| '100'
+	| '200'
+	| '300'
+	| '400'
+	| '500'
+	| '600'
+	| '700'
+	| '800'
+	| '900';
+export type FontStyle = 'normal' | 'italic';
+export type FontDisplay = 'auto' | 'block' | 'swap' | 'fallback' | 'optional';
+export type FontStretch =
+	| 'normal'
+	| 'ultra-condensed'
+	| 'extra-condensed'
+	| 'condensed'
+	| 'semi-condensed'
+	| 'semi-expanded'
+	| 'expanded'
+	| 'extra-expanded'
+	| 'ultra-expanded';