@wordpress/global-styles-ui 1.1.0

package/src/test/shadow-utils.spec.js

@@ -0,0 +1,251 @@
+/**
+ * Internal dependencies
+ */
+import { getShadowParts, shadowStringToObject } from '../shadow-utils';
+
+const colorFormats = {
+	named: 'red',
+	hex: '#ff0000',
+	hexAlpha: '#ff000077',
+	rgb: 'rgb(255, 0, 0)',
+	rgbSpaced: 'rgb(255 0 0)',
+	rgbMultiSpaced: 'rgb(255  0   0)',
+	rgba: 'rgba(255, 0, 0, 0.5)',
+	rgbp: 'rgb(255 0 0 / 50%)',
+	hsl: 'hsl(0, 100%, 50%)',
+	hsla: 'hsla(0, 100%, 50%, 0.5)',
+	hslp: 'hsl(0 100% 50% / 50%)',
+	currentcolor: 'currentcolor',
+};
+const validShadowFormats = {
+	xy: '{x} {y}',
+	xyInset: '{x} {y} inset',
+	insetXY: 'inset {x} {y}',
+
+	xyColor: '{x} {y} {color}',
+	xyColorInset: '{x} {y} {color} inset',
+	xyInsetColor: '{x} {y} inset {color}',
+	insetXYColor: 'inset {x} {y} {color}',
+
+	colorXY: '{color} {x} {y}',
+	colorXYInset: '{color} {x} {y} inset',
+	colorInsetXY: '{color} inset {x} {y}',
+	insetColorXY: 'inset {color} {x} {y}',
+
+	xyBlur: '{x} {y} {blur}',
+	xyBlurInset: '{x} {y} {blur} inset',
+	insetXYBlur: 'inset {x} {y} {blur}',
+
+	xyBlurColor: '{x} {y} {blur} {color}',
+	xyBlurColorInset: '{x} {y} {blur} {color} inset',
+	xyBlurInsetColor: '{x} {y} {blur} inset {color}',
+	insetXYBlurColor: 'inset {x} {y} {blur} {color}',
+
+	colorXYBlur: '{color} {x} {y} {blur}',
+	colorXYBlurInset: '{color} {x} {y} {blur} inset',
+	colorInsetXYBlur: '{color} inset {x} {y} {blur}',
+	insetColorXYBlur: 'inset {color} {x} {y} {blur}',
+
+	xyBlurSpread: '{x} {y} {blur} {spread}',
+	xyBlurSpreadInset: '{x} {y} {blur} {spread} inset',
+	insetXYBlurSpread: 'inset {x} {y} {blur} {spread}',
+
+	xyBlurSpreadColor: '{x} {y} {blur} {spread} {color}',
+	xyBlurSpreadColorInset: '{x} {y} {blur} {spread} {color} inset',
+	xyBlurSpreadInsetColor: '{x} {y} {blur} {spread} inset {color}',
+	insetXYBlurSpreadColor: 'inset {x} {y} {blur} {spread} {color}',
+
+	colorXYBlurSpread: '{color} {x} {y} {blur} {spread}',
+	colorXYBlurSpreadInset: '{color} {x} {y} {blur} {spread} inset',
+	colorInsetXYBlurSpread: '{color} inset {x} {y} {blur} {spread}',
+	insetColorXYBlurSpread: 'inset {color} {x} {y} {blur} {spread}',
+
+	multipleSpaces: '{x}  {y}   {blur} {spread}',
+	upperInset: 'INSET {x} {y} {blur} {spread} {color}',
+};
+
+const invalidShadowFormats = {
+	oneLength: '{x}',
+	multipleLengthGroups1: '{x} {y} {color} {blur}',
+	multipleLengthGroups2: '{x} {y} {blur} {spread} {color} 5px',
+	multipleInsets: 'inset inset {x} {y} {blur} {spread} {color}',
+	multipleColors: '{x} {y} {blur} {spread} {color} {color}',
+};
+
+const combinedShadows = {
+	onePart: '{1}',
+	twoParts: '{1},{2}',
+	twoPartsSpaced: '{1}, {2}',
+	threeParts: '{1},{2},{3}',
+};
+
+const shadowUnits = {
+	px: '1px',
+	em: '1em',
+	rem: '1rem',
+	halfRem: '0.5rem',
+	percent: '1%',
+	halfPercent: '0.5%',
+	ex: '1ex',
+	inch: '1in',
+	cm: '1cm',
+	mm: '1mm',
+	pt: '1pt',
+	pc: '1pc',
+	vh: '1vh',
+	vw: '1vw',
+	vmin: '1vmin',
+	vmax: '1vmax',
+	ch: '1ch',
+	lh: '1lh',
+	zero: '0',
+};
+
+// Data helper functions
+function getShadowString( formatString, values ) {
+	return formatString.replace( /\{(\w+)\}/g, ( match, placeholder ) => {
+		if ( values.hasOwnProperty( placeholder ) ) {
+			return values[ placeholder ];
+		}
+		return match;
+	} );
+}
+function getCombinedShadowString( format, parts ) {
+	return format.replace( /{(\d+)}/g, ( _, index ) => parts[ index - 1 ] );
+}
+
+describe( 'getShadowParts', () => {
+	Object.entries( validShadowFormats ).forEach( ( [ shadowKey, shadow ] ) => {
+		describe( `test shadow format: ${ shadowKey }`, () => {
+			Object.entries( colorFormats ).forEach( ( [ colorKey, color ] ) => {
+				Object.entries( combinedShadows ).forEach(
+					( [ combinedShadowKey, combinedShadow ] ) => {
+						const shadowCount = combinedShadow.split( ',' ).length;
+						const shadowStrings = Array.from(
+							{ length: shadowCount },
+							() =>
+								getShadowString( shadow, {
+									x: '1px',
+									y: '2px',
+									blur: '3px',
+									spread: '4px',
+									color,
+								} )
+						);
+
+						const input = getCombinedShadowString(
+							combinedShadow,
+							shadowStrings
+						);
+						const output = shadowStrings;
+
+						it( `should return shadow parts for ${ colorKey } color and ${ combinedShadowKey } shadow`, () => {
+							const parts = getShadowParts( input );
+							expect( parts ).toEqual( output );
+						} );
+					}
+				);
+			} );
+		} );
+	} );
+} );
+
+describe( 'shadowStringToObject', () => {
+	const defaultShadow = {
+		x: '0',
+		y: '0',
+		blur: '0',
+		spread: '0',
+		color: '#000',
+		inset: false,
+	};
+
+	Object.entries( validShadowFormats ).forEach( ( [ shadowKey, shadow ] ) => {
+		describe( `test shadow format: ${ shadowKey }`, () => {
+			Object.entries( colorFormats ).forEach( ( [ colorKey, color ] ) => {
+				const hasX = shadow.includes( '{x}' );
+				const hasY = shadow.includes( '{y}' );
+				const hasBlur = shadow.includes( '{blur}' );
+				const hasSpread = shadow.includes( '{spread}' );
+				const hasColor = shadow.includes( '{color}' );
+				const hasInset = shadow.toLowerCase().includes( 'inset' );
+
+				const shadowString = getShadowString( shadow, {
+					x: '1px',
+					y: '2px',
+					blur: '3px',
+					spread: '4px',
+					color,
+				} );
+
+				const input = shadowString;
+				const output = {
+					x: hasX ? '1px' : defaultShadow.x,
+					y: hasY ? '2px' : defaultShadow.y,
+					blur: hasBlur ? '3px' : defaultShadow.blur,
+					spread: hasSpread ? '4px' : defaultShadow.spread,
+					color: hasColor ? color : defaultShadow.color,
+					inset: hasInset,
+				};
+
+				it( `should return shadow object for ${ colorKey } color`, () => {
+					const shadowObj = shadowStringToObject( input );
+					expect( shadowObj ).toEqual( output );
+				} );
+			} );
+		} );
+	} );
+
+	describe( `test invalid shadow formats`, () => {
+		const color = colorFormats.hex;
+		Object.entries( invalidShadowFormats ).forEach(
+			( [ shadowKey, shadow ] ) => {
+				const shadowString = getShadowString( shadow, {
+					x: '1px',
+					y: '2px',
+					blur: '3px',
+					spread: '4px',
+					color,
+				} );
+
+				const input = shadowString;
+				const output = defaultShadow;
+
+				it( `should return default shadow object for ${ shadowKey }`, () => {
+					const shadowObj = shadowStringToObject( input );
+					expect( shadowObj ).toEqual( output );
+				} );
+			}
+		);
+	} );
+
+	describe( `test shadow with all units`, () => {
+		const shadow = validShadowFormats.xyBlurSpreadColor;
+		const color = colorFormats.hex;
+
+		Object.entries( shadowUnits ).forEach( ( [ unitKey, unit ] ) => {
+			const shadowString = getShadowString( shadow, {
+				x: unit,
+				y: unit,
+				blur: unit,
+				spread: unit,
+				color,
+			} );
+
+			const input = shadowString;
+			const output = {
+				x: unit,
+				y: unit,
+				blur: unit,
+				spread: unit,
+				color,
+				inset: false,
+			};
+
+			it( `should return shadow object for the unit: ${ unitKey }`, () => {
+				const shadowObj = shadowStringToObject( input );
+				expect( shadowObj ).toEqual( output );
+			} );
+		} );
+	} );
+} );

