@wordpress/global-styles-ui 1.1.0

package/src/palette.tsx

@@ -0,0 +1,101 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	__experimentalItemGroup as ItemGroup,
+	FlexItem,
+	__experimentalHStack as HStack,
+	__experimentalZStack as ZStack,
+	__experimentalVStack as VStack,
+	ColorIndicator,
+} from '@wordpress/components';
+import { isRTL, __ } from '@wordpress/i18n';
+import { Icon, chevronLeft, chevronRight } from '@wordpress/icons';
+import { useMemo } from '@wordpress/element';
+import type { Color } from '@wordpress/global-styles-engine';
+
+/**
+ * Internal dependencies
+ */
+import { Subtitle } from './subtitle';
+import { NavigationButtonAsItem } from './navigation-button';
+import ColorIndicatorWrapper from './color-indicator-wrapper';
+import { useSetting } from './hooks';
+
+const EMPTY_COLORS: Color[] = [];
+
+interface PaletteProps {
+	name?: string;
+}
+
+function Palette( { name }: PaletteProps ) {
+	const [ customColors ] = useSetting< Color[] >( 'color.palette.custom' );
+	const [ themeColors ] = useSetting< Color[] >( 'color.palette.theme' );
+	const [ defaultColors ] = useSetting< Color[] >( 'color.palette.default' );
+	const [ defaultPaletteEnabled ] = useSetting< boolean >(
+		'color.defaultPalette',
+		name
+	);
+
+	const safeCustomColors = customColors || EMPTY_COLORS;
+	const safeThemeColors = themeColors || EMPTY_COLORS;
+	const safeDefaultColors = defaultColors || EMPTY_COLORS;
+	const safeDefaultPaletteEnabled = defaultPaletteEnabled ?? true;
+
+	const colors = useMemo(
+		() => [
+			...safeCustomColors,
+			...safeThemeColors,
+			...( safeDefaultColors && safeDefaultPaletteEnabled
+				? safeDefaultColors
+				: EMPTY_COLORS ),
+		],
+		[
+			safeCustomColors,
+			safeThemeColors,
+			safeDefaultColors,
+			safeDefaultPaletteEnabled,
+		]
+	);
+
+	const screenPath = ! name
+		? '/colors/palette'
+		: '/blocks/' + encodeURIComponent( name ) + '/colors/palette';
+
+	return (
+		<VStack spacing={ 3 }>
+			<Subtitle level={ 3 }>{ __( 'Palette' ) }</Subtitle>
+			<ItemGroup isBordered isSeparated>
+				<NavigationButtonAsItem path={ screenPath }>
+					<HStack direction="row">
+						{ colors.length > 0 ? (
+							<>
+								<ZStack isLayered={ false } offset={ -8 }>
+									{ colors
+										.slice( 0, 5 )
+										.map( ( { color }, index ) => (
+											<ColorIndicatorWrapper
+												key={ `${ color }-${ index }` }
+											>
+												<ColorIndicator
+													colorValue={ color }
+												/>
+											</ColorIndicatorWrapper>
+										) ) }
+								</ZStack>
+								<FlexItem isBlock>
+									{ __( 'Edit palette' ) }
+								</FlexItem>
+							</>
+						) : (
+							<FlexItem>{ __( 'Add colors' ) }</FlexItem>
+						) }
+						<Icon icon={ isRTL() ? chevronLeft : chevronRight } />
+					</HStack>
+				</NavigationButtonAsItem>
+			</ItemGroup>
+		</VStack>
+	);
+}
+
+export default Palette;

package/src/preset-colors.tsx

@@ -0,0 +1,18 @@
+/**
+ * Internal dependencies
+ */
+import { useStylesPreviewColors } from './preview-hooks';
+
+export default function PresetColors() {
+	const { paletteColors } = useStylesPreviewColors();
+	return paletteColors.slice( 0, 4 ).map( ( { slug, color }, index ) => (
+		<div
+			key={ `${ slug }-${ index }` }
+			style={ {
+				flexGrow: 1,
+				height: '100%',
+				background: color,
+			} }
+		/>
+	) );
+}

package/src/preview-colors.tsx

