@wordpress/global-styles-ui 1.1.0

package/src/font-families.tsx

@@ -0,0 +1,127 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import {
+	__experimentalText as Text,
+	__experimentalItemGroup as ItemGroup,
+	__experimentalVStack as VStack,
+	__experimentalHStack as HStack,
+	Button,
+} from '@wordpress/components';
+import { settings } from '@wordpress/icons';
+import { useContext } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { Subtitle } from './subtitle';
+import { useSetting } from './hooks';
+import FontLibraryProvider, {
+	FontLibraryContext,
+} from './font-library-modal/context';
+import FontLibraryModal from './font-library-modal';
+import FontFamilyItem from './font-family-item';
+import { setUIValuesNeeded } from './font-library-modal/utils';
+
+/**
+ * Maps the fonts with the source, if available.
+ *
+ * @param {Array}  fonts  The fonts to map.
+ * @param {string} source The source of the fonts.
+ * @return {Array} The mapped fonts.
+ */
+function mapFontsWithSource( fonts: any[], source: string ) {
+	return fonts
+		? fonts.map( ( f ) => setUIValuesNeeded( f, { source } ) )
+		: [];
+}
+
+function FontFamiliesInner() {
+	const { baseCustomFonts, modalTabOpen, setModalTabOpen } =
+		useContext( FontLibraryContext );
+	const [ fontFamilies ] = useSetting( 'typography.fontFamilies' );
+	const [ baseFontFamilies ] = useSetting(
+		'typography.fontFamilies',
+		undefined,
+		'base'
+	);
+	const themeFonts = mapFontsWithSource( fontFamilies?.theme, 'theme' );
+	const customFonts = mapFontsWithSource( fontFamilies?.custom, 'custom' );
+	const activeFonts = [ ...themeFonts, ...customFonts ].sort( ( a, b ) =>
+		a.name.localeCompare( b.name )
+	);
+	const hasFonts = 0 < activeFonts.length;
+	const hasInstalledFonts =
+		hasFonts ||
+		baseFontFamilies?.theme?.length > 0 ||
+		( baseCustomFonts?.length ?? 0 ) > 0;
+
+	return (
+		<>
+			{ !! modalTabOpen && (
+				<FontLibraryModal
+					onRequestClose={ () => setModalTabOpen?.( '' ) }
+					defaultTabId={ modalTabOpen }
+				/>
+			) }
+
+			<VStack spacing={ 2 }>
+				<HStack justify="space-between">
+					<Subtitle level={ 3 }>{ __( 'Fonts' ) }</Subtitle>
+					<Button
+						onClick={ () => setModalTabOpen?.( 'installed-fonts' ) }
+						label={ __( 'Manage fonts' ) }
+						icon={ settings }
+						size="small"
+					/>
+				</HStack>
+				{ activeFonts.length > 0 && (
+					<>
+						<ItemGroup size="large" isBordered isSeparated>
+							{ activeFonts.map( ( font ) => (
+								<FontFamilyItem
+									key={ font.slug }
+									font={ font }
+								/>
+							) ) }
+						</ItemGroup>
+					</>
+				) }
+				{ ! hasFonts && (
+					<>
+						<Text as="p">
+							{ hasInstalledFonts
+								? __( 'No fonts activated.' )
+								: __( 'No fonts installed.' ) }
+						</Text>
+						<Button
+							className="global-styles-ui-font-families__manage-fonts"
+							variant="secondary"
+							__next40pxDefaultSize
+							onClick={ () => {
+								setModalTabOpen?.(
+									hasInstalledFonts
+										? 'installed-fonts'
+										: 'upload-fonts'
+								);
+							} }
+						>
+							{ hasInstalledFonts
+								? __( 'Manage fonts' )
+								: __( 'Add fonts' ) }
+						</Button>
+					</>
+				) }
+			</VStack>
+		</>
+	);
+}
+
+export default function FontFamilies( { ...props } ) {
+	return (
+		<FontLibraryProvider>
+			<FontFamiliesInner { ...props } />
+		</FontLibraryProvider>
+	);
+}

package/src/font-family-item.tsx

@@ -0,0 +1,52 @@
+/**
+ * WordPress dependencies
+ */
+import { _n, sprintf } from '@wordpress/i18n';
+import {
+	__experimentalHStack as HStack,
+	__experimentalItem as Item,
+	FlexItem,
+} from '@wordpress/components';
+import { useContext } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { FontLibraryContext } from './font-library-modal/context';
+import { getFamilyPreviewStyle } from './font-library-modal/utils/preview-styles';
+import type { FontFamily } from './font-library-modal/types';
+
+interface FontFamilyItemProps {
+	font: FontFamily;
+}
+
+function FontFamilyItem( { font }: FontFamilyItemProps ) {
+	const { handleSetLibraryFontSelected, setModalTabOpen } =
+		useContext( FontLibraryContext );
+
+	const variantsCount = font?.fontFace?.length || 1;
+
+	const handleClick = () => {
+		handleSetLibraryFontSelected?.( font );
+		setModalTabOpen?.( 'installed-fonts' );
+	};
+
+	const previewStyle = getFamilyPreviewStyle( font );
+
+	return (
+		<Item onClick={ handleClick }>
+			<HStack justify="space-between">
+				<FlexItem style={ previewStyle }>{ font.name }</FlexItem>
+				<FlexItem className="global-styles-ui-screen-typography__font-variants-count">
+					{ sprintf(
+						/* translators: %d: Number of font variants. */
+						_n( '%d variant', '%d variants', variantsCount ),
+						variantsCount
+					) }
+				</FlexItem>
+			</HStack>
+		</Item>
+	);
+}
+
+export default FontFamilyItem;

package/src/font-library-modal/collection-font-variant.tsx

@@ -0,0 +1,52 @@
+/**
+ * WordPress dependencies
+ */
+import { useId } from '@wordpress/element';
+import { CheckboxControl, Flex } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import { getFontFaceVariantName } from './utils';
+import FontDemo from './font-demo';
+import type { CollectionFontVariantProps } from './types';
+
+function CollectionFontVariant( {
+	face,
+	font,
+	handleToggleVariant,
+	selected,
+}: CollectionFontVariantProps ) {
+	const handleToggleActivation = () => {
+		if ( font?.fontFace ) {
+			handleToggleVariant( font, face );
+			return;
+		}
+		handleToggleVariant( 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={ selected }
+					onChange={ handleToggleActivation }
+					__nextHasNoMarginBottom
+					id={ checkboxId }
+				/>
+				<label htmlFor={ checkboxId }>
+					<FontDemo
+						font={ face }
+						text={ displayName }
+						onClick={ handleToggleActivation }
+					/>
+				</label>
+			</Flex>
+		</div>
+	);
+}
+
+export default CollectionFontVariant;