@wordpress/global-styles-ui 1.1.0

package/src/utils.ts

@@ -0,0 +1,301 @@
+/**
+ * WordPress dependencies
+ */
+import { areGlobalStylesEqual } from '@wordpress/global-styles-engine';
+import type { GlobalStylesConfig } from '@wordpress/global-styles-engine';
+
+/**
+ * Removes all instances of properties from an object.
+ *
+ * @param object     The object to remove the properties from.
+ * @param properties The properties to remove.
+ * @return The modified object.
+ */
+export function removePropertiesFromObject(
+	object: any,
+	properties: string[]
+): any {
+	if ( ! properties?.length ) {
+		return object;
+	}
+
+	if (
+		typeof object !== 'object' ||
+		! object ||
+		! Object.keys( object ).length
+	) {
+		return object;
+	}
+
+	for ( const key in object ) {
+		if ( properties.includes( key ) ) {
+			delete object[ key ];
+		} else if ( typeof object[ key ] === 'object' ) {
+			removePropertiesFromObject( object[ key ], properties );
+		}
+	}
+	return object;
+}
+
+/**
+ * Returns a new object, with properties specified in `properties` array.,
+ * maintain the original object tree structure.
+ * The function is recursive, so it will perform a deep search for the given properties.
+ * E.g., the function will return `{ a: { b: { c: { test: 1 } } } }` if the properties are  `[ 'test' ]`.
+ *
+ * @param object     The object to filter
+ * @param properties The properties to filter by
+ * @return The merged object.
+ */
+export const filterObjectByProperties = (
+	object: any,
+	properties: string[]
+): any => {
+	if ( ! object || ! properties?.length ) {
+		return {};
+	}
+
+	const newObject: any = {};
+	Object.keys( object ).forEach( ( key ) => {
+		if ( properties.includes( key ) ) {
+			newObject[ key ] = object[ key ];
+		} else if ( typeof object[ key ] === 'object' ) {
+			const newFilter = filterObjectByProperties(
+				object[ key ],
+				properties
+			);
+			if ( Object.keys( newFilter ).length ) {
+				newObject[ key ] = newFilter;
+			}
+		}
+	} );
+	return newObject;
+};
+
+/**
+ * Compares a style variation to the same variation filtered by the specified properties.
+ * Returns true if the variation contains only the properties specified.
+ *
+ * @param variation  The variation to compare.
+ * @param properties The properties to compare.
+ * @return Whether the variation contains only the specified properties.
+ */
+export function isVariationWithProperties(
+	variation: GlobalStylesConfig,
+	properties: string[]
+): boolean {
+	const variationWithProperties = filterObjectByProperties(
+		structuredClone( variation ),
+		properties
+	);
+
+	return areGlobalStylesEqual( variationWithProperties, variation );
+}
+
+function getFontFamilyFromSetting( fontFamilies: any[], setting: string ): any {
+	if ( ! Array.isArray( fontFamilies ) || ! setting ) {
+		return null;
+	}
+
+	const fontFamilyVariable = setting.replace( 'var(', '' ).replace( ')', '' );
+	const fontFamilySlug = fontFamilyVariable?.split( '--' ).slice( -1 )[ 0 ];
+
+	return fontFamilies.find(
+		( fontFamily ) => fontFamily.slug === fontFamilySlug
+	);
+}
+
+/**
+ * Extracts font families from a theme JSON configuration.
+ *
+ * @param themeJson The theme JSON configuration
+ * @return Array containing [bodyFontFamily, headingFontFamily]
+ */
+export function getFontFamilies( themeJson: any ): [ any, any ] {
+	const themeFontFamilies =
+		themeJson?.settings?.typography?.fontFamilies?.theme;
+	const customFontFamilies =
+		themeJson?.settings?.typography?.fontFamilies?.custom;
+
+	let fontFamilies: any[] = [];
+	if ( themeFontFamilies && customFontFamilies ) {
+		fontFamilies = [ ...themeFontFamilies, ...customFontFamilies ];
+	} else if ( themeFontFamilies ) {
+		fontFamilies = themeFontFamilies;
+	} else if ( customFontFamilies ) {
+		fontFamilies = customFontFamilies;
+	}
+	const bodyFontFamilySetting = themeJson?.styles?.typography?.fontFamily;
+	const bodyFontFamily = getFontFamilyFromSetting(
+		fontFamilies,
+		bodyFontFamilySetting
+	);
+
+	const headingFontFamilySetting =
+		themeJson?.styles?.elements?.heading?.typography?.fontFamily;
+
+	let headingFontFamily;
+	if ( ! headingFontFamilySetting ) {
+		headingFontFamily = bodyFontFamily;
+	} else {
+		headingFontFamily = getFontFamilyFromSetting(
+			fontFamilies,
+			themeJson?.styles?.elements?.heading?.typography?.fontFamily
+		);
+	}
+
+	return [ bodyFontFamily, headingFontFamily ];
+}
+
+function findNearest( input: number, numbers: number[] ): number | null {
+	// If the numbers array is empty, return null
+	if ( numbers.length === 0 ) {
+		return null;
+	}
+	// Sort the array based on the absolute difference with the input
+	numbers.sort( ( a, b ) => Math.abs( input - a ) - Math.abs( input - b ) );
+	// Return the first element (which will be the nearest) from the sorted array
+	return numbers[ 0 ];
+}
+
+function extractFontWeights( fontFaces: any[] ): number[] {
+	const result: number[] = [];
+
+	fontFaces.forEach( ( face ) => {
+		const weights = String( face.fontWeight ).split( ' ' );
+
+		if ( weights.length === 2 ) {
+			const start = parseInt( weights[ 0 ] );
+			const end = parseInt( weights[ 1 ] );
+
+			for ( let i = start; i <= end; i += 100 ) {
+				result.push( i );
+			}
+		} else if ( weights.length === 1 ) {
+			result.push( parseInt( weights[ 0 ] ) );
+		}
+	} );
+
+	return result;
+}
+
+/*
+ * Format the font family to use in the CSS font-family property of a CSS rule.
+ *
+ * The input can be a string with the font family name or a string with multiple font family names separated by commas.
+ * It follows the recommendations from the CSS Fonts Module Level 4.
+ * https://www.w3.org/TR/css-fonts-4/#font-family-prop
+ *
+ * @param input - The font family.
+ * @return The formatted font family.
+ */
+export function formatFontFamily( input: string ): string {
+	// Matches strings that are not exclusively alphabetic characters or hyphens, and do not exactly follow the pattern generic(alphabetic characters or hyphens).
+	const regex = /^(?!generic\([ a-zA-Z\-]+\)$)(?!^[a-zA-Z\-]+$).+/;
+	const output = input.trim();
+
+	const formatItem = ( item: string ) => {
+		item = item.trim();
+		if ( item.match( regex ) ) {
+			// removes leading and trailing quotes.
+			item = item.replace( /^["']|["']$/g, '' );
+			return `"${ item }"`;
+		}
+		return item;
+	};
+
+	if ( output.includes( ',' ) ) {
+		return output
+			.split( ',' )
+			.map( formatItem )
+			.filter( ( item ) => item !== '' )
+			.join( ', ' );
+	}
+
+	return formatItem( output );
+}
+
+/**
+ * Gets the preview style for a font family.
+ *
+ * @param family The font family object
+ * @return CSS style object for the font family
+ */
+export function getFamilyPreviewStyle( family: any ): React.CSSProperties {
+	const style: React.CSSProperties = {
+		fontFamily: formatFontFamily( family.fontFamily ),
+	};
+
+	if ( ! Array.isArray( family.fontFace ) ) {
+		style.fontWeight = '400';
+		style.fontStyle = 'normal';
+		return style;
+	}
+
+	if ( family.fontFace ) {
+		//get all the font faces with normal style
+		const normalFaces = family.fontFace.filter(
+			( face: any ) =>
+				face?.fontStyle && face.fontStyle.toLowerCase() === 'normal'
+		);
+		if ( normalFaces.length > 0 ) {
+			style.fontStyle = 'normal';
+			const normalWeights = extractFontWeights( normalFaces );
+			const nearestWeight = findNearest( 400, normalWeights );
+			style.fontWeight = String( nearestWeight ) || '400';
+		} else {
+			style.fontStyle =
+				( family.fontFace.length && family.fontFace[ 0 ].fontStyle ) ||
+				'normal';
+			style.fontWeight =
+				( family.fontFace.length &&
+					String( family.fontFace[ 0 ].fontWeight ) ) ||
+				'400';
+		}
+	}
+
+	return style;
+}
+
+/**
+ * Iterates through the presets array and searches for slugs that start with the specified
+ * slugPrefix followed by a numerical suffix. It identifies the highest numerical suffix found
+ * and returns one greater than the highest found suffix, ensuring that the new index is unique.
+ *
+ * @param presets    The array of preset objects, each potentially containing a slug property.
+ * @param slugPrefix The prefix to look for in the preset slugs.
+ *
+ * @return The next available index for a preset with the specified slug prefix, or 1 if no matching slugs are found.
+ */
+/**
+ * Gets the variation class name for a block style variation.
+ *
+ * @param variation The variation name.
+ * @return The variation class name.
+ */
+export function getVariationClassName( variation: string ): string {
+	if ( ! variation ) {
+		return '';
+	}
+	return `is-style-${ variation }`;
+}
+
+export function getNewIndexFromPresets(
+	presets: any[],
+	slugPrefix: string
+): number {
+	const nameRegex = new RegExp( `^${ slugPrefix }([\\d]+)$` );
+	const highestPresetValue = presets.reduce( ( currentHighest, preset ) => {
+		if ( typeof preset?.slug === 'string' ) {
+			const matches = preset?.slug.match( nameRegex );
+			if ( matches ) {
+				const id = parseInt( matches[ 1 ], 10 );
+				if ( id > currentHighest ) {
+					return id;
+				}
+			}
+		}
+		return currentHighest;
+	}, 0 );
+	return highestPresetValue + 1;
+}

package/src/variations/style.scss

@@ -0,0 +1,43 @@
+@use "@wordpress/base-styles/colors" as *;
+@use "@wordpress/base-styles/variables" as *;
+
+.global-styles-ui-variations_item {
+	box-sizing: border-box;
+	// To round the outline in Windows 10 high contrast mode.
+	cursor: pointer;
+
+	.global-styles-ui-variations_item-preview {
+		border-radius: $radius-small;
+		outline: $border-width solid rgba($black, 0.1);
+		outline-offset: -$border-width;
+		overflow: hidden;
+		position: relative;
+		@media not (prefers-reduced-motion) {
+			// Add the same transition that block style variations and other buttons have.
+			transition: outline 0.1s linear;
+		}
+
+		&.is-pill {
+			height: $button-size-compact;
+
+			.block-editor-iframe__scale-container {
+				overflow: hidden;
+			}
+		}
+	}
+
+	&:not(.is-active):hover .global-styles-ui-variations_item-preview {
+		outline-color: rgba($black, 0.3);
+	}
+
+	&.is-active .global-styles-ui-variations_item-preview,
+	&:focus-visible .global-styles-ui-variations_item-preview {
+		outline-color: $gray-900;
+		outline-offset: $border-width;
+		outline-width: var(--wp-admin-border-width-focus);
+	}
+
+	&:focus-visible .global-styles-ui-variations_item-preview {
+		outline-color: var(--wp-admin-theme-color);
+	}
+}

package/src/variations/variation.tsx

@@ -0,0 +1,113 @@
+/**
+ * External dependencies
+ */
+import clsx from 'clsx';
+
+/**
+ * WordPress dependencies
+ */
+import { Tooltip } from '@wordpress/components';
+import { useMemo, useContext, useState } from '@wordpress/element';
+import { ENTER } from '@wordpress/keycodes';
+import { _x, sprintf } from '@wordpress/i18n';
+import { areGlobalStylesEqual } from '@wordpress/global-styles-engine';
+
+/**
+ * Internal dependencies
+ */
+import { GlobalStylesContext } from '../context';
+import { filterObjectByProperties } from '../utils';
+
+interface VariationProps {
+	variation: any;
+	children: ( isFocused: boolean ) => React.ReactNode;
+	isPill?: boolean;
+	properties?: string[];
+	showTooltip?: boolean;
+}
+
+export default function Variation( {
+	variation,
+	children,
+	isPill = false,
+	properties,
+	showTooltip = false,
+}: VariationProps ) {
+	const [ isFocused, setIsFocused ] = useState( false );
+	const {
+		base,
+		user,
+		onChange: setUserConfig,
+	} = useContext( GlobalStylesContext );
+
+	const context = useMemo( () => {
+		let merged = { ...base, ...variation };
+		if ( properties ) {
+			merged = filterObjectByProperties( merged, properties );
+		}
+		return {
+			user: variation,
+			base,
+			merged,
+			onChange: () => {},
+		};
+	}, [ variation, base, properties ] );
+
+	const selectVariation = () => setUserConfig( variation );
+
+	const selectOnEnter = ( event: React.KeyboardEvent ) => {
+		if ( event.keyCode === ENTER ) {
+			event.preventDefault();
+			selectVariation();
+		}
+	};
+
+	const isActive = useMemo(
+		() => areGlobalStylesEqual( user, variation ),
+		[ user, variation ]
+	);
+
+	let label = variation?.title;
+	if ( variation?.description ) {
+		label = sprintf(
+			/* translators: 1: variation title. 2: variation description. */
+			_x( '%1$s (%2$s)', 'variation label' ),
+			variation?.title,
+			variation?.description
+		);
+	}
+
+	const content = (
+		<div
+			className={ clsx( 'global-styles-ui-variations_item', {
+				'is-active': isActive,
+			} ) }
+			role="button"
+			onClick={ selectVariation }
+			onKeyDown={ selectOnEnter }
+			tabIndex={ 0 }
+			aria-label={ label }
+			aria-current={ isActive }
+			onFocus={ () => setIsFocused( true ) }
+			onBlur={ () => setIsFocused( false ) }
+		>
+			<div
+				className={ clsx( 'global-styles-ui-variations_item-preview', {
+					'is-pill': isPill,
+				} ) }
+			>
+				{ children( isFocused ) }
+			</div>
+		</div>
+	);
+
+	return (
+		<GlobalStylesContext.Provider value={ context }>
+			{ showTooltip ? (
+				<Tooltip text={ variation?.title }>{ content }</Tooltip>
+			) : (
+				content
+			) }
+		</GlobalStylesContext.Provider>
+	);
+}

package/src/variations/variations-color.tsx

@@ -0,0 +1,54 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	__experimentalGrid as Grid,
+	__experimentalVStack as VStack,
+} from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import StylesPreviewColors from '../preview-colors';
+import { useCurrentMergeThemeStyleVariationsWithUserConfig } from '../hooks';
+import { Subtitle } from '../subtitle';
+import Variation from './variation';
+
+interface ColorVariationsProps {
+	title?: string;
+	gap?: number;
+}
+
+const propertiesToFilter = [ 'color' ];
+
+export default function ColorVariations( {
+	title,
+	gap = 2,
+}: ColorVariationsProps ) {
+	const colorVariations =
+		useCurrentMergeThemeStyleVariationsWithUserConfig( propertiesToFilter );
+
+	// Return null if there is only one variation (the default).
+	if ( colorVariations?.length <= 1 ) {
+		return null;
+	}
+
+	return (
+		<VStack spacing={ 3 }>
+			{ title && <Subtitle level={ 3 }>{ title }</Subtitle> }
+			<Grid gap={ gap }>
+				{ colorVariations.map( ( variation: any, index: number ) => (
+					<Variation
+						key={ index }
+						variation={ variation }
+						isPill
+						properties={ propertiesToFilter }
+						showTooltip
+					>
+						{ () => <StylesPreviewColors /> }
+					</Variation>
+				) ) }
+			</Grid>
+		</VStack>
+	);
+}

package/src/variations/variations-panel.tsx

@@ -0,0 +1,79 @@
+/**
+ * WordPress dependencies
+ */
+// @ts-expect-error: Not typed yet.
+import { store as blocksStore } from '@wordpress/blocks';
+import { useSelect } from '@wordpress/data';
+import { __experimentalItemGroup as ItemGroup } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import { NavigationButtonAsItem } from '../navigation-button';
+import { useSetting } from '../hooks';
+
+interface BlockStyle {
+	name: string;
+	label: string;
+	source?: string;
+	isDefault?: boolean;
+}
+
+interface VariationsPanelProps {
+	name: string;
+}
+
+// Only core block styles (source === block) or block styles with a matching
+// theme.json style variation will be configurable via Global Styles.
+function getFilteredBlockStyles(
+	blockStyles: BlockStyle[],
+	variations: string[]
+): BlockStyle[] {
+	return (
+		blockStyles?.filter(
+			( style ) =>
+				style.source === 'block' || variations.includes( style.name )
+		) || []
+	);
+}
+
+export function useBlockVariations( name: string ): BlockStyle[] {
+	const blockStyles = useSelect(
+		( select ) => {
+			const { getBlockStyles } = select( blocksStore );
+			return getBlockStyles( name );
+		},
+		[ name ]
+	);
+	const [ variations ] = useSetting( 'variations', name );
+	const variationNames = Object.keys( variations ?? {} );
+
+	return getFilteredBlockStyles( blockStyles, variationNames );
+}
+
+export function VariationsPanel( { name }: VariationsPanelProps ) {
+	const coreBlockStyles = useBlockVariations( name );
+
+	return (
+		<ItemGroup isBordered isSeparated>
+			{ coreBlockStyles.map( ( style, index ) => {
+				if ( style?.isDefault ) {
+					return null;
+				}
+				return (
+					<NavigationButtonAsItem
+						key={ index }
+						path={
+							'/blocks/' +
+							encodeURIComponent( name ) +
+							'/variations/' +
+							encodeURIComponent( style.name )
+						}
+					>
+						{ style.label }
+					</NavigationButtonAsItem>
+				);
+			} ) }
+		</ItemGroup>
+	);
+}

package/src/variations/variations-typography.tsx

@@ -0,0 +1,65 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	__experimentalGrid as Grid,
+	__experimentalVStack as VStack,
+} from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import StylesPreviewTypography from '../preview-typography';
+import { useCurrentMergeThemeStyleVariationsWithUserConfig } from '../hooks';
+import { Subtitle } from '../subtitle';
+import Variation from './variation';
+
+interface TypographyVariationsProps {
+	title?: string;
+	gap?: number;
+}
+
+const propertiesToFilter = [ 'typography' ];
+
+export default function TypographyVariations( {
+	title,
+	gap = 2,
+}: TypographyVariationsProps ) {
+	const typographyVariations =
+		useCurrentMergeThemeStyleVariationsWithUserConfig( propertiesToFilter );
+
+	// Return null if there is only one variation (the default).
+	if ( typographyVariations?.length <= 1 ) {
+		return null;
+	}
+
+	return (
+		<VStack spacing={ 3 }>
+			{ title && <Subtitle level={ 3 }>{ title }</Subtitle> }
+			<Grid
+				columns={ 3 }
+				gap={ gap }
+				className="global-styles-ui-style-variations-container"
+			>
+				{ typographyVariations.map(
+					( variation: any, index: number ) => {
+						return (
+							<Variation
+								key={ index }
+								variation={ variation }
+								properties={ propertiesToFilter }
+								showTooltip
+							>
+								{ () => (
+									<StylesPreviewTypography
+										variation={ variation }
+									/>
+								) }
+							</Variation>
+						);
+					}
+				) }
+			</Grid>
+		</VStack>
+	);
+}

