@wordpress/block-editor 11.1.0 → 11.3.0

package/src/components/global-styles/test/utils.js

@@ -0,0 +1,206 @@
+/**
+ * Internal dependencies
+ */
+import { getPresetVariableFromValue, getValueFromVariable } from '../utils';
+
+describe( 'editor utils', () => {
+	const themeJson = {
+		version: 1,
+		settings: {
+			color: {
+				palette: {
+					theme: [
+						{
+							slug: 'primary',
+							color: '#007cba',
+							name: 'Primary',
+						},
+						{
+							slug: 'secondary',
+							color: '#006ba1',
+							name: 'Secondary',
+						},
+					],
+					custom: [
+						{
+							slug: 'primary',
+							color: '#007cba',
+							name: 'Primary',
+						},
+						{
+							slug: 'secondary',
+							color: '#a65555',
+							name: 'Secondary',
+						},
+					],
+				},
+				custom: true,
+				customDuotone: true,
+				customGradient: true,
+				link: true,
+			},
+			custom: {
+				color: {
+					primary: 'var(--wp--preset--color--primary)',
+					secondary: 'var(--wp--preset--color--secondary)',
+				},
+			},
+		},
+		isGlobalStylesUserThemeJSON: true,
+	};
+
+	describe( 'getPresetVariableFromValue', () => {
+		const context = 'root';
+		const propertyName = 'color.text';
+		const value = '#007cba';
+
+		describe( 'when a provided global style (e.g. fontFamily, color,etc.) does not exist', () => {
+			it( 'returns the originally provided value', () => {
+				const actual = getPresetVariableFromValue(
+					themeJson.settings,
+					context,
+					'fakePropertyName',
+					value
+				);
+				expect( actual ).toBe( value );
+			} );
+		} );
+
+		describe( 'when a global style is cleared by the user', () => {
+			it( 'returns an undefined preset variable', () => {
+				const actual = getPresetVariableFromValue(
+					themeJson.settings,
+					context,
+					propertyName,
+					undefined
+				);
+				expect( actual ).toBe( undefined );
+			} );
+		} );
+
+		describe( 'when a global style is selected by the user', () => {
+			describe( 'and it is not a preset value (e.g. custom color)', () => {
+				it( 'returns the originally provided value', () => {
+					const customValue = '#6e4545';
+					const actual = getPresetVariableFromValue(
+						themeJson.settings,
+						context,
+						propertyName,
+						customValue
+					);
+					expect( actual ).toBe( customValue );
+				} );
+			} );
+
+			describe( 'and it is a preset value', () => {
+				it( 'returns the preset variable', () => {
+					const actual = getPresetVariableFromValue(
+						themeJson.settings,
+						context,
+						propertyName,
+						value
+					);
+					expect( actual ).toBe( 'var:preset|color|primary' );
+				} );
+			} );
+		} );
+	} );
+
+	describe( 'getValueFromVariable', () => {
+		describe( 'when provided an invalid variable', () => {
+			it( 'returns the originally provided value', () => {
+				const actual = getValueFromVariable(
+					themeJson,
+					'root',
+					undefined
+				);
+
+				expect( actual ).toBe( undefined );
+			} );
+		} );
+
+		describe( 'when provided a preset variable', () => {
+			it( 'retrieves the correct preset value', () => {
+				const actual = getValueFromVariable(
+					themeJson,
+					'root',
+					'var:preset|color|primary'
+				);
+
+				expect( actual ).toBe( '#007cba' );
+			} );
+		} );
+
+		describe( 'when provided a custom variable', () => {
+			it( 'retrieves the correct custom value', () => {
+				const actual = getValueFromVariable(
+					themeJson,
+					'root',
+					'var(--wp--custom--color--secondary)'
+				);
+
+				expect( actual ).toBe( '#a65555' );
+			} );
+		} );
+
+		describe( 'when provided a dynamic reference', () => {
+			it( 'retrieves the referenced value', () => {
+				const stylesWithRefs = {
+					...themeJson,
+					styles: {
+						color: {
+							background: {
+								ref: 'styles.color.text',
+							},
+							text: 'purple-rain',
+						},
+					},
+				};
+				const actual = getValueFromVariable( stylesWithRefs, 'root', {
+					ref: 'styles.color.text',
+				} );
+
+				expect( actual ).toBe( stylesWithRefs.styles.color.text );
+			} );
+
+			it( 'returns the originally provided value where value is dynamic reference and reference does not exist', () => {
+				const stylesWithRefs = {
+					...themeJson,
+					styles: {
+						color: {
+							text: {
+								ref: 'styles.background.text',
+							},
+						},
+					},
+				};
+				const actual = getValueFromVariable( stylesWithRefs, 'root', {
+					ref: 'styles.color.text',
+				} );
+
+				expect( actual ).toBe( stylesWithRefs.styles.color.text );
+			} );
+
+			it( 'returns the originally provided value where value is dynamic reference', () => {
+				const stylesWithRefs = {
+					...themeJson,
+					styles: {
+						color: {
+							background: {
+								ref: 'styles.color.text',
+							},
+							text: {
+								ref: 'styles.background.text',
+							},
+						},
+					},
+				};
+				const actual = getValueFromVariable( stylesWithRefs, 'root', {
+					ref: 'styles.color.text',
+				} );
+
+				expect( actual ).toBe( stylesWithRefs.styles.color.text );
+			} );
+		} );
+	} );
+} );

