@wordpress/global-styles-ui 1.1.0

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

@@ -0,0 +1,265 @@
+/**
+ * WordPress dependencies
+ */
+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,
+	Button,
+} from '@wordpress/components';
+import {
+	Icon,
+	plus,
+	moreVertical,
+	chevronLeft,
+	chevronRight,
+} from '@wordpress/icons';
+import { useState } from '@wordpress/element';
+import type { FontSize } from '@wordpress/global-styles-engine';
+
+/**
+ * Internal dependencies
+ */
+import { Subtitle } from '../subtitle';
+import { NavigationButtonAsItem } from '../navigation-button';
+import { getNewIndexFromPresets } from '../utils';
+import { ScreenHeader } from '../screen-header';
+import ConfirmResetFontSizesDialog from './confirm-reset-font-sizes-dialog';
+import { useSetting } from '../hooks';
+import { unlock } from '../lock-unlock';
+
+const { Menu } = unlock( componentsPrivateApis );
+
+interface FontSizeGroupProps {
+	label: string;
+	origin: string;
+	sizes: FontSize[];
+	handleAddFontSize: () => void;
+	handleResetFontSizes?: () => void;
+}
+
+function FontSizeGroup( {
+	label,
+	origin,
+	sizes,
+	handleAddFontSize,
+	handleResetFontSizes,
+}: FontSizeGroupProps ) {
+	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 (
+		<>
+			{ handleResetFontSizes && isResetDialogOpen && (
+				<ConfirmResetFontSizesDialog
+					text={ resetDialogText }
+					confirmButtonText={
+						origin === 'custom' ? __( 'Remove' ) : __( 'Reset' )
+					}
+					isOpen={ isResetDialogOpen }
+					toggleOpen={ toggleResetDialog }
+					onConfirm={ handleResetFontSizes }
+				/>
+			) }
+			<VStack spacing={ 4 }>
+				<HStack>
+					<Subtitle level={ 3 }>{ label }</Subtitle>
+					<FlexItem className="global-styles-ui__typography-panel__options-container">
+						{ origin === 'custom' && (
+							<Button
+								label={ __( 'Add font size' ) }
+								icon={ plus }
+								size="small"
+								onClick={ handleAddFontSize }
+							/>
+						) }
+						{ !! handleResetFontSizes && (
+							<Menu>
+								<Menu.TriggerButton
+									render={
+										<Button
+											size="small"
+											icon={ moreVertical }
+											label={ __(
+												'Font size presets options'
+											) }
+										/>
+									}
+								/>
+								<Menu.Popover>
+									<Menu.Item onClick={ toggleResetDialog }>
+										<Menu.ItemLabel>
+											{ origin === 'custom'
+												? __(
+														'Remove font size presets'
+												  )
+												: __(
+														'Reset font size presets'
+												  ) }
+										</Menu.ItemLabel>
+									</Menu.Item>
+								</Menu.Popover>
+							</Menu>
+						) }
+					</FlexItem>
+				</HStack>
+
+				{ !! sizes.length && (
+					<ItemGroup isBordered isSeparated>
+						{ sizes.map( ( size ) => (
+							<NavigationButtonAsItem
+								key={ size.slug }
+								path={ `/typography/font-sizes/${ origin }/${ size.slug }` }
+							>
+								<HStack>
+									<FlexItem className="global-styles-ui-font-size__item">
+										{ size.name }
+									</FlexItem>
+									<FlexItem display="flex">
+										<Icon
+											icon={
+												isRTL()
+													? chevronLeft
+													: chevronRight
+											}
+										/>
+									</FlexItem>
+								</HStack>
+							</NavigationButtonAsItem>
+						) ) }
+					</ItemGroup>
+				) }
+			</VStack>
+		</>
+	);
+}
+
+function FontSizes() {
+	const [ themeFontSizes, setThemeFontSizes ] = useSetting(
+		'typography.fontSizes.theme'
+	);
+
+	const [ baseThemeFontSizes ] = useSetting(
+		'typography.fontSizes.theme',
+		'base'
+	);
+	const [ defaultFontSizes, setDefaultFontSizes ] = useSetting(
+		'typography.fontSizes.default'
+	);
+
+	const [ baseDefaultFontSizes ] = useSetting(
+		'typography.fontSizes.default',
+		'base'
+	);
+
+	const [ customFontSizes = [], setCustomFontSizes ] = useSetting(
+		'typography.fontSizes.custom'
+	);
+
+	const [ defaultFontSizesEnabled ] = useSetting(
+		'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: FontSize[], arr2: FontSize[] ): boolean =>
+		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 }
+								handleAddFontSize={ handleAddFontSize }
+								handleResetFontSizes={
+									hasSameSizeValues(
+										themeFontSizes,
+										baseThemeFontSizes
+									)
+										? undefined
+										: () =>
+												setThemeFontSizes(
+													baseThemeFontSizes
+												)
+								}
+							/>
+						) }
+
+						{ defaultFontSizesEnabled &&
+							!! defaultFontSizes?.length && (
+								<FontSizeGroup
+									label={ __( 'Default' ) }
+									origin="default"
+									sizes={ defaultFontSizes }
+									handleAddFontSize={ handleAddFontSize }
+									handleResetFontSizes={
+										hasSameSizeValues(
+											defaultFontSizes,
+											baseDefaultFontSizes
+										)
+											? undefined
+											: () =>
+													setDefaultFontSizes(
+														baseDefaultFontSizes
+													)
+									}
+								/>
+							) }
+
+						<FontSizeGroup
+							label={ __( 'Custom' ) }
+							origin="custom"
+							sizes={ customFontSizes }
+							handleAddFontSize={ handleAddFontSize }
+							handleResetFontSizes={
+								customFontSizes.length > 0
+									? () => setCustomFontSizes( [] )
+									: undefined
+							}
+						/>
+					</VStack>
+				</Spacer>
+			</View>
+		</VStack>
+	);
+}
+
+export default FontSizes;

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

