@wordpress/global-styles-ui 1.1.0

package/src/font-library-modal/utils/toggleFont.ts

@@ -0,0 +1,109 @@
+/**
+ * Toggles the activation of a given font or font variant within a list of custom fonts.
+ *
+ * - If only the font is provided (without face), the entire font family's activation is toggled.
+ * - If both font and face are provided, the activation of the specific font variant is toggled.
+ *
+ * @param {Object} font            - The font to be toggled.
+ * @param {string} font.slug       - The unique identifier for the font.
+ * @param {Array}  [font.fontFace] - The list of font variants (faces) associated with the font.
+ *
+ * @param {Object} [face]          - The specific font variant to be toggled.
+ * @param {string} face.fontWeight - The weight of the font variant.
+ * @param {string} face.fontStyle  - The style of the font variant.
+ *
+ * @param {Array}  initialfonts    - The initial list of custom fonts.
+ *
+ * @return {Array} - The updated list of custom fonts with the font/font variant toggled.
+ *
+ * @example
+ * const customFonts = [
+ *     { slug: 'roboto', fontFace: [{ fontWeight: '400', fontStyle: 'normal' }] }
+ * ];
+ *
+ * toggleFont({ slug: 'roboto' }, null, customFonts);
+ * // This will remove 'roboto' from customFonts
+ *
+ * toggleFont({ slug: 'roboto' }, { fontWeight: '400', fontStyle: 'normal' }, customFonts);
+ * // This will remove the specified face from 'roboto' in customFonts
+ *
+ * toggleFont({ slug: 'roboto' }, { fontWeight: '500', fontStyle: 'normal' }, customFonts);
+ * // This will add the specified face to 'roboto' in customFonts
+ */
+/**
+ * Internal dependencies
+ */
+import type { FontFamily, FontFace } from '../types';
+
+export function toggleFont(
+	font: FontFamily,
+	face?: FontFace,
+	initialfonts: FontFamily[] = []
+): FontFamily[] {
+	// Helper to check if a font is activated based on its slug
+	const isFontActivated = ( f: FontFamily ): boolean => f.slug === font.slug;
+
+	// Helper to get the activated font from a list of fonts
+	const getActivatedFont = ( fonts: FontFamily[] ): FontFamily | undefined =>
+		fonts.find( isFontActivated );
+
+	// Toggle the activation status of an entire font family
+	const toggleEntireFontFamily = (
+		activatedFont: FontFamily | undefined
+	): FontFamily[] => {
+		if ( ! activatedFont ) {
+			// If the font is not active, activate the entire font family
+			return [ ...initialfonts, font ];
+		}
+		// If the font is already active, deactivate the entire font family
+		return initialfonts.filter(
+			( f: FontFamily ) => ! isFontActivated( f )
+		);
+	};
+
+	// Toggle the activation status of a specific font variant
+	const toggleFontVariant = (
+		activatedFont: FontFamily | undefined
+	): FontFamily[] => {
+		const isFaceActivated = ( f: FontFace ): boolean =>
+			f.fontWeight === face!.fontWeight &&
+			f.fontStyle === face!.fontStyle;
+
+		if ( ! activatedFont ) {
+			// If the font family is not active, activate the font family with the font variant
+			return [ ...initialfonts, { ...font, fontFace: [ face! ] } ];
+		}
+
+		let newFontFaces = activatedFont.fontFace || [];
+
+		if ( newFontFaces.find( isFaceActivated ) ) {
+			// If the font variant is active, deactivate it
+			newFontFaces = newFontFaces.filter(
+				( f: FontFace ) => ! isFaceActivated( f )
+			);
+		} else {
+			// If the font variant is not active, activate it
+			newFontFaces = [ ...newFontFaces, face! ];
+		}
+
+		// If there are no more font faces, deactivate the font family
+		if ( newFontFaces.length === 0 ) {
+			return initialfonts.filter(
+				( f: FontFamily ) => ! isFontActivated( f )
+			);
+		}
+
+		// Return updated fonts list with toggled font variant
+		return initialfonts.map( ( f: FontFamily ) =>
+			isFontActivated( f ) ? { ...f, fontFace: newFontFaces } : f
+		);
+	};
+
+	const activatedFont = getActivatedFont( initialfonts );
+
+	if ( ! face ) {
+		return toggleEntireFontFamily( activatedFont );
+	}
+
+	return toggleFontVariant( activatedFont );
+}

package/src/font-sizes/confirm-delete-font-size-dialog.tsx