@@ -0,0 +1,68 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	__experimentalHStack as HStack,
+	__unstableMotion as motion,
+} from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import PresetColors from './preset-colors';
+import PreviewWrapper from './preview-wrapper';
+
+const firstFrameVariants = {
+	start: {
+		scale: 1,
+		opacity: 1,
+	},
+	hover: {
+		scale: 0,
+		opacity: 0,
+	},
+};
+
+interface StylesPreviewColorsProps {
+	label?: string;
+	isFocused?: boolean;
+	withHoverView?: boolean;
+}
+
+const StylesPreviewColors = ( {
+	label,
+	isFocused,
+	withHoverView,
+}: StylesPreviewColorsProps ) => {
+	return (
+		<PreviewWrapper
+			label={ label }
+			isFocused={ isFocused }
+			withHoverView={ withHoverView }
+		>
+			{ ( { key } ) => (
+				<motion.div
+					key={ key }
+					variants={ firstFrameVariants }
+					style={ {
+						height: '100%',
+						overflow: 'hidden',
+					} }
+				>
+					<HStack
+						spacing={ 0 }
+						justify="center"
+						style={ {
+							height: '100%',
+							overflow: 'hidden',
+						} }
+					>
+						<PresetColors />
+					</HStack>
+				</motion.div>
+			) }
+		</PreviewWrapper>
+	);
+};
+
+export default StylesPreviewColors;

package/src/preview-hooks.tsx

@@ -0,0 +1,58 @@
+/**
+ * WordPress dependencies
+ */
+import type { Color } from '@wordpress/global-styles-engine';
+
+/**
+ * Internal dependencies
+ */
+import { useSetting, useStyle } from './hooks';
+
+export function useStylesPreviewColors(): {
+	paletteColors: Color[];
+	highlightedColors: Color[];
+} {
+	const [ textColor = 'black' ] = useStyle< string >( 'color.text' );
+	const [ backgroundColor = 'white' ] =
+		useStyle< string >( 'color.background' );
+	const [ headingColor = textColor ] = useStyle< string >(
+		'elements.h1.color.text'
+	);
+	const [ linkColor = headingColor ] = useStyle< string >(
+		'elements.link.color.text'
+	);
+	const [ buttonBackgroundColor = linkColor ] = useStyle< string >(
+		'elements.button.color.background'
+	);
+
+	const [ coreColors ] = useSetting< Color[] >( 'color.palette.core' ) || [];
+	const [ themeColors ] =
+		useSetting< Color[] >( 'color.palette.theme' ) || [];
+	const [ customColors ] =
+		useSetting< Color[] >( 'color.palette.custom' ) || [];
+
+	const paletteColors: Color[] = ( 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,
+	};
+}

package/src/preview-styles.tsx

@@ -0,0 +1,196 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	__experimentalHStack as HStack,
+	__experimentalVStack as VStack,
+	__unstableMotion as motion,
+} from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import { useStyle } from './hooks';
+import { useStylesPreviewColors } from './preview-hooks';
+import TypographyExample from './typography-example';
+import HighlightedColors from './highlighted-colors';
+import PreviewWrapper from './preview-wrapper';
+
+const firstFrameVariants = {
+	start: {
+		scale: 1,
+		opacity: 1,
+	},
+	hover: {
+		scale: 0,
+		opacity: 0,
+	},
+};
+
+const midFrameVariants = {
+	hover: {
+		opacity: 1,
+	},
+	start: {
+		opacity: 0.5,
+	},
+};
+
+const secondFrameVariants = {
+	hover: {
+		scale: 1,
+		opacity: 1,
+	},
+	start: {
+		scale: 0,
+		opacity: 0,
+	},
+};
+
+interface PreviewStylesProps {
+	label?: string;
+	isFocused?: boolean;
+	withHoverView?: boolean;
+	variation?: any;
+}
+
+function PreviewStyles( {
+	label,
+	isFocused,
+	withHoverView,
+	variation,
+}: PreviewStylesProps ) {
+	const [ fontWeight ] = useStyle< string >( 'typography.fontWeight' );
+	const [ fontFamily = 'serif' ] = useStyle< string >(
+		'typography.fontFamily'
+	);
+	const [ headingFontFamily = fontFamily ] = useStyle< string >(
+		'elements.h1.typography.fontFamily'
+	);
+	const [ headingFontWeight = fontWeight ] = useStyle< string >(
+		'elements.h1.typography.fontWeight'
+	);
+	const [ textColor = 'black' ] = useStyle< string >( 'color.text' );
+	const [ headingColor = textColor ] = useStyle< string >(
+		'elements.h1.color.text'
+	);
+
+	const { paletteColors } = useStylesPreviewColors();
+
+	return (
+		<PreviewWrapper
+			label={ label }
+			isFocused={ isFocused }
+			withHoverView={ withHoverView }
+		>
+			{ ( { ratio, key } ) => (
+				<motion.div
+					key={ key }
+					variants={ firstFrameVariants }
+					style={ {
+						height: '100%',
+						overflow: 'hidden',
+					} }
+				>
+					<HStack
+						spacing={ 10 * ratio }
+						justify="center"
+						style={ {
+							height: '100%',
+							overflow: 'hidden',
+						} }
+					>
+						<TypographyExample
+							fontSize={ 65 * ratio }
+							variation={ variation }
+						/>
+						<VStack spacing={ 4 * ratio }>
+							<HighlightedColors
+								normalizedColorSwatchSize={ 32 }
+								ratio={ ratio }
+							/>
+						</VStack>
+					</HStack>
+				</motion.div>
+			) }
+			{ ( { key } ) => (
+				<motion.div
+					key={ key }
+					variants={ withHoverView ? midFrameVariants : undefined }
+					style={ {
+						height: '100%',
+						width: '100%',
+						position: 'absolute',
+						top: 0,
+						overflow: 'hidden',
+						filter: 'blur(60px)',
+						opacity: 0.1,
+					} }
+				>
+					<HStack
+						spacing={ 0 }
+						justify="flex-start"
+						style={ {
+							height: '100%',
+							overflow: 'hidden',
+						} }
+					>
+						{ paletteColors
+							.slice( 0, 4 )
+							.map( ( { color }, index ) => (
+								<div
+									key={ index }
+									style={ {
+										height: '100%',
+										background: color,
+										flexGrow: 1,
+									} }
+								/>
+							) ) }
+					</HStack>
+				</motion.div>
+			) }
+			{ ( { ratio, key } ) => (
+				<motion.div
+					key={ key }
+					variants={ secondFrameVariants }
+					style={ {
+						height: '100%',
+						width: '100%',
+						overflow: 'hidden',
+						position: 'absolute',
+						top: 0,
+					} }
+				>
+					<VStack
+						spacing={ 3 * ratio }
+						justify="center"
+						style={ {
+							height: '100%',
+							overflow: 'hidden',
+							padding: 10 * ratio,
+							boxSizing: 'border-box',
+						} }
+					>
+						{ label && (
+							<div
+								style={ {
+									fontSize: 40 * ratio,
+									fontFamily: headingFontFamily,
+									color: headingColor,
+									fontWeight: headingFontWeight,
+									lineHeight: '1em',
+									textAlign: 'center',
+								} }
+							>
+								{ label }
+							</div>
+						) }
+					</VStack>
+				</motion.div>
+			) }
+		</PreviewWrapper>
+	);
+}
+
+export default PreviewStyles;

