@wordpress/edit-site 6.33.5 → 6.34.1-next.2f1c7c01b.0

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

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

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

@@ -1,261 +0,0 @@
-/**
- * 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,
-	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';
-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';
-
-const { Menu } = unlock( componentsPrivateApis );
-const { useGlobalSetting } = unlock( blockEditorPrivateApis );
-
-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>
-					<Subtitle level={ 3 }>{ label }</Subtitle>
-					<FlexItem className="edit-site-global-styles__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="edit-site-font-size__item">
-										{ size.name }
-									</FlexItem>
-									<FlexItem display="flex">
-										<Icon
-											icon={
-												isRTL()
-													? chevronLeft
-													: chevronRight
-											}
-										/>
-									</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

@@ -1,70 +0,0 @@
-/**
- * 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/gradients-palette-panel.js

@@ -1,123 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { useViewportMatch } from '@wordpress/compose';
-import {
-	__experimentalVStack as VStack,
-	__experimentalPaletteEdit as PaletteEdit,
-	__experimentalSpacer as Spacer,
-	DuotonePicker,
-} from '@wordpress/components';
-import { __ } from '@wordpress/i18n';
-import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
-
-/**
- * Internal dependencies
- */
-import Subtitle from './subtitle';
-import { unlock } from '../../lock-unlock';
-
-const { useGlobalSetting } = unlock( blockEditorPrivateApis );
-const mobilePopoverProps = { placement: 'bottom-start', offset: 8 };
-
-const noop = () => {};
-
-export default function GradientPalettePanel( { name } ) {
-	const [ themeGradients, setThemeGradients ] = useGlobalSetting(
-		'color.gradients.theme',
-		name
-	);
-	const [ baseThemeGradients ] = useGlobalSetting(
-		'color.gradients.theme',
-		name,
-		'base'
-	);
-	const [ defaultGradients, setDefaultGradients ] = useGlobalSetting(
-		'color.gradients.default',
-		name
-	);
-	const [ baseDefaultGradients ] = useGlobalSetting(
-		'color.gradients.default',
-		name,
-		'base'
-	);
-	const [ customGradients, setCustomGradients ] = useGlobalSetting(
-		'color.gradients.custom',
-		name
-	);
-
-	const [ defaultPaletteEnabled ] = useGlobalSetting(
-		'color.defaultGradients',
-		name
-	);
-
-	const [ customDuotone ] = useGlobalSetting( 'color.duotone.custom' ) || [];
-	const [ defaultDuotone ] =
-		useGlobalSetting( 'color.duotone.default' ) || [];
-	const [ themeDuotone ] = useGlobalSetting( 'color.duotone.theme' ) || [];
-	const [ defaultDuotoneEnabled ] = useGlobalSetting(
-		'color.defaultDuotone'
-	);
-
-	const duotonePalette = [
-		...( customDuotone || [] ),
-		...( themeDuotone || [] ),
-		...( defaultDuotone && defaultDuotoneEnabled ? defaultDuotone : [] ),
-	];
-
-	const isMobileViewport = useViewportMatch( 'small', '<' );
-	const popoverProps = isMobileViewport ? mobilePopoverProps : undefined;
-
-	return (
-		<VStack
-			className="edit-site-global-styles-gradient-palette-panel"
-			spacing={ 8 }
-		>
-			{ !! themeGradients && !! themeGradients.length && (
-				<PaletteEdit
-					canReset={ themeGradients !== baseThemeGradients }
-					canOnlyChangeValues
-					gradients={ themeGradients }
-					onChange={ setThemeGradients }
-					paletteLabel={ __( 'Theme' ) }
-					paletteLabelHeadingLevel={ 3 }
-					popoverProps={ popoverProps }
-				/>
-			) }
-			{ !! defaultGradients &&
-				!! defaultGradients.length &&
-				!! defaultPaletteEnabled && (
-					<PaletteEdit
-						canReset={ defaultGradients !== baseDefaultGradients }
-						canOnlyChangeValues
-						gradients={ defaultGradients }
-						onChange={ setDefaultGradients }
-						paletteLabel={ __( 'Default' ) }
-						paletteLabelLevel={ 3 }
-						popoverProps={ popoverProps }
-					/>
-				) }
-			<PaletteEdit
-				gradients={ customGradients }
-				onChange={ setCustomGradients }
-				paletteLabel={ __( 'Custom' ) }
-				paletteLabelLevel={ 3 }
-				slugPrefix="custom-"
-				popoverProps={ popoverProps }
-			/>
-			{ !! duotonePalette && !! duotonePalette.length && (
-				<div>
-					<Subtitle level={ 3 }>{ __( 'Duotone' ) }</Subtitle>
-					<Spacer margin={ 3 } />
-					<DuotonePicker
-						duotonePalette={ duotonePalette }
-						disableCustomDuotone
-						disableCustomColors
-						clearable={ false }
-						onChange={ noop }
-					/>
-				</div>
-			) }
-		</VStack>
-	);
-}

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