@@ -0,0 +1,83 @@
+/**
+ * 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';
+import type { FontSize } from '@wordpress/global-styles-engine';
+
+interface RenameFontSizeDialogProps {
+	fontSize: FontSize;
+	toggleOpen: () => void;
+	handleRename: ( newName: string ) => void;
+}
+
+function RenameFontSizeDialog( {
+	fontSize,
+	toggleOpen,
+	handleRename,
+}: RenameFontSizeDialogProps ) {
+	const [ newName, setNewName ] = useState< string | undefined >(
+		fontSize.name
+	);
+
+	const handleConfirm = () => {
+		// If the new name is not empty, call the handleRename function
+		if ( newName && 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/global-styles-ui.tsx

@@ -0,0 +1,292 @@
+/**
+ * WordPress dependencies
+ */
+import { Navigator, useNavigator } from '@wordpress/components';
+// @ts-expect-error: Not typed yet.
+import { getBlockTypes, store as blocksStore } from '@wordpress/blocks';
+import { useSelect } from '@wordpress/data';
+// @ts-expect-error: Not typed yet.
+import { BlockEditorProvider } from '@wordpress/block-editor';
+import { useMemo, useEffect } from '@wordpress/element';
+import { usePrevious } from '@wordpress/compose';
+import {
+	generateGlobalStyles,
+	mergeGlobalStyles,
+} from '@wordpress/global-styles-engine';
+import type {
+	GlobalStylesConfig,
+	BlockType,
+} from '@wordpress/global-styles-engine';
+
+/**
+ * Internal dependencies
+ */
+import { GlobalStylesProvider } from './provider';
+import ScreenRoot from './screen-root';
+import ScreenBlockList from './screen-block-list';
+import ScreenBlock from './screen-block';
+import ScreenTypography from './screen-typography';
+import ScreenTypographyElement from './screen-typography-element';
+import ScreenColors from './screen-colors';
+import ScreenColorPalette from './screen-color-palette';
+import ScreenBackground from './screen-background';
+import { ScreenShadows, ScreenShadowsEdit } from './screen-shadows';
+import ScreenLayout from './screen-layout';
+import ScreenStyleVariations from './screen-style-variations';
+import ScreenCSS from './screen-css';
+import ScreenRevisions from './screen-revisions';
+import FontSizes from './font-sizes/font-sizes';
+import FontSize from './font-sizes/font-size';
+interface BlockStylesNavigationScreensProps {
+	parentMenu: string;
+	blockStyles: any[];
+	blockName: string;
+}
+
+function BlockStylesNavigationScreens( {
+	parentMenu,
+	blockStyles,
+	blockName,
+}: BlockStylesNavigationScreensProps ) {
+	return (
+		<>
+			{ blockStyles.map( ( style, index ) => (
+				<Navigator.Screen
+					key={ index }
+					path={ parentMenu + '/variations/' + style.name }
+				>
+					<ScreenBlock name={ blockName } variation={ style.name } />
+				</Navigator.Screen>
+			) ) }
+		</>
+	);
+}
+
+interface ContextScreensProps {
+	name?: string;
+	parentMenu?: string;
+}
+
+function ContextScreens( { name, parentMenu = '' }: ContextScreensProps ) {
+	const blockStyleVariations = useSelect(
+		( select ) => {
+			if ( ! name ) {
+				return [];
+			}
+			const { getBlockStyles } = select( blocksStore );
+			return getBlockStyles( name );
+		},
+		[ name ]
+	);
+
+	return (
+		<>
+			<Navigator.Screen path={ parentMenu + '/colors/palette' }>
+				<ScreenColorPalette name={ name } />
+			</Navigator.Screen>
+
+			{ !! blockStyleVariations?.length && (
+				<BlockStylesNavigationScreens
+					parentMenu={ parentMenu }
+					blockStyles={ blockStyleVariations }
+					blockName={ name || '' }
+				/>
+			) }
+		</>
+	);
+}
+
+interface GlobalStylesUIProps {
+	/** User global styles object (what gets edited) */
+	value: GlobalStylesConfig;
+	/** Base global styles object (theme default) */
+	baseValue: GlobalStylesConfig;
+	/** Callback when global styles change */
+	onChange: ( newValue: GlobalStylesConfig ) => void;
+	/** Current navigation path (optional) */
+	path?: string;
+	/** Callback when navigation path changes (optional) */
+	onPathChange?: ( path: string ) => void;
+	/** Whether font library is enabled (optional) */
+	fontLibraryEnabled?: boolean;
+	/** Server CSS styles for BlockEditorProvider (optional) */
+	serverCSS?: { isGlobalStyles?: boolean }[];
+	/** Server settings for BlockEditorProvider (optional) */
+	serverSettings?: { __unstableResolvedAssets: Record< string, unknown > };
+}
+
+export function GlobalStylesUI( {
+	value,
+	baseValue,
+	onChange,
+	path,
+	onPathChange,
+	fontLibraryEnabled = false,
+	serverCSS,
+	serverSettings,
+}: GlobalStylesUIProps ) {
+	const blocks = getBlockTypes();
+
+	// Compute merged value for CSS generation
+	const mergedValue = useMemo( () => {
+		return mergeGlobalStyles( baseValue, value );
+	}, [ baseValue, value ] );
+
+	const [ globalStylesCSS, globalSettings ] =
+		generateGlobalStyles( mergedValue );
+	const styles = useMemo(
+		() => [ ...( serverCSS ?? [] ), ...( globalStylesCSS ?? [] ) ],
+		[ serverCSS, globalStylesCSS ]
+	);
+
+	const settings = useMemo( () => {
+		return {
+			...serverSettings,
+			__experimentalFeatures: globalSettings,
+			styles,
+		};
+	}, [ globalSettings, serverSettings, styles ] );
+
+	return (
+		<GlobalStylesProvider
+			value={ value }
+			baseValue={ baseValue }
+			onChange={ onChange }
+			fontLibraryEnabled={ fontLibraryEnabled }
+		>
+			<BlockEditorProvider settings={ settings }>
+				<Navigator
+					className="global-styles-ui-sidebar__navigator-provider"
+					initialPath={ path || '/' }
+				>
+					{ ( path || onPathChange ) && (
+						<PathSynchronizer
+							path={ path }
+							onPathChange={ onPathChange }
+						/>
+					) }
+					<Navigator.Screen path="/">
+						<ScreenRoot />
+					</Navigator.Screen>
+					<Navigator.Screen path="/colors">
+						<ScreenColors />
+					</Navigator.Screen>
+					<Navigator.Screen path="/typography">
+						<ScreenTypography />
+					</Navigator.Screen>
+					<Navigator.Screen path="/typography/font-sizes">
+						<FontSizes />
+					</Navigator.Screen>
+					<Navigator.Screen path="/typography/font-sizes/:origin/:slug">
+						<FontSize />
+					</Navigator.Screen>
+					<Navigator.Screen path="/layout">
+						<ScreenLayout />
+					</Navigator.Screen>
+					<Navigator.Screen path="/colors/palette">
+						<ScreenColorPalette />
+					</Navigator.Screen>
+					<Navigator.Screen path="/variations">
+						<ScreenStyleVariations />
+					</Navigator.Screen>
+					<Navigator.Screen path="/css">
+						<ScreenCSS />
+					</Navigator.Screen>
+					<Navigator.Screen path="/revisions/:revisionId?">
+						<ScreenRevisions />
+					</Navigator.Screen>
+					<Navigator.Screen path="/shadows">
+						<ScreenShadows />
+					</Navigator.Screen>
+					<Navigator.Screen path="/shadows/edit/:category/:slug">
+						<ScreenShadowsEdit />
+					</Navigator.Screen>
+					<Navigator.Screen path="/background">
+						<ScreenBackground />
+					</Navigator.Screen>
+					<Navigator.Screen path="/typography/text">
+						<ScreenTypographyElement element="text" />
+					</Navigator.Screen>
+					<Navigator.Screen path="/typography/link">
+						<ScreenTypographyElement element="link" />
+					</Navigator.Screen>
+					<Navigator.Screen path="/typography/heading">
+						<ScreenTypographyElement element="heading" />
+					</Navigator.Screen>
+					<Navigator.Screen path="/typography/caption">
+						<ScreenTypographyElement element="caption" />
+					</Navigator.Screen>
+					<Navigator.Screen path="/typography/button">
+						<ScreenTypographyElement element="button" />
+					</Navigator.Screen>
+					<Navigator.Screen path="/blocks">
+						<ScreenBlockList />
+					</Navigator.Screen>
+					{ blocks.map( ( block: BlockType ) => (
+						<Navigator.Screen
+							key={ 'menu-block-' + block.name }
+							path={
+								'/blocks/' + encodeURIComponent( block.name )
+							}
+						>
+							<ScreenBlock name={ block.name } />
+						</Navigator.Screen>
+					) ) }
+
+					<ContextScreens />
+
+					{ blocks.map( ( block: BlockType ) => (
+						<ContextScreens
+							key={ 'screens-block-' + block.name }
+							name={ block.name }
+							parentMenu={
+								'/blocks/' + encodeURIComponent( block.name )
+							}
+						/>
+					) ) }
+				</Navigator>
+			</BlockEditorProvider>
+		</GlobalStylesProvider>
+	);
+}
+
+/*
+ * Component that handles path synchronization between external path prop and Navigator's internal path.
+ */
+function PathSynchronizer( {
+	path,
+	onPathChange,
+}: {
+	path?: string;
+	onPathChange?: ( path: string ) => void;
+} ) {
+	const navigator = useNavigator();
+	const { path: childPath } = navigator.location;
+	const previousParentPath = usePrevious( path );
+	const previousChildPath = usePrevious( childPath );
+
+	useEffect( () => {
+		// Only sync when parent and child paths are out of sync
+		if ( path && path !== childPath ) {
+			// If parent path changed, update the Navigator
+			if ( path !== previousParentPath ) {
+				navigator.goTo( path );
+			}
+			// If child path changed, notify parent via onPathChange
+			else if ( childPath !== previousChildPath && onPathChange ) {
+				onPathChange( childPath ?? '/' );
+			}
+		}
+	}, [
+		onPathChange,
+		path,
+		previousChildPath,
+		previousParentPath,
+		childPath,
+		navigator,
+	] );
+
+	// This component only handles synchronization logic. It doesn't render anything.
+	// We use it to run the effect inside the Navigator context.
+	return null;
+}