@wordpress/edit-site 6.2.0 → 6.4.0

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;

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

@@ -0,0 +1,263 @@
+/**
+ * WordPress dependencies
+ */
+import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
+import { __, sprintf, isRTL } from '@wordpress/i18n';
+import {
+	privateApis as componentsPrivateApis,
+	__experimentalSpacer as Spacer,
+	__experimentalView as View,
+	__experimentalItemGroup as ItemGroup,
+	__experimentalVStack as VStack,
+	__experimentalHStack as HStack,
+	FlexItem,
+	FlexBlock,
+	Button,
+} from '@wordpress/components';
+import {
+	Icon,
+	plus,
+	moreVertical,
+	chevronLeft,
+	chevronRight,
+} 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 Subtitle from '../subtitle';
+import { NavigationButtonAsItem } from '../navigation-button';
+import { getNewIndexFromPresets } from '../utils';
+import ScreenHeader from '../header';
+import ConfirmResetFontSizesDialog from './confirm-reset-font-sizes-dialog';
+
+function FontSizeGroup( {
+	label,
+	origin,
+	sizes,
+	handleAddFontSize,
+	handleResetFontSizes,
+} ) {
+	const [ isResetDialogOpen, setIsResetDialogOpen ] = useState( false );
+
+	const toggleResetDialog = () => setIsResetDialogOpen( ! isResetDialogOpen );
+
+	const resetDialogText =
+		origin === 'custom'
+			? __(
+					'Are you sure you want to remove all custom font size presets?'
+			  )
+			: __(
+					'Are you sure you want to reset all font size presets to their default values?'
+			  );
+
+	return (
+		<>
+			{ isResetDialogOpen && (
+				<ConfirmResetFontSizesDialog
+					text={ resetDialogText }
+					confirmButtonText={
+						origin === 'custom' ? __( 'Remove' ) : __( 'Reset' )
+					}
+					isOpen={ isResetDialogOpen }
+					toggleOpen={ toggleResetDialog }
+					onConfirm={ handleResetFontSizes }
+				/>
+			) }
+			<VStack spacing={ 4 }>
+				<HStack justify="space-between" align="center">
+					<Subtitle level={ 3 }>{ label }</Subtitle>
+					<FlexItem>
+						{ origin === 'custom' && (
+							<Button
+								label={ __( 'Add font size' ) }
+								icon={ plus }
+								size="small"
+								onClick={ handleAddFontSize }
+							/>
+						) }
+						{ !! handleResetFontSizes && (
+							<DropdownMenu
+								trigger={
+									<Button
+										size="small"
+										icon={ moreVertical }
+										label={ __(
+											'Font size presets options'
+										) }
+									/>
+								}
+							>
+								<DropdownMenuItem onClick={ toggleResetDialog }>
+									<DropdownMenuItemLabel>
+										{ origin === 'custom'
+											? __( 'Remove font size presets' )
+											: __( 'Reset font size presets' ) }
+									</DropdownMenuItemLabel>
+								</DropdownMenuItem>
+							</DropdownMenu>
+						) }
+					</FlexItem>
+				</HStack>
+
+				{ !! sizes.length && (
+					<ItemGroup isBordered isSeparated>
+						{ sizes.map( ( size ) => (
+							<NavigationButtonAsItem
+								key={ size.slug }
+								path={ `/typography/font-sizes/${ origin }/${ size.slug }` }
+							>
+								<HStack direction="row">
+									<FlexItem className="edit-site-font-size__item">
+										{ size.name }
+									</FlexItem>
+									<FlexItem>
+										<HStack justify="flex-end">
+											<FlexBlock className="edit-site-font-size__item edit-site-font-size__item-value">
+												{ size.size }
+											</FlexBlock>
+											<Icon
+												icon={
+													isRTL()
+														? chevronLeft
+														: chevronRight
+												}
+											/>
+										</HStack>
+									</FlexItem>
+								</HStack>
+							</NavigationButtonAsItem>
+						) ) }
+					</ItemGroup>
+				) }
+			</VStack>
+		</>
+	);
+}
+
+function FontSizes() {
+	const [ themeFontSizes, setThemeFontSizes ] = useGlobalSetting(
+		'typography.fontSizes.theme'
+	);
+
+	const [ baseThemeFontSizes ] = useGlobalSetting(
+		'typography.fontSizes.theme',
+		null,
+		'base'
+	);
+	const [ defaultFontSizes, setDefaultFontSizes ] = useGlobalSetting(
+		'typography.fontSizes.default'
+	);
+
+	const [ baseDefaultFontSizes ] = useGlobalSetting(
+		'typography.fontSizes.default',
+		null,
+		'base'
+	);
+
+	const [ customFontSizes = [], setCustomFontSizes ] = useGlobalSetting(
+		'typography.fontSizes.custom'
+	);
+
+	const [ defaultFontSizesEnabled ] = useGlobalSetting(
+		'typography.defaultFontSizes'
+	);
+
+	const handleAddFontSize = () => {
+		const index = getNewIndexFromPresets( customFontSizes, 'custom-' );
+		const newFontSize = {
+			/* translators: %d: font size index */
+			name: sprintf( __( 'New Font Size %d' ), index ),
+			size: '16px',
+			slug: `custom-${ index }`,
+		};
+
+		setCustomFontSizes( [ ...customFontSizes, newFontSize ] );
+	};
+
+	const hasSameSizeValues = ( arr1, arr2 ) =>
+		arr1.map( ( item ) => item.size ).join( '' ) ===
+		arr2.map( ( item ) => item.size ).join( '' );
+
+	return (
+		<VStack spacing={ 2 }>
+			<ScreenHeader
+				title={ __( 'Font size presets' ) }
+				description={ __(
+					'Create and edit the presets used for font sizes across the site.'
+				) }
+			/>
+
+			<View>
+				<Spacer paddingX={ 4 }>
+					<VStack spacing={ 8 }>
+						{ !! themeFontSizes?.length && (
+							<FontSizeGroup
+								label={ __( 'Theme' ) }
+								origin="theme"
+								sizes={ themeFontSizes }
+								baseSizes={ baseThemeFontSizes }
+								handleAddFontSize={ handleAddFontSize }
+								handleResetFontSizes={
+									hasSameSizeValues(
+										themeFontSizes,
+										baseThemeFontSizes
+									)
+										? null
+										: () =>
+												setThemeFontSizes(
+													baseThemeFontSizes
+												)
+								}
+							/>
+						) }
+
+						{ defaultFontSizesEnabled &&
+							!! defaultFontSizes?.length && (
+								<FontSizeGroup
+									label={ __( 'Default' ) }
+									origin="default"
+									sizes={ defaultFontSizes }
+									baseSizes={ baseDefaultFontSizes }
+									handleAddFontSize={ handleAddFontSize }
+									handleResetFontSizes={
+										hasSameSizeValues(
+											defaultFontSizes,
+											baseDefaultFontSizes
+										)
+											? null
+											: () =>
+													setDefaultFontSizes(
+														baseDefaultFontSizes
+													)
+									}
+								/>
+							) }
+
+						<FontSizeGroup
+							label={ __( 'Custom' ) }
+							origin="custom"
+							sizes={ customFontSizes }
+							handleAddFontSize={ handleAddFontSize }
+							handleResetFontSizes={
+								customFontSizes.length > 0
+									? () => setCustomFontSizes( [] )
+									: null
+							}
+						/>
+					</VStack>
+				</Spacer>
+			</View>
+		</VStack>
+	);
+}
+
+export default FontSizes;

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

