@wordpress/edit-site 6.3.0 → 6.4.0

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

@@ -16,11 +16,12 @@ import {
 	Flex,
 	Notice,
 	ProgressBar,
+	CheckboxControl,
 } from '@wordpress/components';
 import { useEntityRecord, store as coreStore } from '@wordpress/core-data';
 import { useSelect } from '@wordpress/data';
 import { useContext, useEffect, useState } from '@wordpress/element';
-import { __, sprintf } from '@wordpress/i18n';
+import { __, _x, sprintf } from '@wordpress/i18n';
 import { chevronLeft } from '@wordpress/icons';
 import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
 
@@ -31,7 +32,12 @@ import { FontLibraryContext } from './context';
 import FontCard from './font-card';
 import LibraryFontVariant from './library-font-variant';
 import { sortFontFaces } from './utils/sort-font-faces';
-import { setUIValuesNeeded } from './utils';
+import {
+	setUIValuesNeeded,
+	loadFontFaceInBrowser,
+	unloadFontFaceInBrowser,
+	getDisplaySrcFromFontFace,
+} from './utils';
 import { unlock } from '../../../lock-unlock';
 
 const { useGlobalSetting } = unlock( blockEditorPrivateApis );
@@ -49,8 +55,11 @@ function InstalledFonts() {
 		getFontFacesActivated,
 		notice,
 		setNotice,
-		fontFamilies,
 	} = useContext( FontLibraryContext );
+
+	const [ fontFamilies, setFontFamilies ] = useGlobalSetting(
+		'typography.fontFamilies'
+	);
 	const [ isConfirmDeleteOpen, setIsConfirmDeleteOpen ] = useState( false );
 	const [ baseFontFamilies ] = useGlobalSetting(
 		'typography.fontFamilies',
@@ -61,7 +70,6 @@ function InstalledFonts() {
 		const { __experimentalGetCurrentGlobalStylesId } = select( coreStore );
 		return __experimentalGetCurrentGlobalStylesId();
 	} );
-
 	const globalStyles = useEntityRecord(
 		'root',
 		'globalStyles',
@@ -93,7 +101,11 @@ function InstalledFonts() {
 			const { canUser } = select( coreStore );
 			return (
 				customFontFamilyId &&
-				canUser( 'delete', 'font-families', customFontFamilyId )
+				canUser( 'delete', {
+					kind: 'postType',
+					name: 'wp_font_family',
+					id: customFontFamilyId,
+				} )
 			);
 		},
 		[ customFontFamilyId ]
@@ -144,6 +156,56 @@ function InstalledFonts() {
 		refreshLibrary();
 	}, [] );
 