package/src/with-global-styles-provider.tsx

@@ -0,0 +1,44 @@
+/**
+ * WordPress dependencies
+ */
+import type { GlobalStylesConfig } from '@wordpress/global-styles-engine';
+
+/**
+ * Internal dependencies
+ */
+import { GlobalStylesProvider } from './provider';
+
+interface GlobalStylesProviderProps {
+	value: GlobalStylesConfig;
+	baseValue: GlobalStylesConfig;
+	onChange: ( config: GlobalStylesConfig ) => void;
+}
+
+/**
+ * Higher-order component that wraps a component with GlobalStylesProvider.
+ * This allows components to access GlobalStylesContext without exposing
+ * the provider directly in the public API.
+ *
+ * @param Component - The component to wrap
+ * @return A wrapped component that accepts value, baseValue, and onChange props
+ */
+export function withGlobalStylesProvider< P extends object >(
+	Component: React.ComponentType< P >
+) {
+	return function WrappedComponent( {
+		value,
+		baseValue,
+		onChange,
+		...props
+	}: P & GlobalStylesProviderProps ) {
+		return (
+			<GlobalStylesProvider
+				value={ value }
+				baseValue={ baseValue }
+				onChange={ onChange }
+			>
+				<Component { ...( props as P ) } />
+			</GlobalStylesProvider>
+		);
+	};
+}