@@ -1,48 +0,0 @@
-/**
- * WordPress dependencies
- */
-import {
-	__experimentalHStack as HStack,
-	__experimentalVStack as VStack,
-	__experimentalSpacer as Spacer,
-	__experimentalHeading as Heading,
-	__experimentalView as View,
-	Navigator,
-} from '@wordpress/components';
-import { isRTL, __ } from '@wordpress/i18n';
-import { chevronRight, chevronLeft } from '@wordpress/icons';
-
-function ScreenHeader( { title, description, onBack } ) {
-	return (
-		<VStack spacing={ 0 }>
-			<View>
-				<Spacer marginBottom={ 0 } paddingX={ 4 } paddingY={ 3 }>
-					<HStack spacing={ 2 }>
-						<Navigator.BackButton
-							icon={ isRTL() ? chevronRight : chevronLeft }
-							size="small"
-							label={ __( 'Back' ) }
-							onClick={ onBack }
-						/>
-						<Spacer>
-							<Heading
-								className="edit-site-global-styles-header"
-								level={ 2 }
-								size={ 13 }
-							>
-								{ title }
-							</Heading>
-						</Spacer>
-					</HStack>
-				</Spacer>
-			</View>
-			{ description && (
-				<p className="edit-site-global-styles-header__description">
-					{ description }
-				</p>
-			) }
-		</VStack>
-	);
-}
-
-export default ScreenHeader;

package/src/components/global-styles/highlighted-colors.js

@@ -1,39 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { __unstableMotion as motion } from '@wordpress/components';
-
-/**
- * Internal dependencies
- */
-import { useStylesPreviewColors } from './hooks';
-
-export default function HighlightedColors( {
-	normalizedColorSwatchSize,
-	ratio,
-} ) {
-	const { highlightedColors } = useStylesPreviewColors();
-	const scaledSwatchSize = normalizedColorSwatchSize * ratio;
-	return highlightedColors.map( ( { slug, color }, index ) => (
-		<motion.div
-			key={ `${ slug }-${ index }` }
-			style={ {
-				height: scaledSwatchSize,
-				width: scaledSwatchSize,
-				background: color,
-				borderRadius: scaledSwatchSize / 2,
-			} }
-			animate={ {
-				scale: 1,
-				opacity: 1,
-			} }
-			initial={ {
-				scale: 0.1,
-				opacity: 0,
-			} }
-			transition={ {
-				delay: index === 1 ? 0.2 : 0.1,
-			} }
-		/>
-	) );
-}

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

@@ -1,111 +0,0 @@
-/**
- * External dependencies
- */
-import { colord, extend } from 'colord';
-import a11yPlugin from 'colord/plugins/a11y';
-
-/**
- * WordPress dependencies
- */
-import { store as blocksStore } from '@wordpress/blocks';
-import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
-
-/**
- * Internal dependencies
- */
-import { unlock } from '../../lock-unlock';
-import { useSelect } from '@wordpress/data';
-
-const { useGlobalSetting, useGlobalStyle } = unlock( blockEditorPrivateApis );
-
-// Enable colord's a11y plugin.
-extend( [ a11yPlugin ] );
-
-export function useColorRandomizer( name ) {
-	const [ themeColors, setThemeColors ] = useGlobalSetting(
-		'color.palette.theme',
-		name
-	);
-
-	function randomizeColors() {
-		/* eslint-disable no-restricted-syntax */
-		const randomRotationValue = Math.floor( Math.random() * 225 );
-		/* eslint-enable no-restricted-syntax */
-
-		const newColors = themeColors.map( ( colorObject ) => {
-			const { color } = colorObject;
-			const newColor = colord( color )
-				.rotate( randomRotationValue )
-				.toHex();
-
-			return {
-				...colorObject,
-				color: newColor,
-			};
-		} );
-
-		setThemeColors( newColors );
-	}
-
-	return window.__experimentalEnableColorRandomizer
-		? [ randomizeColors ]
-		: [];
-}
-
-export function useStylesPreviewColors() {
-	const [ textColor = 'black' ] = useGlobalStyle( 'color.text' );
-	const [ backgroundColor = 'white' ] = useGlobalStyle( 'color.background' );
-	const [ headingColor = textColor ] = useGlobalStyle(
-		'elements.h1.color.text'
-	);
-	const [ linkColor = headingColor ] = useGlobalStyle(
-		'elements.link.color.text'
-	);
-
-	const [ buttonBackgroundColor = linkColor ] = useGlobalStyle(
-		'elements.button.color.background'
-	);
-	const [ coreColors ] = useGlobalSetting( 'color.palette.core' );
-	const [ themeColors ] = useGlobalSetting( 'color.palette.theme' );
-	const [ customColors ] = useGlobalSetting( 'color.palette.custom' );
-
-	const paletteColors = ( themeColors ?? [] )
-		.concat( customColors ?? [] )
-		.concat( coreColors ?? [] );
-
-	const textColorObject = paletteColors.filter(
-		( { color } ) => color === textColor
-	);
-	const buttonBackgroundColorObject = paletteColors.filter(
-		( { color } ) => color === buttonBackgroundColor
-	);
-
-	const highlightedColors = textColorObject
-		.concat( buttonBackgroundColorObject )
-		.concat( paletteColors )
-		.filter(
-			// we exclude these background color because it is already visible in the preview.
-			( { color } ) => color !== backgroundColor
-		)
-		.slice( 0, 2 );
-
-	return {
-		paletteColors,
-		highlightedColors,
-	};
-}
-
-export function useSupportedStyles( name, element ) {
-	const { supportedPanels } = useSelect(
-		( select ) => {
-			return {
-				supportedPanels: unlock(
-					select( blocksStore )
-				).getSupportedStyles( name, element ),
-			};
-		},
-		[ name, element ]
-	);
-
-	return supportedPanels;
-}

package/src/components/global-styles/icon-with-current-color.js

@@ -1,21 +0,0 @@
-/**
- * External dependencies
- */
-import clsx from 'clsx';
-
-/**
- * WordPress dependencies
- */
-import { Icon } from '@wordpress/components';
-
-export function IconWithCurrentColor( { className, ...props } ) {
-	return (
-		<Icon
-			className={ clsx(
-				className,
-				'edit-site-global-styles-icon-with-current-color'
-			) }
-			{ ...props }
-		/>
-	);
-}