@@ -0,0 +1,70 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	__experimentalInputControl as InputControl,
+	__experimentalVStack as VStack,
+	__experimentalHStack as HStack,
+	Button,
+	Modal,
+} from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import { useState } from '@wordpress/element';
+
+function RenameFontSizeDialog( { fontSize, toggleOpen, handleRename } ) {
+	const [ newName, setNewName ] = useState( fontSize.name );
+
+	const handleConfirm = () => {
+		// If the new name is not empty, call the handleRename function
+		if ( newName.trim() ) {
+			handleRename( newName );
+		}
+		toggleOpen();
+	};
+
+	return (
+		<Modal
+			onRequestClose={ toggleOpen }
+			focusOnMount="firstContentElement"
+			title={ __( 'Rename' ) }
+			size="small"
+		>
+			<form
+				onSubmit={ ( event ) => {
+					event.preventDefault();
+					handleConfirm();
+					toggleOpen();
+				} }
+			>
+				<VStack spacing="3">
+					<InputControl
+						__next40pxDefaultSize
+						autoComplete="off"
+						value={ newName }
+						onChange={ setNewName }
+						label={ __( 'Name' ) }
+						placeholder={ __( 'Font size preset name' ) }
+					/>
+					<HStack justify="right">
+						<Button
+							__next40pxDefaultSize
+							variant="tertiary"
+							onClick={ toggleOpen }
+						>
+							{ __( 'Cancel' ) }
+						</Button>
+						<Button
+							__next40pxDefaultSize
+							variant="primary"
+							type="submit"
+						>
+							{ __( 'Save' ) }
+						</Button>
+					</HStack>
+				</VStack>
+			</form>
+		</Modal>
+	);
+}
+
+export default RenameFontSizeDialog;

package/src/components/global-styles/hooks.js

@@ -9,12 +9,10 @@ import a11yPlugin from 'colord/plugins/a11y';
  */
 import { store as blocksStore } from '@wordpress/blocks';
 import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
-import { __ } from '@wordpress/i18n';
 
 /**
  * Internal dependencies
  */
-import { useCurrentMergeThemeStyleVariationsWithUserConfig } from '../../hooks/use-theme-style-variations/use-theme-style-variations-by-property';
 import { unlock } from '../../lock-unlock';
 import { useSelect } from '@wordpress/data';
 
@@ -111,42 +109,3 @@ export function useSupportedStyles( name, element ) {
 
 	return supportedPanels;
 }
-
-export function useColorVariations() {
-	const colorVariations = useCurrentMergeThemeStyleVariationsWithUserConfig( {
-		property: 'color',
-	} );
-	/*
-	 * Filter out variations with no settings or styles.
-	 */
-	return colorVariations?.length
-		? colorVariations.filter( ( variation ) => {
-				const { settings, styles, title } = variation;
-				return (
-					title === __( 'Default' ) || // Always preseve the default variation.
-					Object.keys( settings ).length > 0 ||
-					Object.keys( styles ).length > 0
-				);
-		  } )
-		: [];
-}
-
-export function useTypographyVariations() {
-	const typographyVariations =
-		useCurrentMergeThemeStyleVariationsWithUserConfig( {
-			property: 'typography',
-		} );
-	/*
-	 * Filter out variations with no settings or styles.
-	 */
-	return typographyVariations?.length
-		? typographyVariations.filter( ( variation ) => {
-				const { settings, styles, title } = variation;
-				return (
-					title === __( 'Default' ) || // Always preseve the default variation.
-					Object.keys( settings ).length > 0 ||
-					Object.keys( styles ).length > 0
-				);
-		  } )
-		: [];
-}