package/src/preview-typography.tsx

@@ -0,0 +1,49 @@
+/**
+ * WordPress dependencies
+ */
+import { __experimentalHStack as HStack } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import TypographyExample from './typography-example';
+import PreviewWrapper from './preview-wrapper';
+
+interface StylesPreviewTypographyProps {
+	variation: any;
+	isFocused?: boolean;
+	withHoverView?: boolean;
+}
+
+const StylesPreviewTypography = ( {
+	variation,
+	isFocused,
+	withHoverView,
+}: StylesPreviewTypographyProps ) => {
+	return (
+		<PreviewWrapper
+			label={ variation.title }
+			isFocused={ isFocused }
+			withHoverView={ withHoverView }
+		>
+			{ ( { ratio, key } ) => (
+				<HStack
+					key={ key }
+					spacing={ 10 * ratio }
+					justify="center"
+					style={ {
+						height: '100%',
+						overflow: 'hidden',
+					} }
+				>
+					<TypographyExample
+						variation={ variation }
+						fontSize={ 85 * ratio }
+					/>
+				</HStack>
+			) }
+		</PreviewWrapper>
+	);
+};
+
+export default StylesPreviewTypography;

package/src/preview-wrapper.tsx

@@ -0,0 +1,137 @@
+/**
+ * WordPress dependencies
+ */
+import { __unstableMotion as motion } from '@wordpress/components';
+import {
+	useThrottle,
+	useReducedMotion,
+	useResizeObserver,
+} from '@wordpress/compose';
+import { useLayoutEffect, useState } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { useStyle } from './hooks';
+
+const normalizedWidth = 248;
+const normalizedHeight = 152;
+
+// Throttle options for useThrottle. Must be defined outside of the component,
+// so that the object reference is the same on each render.
+const THROTTLE_OPTIONS = {
+	leading: true,
+	trailing: true,
+};
+
+interface PreviewWrapperProps {
+	children:
+		| ( ( args: { ratio: number; key: number } ) => React.ReactNode )
+		| ( ( args: { ratio: number; key: number } ) => React.ReactNode )[];
+	label?: string;
+	isFocused?: boolean;
+	withHoverView?: boolean;
+}
+
+function PreviewWrapper( {
+	children,
+	label,
+	isFocused,
+	withHoverView,
+}: PreviewWrapperProps ) {
+	const [ backgroundColor = 'white' ] =
+		useStyle< string >( 'color.background' );
+	const [ gradientValue ] = useStyle< string >( 'color.gradient' );
+	const disableMotion = useReducedMotion();
+	const [ isHovered, setIsHovered ] = useState( false );
+	const [ containerResizeListener, { width } ] = useResizeObserver();
+	const [ throttledWidth, setThrottledWidthState ] = useState( width );
+	const [ ratioState, setRatioState ] = useState< number | undefined >();
+
+	const setThrottledWidth = useThrottle(
+		setThrottledWidthState,
+		250,
+		THROTTLE_OPTIONS
+	);
+
+	// Must use useLayoutEffect to avoid a flash of the container  at the wrong
+	// size before the width is set.
+	useLayoutEffect( () => {
+		if ( width ) {
+			setThrottledWidth( width );
+		}
+	}, [ width, setThrottledWidth ] );
+
+	// Must use useLayoutEffect to avoid a flash of the container at the wrong
+	// size before the width is set.
+	useLayoutEffect( () => {
+		const newRatio = throttledWidth ? throttledWidth / normalizedWidth : 1;
+		const ratioDiff = newRatio - ( ratioState || 0 );
+
+		// Only update the ratio state if the difference is big enough
+		// or if the ratio state is not yet set. This is to avoid an
+		// endless loop of updates at particular viewport heights when the
+		// presence of a scrollbar causes the width to change slightly.
+		const isRatioDiffBigEnough = Math.abs( ratioDiff ) > 0.1;
+
+		if ( isRatioDiffBigEnough || ! ratioState ) {
+			setRatioState( newRatio );
+		}
+	}, [ throttledWidth, ratioState ] );
+
+	// Set a fallbackRatio to use before the throttled ratio has been set.
+	const fallbackRatio = width ? width / normalizedWidth : 1;
+	/*
+	 * Use the throttled ratio if it has been calculated, otherwise
+	 * use the fallback ratio. The throttled ratio is used to avoid
+	 * an endless loop of updates at particular viewport heights.
+	 * See: https://github.com/WordPress/gutenberg/issues/55112
+	 */
+	const ratio = ratioState ? ratioState : fallbackRatio;
+
+	const isReady = !! width;
+
+	return (
+		<>
+			<div style={ { position: 'relative' } }>
+				{ containerResizeListener }
+			</div>
+			{ isReady && (
+				<div
+					className="global-styles-ui-preview__wrapper"
+					style={ {
+						height: normalizedHeight * ratio,
+					} }
+					onMouseEnter={ () => setIsHovered( true ) }
+					onMouseLeave={ () => setIsHovered( false ) }
+					tabIndex={ -1 }
+				>
+					<motion.div
+						style={ {
+							height: normalizedHeight * ratio,
+							width: '100%',
+							background: gradientValue ?? backgroundColor,
+							cursor: withHoverView ? 'pointer' : undefined,
+						} }
+						initial="start"
+						animate={
+							( isHovered || isFocused ) &&
+							! disableMotion &&
+							label
+								? 'hover'
+								: 'start'
+						}
+					>
+						{ []
+							.concat( children as any ) // This makes sure children is always an array.
+							.map( ( child: any, key: number ) =>
+								child( { ratio, key } )
+							) }
+					</motion.div>
+				</div>
+			) }
+		</>
+	);
+}
+
+export default PreviewWrapper;

