@wordpress/edit-site 6.33.3 → 6.34.0

package/src/components/global-styles/font-library-modal/utils/test/sort-font-faces.js

@@ -1,74 +0,0 @@
-/**
- * Internal dependencies
- */
-import { sortFontFaces } from '../sort-font-faces';
-
-describe( 'sortFontFaces', () => {
-	it( 'should prioritize "normal" fontStyle and then sort by numeric fontWeight values', () => {
-		const input = [
-			{ fontStyle: 'normal', fontWeight: '500' },
-			{ fontStyle: 'normal', fontWeight: '400' },
-		];
-		const expected = [
-			{ fontStyle: 'normal', fontWeight: '400' },
-			{ fontStyle: 'normal', fontWeight: '500' },
-		];
-		expect( sortFontFaces( input ) ).toEqual( expected );
-	} );
-
-	it( 'should correctly sort named fontWeight values within the same fontStyle', () => {
-		const input = [
-			{ fontStyle: 'italic', fontWeight: 'bold' },
-			{ fontStyle: 'italic', fontWeight: 'normal' },
-		];
-		const expected = [
-			{ fontStyle: 'italic', fontWeight: 'normal' },
-			{ fontStyle: 'italic', fontWeight: 'bold' },
-		];
-		expect( sortFontFaces( input ) ).toEqual( expected );
-	} );
-
-	it( 'should prioritize fontStyle "normal" over other styles', () => {
-		const input = [
-			{ fontStyle: 'italic', fontWeight: '400' },
-			{ fontStyle: 'normal', fontWeight: '500' },
-		];
-		const expected = [
-			{ fontStyle: 'normal', fontWeight: '500' },
-			{ fontStyle: 'italic', fontWeight: '400' },
-		];
-		expect( sortFontFaces( input ) ).toEqual( expected );
-	} );
-
-	it( 'should sort other fontStyles alphabetically after "normal"', () => {
-		const input = [
-			{ fontStyle: 'oblique', fontWeight: '500' },
-			{ fontStyle: 'italic', fontWeight: '500' },
-		];
-		const expected = [
-			{ fontStyle: 'italic', fontWeight: '500' },
-			{ fontStyle: 'oblique', fontWeight: '500' },
-		];
-		expect( sortFontFaces( input ) ).toEqual( expected );
-	} );
-
-	it( 'should correctly handle multiple test cases', () => {
-		const input = [
-			{ fontStyle: 'oblique', fontWeight: '300' },
-			{ fontStyle: 'normal', fontWeight: '400' },
-			{ fontStyle: 'italic', fontWeight: '500' },
-			{ fontStyle: 'italic', fontWeight: 'bold' },
-			{ fontStyle: 'italic', fontWeight: '600 900' },
-			{ fontStyle: 'normal', fontWeight: '500' },
-		];
-		const expected = [
-			{ fontStyle: 'normal', fontWeight: '400' },
-			{ fontStyle: 'normal', fontWeight: '500' },
-			{ fontStyle: 'italic', fontWeight: '500' },
-			{ fontStyle: 'italic', fontWeight: '600 900' },
-			{ fontStyle: 'italic', fontWeight: 'bold' },
-			{ fontStyle: 'oblique', fontWeight: '300' },
-		];
-		expect( sortFontFaces( input ) ).toEqual( expected );
-	} );
-} );

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