@@ -0,0 +1,51 @@
+/**
+ * WordPress dependencies
+ */
+import { __experimentalConfirmDialog as ConfirmDialog } from '@wordpress/components';
+import { __, sprintf } from '@wordpress/i18n';
+import type { FontSize } from '@wordpress/global-styles-engine';
+
+interface ConfirmDeleteFontSizeDialogProps {
+	fontSize: FontSize;
+	isOpen: boolean;
+	toggleOpen: () => void;
+	handleRemoveFontSize: ( fontSize: FontSize ) => void;
+}
+
+function ConfirmDeleteFontSizeDialog( {
+	fontSize,
+	isOpen,
+	toggleOpen,
+	handleRemoveFontSize,
+}: ConfirmDeleteFontSizeDialogProps ) {
+	const handleConfirm = async () => {
+		toggleOpen();
+		handleRemoveFontSize( fontSize );
+	};
+
+	const handleCancel = () => {
+		toggleOpen();
+	};
+
+	return (
+		<ConfirmDialog
+			isOpen={ isOpen }
+			cancelButtonText={ __( 'Cancel' ) }
+			confirmButtonText={ __( 'Delete' ) }
+			onCancel={ handleCancel }
+			onConfirm={ handleConfirm }
+			size="medium"
+		>
+			{ fontSize &&
+				sprintf(
+					/* translators: %s: Name of the font size preset. */
+					__(
+						'Are you sure you want to delete "%s" font size preset?'
+					),
+					fontSize.name
+				) }
+		</ConfirmDialog>
+	);
+}
+
+export default ConfirmDeleteFontSizeDialog;

package/src/font-sizes/confirm-reset-font-sizes-dialog.tsx

@@ -0,0 +1,45 @@
+/**
+ * WordPress dependencies
+ */
+import { __experimentalConfirmDialog as ConfirmDialog } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+
+interface ConfirmResetFontSizesDialogProps {
+	text: string;
+	confirmButtonText: string;
+	isOpen: boolean;
+	toggleOpen: () => void;
+	onConfirm: () => void;
+}
+
+function ConfirmResetFontSizesDialog( {
+	text,
+	confirmButtonText,
+	isOpen,
+	toggleOpen,
+	onConfirm,
+}: ConfirmResetFontSizesDialogProps ) {
+	const handleConfirm = async () => {
+		toggleOpen();
+		onConfirm();
+	};
+
+	const handleCancel = () => {
+		toggleOpen();
+	};
+
+	return (
+		<ConfirmDialog
+			isOpen={ isOpen }
+			cancelButtonText={ __( 'Cancel' ) }
+			confirmButtonText={ confirmButtonText }
+			onCancel={ handleCancel }
+			onConfirm={ handleConfirm }
+			size="medium"
+		>
+			{ text }
+		</ConfirmDialog>
+	);
+}
+
+export default ConfirmResetFontSizesDialog;

package/src/font-sizes/font-size-preview.tsx

@@ -0,0 +1,47 @@
+/**
+ * WordPress dependencies
+ */
+// @ts-expect-error: Not typed yet.
+import { getComputedFluidTypographyValue } from '@wordpress/block-editor';
+import { __ } from '@wordpress/i18n';
+import type { FontSize } from '@wordpress/global-styles-engine';
+
+/**
+ * Internal dependencies
+ */
+import { useStyle } from '../hooks';
+
+interface FontSizePreviewProps {
+	fontSize: FontSize;
+}
+
+function FontSizePreview( { fontSize }: FontSizePreviewProps ) {
+	const [ font ] = useStyle< { fontFamily?: string } >( 'typography' );
+
+	const input =
+		typeof fontSize?.fluid === 'object' &&
+		fontSize?.fluid?.min &&
+		fontSize?.fluid?.max
+			? {
+					minimumFontSize: fontSize.fluid.min,
+					maximumFontSize: fontSize.fluid.max,
+			  }
+			: {
+					fontSize: fontSize.size,
+			  };
+
+	const computedFontSize = getComputedFluidTypographyValue( input );
+	return (
+		<div
+			className="global-styles-ui-typography-preview"
+			style={ {
+				fontSize: computedFontSize,
+				fontFamily: font?.fontFamily ?? 'serif',
+			} }
+		>
+			{ __( 'Aa' ) }
+		</div>
+	);
+}
+
+export default FontSizePreview;

package/src/font-sizes/font-size.tsx