package/src/test/utils.spec.js

@@ -0,0 +1,59 @@
+/**
+ * Internal dependencies
+ */
+import { getNewIndexFromPresets } from '../utils';
+
+const validPresets = {
+	single: [ { slug: 'preset-1' } ],
+	multiple: [ { slug: 'preset-1' }, { slug: 'preset-2' } ],
+	withGaps: [ { slug: 'preset-1' }, { slug: 'preset-3' } ],
+	mixedPrefixes: [
+		{ slug: 'preset-1' },
+		{ slug: 'shadow-2' },
+		{ slug: 'preset-3' },
+	],
+	nonStringSlug: [ { slug: 'preset-1' }, { slug: 2 } ],
+	emptyArray: [],
+};
+
+const invalidPresets = {
+	noMatch: [ { slug: 'preset-alpha' }, { slug: 'preset-beta' } ],
+	emptySlug: [ { slug: '' } ],
+	nullSlug: [ { slug: null } ],
+	undefinedSlug: [ { slug: undefined } ],
+	nonObjectElements: [ 'preset-1' ],
+};
+
+const getExpectedIndex = ( presetKey, presets ) => {
+	if ( presetKey === 'withGaps' ) {
+		return 4;
+	}
+	if ( presetKey === 'mixedPrefixes' ) {
+		return 4;
+	}
+	if ( presetKey === 'nonStringSlug' ) {
+		return 2;
+	}
+	return presets.length + 1;
+};
+
+describe( 'getNewIndexFromPresets', () => {
+	Object.entries( validPresets ).forEach( ( [ presetKey, presets ] ) => {
+		describe( `test valid preset format: ${ presetKey }`, () => {
+			const newIndex = getNewIndexFromPresets( presets, 'preset-' );
+			it( `should return correct new index for ${ presetKey }`, () => {
+				const expectedIndex = getExpectedIndex( presetKey, presets );
+				expect( newIndex ).toBe( expectedIndex );
+			} );
+		} );
+	} );
+
+	Object.entries( invalidPresets ).forEach( ( [ presetKey, presets ] ) => {
+		describe( `test invalid preset format: ${ presetKey }`, () => {
+			const newIndex = getNewIndexFromPresets( presets, 'preset-' );
+			it( `should return 1 for ${ presetKey }`, () => {
+				expect( newIndex ).toBe( 1 );
+			} );
+		} );
+	} );
+} );