@@ -1,141 +0,0 @@
-/**
- * Internal dependencies
- */
-import { toggleFont } from '../toggleFont';
-
-describe( 'toggleFont function', () => {
-	const initialCustomFonts = [
-		{
-			slug: 'font1',
-			fontFace: [
-				{ fontWeight: '400', fontStyle: 'normal' },
-				{ fontWeight: '700', fontStyle: 'italic' },
-			],
-		},
-	];
-
-	const newFont = { slug: 'font2', fontFace: [] };
-
-	// Basic Toggles
-	describe( 'Basic Toggles', () => {
-		it( 'should toggle the entire font family on/off', () => {
-			let updatedFonts = toggleFont( newFont, null, initialCustomFonts );
-			expect( updatedFonts ).toEqual( [
-				...initialCustomFonts,
-				newFont,
-			] );
-
-			updatedFonts = toggleFont( newFont, null, updatedFonts );
-			expect( updatedFonts ).toEqual( initialCustomFonts );
-		} );
-
-		it( 'should toggle a specific font face of an activated font family', () => {
-			const face = { fontWeight: '400', fontStyle: 'normal' };
-			let updatedFonts = toggleFont(
-				initialCustomFonts[ 0 ],
-				face,
-				initialCustomFonts
-			);
-			expect( updatedFonts[ 0 ].fontFace ).toEqual( [
-				{ fontWeight: '700', fontStyle: 'italic' },
-			] );
-
-			updatedFonts = toggleFont(
-				initialCustomFonts[ 0 ],
-				face,
-				updatedFonts
-			);
-			expect( updatedFonts[ 0 ].fontFace ).toEqual( [
-				{ fontWeight: '700', fontStyle: 'italic' },
-				{ fontWeight: '400', fontStyle: 'normal' },
-			] );
-		} );
-
-		it( 'should toggle a specific font face of a non-activated font family', () => {
-			const face = { fontWeight: '500', fontStyle: 'normal' };
-			const updatedFonts = toggleFont(
-				newFont,
-				face,
-				initialCustomFonts
-			);
-			expect( updatedFonts ).toEqual( [
-				...initialCustomFonts,
-				{ ...newFont, fontFace: [ face ] },
-			] );
-		} );
-	} );
-
-	// Edge Cases
-	describe( 'Edge Cases', () => {
-		it( 'should handle empty initial fonts', () => {
-			const updatedFonts = toggleFont( newFont, null, [] );
-			expect( updatedFonts ).toEqual( [ newFont ] );
-		} );
-
-		it( 'should deactivate font family when all font faces are deactivated', () => {
-			const face1 = { fontWeight: '400', fontStyle: 'normal' };
-			const face2 = { fontWeight: '700', fontStyle: 'italic' };
-			let updatedFonts = toggleFont(
-				initialCustomFonts[ 0 ],
-				face1,
-				initialCustomFonts
-			);
-			updatedFonts = toggleFont(
-				initialCustomFonts[ 0 ],
-				face2,
-				updatedFonts
-			);
-
-			expect( updatedFonts ).toEqual( [] );
-		} );
-
-		it( 'should not duplicate an already activated font face', () => {
-			const face = { fontWeight: '400', fontStyle: 'normal' };
-			const updatedFonts = toggleFont(
-				initialCustomFonts[ 0 ],
-				face,
-				initialCustomFonts
-			);
-			const furtherUpdatedFonts = toggleFont(
-				initialCustomFonts[ 0 ],
-				face,
-				updatedFonts
-			);
-
-			expect( furtherUpdatedFonts ).toHaveLength( 1 );
-			// Sort the font faces by fontWeight to ensure the order is consistent for the toEqual assertion.
-			expect(
-				furtherUpdatedFonts[ 0 ].fontFace.sort(
-					( a, b ) => a.fontWeight - b.fontWeight
-				)
-			).toEqual( initialCustomFonts[ 0 ].fontFace );
-		} );
-
-		it( 'should handle undefined or null fontFace gracefully', () => {
-			const fontWithoutFaces = { slug: 'font3' }; // no fontFace defined
-			const face = { fontWeight: '500', fontStyle: 'normal' };
-			const updatedFonts = toggleFont(
-				fontWithoutFaces,
-				face,
-				initialCustomFonts
-			);
-			expect( updatedFonts ).toEqual( [
-				...initialCustomFonts,
-				{ ...fontWithoutFaces, fontFace: [ face ] },
-			] );
-		} );
-
-		it( 'should handle fonts with the same slug but different properties', () => {
-			const differentFontWithSameSlug = {
-				slug: 'font1',
-				displayName: 'Different Font with Same Slug',
-			};
-			const updatedFonts = toggleFont(
-				differentFontWithSameSlug,
-				null,
-				initialCustomFonts
-			);
-			expect( updatedFonts ).toEqual( [] );
-		} );
-	} );
-} );

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

@@ -1,90 +0,0 @@
-/**
- * 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
- */
-export function toggleFont( font, face, initialfonts ) {
-	// Helper to check if a font is activated based on its slug
-	const isFontActivated = ( f ) => f.slug === font.slug;
-
-	// Helper to get the activated font from a list of fonts
-	const getActivatedFont = ( fonts ) => fonts.find( isFontActivated );
-
-	// Toggle the activation status of an entire font family
-	const toggleEntireFontFamily = ( activatedFont ) => {
-		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 ) => ! isFontActivated( f ) );
-	};
-
-	// Toggle the activation status of a specific font variant
-	const toggleFontVariant = ( activatedFont ) => {
-		const isFaceActivated = ( f ) =>
-			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 ) => ! 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 ) => ! isFontActivated( f ) );
-		}
-
-		// Return updated fonts list with toggled font variant
-		return initialfonts.map( ( f ) =>
-			isFontActivated( f ) ? { ...f, fontFace: newFontFaces } : f
-		);
-	};
-
-	const activatedFont = getActivatedFont( initialfonts );
-
-	if ( ! face ) {
-		return toggleEntireFontFamily( activatedFont );
-	}
-
-	return toggleFontVariant( activatedFont );
-}

