@wordpress/global-styles-ui 1.1.0

package/src/screen-typography-element.tsx

@@ -0,0 +1,127 @@
+/**
+ * WordPress dependencies
+ */
+import { __, _x } from '@wordpress/i18n';
+import {
+	__experimentalToggleGroupControl as ToggleGroupControl,
+	__experimentalToggleGroupControlOption as ToggleGroupControlOption,
+	__experimentalSpacer as Spacer,
+} from '@wordpress/components';
+import { useState } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import TypographyPanel from './typography-panel';
+import { ScreenHeader } from './screen-header';
+import TypographyPreview from './typography-preview';
+
+const elements = {
+	text: {
+		description: __( 'Manage the fonts used on the site.' ),
+		title: __( 'Text' ),
+	},
+	link: {
+		description: __( 'Manage the fonts and typography used on the links.' ),
+		title: __( 'Links' ),
+	},
+	heading: {
+		description: __( 'Manage the fonts and typography used on headings.' ),
+		title: __( 'Headings' ),
+	},
+	caption: {
+		description: __( 'Manage the fonts and typography used on captions.' ),
+		title: __( 'Captions' ),
+	},
+	button: {
+		description: __( 'Manage the fonts and typography used on buttons.' ),
+		title: __( 'Buttons' ),
+	},
+};
+
+interface ScreenTypographyElementProps {
+	element: keyof typeof elements;
+}
+
+function ScreenTypographyElement( { element }: ScreenTypographyElementProps ) {
+	const [ headingLevel, setHeadingLevel ] = useState( 'heading' );
+
+	return (
+		<>
+			<ScreenHeader
+				title={ elements[ element ].title }
+				description={ elements[ element ].description }
+			/>
+			<Spacer marginX={ 4 }>
+				<TypographyPreview
+					element={ element }
+					headingLevel={ headingLevel }
+				/>
+			</Spacer>
+			{ element === 'heading' && (
+				<Spacer marginX={ 4 } marginBottom="1em">
+					<ToggleGroupControl
+						label={ __( 'Select heading level' ) }
+						hideLabelFromVision
+						value={ headingLevel }
+						onChange={ ( value ) =>
+							setHeadingLevel( value as string )
+						}
+						isBlock
+						size="__unstable-large"
+						__nextHasNoMarginBottom
+					>
+						<ToggleGroupControlOption
+							value="heading"
+							showTooltip
+							aria-label={ __( 'All headings' ) }
+							label={ _x( 'All', 'heading levels' ) }
+						/>
+						<ToggleGroupControlOption
+							value="h1"
+							showTooltip
+							aria-label={ __( 'Heading 1' ) }
+							label={ __( 'H1' ) }
+						/>
+						<ToggleGroupControlOption
+							value="h2"
+							showTooltip
+							aria-label={ __( 'Heading 2' ) }
+							label={ __( 'H2' ) }
+						/>
+						<ToggleGroupControlOption
+							value="h3"
+							showTooltip
+							aria-label={ __( 'Heading 3' ) }
+							label={ __( 'H3' ) }
+						/>
+						<ToggleGroupControlOption
+							value="h4"
+							showTooltip
+							aria-label={ __( 'Heading 4' ) }
+							label={ __( 'H4' ) }
+						/>
+						<ToggleGroupControlOption
+							value="h5"
+							showTooltip
+							aria-label={ __( 'Heading 5' ) }
+							label={ __( 'H5' ) }
+						/>
+						<ToggleGroupControlOption
+							value="h6"
+							showTooltip
+							aria-label={ __( 'Heading 6' ) }
+							label={ __( 'H6' ) }
+						/>
+					</ToggleGroupControl>
+				</Spacer>
+			) }
+			<TypographyPanel
+				element={ element }
+				headingLevel={ headingLevel }
+			/>
+		</>
+	);
+}
+
+export default ScreenTypographyElement;

package/src/screen-typography.tsx

