@wordpress/global-styles-ui 1.1.0

package/src/gradients-palette-panel.tsx

@@ -0,0 +1,126 @@
+/**
+ * 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 type { Gradient } from '@wordpress/global-styles-engine';
+
+/**
+ * Internal dependencies
+ */
+import { Subtitle } from './subtitle';
+import { useSetting } from './hooks';
+
+const mobilePopoverProps = { placement: 'bottom-start' as const, offset: 8 };
+
+const noop = () => {};
+
+interface GradientPalettePanelProps {
+	name?: string;
+}
+
+export default function GradientPalettePanel( {
+	name,
+}: GradientPalettePanelProps ) {
+	const [ themeGradients, setThemeGradients ] = useSetting< Gradient[] >(
+		'color.gradients.theme',
+		name
+	);
+	const [ baseThemeGradients ] = useSetting< Gradient[] >(
+		'color.gradients.theme',
+		name,
+		'base'
+	);
+	const [ defaultGradients, setDefaultGradients ] = useSetting< Gradient[] >(
+		'color.gradients.default',
+		name
+	);
+	const [ baseDefaultGradients ] = useSetting< Gradient[] >(
+		'color.gradients.default',
+		name,
+		'base'
+	);
+	const [ customGradients, setCustomGradients ] = useSetting< Gradient[] >(
+		'color.gradients.custom',
+		name
+	);
+
+	const [ defaultPaletteEnabled ] = useSetting< boolean >(
+		'color.defaultGradients',
+		name
+	);
+
+	const [ customDuotone ] = useSetting( 'color.duotone.custom' ) || [];
+	const [ defaultDuotone ] = useSetting( 'color.duotone.default' ) || [];
+	const [ themeDuotone ] = useSetting( 'color.duotone.theme' ) || [];
+	const [ defaultDuotoneEnabled ] = useSetting( 'color.defaultDuotone' );
+
+	const duotonePalette = [
+		...( customDuotone || [] ),
+		...( themeDuotone || [] ),
+		...( defaultDuotone && defaultDuotoneEnabled ? defaultDuotone : [] ),
+	];
+
+	const isMobileViewport = useViewportMatch( 'small', '<' );
+	const popoverProps = isMobileViewport ? mobilePopoverProps : undefined;
+
+	return (
+		<VStack
+			className="global-styles-ui-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' ) }
+						paletteLabelHeadingLevel={ 3 }
+						popoverProps={ popoverProps }
+					/>
+				) }
+			<PaletteEdit
+				gradients={ customGradients }
+				onChange={ setCustomGradients }
+				paletteLabel={ __( 'Custom' ) }
+				paletteLabelHeadingLevel={ 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 }
+						colorPalette={ [] }
+					/>
+				</div>
+			) }
+		</VStack>
+	);
+}

package/src/highlighted-colors.tsx