package/src/components/global-styles/font-sizes/confirm-delete-font-size-dialog.js

@@ -1,43 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { __experimentalConfirmDialog as ConfirmDialog } from '@wordpress/components';
-import { __, sprintf } from '@wordpress/i18n';
-
-function ConfirmDeleteFontSizeDialog( {
-	fontSize,
-	isOpen,
-	toggleOpen,
-	handleRemoveFontSize,
-} ) {
-	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/components/global-styles/font-sizes/confirm-reset-font-sizes-dialog.js

@@ -1,37 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { __experimentalConfirmDialog as ConfirmDialog } from '@wordpress/components';
-import { __ } from '@wordpress/i18n';
-
-function ConfirmResetFontSizesDialog( {
-	text,
-	confirmButtonText,
-	isOpen,
-	toggleOpen,
-	onConfirm,
-} ) {
-	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/components/global-styles/font-sizes/font-size-preview.js

@@ -1,43 +0,0 @@
-/**
- * WordPress dependencies
- */
-import {
-	getComputedFluidTypographyValue,
-	privateApis as blockEditorPrivateApis,
-} from '@wordpress/block-editor';
-import { __ } from '@wordpress/i18n';
-
-/**
- * Internal dependencies
- */
-import { unlock } from '../../../lock-unlock';
-const { useGlobalStyle } = unlock( blockEditorPrivateApis );
-
-function FontSizePreview( { fontSize } ) {
-	const [ font ] = useGlobalStyle( 'typography' );
-
-	const input =
-		fontSize?.fluid?.min && fontSize?.fluid?.max
-			? {
-					minimumFontSize: fontSize.fluid.min,
-					maximumFontSize: fontSize.fluid.max,
-			  }
-			: {
-					fontSize: fontSize.size,
-			  };
-
-	const computedFontSize = getComputedFluidTypographyValue( input );
-	return (
-		<div
-			className="edit-site-typography-preview"
-			style={ {
-				fontSize: computedFontSize,
-				fontFamily: font?.fontFamily ?? 'serif',
-			} }
-		>
-			{ __( 'Aa' ) }
-		</div>
-	);
-}
-
-export default FontSizePreview;

package/src/components/global-styles/font-sizes/font-size.js

@@ -1,265 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
-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';
-
-/**
- * Internal dependencies
- */
-import { unlock } from '../../../lock-unlock';
-import ScreenHeader from '../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';
-
-const { Menu } = unlock( componentsPrivateApis );
-const { useGlobalSetting } = unlock( blockEditorPrivateApis );
-
-function FontSize() {
-	const [ isDeleteConfirmOpen, setIsDeleteConfirmOpen ] = useState( false );
-	const [ isRenameDialogOpen, setIsRenameDialogOpen ] = useState( false );
-
-	const {
-		params: { origin, slug },
-		goBack,
-	} = useNavigator();
-
-	const [ fontSizes, setFontSizes ] = useGlobalSetting(
-		'typography.fontSizes'
-	);
-
-	const [ globalFluid ] = useGlobalSetting( 'typography.fluid' );
-
-	// Get the font sizes from the origin, default to empty array.
-	const sizes = fontSizes[ origin ] ?? [];
-
-	// Get the font size by slug.
-	const fontSize = 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 ) => {
-		updateFontSize( 'name', value );
-	};
-
-	const handleFontSizeChange = ( value ) => {
-		updateFontSize( 'size', value );
-	};
-
-	const handleFluidChange = ( value ) => {
-		updateFontSize( 'fluid', value );
-	};
-
-	const handleCustomFluidValues = ( value ) => {
-		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 ) => {
-		updateFontSize( 'fluid', { ...fontSize.fluid, min: value } );
-	};
-
-	const handleMaxChange = ( value ) => {
-		updateFontSize( 'fluid', { ...fontSize.fluid, max: value } );
-	};
-
-	const updateFontSize = ( key, value ) => {
-		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 ]: newFontSizes,
-		} );
-	};
-
-	const handleRemoveFontSize = () => {
-		const newFontSizes = sizes.filter( ( size ) => size.slug !== slug );
-		setFontSizes( {
-			...fontSizes,
-			[ origin ]: 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" align="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 : '' }
-								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={ fontSize.fluid?.min }
-										onChange={ handleMinChange }
-									/>
-									<SizeControl
-										label={ __( 'Maximum' ) }
-										value={ fontSize.fluid?.max }
-										onChange={ handleMaxChange }
-									/>
-								</>
-							) }
-						</VStack>
-					</Spacer>
-				</View>
-			</VStack>
-		</>
-	);
-}
-
-export default FontSize;