package/src/typography-elements.tsx

@@ -0,0 +1,113 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import {
+	__experimentalItemGroup as ItemGroup,
+	__experimentalVStack as VStack,
+	__experimentalHStack as HStack,
+	FlexItem,
+} from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import { NavigationButtonAsItem } from './navigation-button';
+import { Subtitle } from './subtitle';
+import { useStyle } from './hooks';
+
+interface ElementItemProps {
+	parentMenu: string;
+	element: string;
+	label: string;
+}
+
+function ElementItem( { parentMenu, element, label }: ElementItemProps ) {
+	const prefix =
+		element === 'text' || ! element ? '' : `elements.${ element }.`;
+	const extraStyles =
+		element === 'link'
+			? {
+					textDecoration: 'underline',
+			  }
+			: {};
+
+	const [ fontFamily ] = useStyle< string >(
+		prefix + 'typography.fontFamily'
+	);
+	const [ fontStyle ] = useStyle< string >( prefix + 'typography.fontStyle' );
+	const [ fontWeight ] = useStyle< string >(
+		prefix + 'typography.fontWeight'
+	);
+	const [ backgroundColor ] = useStyle< string >(
+		prefix + 'color.background'
+	);
+	const [ fallbackBackgroundColor ] =
+		useStyle< string >( 'color.background' );
+	const [ gradientValue ] = useStyle< string >( prefix + 'color.gradient' );
+	const [ color ] = useStyle< string >( prefix + 'color.text' );
+
+	return (
+		<NavigationButtonAsItem path={ parentMenu + '/typography/' + element }>
+			<HStack justify="flex-start">
+				<FlexItem
+					className="global-styles-ui-screen-typography__indicator"
+					aria-hidden="true"
+					style={ {
+						fontFamily: fontFamily ?? 'serif',
+						background:
+							gradientValue ??
+							backgroundColor ??
+							fallbackBackgroundColor,
+						color,
+						fontStyle,
+						fontWeight,
+						...extraStyles,
+					} }
+				>
+					{ __( 'Aa' ) }
+				</FlexItem>
+				<FlexItem>{ label }</FlexItem>
+			</HStack>
+		</NavigationButtonAsItem>
+	);
+}
+
+function TypographyElements() {
+	const parentMenu = '';
+
+	return (
+		<VStack spacing={ 3 }>
+			<Subtitle level={ 3 }>{ __( 'Elements' ) }</Subtitle>
+			<ItemGroup isBordered isSeparated>
+				<ElementItem
+					parentMenu={ parentMenu }
+					element="text"
+					label={ __( 'Text' ) }
+				/>
+				<ElementItem
+					parentMenu={ parentMenu }
+					element="link"
+					label={ __( 'Links' ) }
+				/>
+				<ElementItem
+					parentMenu={ parentMenu }
+					element="heading"
+					label={ __( 'Headings' ) }
+				/>
+				<ElementItem
+					parentMenu={ parentMenu }
+					element="caption"
+					label={ __( 'Captions' ) }
+				/>
+				<ElementItem
+					parentMenu={ parentMenu }
+					element="button"
+					label={ __( 'Buttons' ) }
+				/>
+			</ItemGroup>
+		</VStack>
+	);
+}
+
+export default TypographyElements;