package/src/components/global-styles/typography-utils.js

@@ -0,0 +1,87 @@
+/**
+ * The fluid utilities must match the backend equivalent.
+ * See: gutenberg_get_typography_font_size_value() in lib/block-supports/typography.php
+ * ---------------------------------------------------------------
+ */
+
+/**
+ * Internal dependencies
+ */
+import { getComputedFluidTypographyValue } from '../font-sizes/fluid-utils';
+
+/**
+ * @typedef {Object} FluidPreset
+ * @property {string|undefined}  max A maximum font size value.
+ * @property {?string|undefined} min A minimum font size value.
+ */
+
+/**
+ * @typedef {Object} Preset
+ * @property {?string|?number}               size  A default font size.
+ * @property {string}                        name  A font size name, displayed in the UI.
+ * @property {string}                        slug  A font size slug
+ * @property {boolean|FluidPreset|undefined} fluid A font size slug
+ */
+
+/**
+ * @typedef {Object} TypographySettings
+ * @property {?string|?number} size              A default font size.
+ * @property {?string}         minViewPortWidth  Minimum viewport size from which type will have fluidity. Optional if size is specified.
+ * @property {?string}         maxViewPortWidth  Maximum size up to which type will have fluidity. Optional if size is specified.
+ * @property {?number}         scaleFactor       A scale factor to determine how fast a font scales within boundaries. Optional.
+ * @property {?number}         minFontSizeFactor How much to scale defaultFontSize by to derive minimumFontSize. Optional.
+ * @property {?string}         minFontSize       The smallest a calculated font size may be. Optional.
+ */
+
+/**
+ * Returns a font-size value based on a given font-size preset.
+ * Takes into account fluid typography parameters and attempts to return a css formula depending on available, valid values.
+ *
+ * @param {Preset}                     preset
+ * @param {Object}                     typographySettings
+ * @param {boolean|TypographySettings} typographySettings.fluid Whether fluid typography is enabled, and, optionally, fluid font size options.
+ *
+ * @return {string|*} A font-size value or the value of preset.size.
+ */
+export function getTypographyFontSizeValue( preset, typographySettings ) {
+	const { size: defaultSize } = preset;
+
+	/*
+	 * Catches falsy values and 0/'0'.
+	 * Fluid calculations cannot be performed on 0.
+	 */
+	if ( ! defaultSize || '0' === defaultSize ) {
+		return defaultSize;
+	}
+
+	if (
+		! typographySettings?.fluid ||
+		( typeof typographySettings?.fluid === 'object' &&
+			Object.keys( typographySettings.fluid ).length === 0 )
+	) {
+		return defaultSize;
+	}
+
+	// A font size has explicitly bypassed fluid calculations.
+	if ( false === preset?.fluid ) {
+		return defaultSize;
+	}
+
+	const fluidTypographySettings =
+		typeof typographySettings?.fluid === 'object'
+			? typographySettings?.fluid
+			: {};
+
+	const fluidFontSizeValue = getComputedFluidTypographyValue( {
+		minimumFontSize: preset?.fluid?.min,
+		maximumFontSize: preset?.fluid?.max,
+		fontSize: defaultSize,
+		minimumFontSizeLimit: fluidTypographySettings?.minFontSize,
+	} );
+
+	if ( !! fluidFontSizeValue ) {
+		return fluidFontSizeValue;
+	}
+
+	return defaultSize;
+}