@@ -0,0 +1,44 @@
+/**
+ * WordPress dependencies
+ */
+import { __unstableMotion as motion } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import { useStylesPreviewColors } from './preview-hooks';
+
+interface HighlightedColorsProps {
+	normalizedColorSwatchSize: number;
+	ratio: number;
+}
+
+export default function HighlightedColors( {
+	normalizedColorSwatchSize,
+	ratio,
+}: HighlightedColorsProps ) {
+	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/hooks.ts

@@ -0,0 +1,251 @@
+/**
+ * External dependencies
+ */
+import { colord, extend } from 'colord';
+import a11yPlugin from 'colord/plugins/a11y';
+
+/**
+ * WordPress dependencies
+ */
+import { useCallback, useContext, useMemo } from '@wordpress/element';
+import { useSelect } from '@wordpress/data';
+import { store as coreStore } from '@wordpress/core-data';
+import { __ } from '@wordpress/i18n';
+import {
+	getStyle,
+	setStyle,
+	getSetting,
+	setSetting,
+	mergeGlobalStyles,
+} from '@wordpress/global-styles-engine';
+import type { StyleVariation, Color } from '@wordpress/global-styles-engine';
+
+/**
+ * Internal dependencies
+ */
+import { GlobalStylesContext } from './context';
+import { removePropertiesFromObject, isVariationWithProperties } from './utils';
+
+// Enable colord's a11y plugin.
+extend( [ a11yPlugin ] );
+
+/**
+ * Hook to get and set style values with memoization.
+ *
+ * @param path               The path to the style value.
+ * @param blockName          The name of the block, if applicable.
+ * @param readFrom           Which source to read from: "base" (theme), "user" (customizations), or "merged" (final result).
+ * @param shouldDecodeEncode Whether to decode and encode the style value.
+ * @return An array containing the style value and a function to set the style
+ * value.
+ *
+ * @example
+ * const [ color, setColor ] = useStyle<string>( 'color.text', 'core/button', 'merged' );
+ */
+export function useStyle< T = any >(
+	path: string,
+	blockName?: string,
+	readFrom: 'base' | 'user' | 'merged' = 'merged',
+	shouldDecodeEncode: boolean = true
+) {
+	const { user, base, merged, onChange } = useContext( GlobalStylesContext );
+
+	let sourceValue = merged;
+	if ( readFrom === 'base' ) {
+		sourceValue = base;
+	} else if ( readFrom === 'user' ) {
+		sourceValue = user;
+	}
+
+	const styleValue = useMemo(
+		() => getStyle< T >( sourceValue, path, blockName, shouldDecodeEncode ),
+		[ sourceValue, path, blockName, shouldDecodeEncode ]
+	);
+
+	const setStyleValue = useCallback(
+		( newValue: T | undefined ) => {
+			const newGlobalStyles = setStyle< T >(
+				user,
+				path,
+				newValue,
+				blockName
+			);
+			onChange( newGlobalStyles );
+		},
+		[ user, onChange, path, blockName ]
+	);
+
+	return [ styleValue, setStyleValue ] as const;
+}
+
+/**
+ * Hook to get and set setting values with memoization.
+ *
+ * @param path      The path to the setting value.
+ * @param blockName The name of the block, if applicable.
+ * @param readFrom  Which source to read from: "base" (theme), "user" (customizations), or "merged" (final result).
+ * @return An array containing the setting value and a function to set the
+ * setting value.
+ *
+ * @example
+ * const [ fontSize, setFontSize ] = useSetting<string>( 'fontSize', 'core/button', 'merged' );
+ */
+export function useSetting< T = any >(
+	path: string,
+	blockName?: string,
+	readFrom: 'base' | 'user' | 'merged' = 'merged'
+) {
+	const { user, base, merged, onChange } = useContext( GlobalStylesContext );
+
+	let sourceValue = merged;
+	if ( readFrom === 'base' ) {
+		sourceValue = base;
+	} else if ( readFrom === 'user' ) {
+		sourceValue = user;
+	}
+	const settingValue = useMemo(
+		() => getSetting< T >( sourceValue, path, blockName ),
+		[ sourceValue, path, blockName ]
+	);
+
+	const setSettingValue = useCallback(
+		( newValue: T | undefined ) => {
+			const newGlobalStyles = setSetting< T >(
+				user,
+				path,
+				newValue,
+				blockName
+			);
+			onChange( newGlobalStyles );
+		},
+		[ user, onChange, path, blockName ]
+	);
+
+	return [ settingValue, setSettingValue ] as const;
+}
+
+const EMPTY_ARRAY: StyleVariation[] = [];
+
+/**
+ * Checks whether a style variation is empty.
+ * @param root0
+ * @param root0.title
+ * @param root0.settings
+ * @param root0.styles
+ */
+function hasThemeVariation( {
+	title,
+	settings,
+	styles,
+}: StyleVariation ): boolean {
+	return (
+		title === __( 'Default' ) ||
+		Object.keys( settings || {} ).length > 0 ||
+		Object.keys( styles || {} ).length > 0
+	);
+}
+
+/**
+ * Fetches the current theme style variations that contain only the specified properties
+ * and merges them with the user config.
+ * @param properties
+ */
+export function useCurrentMergeThemeStyleVariationsWithUserConfig(
+	properties: string[] = []
+): StyleVariation[] {
+	const { variationsFromTheme } = useSelect( ( select ) => {
+		const _variationsFromTheme =
+			select(
+				coreStore
+			).__experimentalGetCurrentThemeGlobalStylesVariations?.();
+
+		return {
+			variationsFromTheme: _variationsFromTheme || EMPTY_ARRAY,
+		};
+	}, [] );
+
+	const { user: userVariation } = useContext( GlobalStylesContext );
+
+	return useMemo( () => {
+		// Create default variation from base, not user - this fixes the "Default adapts" issue
+		const clonedUserVariation = structuredClone( userVariation );
+		// Get user variation and remove the settings for the given property.
+		const userVariationWithoutProperties = removePropertiesFromObject(
+			clonedUserVariation,
+			properties
+		);
+		userVariationWithoutProperties.title = __( 'Default' );
+
+		const variationsWithPropertiesAndBase = (
+			variationsFromTheme as StyleVariation[]
+		 )
+			.filter( ( variation: StyleVariation ) => {
+				return isVariationWithProperties( variation, properties );
+			} )
+			.map( ( variation: StyleVariation ) => {
+				return mergeGlobalStyles(
+					userVariationWithoutProperties,
+					variation
+				);
+			} );
+
+		const variationsByProperties = [
+			userVariationWithoutProperties,
+			...variationsWithPropertiesAndBase,
+		];
+
+		return variationsByProperties?.length
+			? variationsByProperties.filter( hasThemeVariation )
+			: [];
+	}, [ properties, userVariation, variationsFromTheme ] );
+}
+
+const propertiesToFilter = [ 'color' ];
+
+/**
+ * Hook to get color variations using the full Gutenberg implementation.
+ */
+export function useColorVariations(): StyleVariation[] {
+	return useCurrentMergeThemeStyleVariationsWithUserConfig(
+		propertiesToFilter
+	);
+}
+
+/**
+ * Hook to randomize theme colors using color rotation.
+ *
+ * @param blockName The name of the block, if applicable.
+ * @return Array containing the randomize function if feature is enabled, empty array otherwise.
+ */
+export function useColorRandomizer( blockName?: string ): [ () => void ] | [] {
+	const [ themeColors, setThemeColors ] = useSetting< Color[] >(
+		'color.palette.theme',
+		blockName
+	);
+
+	const randomizeColors = useCallback( () => {
+		if ( ! themeColors || ! themeColors.length ) {
+			return;
+		}
+
+		const randomRotationValue = Math.floor( Math.random() * 225 );
+
+		const newColors = themeColors.map( ( colorObject ) => {
+			const { color } = colorObject;
+			const newColor = colord( color )
+				.rotate( randomRotationValue )
+				.toHex();
+
+			return {
+				...colorObject,
+				color: newColor,
+			};
+		} );
+
+		setThemeColors( newColors );
+	}, [ themeColors, setThemeColors ] );
+
+	return ( window as any ).__experimentalEnableColorRandomizer
+		? [ randomizeColors ]
+		: [];
+}

package/src/icon-with-current-color.tsx

@@ -0,0 +1,31 @@
+/**
+ * External dependencies
+ */
+import clsx from 'clsx';
+
+/**
+ * WordPress dependencies
+ */
+import { Icon } from '@wordpress/icons';
+
+interface IconWithCurrentColorProps {
+	icon: any;
+	className?: string;
+	size?: number;
+	[ key: string ]: any;
+}
+
+export function IconWithCurrentColor( {
+	className,
+	...props
+}: IconWithCurrentColorProps ) {
+	return (
+		<Icon
+			className={ clsx(
+				className,
+				'global-styles-ui-icon-with-current-color'
+			) }
+			{ ...props }
+		/>
+	);
+}

package/src/index.ts

@@ -0,0 +1,7 @@
+export { GlobalStylesUI } from './global-styles-ui';
+export { StyleVariations } from './style-variations';
+export { ColorVariations } from './color-variations';
+export { TypographyVariations } from './typography-variations';
+
+// Ideally this should just be a core-data selector.
+export { default as useGlobalStylesRevisions } from './screen-revisions/use-global-styles-revisions';

package/src/lock-unlock.ts

@@ -0,0 +1,10 @@
+/**
+ * WordPress dependencies
+ */
+import { __dangerousOptInToUnstableAPIsOnlyForCoreModules } from '@wordpress/private-apis';
+
+export const { lock, unlock } =
+	__dangerousOptInToUnstableAPIsOnlyForCoreModules(
+		'I acknowledge private features are not for use in themes or plugins and doing so will break in the next version of WordPress.',
+		'@wordpress/global-styles-ui'
+	);

package/src/navigation-button.tsx

@@ -0,0 +1,53 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	Navigator,
+	__experimentalItem as Item,
+	FlexItem,
+	__experimentalHStack as HStack,
+} from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import { IconWithCurrentColor } from './icon-with-current-color';
+
+interface GenericNavigationButtonProps {
+	icon?: any;
+	children: React.ReactNode;
+	[ key: string ]: any;
+}
+
+function GenericNavigationButton( {
+	icon,
+	children,
+	...props
+}: GenericNavigationButtonProps ) {
+	return (
+		<Item { ...props }>
+			{ icon && (
+				<HStack justify="flex-start">
+					<IconWithCurrentColor icon={ icon } size={ 24 } />
+					<FlexItem>{ children }</FlexItem>
+				</HStack>
+			) }
+			{ ! icon && children }
+		</Item>
+	);
+}
+
+interface NavigationButtonProps {
+	path: string;
+	icon?: any;
+	children: React.ReactNode;
+	[ key: string ]: any;
+}
+
+export function NavigationButtonAsItem( props: NavigationButtonProps ) {
+	return <Navigator.Button as={ GenericNavigationButton } { ...props } />;
+}
+
+export function NavigationBackButtonAsItem( props: NavigationButtonProps ) {
+	return <Navigator.BackButton as={ GenericNavigationButton } { ...props } />;
+}