@@ -0,0 +1,289 @@
+/**
+ * WordPress dependencies
+ */
+import { __, sprintf } from '@wordpress/i18n';
+import {
+	__experimentalSpacer as Spacer,
+	useNavigator,
+	__experimentalView as View,
+	__experimentalHStack as HStack,
+	__experimentalVStack as VStack,
+	privateApis as componentsPrivateApis,
+	Button,
+	FlexItem,
+	ToggleControl,
+} from '@wordpress/components';
+import { moreVertical } from '@wordpress/icons';
+import { useState, useEffect } from '@wordpress/element';
+import type {
+	TypographyPreset,
+	FluidTypographySettings,
+	FontSize,
+	FluidTypographyConfig,
+} from '@wordpress/global-styles-engine';
+
+/**
+ * Internal dependencies
+ */
+import { ScreenHeader } from '../screen-header';
+import FontSizePreview from './font-size-preview';
+import ConfirmDeleteFontSizeDialog from './confirm-delete-font-size-dialog';
+import RenameFontSizeDialog from './rename-font-size-dialog';
+import { SizeControl } from '../size-control';
+import { useSetting } from '../hooks';
+import { unlock } from '../lock-unlock';
+
+const { Menu } = unlock( componentsPrivateApis );
+
+function FontSize() {
+	const [ isDeleteConfirmOpen, setIsDeleteConfirmOpen ] = useState( false );
+	const [ isRenameDialogOpen, setIsRenameDialogOpen ] = useState( false );
+
+	const {
+		params: { origin, slug },
+		goBack,
+	} = useNavigator();
+
+	const [ fontSizes, setFontSizes ] = useSetting<
+		Record< string, TypographyPreset[] > | undefined
+	>( 'typography.fontSizes' );
+	const [ globalFluid ] = useSetting<
+		boolean | FluidTypographySettings | undefined
+	>( 'typography.fluid' );
+
+	// Get the font sizes from the origin, default to empty array.
+	const sizes = fontSizes?.[ origin as string ] ?? [];
+
+	// Get the font size by slug.
+	const fontSize: FontSize | undefined = sizes.find(
+		( size ) => size.slug === slug
+	);
+
+	// Navigate to the font sizes list if the font size is not available.
+	useEffect( () => {
+		if ( !! slug && ! fontSize ) {
+			goBack();
+		}
+	}, [ slug, fontSize, goBack ] );
+
+	if ( ! origin || ! slug || ! fontSize ) {
+		return null;
+	}
+
+	// Whether the font size is fluid. If not defined, use the global fluid value of the theme.
+	const isFluid =
+		fontSize?.fluid !== undefined ? !! fontSize.fluid : !! globalFluid;
+
+	// Whether custom fluid values are used.
+	const isCustomFluid = typeof fontSize?.fluid === 'object';
+
+	const handleNameChange = ( value: string ) => {
+		updateFontSize( 'name', value );
+	};
+
+	const handleFontSizeChange = ( value: string | undefined ) => {
+		updateFontSize( 'size', value );
+	};
+
+	const handleFluidChange = ( value: boolean ) => {
+		updateFontSize( 'fluid', value );
+	};
+
+	const handleCustomFluidValues = ( value: boolean ) => {
+		if ( value ) {
+			// If custom values are used, init the values with the current ones.
+			updateFontSize( 'fluid', {
+				min: fontSize.size,
+				max: fontSize.size,
+			} );
+		} else {
+			// If custom fluid values are disabled, set fluid to true.
+			updateFontSize( 'fluid', true );
+		}
+	};
+
+	const handleMinChange = ( value: string | undefined ) => {
+		const fluid: FluidTypographyConfig =
+			typeof fontSize.fluid === 'object' ? fontSize.fluid : {};
+		updateFontSize( 'fluid', { ...fluid, min: value } );
+	};
+
+	const handleMaxChange = ( value: string | undefined ) => {
+		const fluid: FluidTypographyConfig =
+			typeof fontSize.fluid === 'object' ? fontSize.fluid : {};
+		updateFontSize( 'fluid', { ...fluid, max: value } );
+	};
+
+	const updateFontSize = ( key: string, value: any ) => {
+		const newFontSizes = sizes.map( ( size ) => {
+			if ( size.slug === slug ) {
+				return { ...size, [ key ]: value }; // Create a new object with updated key
+			}
+			return size;
+		} );
+
+		setFontSizes( {
+			...fontSizes,
+			[ origin as string ]: newFontSizes,
+		} );
+	};
+
+	const handleRemoveFontSize = () => {
+		const newFontSizes = sizes.filter( ( size ) => size.slug !== slug );
+		setFontSizes( {
+			...fontSizes,
+			[ origin as string ]: newFontSizes,
+		} );
+	};
+
+	const toggleDeleteConfirm = () => {
+		setIsDeleteConfirmOpen( ! isDeleteConfirmOpen );
+	};
+
+	const toggleRenameDialog = () => {
+		setIsRenameDialogOpen( ! isRenameDialogOpen );
+	};
+
+	return (
+		<>
+			<ConfirmDeleteFontSizeDialog
+				fontSize={ fontSize }
+				isOpen={ isDeleteConfirmOpen }
+				toggleOpen={ toggleDeleteConfirm }
+				handleRemoveFontSize={ handleRemoveFontSize }
+			/>
+
+			{ isRenameDialogOpen && (
+				<RenameFontSizeDialog
+					fontSize={ fontSize }
+					toggleOpen={ toggleRenameDialog }
+					handleRename={ handleNameChange }
+				/>
+			) }
+
+			<VStack spacing={ 4 }>
+				<HStack justify="space-between" alignment="flex-start">
+					<ScreenHeader
+						title={ fontSize.name }
+						description={ sprintf(
+							/* translators: %s: font size preset name. */
+							__( 'Manage the font size %s.' ),
+							fontSize.name
+						) }
+					/>
+					{ origin === 'custom' && (
+						<FlexItem>
+							<Spacer
+								marginTop={ 3 }
+								marginBottom={ 0 }
+								paddingX={ 4 }
+							>
+								<Menu>
+									<Menu.TriggerButton
+										render={
+											<Button
+												size="small"
+												icon={ moreVertical }
+												label={ __(
+													'Font size options'
+												) }
+											/>
+										}
+									/>
+									<Menu.Popover>
+										<Menu.Item
+											onClick={ toggleRenameDialog }
+										>
+											<Menu.ItemLabel>
+												{ __( 'Rename' ) }
+											</Menu.ItemLabel>
+										</Menu.Item>
+										<Menu.Item
+											onClick={ toggleDeleteConfirm }
+										>
+											<Menu.ItemLabel>
+												{ __( 'Delete' ) }
+											</Menu.ItemLabel>
+										</Menu.Item>
+									</Menu.Popover>
+								</Menu>
+							</Spacer>
+						</FlexItem>
+					) }
+				</HStack>
+
+				<View>
+					<Spacer
+						paddingX={ 4 }
+						marginBottom={ 0 }
+						paddingBottom={ 6 }
+					>
+						<VStack spacing={ 4 }>
+							<FlexItem>
+								<FontSizePreview fontSize={ fontSize } />
+							</FlexItem>
+
+							<SizeControl
+								label={ __( 'Size' ) }
+								value={
+									! isCustomFluid && fontSize.size
+										? String( fontSize.size )
+										: ''
+								}
+								onChange={ handleFontSizeChange }
+								disabled={ isCustomFluid }
+							/>
+
+							<ToggleControl
+								label={ __( 'Fluid typography' ) }
+								help={ __(
+									'Scale the font size dynamically to fit the screen or viewport.'
+								) }
+								checked={ isFluid }
+								onChange={ handleFluidChange }
+								__nextHasNoMarginBottom
+							/>
+
+							{ isFluid && (
+								<ToggleControl
+									label={ __( 'Custom fluid values' ) }
+									help={ __(
+										'Set custom min and max values for the fluid font size.'
+									) }
+									checked={ isCustomFluid }
+									onChange={ handleCustomFluidValues }
+									__nextHasNoMarginBottom
+								/>
+							) }
+
+							{ isCustomFluid && (
+								<>
+									<SizeControl
+										label={ __( 'Minimum' ) }
+										value={
+											typeof fontSize?.fluid === 'object'
+												? fontSize.fluid?.min
+												: undefined
+										}
+										onChange={ handleMinChange }
+									/>
+									<SizeControl
+										label={ __( 'Maximum' ) }
+										value={
+											typeof fontSize?.fluid === 'object'
+												? fontSize.fluid?.max
+												: undefined
+										}
+										onChange={ handleMaxChange }
+									/>
+								</>
+							) }
+						</VStack>
+					</Spacer>
+				</View>
+			</VStack>
+		</>
+	);
+}
+
+export default FontSize;