package/src/provider.tsx

@@ -0,0 +1,54 @@
+/**
+ * External dependencies
+ */
+import type { ReactNode } from 'react';
+
+/**
+ * WordPress dependencies
+ */
+import { useMemo } from '@wordpress/element';
+import type { GlobalStylesConfig } from '@wordpress/global-styles-engine';
+import { mergeGlobalStyles } from '@wordpress/global-styles-engine';
+
+/**
+ * Internal dependencies
+ */
+import { GlobalStylesContext } from './context';
+
+interface GlobalStylesProviderProps {
+	children: ReactNode;
+	value: GlobalStylesConfig;
+	baseValue: GlobalStylesConfig;
+	onChange: ( newValue: GlobalStylesConfig ) => void;
+	fontLibraryEnabled?: boolean;
+}
+
+export function GlobalStylesProvider( {
+	children,
+	value,
+	baseValue,
+	onChange,
+	fontLibraryEnabled,
+}: GlobalStylesProviderProps ) {
+	// Compute merged with memoization since merging can be expensive
+	const merged = useMemo( () => {
+		return mergeGlobalStyles( baseValue, value );
+	}, [ baseValue, value ] );
+
+	const contextValue = useMemo(
+		() => ( {
+			user: value,
+			base: baseValue,
+			merged,
+			onChange,
+			fontLibraryEnabled,
+		} ),
+		[ value, baseValue, merged, onChange, fontLibraryEnabled ]
+	);
+
+	return (
+		<GlobalStylesContext.Provider value={ contextValue }>
+			{ children }
+		</GlobalStylesContext.Provider>
+	);
+}