package/src/pagination/index.tsx

@@ -0,0 +1,107 @@
+/**
+ * External dependencies
+ */
+import clsx from 'clsx';
+
+/**
+ * WordPress dependencies
+ */
+import {
+	__experimentalHStack as HStack,
+	__experimentalText as Text,
+	Button,
+} from '@wordpress/components';
+import { __, _x, _n, sprintf, isRTL } from '@wordpress/i18n';
+import { previous, chevronLeft, chevronRight, next } from '@wordpress/icons';
+
+interface PaginationProps {
+	currentPage: number;
+	numPages: number;
+	changePage: ( page: number ) => void;
+	totalItems: number;
+	className?: string;
+	disabled?: boolean;
+	buttonVariant?: 'primary' | 'secondary' | 'tertiary';
+	label?: string;
+}
+
+export default function Pagination( {
+	currentPage,
+	numPages,
+	changePage,
+	totalItems,
+	className,
+	disabled = false,
+	buttonVariant = 'tertiary',
+	label = __( 'Pagination' ),
+}: PaginationProps ) {
+	return (
+		<HStack
+			expanded={ false }
+			as="nav"
+			aria-label={ label }
+			spacing={ 3 }
+			justify="flex-start"
+			className={ clsx( 'global-styles-ui-pagination', className ) }
+		>
+			<Text
+				variant="muted"
+				className="global-styles-ui-pagination__total"
+			>
+				{ sprintf(
+					// translators: %d: Total number of patterns.
+					_n( '%d item', '%d items', totalItems ),
+					totalItems
+				) }
+			</Text>
+			<HStack expanded={ false } spacing={ 1 }>
+				<Button
+					variant={ buttonVariant }
+					onClick={ () => changePage( 1 ) }
+					accessibleWhenDisabled
+					disabled={ disabled || currentPage === 1 }
+					label={ __( 'First page' ) }
+					icon={ isRTL() ? next : previous }
+					size="compact"
+				/>
+				<Button
+					variant={ buttonVariant }
+					onClick={ () => changePage( currentPage - 1 ) }
+					accessibleWhenDisabled
+					disabled={ disabled || currentPage === 1 }
+					label={ __( 'Previous page' ) }
+					icon={ isRTL() ? chevronRight : chevronLeft }
+					size="compact"
+				/>
+			</HStack>
+			<Text variant="muted">
+				{ sprintf(
+					// translators: 1: Current page number. 2: Total number of pages.
+					_x( '%1$d of %2$d', 'paging' ),
+					currentPage,
+					numPages
+				) }
+			</Text>
+			<HStack expanded={ false } spacing={ 1 }>
+				<Button
+					variant={ buttonVariant }
+					onClick={ () => changePage( currentPage + 1 ) }
+					accessibleWhenDisabled
+					disabled={ disabled || currentPage === numPages }
+					label={ __( 'Next page' ) }
+					icon={ isRTL() ? chevronLeft : chevronRight }
+					size="compact"
+				/>
+				<Button
+					variant={ buttonVariant }
+					onClick={ () => changePage( numPages ) }
+					accessibleWhenDisabled
+					disabled={ disabled || currentPage === numPages }
+					label={ __( 'Last page' ) }
+					icon={ isRTL() ? previous : next }
+					size="compact"
+				/>
+			</HStack>
+		</HStack>
+	);
+}

package/src/pagination/style.scss

@@ -0,0 +1,7 @@
+@use "@wordpress/base-styles/variables";
+
+.global-styles-ui-pagination .components-button.is-tertiary {
+	width: variables.$button-size-compact;
+	height: variables.$button-size-compact;
+	justify-content: center;
+}