package/src/font-sizes/font-sizes-count.tsx

@@ -0,0 +1,37 @@
+/**
+ * WordPress dependencies
+ */
+import { __, isRTL } from '@wordpress/i18n';
+import {
+	__experimentalItemGroup as ItemGroup,
+	__experimentalVStack as VStack,
+	__experimentalHStack as HStack,
+	FlexItem,
+} from '@wordpress/components';
+import { Icon, chevronLeft, chevronRight } from '@wordpress/icons';
+
+/**
+ * Internal dependencies
+ */
+import { Subtitle } from '../subtitle';
+import { NavigationButtonAsItem } from '../navigation-button';
+
+function FontSizes() {
+	return (
+		<VStack spacing={ 2 }>
+			<HStack justify="space-between">
+				<Subtitle level={ 3 }>{ __( 'Font Sizes' ) }</Subtitle>
+			</HStack>
+			<ItemGroup isBordered isSeparated>
+				<NavigationButtonAsItem path="/typography/font-sizes">
+					<HStack direction="row">
+						<FlexItem>{ __( 'Font size presets' ) }</FlexItem>
+						<Icon icon={ isRTL() ? chevronLeft : chevronRight } />
+					</HStack>
+				</NavigationButtonAsItem>
+			</ItemGroup>
+		</VStack>
+	);
+}
+
+export default FontSizes;