@@ -0,0 +1,41 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { __experimentalVStack as VStack } from '@wordpress/components';
+import { useContext } from '@wordpress/element';
+
+/**
+ * Internal dependencies
+ */
+import { ScreenHeader } from './screen-header';
+import TypographyElements from './typography-elements';
+import TypographyVariations from './variations/variations-typography';
+import FontFamilies from './font-families';
+import FontSizesCount from './font-sizes/font-sizes-count';
+import { GlobalStylesContext } from './context';
+
+function ScreenTypography() {
+	const { fontLibraryEnabled } = useContext( GlobalStylesContext );
+
+	return (
+		<>
+			<ScreenHeader
+				title={ __( 'Typography' ) }
+				description={ __(
+					'Available fonts, typographic styles, and the application of those styles.'
+				) }
+			/>
+			<div className="global-styles-ui-screen">
+				<VStack spacing={ 7 }>
+					<TypographyVariations title={ __( 'Typesets' ) } />
+					{ fontLibraryEnabled && <FontFamilies /> }
+					<TypographyElements />
+					<FontSizesCount />
+				</VStack>
+			</div>
+		</>
+	);
+}
+
+export default ScreenTypography;

package/src/shadow-utils.ts

@@ -0,0 +1,167 @@
+export const CUSTOM_VALUE_SETTINGS = {
+	px: { max: 20, step: 1 },
+	'%': { max: 100, step: 1 },
+	vw: { max: 100, step: 1 },
+	vh: { max: 100, step: 1 },
+	em: { max: 10, step: 0.1 },
+	rm: { max: 10, step: 0.1 },
+	svw: { max: 100, step: 1 },
+	lvw: { max: 100, step: 1 },
+	dvw: { max: 100, step: 1 },
+	svh: { max: 100, step: 1 },
+	lvh: { max: 100, step: 1 },
+	dvh: { max: 100, step: 1 },
+	vi: { max: 100, step: 1 },
+	svi: { max: 100, step: 1 },
+	lvi: { max: 100, step: 1 },
+	dvi: { max: 100, step: 1 },
+	vb: { max: 100, step: 1 },
+	svb: { max: 100, step: 1 },
+	lvb: { max: 100, step: 1 },
+	dvb: { max: 100, step: 1 },
+	vmin: { max: 100, step: 1 },
+	svmin: { max: 100, step: 1 },
+	lvmin: { max: 100, step: 1 },
+	dvmin: { max: 100, step: 1 },
+	vmax: { max: 100, step: 1 },
+	svmax: { max: 100, step: 1 },
+	lvmax: { max: 100, step: 1 },
+	dvmax: { max: 100, step: 1 },
+};
+
+export interface ShadowObject {
+	x: string;
+	y: string;
+	blur: string;
+	spread: string;
+	color: string;
+	inset: boolean;
+}
+
+export function getShadowParts( shadow: string ): string[] {
+	const shadowValues = shadow.match( /(?:[^,(]|\([^)]*\))+/g ) || [];
+	return shadowValues.map( ( value ) => value.trim() );
+}
+
+export function shadowStringToObject( shadowValue: string ): ShadowObject {
+	/*
+	 * Shadow spec: https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow
+	 * Shadow string format: <offset-x> <offset-y> <blur-radius> <spread-radius> <color> [inset]
+	 *
+	 * A shadow to be valid it must satisfy the following.
+	 *
+	 * 1. Should not contain "none" keyword.
+	 * 2. Values x, y, blur, spread should be in the order. Color and inset can be anywhere in the string except in between x, y, blur, spread values.
+	 * 3. Should not contain more than one set of x, y, blur, spread values.
+	 * 4. Should contain at least x and y values. Others are optional.
+	 * 5. Should not contain more than one "inset" (case insensitive) keyword.
+	 * 6. Should not contain more than one color value.
+	 */
+
+	const defaultShadow: ShadowObject = {
+		x: '0',
+		y: '0',
+		blur: '0',
+		spread: '0',
+		color: '#000',
+		inset: false,
+	};
+
+	if ( ! shadowValue ) {
+		return defaultShadow;
+	}
+
+	// Rule 1: Should not contain "none" keyword.
+	// if the shadow has "none" keyword, it is not a valid shadow string
+	if ( shadowValue.includes( 'none' ) ) {
+		return defaultShadow;
+	}
+
+	// Rule 2: Values x, y, blur, spread should be in the order.
+	//		   Color and inset can be anywhere in the string except in between x, y, blur, spread values.
+	// Extract length values (x, y, blur, spread) from shadow string
+	// Regex match groups of 1 to 4 length values.
+	const lengthsRegex =
+		/((?:^|\s+)(-?\d*\.?\d+(?:px|%|in|cm|mm|em|rem|ex|pt|pc|vh|vw|vmin|vmax|ch|lh)?)(?=\s|$)(?![^(]*\))){1,4}/g;
+	const matches = shadowValue.match( lengthsRegex ) || [];
+
+	// Rule 3: Should not contain more than one set of x, y, blur, spread values.
+	// if the string doesn't contain exactly 1 set of x, y, blur, spread values,
+	// it is not a valid shadow string
+	if ( matches.length !== 1 ) {
+		return defaultShadow;
+	}
+
+	// Extract length values (x, y, blur, spread) from shadow string
+	const lengths = matches[ 0 ]
+		.split( ' ' )
+		.map( ( value ) => value.trim() )
+		.filter( ( value ) => value );
+
+	// Rule 4: Should contain at least x and y values. Others are optional.
+	if ( lengths.length < 2 ) {
+		return defaultShadow;
+	}
+
+	// Rule 5: Should not contain more than one "inset" (case insensitive) keyword.
+	// check if the shadow string contains "inset" keyword
+	const insets = shadowValue.match( /inset/gi ) || [];
+	if ( insets.length > 1 ) {
+		return defaultShadow;
+	}
+
+	// Strip lengths and inset from shadow string, leaving just color.
+	const hasInset = insets.length === 1;
+	let colorString = shadowValue.replace( lengthsRegex, '' ).trim();
+	if ( hasInset ) {
+		colorString = colorString
+			.replace( 'inset', '' )
+			.replace( 'INSET', '' )
+			.trim();
+	}
+
+	// Rule 6: Should not contain more than one color value.
+	// validate color string with regular expression
+	// check if color has matching hex, rgb or hsl values
+	const colorRegex =
+		/^#([0-9a-f]{3}){1,2}$|^#([0-9a-f]{4}){1,2}$|^(?:rgb|hsl)a?\(?[\d*\.?\d+%?,?\/?\s]*\)$/gi;
+	let colorMatches = ( colorString.match( colorRegex ) || [] )
+		.map( ( value ) => value?.trim() )
+		.filter( ( value ) => value );
+
+	// If color string has more than one color values, it is not a valid
+	if ( colorMatches.length > 1 ) {
+		return defaultShadow;
+	} else if ( colorMatches.length === 0 ) {
+		// check if color string has multiple named color values separated by space
+		colorMatches = colorString
+			.trim()
+			.split( ' ' )
+			.filter( ( value ) => value );
+		// If color string has more than one color values, it is not a valid
+		if ( colorMatches.length > 1 ) {
+			return defaultShadow;
+		}
+	}
+
+	// Return parsed shadow object.
+	const [ x, y, blur, spread ] = lengths;
+	return {
+		x,
+		y,
+		blur: blur || defaultShadow.blur,
+		spread: spread || defaultShadow.spread,
+		inset: hasInset,
+		color: colorString || defaultShadow.color,
+	};
+}
+
+export function shadowObjectToString( shadowObj: ShadowObject ): string {
+	const shadowString = `${ shadowObj.x || '0px' } ${ shadowObj.y || '0px' } ${
+		shadowObj.blur || '0px'
+	} ${ shadowObj.spread || '0px' }`;
+
+	return `${ shadowObj.inset ? 'inset' : '' } ${ shadowString } ${
+		shadowObj.color || ''
+	}`.trim();
+}