package/src/typography-example.tsx

@@ -0,0 +1,78 @@
+/**
+ * WordPress dependencies
+ */
+import { useContext } from '@wordpress/element';
+import { __unstableMotion as motion } from '@wordpress/components';
+import { _x } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import { GlobalStylesContext } from './context';
+import { getFamilyPreviewStyle } from './font-library-modal/utils/preview-styles';
+import { getFontFamilies } from './utils';
+import { useStyle } from './hooks';
+
+interface TypographyExampleProps {
+	fontSize?: number;
+	variation?: any;
+}
+
+export default function PreviewTypography( {
+	fontSize,
+	variation,
+}: TypographyExampleProps ) {
+	const { base } = useContext( GlobalStylesContext );
+	let config = base;
+	if ( variation ) {
+		config = { ...base, ...variation };
+	}
+
+	const [ textColor ] = useStyle( 'color.text' );
+
+	const [ bodyFontFamilies, headingFontFamilies ] = getFontFamilies( config );
+	const bodyPreviewStyle: React.CSSProperties = bodyFontFamilies
+		? getFamilyPreviewStyle( bodyFontFamilies )
+		: {};
+	const headingPreviewStyle: React.CSSProperties = headingFontFamilies
+		? getFamilyPreviewStyle( headingFontFamilies )
+		: {};
+
+	if ( textColor ) {
+		bodyPreviewStyle.color = textColor;
+		headingPreviewStyle.color = textColor;
+	}
+
+	if ( fontSize ) {
+		bodyPreviewStyle.fontSize = fontSize;
+		headingPreviewStyle.fontSize = fontSize;
+	}
+
+	return (
+		<motion.div
+			animate={ {
+				scale: 1,
+				opacity: 1,
+			} }
+			initial={ {
+				scale: 0.1,
+				opacity: 0,
+			} }
+			transition={ {
+				delay: 0.3,
+				type: 'tween',
+			} }
+			style={ {
+				textAlign: 'center',
+				lineHeight: 1,
+			} }
+		>
+			<span style={ headingPreviewStyle }>
+				{ _x( 'A', 'Uppercase letter A' ) }
+			</span>
+			<span style={ bodyPreviewStyle }>
+				{ _x( 'a', 'Lowercase letter A' ) }
+			</span>
+		</motion.div>
+	);
+}

package/src/typography-panel.tsx