+	// Get activated fonts count.
+	const activeFontsCount = libraryFontSelected
+		? getFontFacesActivated(
+				libraryFontSelected.slug,
+				libraryFontSelected.source
+		  ).length
+		: 0;
+
+	const selectedFontsCount =
+		libraryFontSelected?.fontFace?.length ??
+		( libraryFontSelected?.fontFamily ? 1 : 0 );
+
+	// Check if any fonts are selected.
+	const isIndeterminate =
+		activeFontsCount > 0 && activeFontsCount !== selectedFontsCount;
+
+	// Check if all fonts are selected.
+	const isSelectAllChecked = activeFontsCount === selectedFontsCount;
+
+	// Toggle select all fonts.
+	const toggleSelectAll = () => {
+		const initialFonts =
+			fontFamilies?.[ libraryFontSelected.source ]?.filter(
+				( f ) => f.slug !== libraryFontSelected.slug
+			) ?? [];
+		const newFonts = isSelectAllChecked
+			? initialFonts
+			: [ ...initialFonts, libraryFontSelected ];
+
+		setFontFamilies( {
+			...fontFamilies,
+			[ libraryFontSelected.source ]: newFonts,
+		} );
+
+		if ( libraryFontSelected.fontFace ) {
+			libraryFontSelected.fontFace.forEach( ( face ) => {
+				if ( isSelectAllChecked ) {
+					unloadFontFaceInBrowser( face, 'all' );
+				} else {
+					loadFontFaceInBrowser(
+						face,
+						getDisplaySrcFromFontFace( face?.src ),
+						'all'
+					);
+				}
+			} );
+		}
+	};
+
+	const hasFonts = baseThemeFonts.length > 0 || baseCustomFonts.length > 0;
 	return (
 		<div className="font-library-modal__tabpanel-layout">
 			{ isResolvingLibrary && (
@@ -169,10 +231,18 @@ function InstalledFonts() {
 										{ notice.message }
 									</Notice>
 								) }
-								{ baseCustomFonts.length > 0 && (
+								{ ! hasFonts && (
+									<Text as="p">
+										{ __( 'No fonts installed.' ) }
+									</Text>
+								) }
+								{ baseThemeFonts.length > 0 && (
 									<VStack>
 										<h2 className="font-library-modal__fonts-title">
-											{ __( 'Installed Fonts' ) }
+											{
+												/* translators: Heading for a list of fonts provided by the theme. */
+												_x( 'Theme', 'font source' )
+											}
 										</h2>
 										{ /*
 										 * Disable reason: The `list` ARIA role is redundant but
@@ -183,7 +253,7 @@ function InstalledFonts() {
 											role="list"
 											className="font-library-modal__fonts-list"
 										>
-											{ baseCustomFonts.map( ( font ) => (
+											{ baseThemeFonts.map( ( font ) => (
 												<li
 													key={ font.slug }
 													className="font-library-modal__fonts-list-item"
@@ -206,10 +276,13 @@ function InstalledFonts() {
 										{ /* eslint-enable jsx-a11y/no-redundant-roles */ }
 									</VStack>
 								) }
-								{ baseThemeFonts.length > 0 && (
+								{ baseCustomFonts.length > 0 && (
 									<VStack>
 										<h2 className="font-library-modal__fonts-title">
-											{ __( 'Theme Fonts' ) }
+											{
+												/* translators: Heading for a list of fonts installed by the user. */
+												_x( 'Custom', 'font source' )
+											}
 										</h2>
 										{ /*
 										 * Disable reason: The `list` ARIA role is redundant but
@@ -220,7 +293,7 @@ function InstalledFonts() {
 											role="list"
 											className="font-library-modal__fonts-list"
 										>
-											{ baseThemeFonts.map( ( font ) => (
+											{ baseCustomFonts.map( ( font ) => (
 												<li
 													key={ font.slug }
 													className="font-library-modal__fonts-list-item"
@@ -295,6 +368,14 @@ function InstalledFonts() {
 							</Text>
 							<Spacer margin={ 4 } />
 							<VStack spacing={ 0 }>
+								<CheckboxControl
+									className="font-library-modal__select-all"
+									label={ __( 'Select all' ) }
+									checked={ isSelectAllChecked }
+									onChange={ toggleSelectAll }
+									indeterminate={ isIndeterminate }
+									__nextHasNoMarginBottom
+								/>
 								<Spacer margin={ 8 } />
 								{ getFontFacesToDisplay(
 									libraryFontSelected

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

@@ -186,3 +186,12 @@ button.font-library-modal__upload-area {
 		justify-content: center;
 	}
 }
+
+.font-library-modal__select-all {
+	padding: $grid-unit-20 $grid-unit-20 $grid-unit-20 $grid-unit-20 + $border-width;
+
+	.components-checkbox-control__label {
+		padding-left: $grid-unit-20;
+	}
+}
+

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

@@ -0,0 +1,43 @@
+/**
+ * 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

@@ -0,0 +1,37 @@
+/**
+ * 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

@@ -0,0 +1,43 @@
+/**
+ * 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

@@ -0,0 +1,250 @@
+/**
+ * WordPress dependencies
+ */
+import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
+import { __, sprintf } from '@wordpress/i18n';
+import {
+	__experimentalSpacer as Spacer,
+	__experimentalUseNavigator as 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 } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { unlock } from '../../../lock-unlock';
+const {
+	DropdownMenuV2: DropdownMenu,
+	DropdownMenuItemV2: DropdownMenuItem,
+	DropdownMenuItemLabelV2: DropdownMenuItemLabel,
+} = unlock( componentsPrivateApis );
+const { useGlobalSetting } = unlock( blockEditorPrivateApis );
+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';
+
+function FontSize() {
+	const [ isDeleteConfirmOpen, setIsDeleteConfirmOpen ] = useState( false );
+	const [ isRenameDialogOpen, setIsRenameDialogOpen ] = useState( false );
+
+	const {
+		params: { origin, slug },
+		goBack,
+		goTo,
+	} = useNavigator();
+
+	const [ fontSizes, setFontSizes ] = useGlobalSetting(
+		'typography.fontSizes'
+	);
+
+	// 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 );
+
+	// Whether fluid is true or an object, set it to true, otherwise false.
+	const isFluid = !! fontSize.fluid ?? false;
+
+	// 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 = () => {
+		// Navigate to the font sizes list.
+		goBack();
+
+		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
+						) }
+						onBack={ () => goTo( '/typography/font-sizes/' ) }
+					/>
+					{ origin === 'custom' && (
+						<FlexItem>
+							<Spacer
+								marginTop={ 3 }
+								marginBottom={ 0 }
+								paddingX={ 4 }
+							>
+								<DropdownMenu
+									trigger={
+										<Button
+											size="small"
+											icon={ moreVertical }
+											label={ __( 'Font size options' ) }
+										/>
+									}
+								>
+									<DropdownMenuItem
+										onClick={ toggleRenameDialog }
+									>
+										<DropdownMenuItemLabel>
+											{ __( 'Rename' ) }
+										</DropdownMenuItemLabel>
+									</DropdownMenuItem>
+									<DropdownMenuItem
+										onClick={ toggleDeleteConfirm }
+									>
+										<DropdownMenuItemLabel>
+											{ __( 'Delete' ) }
+										</DropdownMenuItemLabel>
+									</DropdownMenuItem>
+								</DropdownMenu>
+							</Spacer>
+						</FlexItem>
+					) }
+				</HStack>
+
+				<View>
+					<Spacer paddingX={ 4 }>
+						<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;

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

@@ -0,0 +1,40 @@
+/**
+ * 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/"
+					aria-label={ __( 'Edit font size presets' ) }
+				>
+					<HStack direction="row">
+						<FlexItem>{ __( 'Font size presets' ) }</FlexItem>
+						<Icon icon={ isRTL() ? chevronLeft : chevronRight } />
+					</HStack>
+				</NavigationButtonAsItem>
+			</ItemGroup>
+		</VStack>
+	);
+}
+
+export default FontSizes;