@@ -0,0 +1,56 @@
+/**
+ * WordPress dependencies
+ */
+// @ts-expect-error: Not typed yet.
+import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
+
+/**
+ * Internal dependencies
+ */
+import { useStyle, useSetting } from './hooks';
+import { unlock } from './lock-unlock';
+
+const { useSettingsForBlockElement, TypographyPanel: StylesTypographyPanel } =
+	unlock( blockEditorPrivateApis );
+
+interface TypographyPanelProps {
+	element: string;
+	headingLevel: string;
+}
+
+export default function TypographyPanel( {
+	element,
+	headingLevel,
+}: TypographyPanelProps ) {
+	let prefixParts: string[] = [];
+	if ( element === 'heading' ) {
+		prefixParts = prefixParts.concat( [ 'elements', headingLevel ] );
+	} else if ( element && element !== 'text' ) {
+		prefixParts = prefixParts.concat( [ 'elements', element ] );
+	}
+	const prefix = prefixParts.join( '.' );
+
+	const [ style ] = useStyle( prefix, '', 'user', false );
+	const [ inheritedStyle, setStyle ] = useStyle(
+		prefix,
+		'',
+		'merged',
+		false
+	);
+	const [ rawSettings ] = useSetting( '' );
+	const usedElement = element === 'heading' ? headingLevel : element;
+	const settings = useSettingsForBlockElement(
+		rawSettings,
+		undefined,
+		usedElement
+	);
+
+	return (
+		<StylesTypographyPanel
+			inheritedValue={ inheritedStyle }
+			value={ style }
+			onChange={ setStyle }
+			settings={ settings }
+		/>
+	);
+}

package/src/typography-preview.tsx

@@ -0,0 +1,61 @@
+/**
+ * Internal dependencies
+ */
+import { useStyle } from './hooks';
+
+interface TypographyPreviewProps {
+	name?: string;
+	element: string;
+	headingLevel: string;
+}
+
+export default function TypographyPreview( {
+	name,
+	element,
+	headingLevel,
+}: TypographyPreviewProps ) {
+	let prefix = '';
+	if ( element === 'heading' ) {
+		prefix = `elements.${ headingLevel }.`;
+	} else if ( element && element !== 'text' ) {
+		prefix = `elements.${ element }.`;
+	}
+
+	const [ fontFamily ] = useStyle( prefix + 'typography.fontFamily', name );
+	const [ gradientValue ] = useStyle( prefix + 'color.gradient', name );
+	const [ backgroundColor ] = useStyle( prefix + 'color.background', name );
+	const [ fallbackBackgroundColor ] = useStyle( 'color.background' );
+	const [ color ] = useStyle( prefix + 'color.text', name );
+	const [ fontSize ] = useStyle( prefix + 'typography.fontSize', name );
+	const [ fontStyle ] = useStyle( prefix + 'typography.fontStyle', name );
+	const [ fontWeight ] = useStyle( prefix + 'typography.fontWeight', name );
+	const [ letterSpacing ] = useStyle(
+		prefix + 'typography.letterSpacing',
+		name
+	);
+	const extraStyles =
+		element === 'link'
+			? {
+					textDecoration: 'underline',
+			  }
+			: {};
+
+	return (
+		<div
+			className="global-styles-ui-typography-preview"
+			style={ {
+				fontFamily: fontFamily ?? 'serif',
+				background:
+					gradientValue ?? backgroundColor ?? fallbackBackgroundColor,
+				color,
+				fontSize,
+				fontStyle,
+				fontWeight,
+				letterSpacing,
+				...extraStyles,
+			} }
+		>
+			Aa
+		</div>
+	);
+}

package/src/typography-variations.tsx

@@ -0,0 +1,35 @@
+/**
+ * WordPress dependencies
+ */
+import type { GlobalStylesConfig } from '@wordpress/global-styles-engine';
+
+/**
+ * Internal dependencies
+ */
+import TypographyVariationsInternal from './variations/variations-typography';
+import { withGlobalStylesProvider } from './with-global-styles-provider';
+
+export interface TypographyVariationsProps {
+	value: GlobalStylesConfig;
+	baseValue: GlobalStylesConfig;
+	onChange: ( config: GlobalStylesConfig ) => void;
+	title?: string;
+	gap?: number;
+}
+
+/**
+ * Render Typography Variations.
+ *
+ * @example
+ * ```tsx
+ * <TypographyVariations
+ *   value={userConfig}
+ *   baseValue={baseConfig}
+ *   onChange={setUserConfig}
+ *   title="Typography"
+ *   gap={3}
+ * />
+ * ```
+ */
+export const TypographyVariations: React.ComponentType< TypographyVariationsProps > =
+	withGlobalStylesProvider( TypographyVariationsInternal );