@wordpress/block-editor 15.6.1-next.36001005c.0 → 15.6.1

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

@@ -1,9 +1,258 @@
 /**
  * Internal dependencies
  */
-import { areGlobalStyleConfigsEqual } from '../utils';
+import {
+	areGlobalStyleConfigsEqual,
+	getBlockStyleVariationSelector,
+	getPresetVariableFromValue,
+	getValueFromVariable,
+	scopeFeatureSelectors,
+	getResolvedThemeFilePath,
+	getResolvedRefValue,
+	getResolvedValue,
+} 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)',
+				},
+			},
+		},
+		styles: {
+			background: {
+				backgroundImage: {
+					url: 'file:./assets/image.jpg',
+				},
+				backgroundAttachment: 'fixed',
+				backgroundPosition: 'top left',
+			},
+			blocks: {
+				'core/group': {
+					background: {
+						backgroundImage: {
+							ref: 'styles.background.backgroundImage',
+						},
+					},
+					dimensions: {
+						minHeight: '100px',
+					},
+					spacing: {
+						padding: {
+							top: 0,
+						},
+					},
+				},
+			},
+		},
+		_links: {
+			'wp:theme-file': [
+				{
+					name: 'file:./assets/image.jpg',
+					href: 'https://wordpress.org/assets/image.jpg',
+					target: 'styles.background.backgroundImage.url',
+				},
+				{
+					name: 'file:./assets/other/image.jpg',
+					href: 'https://wordpress.org/assets/other/image.jpg',
+					target: "styles.blocks.['core/group'].background.backgroundImage.url",
+				},
+			],
+		},
+		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 );
+			} );
+		} );
+	} );
+
 	describe( 'areGlobalStyleConfigsEqual', () => {
 		test.each( [
 			{ original: null, variation: null, expected: true },
@@ -55,4 +304,196 @@ describe( 'editor utils', () => {
 			}
 		);
 	} );
+
+	describe( 'getBlockStyleVariationSelector', () => {
+		test.each( [
+			{ type: 'empty', selector: '', expected: '.is-style-custom' },
+			{
+				type: 'class',
+				selector: '.wp-block',
+				expected: '.wp-block.is-style-custom',
+			},
+			{
+				type: 'id',
+				selector: '#wp-block',
+				expected: '#wp-block.is-style-custom',
+			},
+			{
+				type: 'element tag',
+				selector: 'p',
+				expected: 'p.is-style-custom',
+			},
+			{
+				type: 'attribute',
+				selector: '[style*="color"]',
+				expected: '[style*="color"].is-style-custom',
+			},
+			{
+				type: 'descendant',
+				selector: '.wp-block .inner',
+				expected: '.wp-block.is-style-custom .inner',
+			},
+			{
+				type: 'comma-separated',
+				selector: '.wp-block .inner, .wp-block .alternative',
+				expected:
+					'.wp-block.is-style-custom .inner, .wp-block.is-style-custom .alternative',
+			},
+			{
+				type: 'pseudo',
+				selector: 'div:first-child',
+				expected: 'div.is-style-custom:first-child',
+			},
+			{
+				type: ':is',
+				selector: '.wp-block:is(.outer .inner:first-child)',
+				expected:
+					'.wp-block.is-style-custom:is(.outer .inner:first-child)',
+			},
+			{
+				type: ':not',
+				selector: '.wp-block:not(.outer .inner:first-child)',
+				expected:
+					'.wp-block.is-style-custom:not(.outer .inner:first-child)',
+			},
+			{
+				type: ':has',
+				selector: '.wp-block:has(.outer .inner:first-child)',
+				expected:
+					'.wp-block.is-style-custom:has(.outer .inner:first-child)',
+			},
+			{
+				type: ':where',
+				selector: '.wp-block:where(.outer .inner:first-child)',
+				expected:
+					'.wp-block.is-style-custom:where(.outer .inner:first-child)',
+			},
+			{
+				type: 'wrapping :where',
+				selector: ':where(.outer .inner:first-child)',
+				expected: ':where(.outer.is-style-custom .inner:first-child)',
+			},
+			{
+				type: 'complex',
+				selector:
+					'.wp:where(.something):is(.test:not(.nothing p)):has(div[style]) .content, .wp:where(.nothing):not(.test:is(.something div)):has(span[style]) .inner',
+				expected:
+					'.wp.is-style-custom:where(.something):is(.test:not(.nothing p)):has(div[style]) .content, .wp.is-style-custom:where(.nothing):not(.test:is(.something div)):has(span[style]) .inner',
+			},
+		] )(
+			'should add variation class to ancestor in $type selector',
+			( { selector, expected } ) => {
+				expect(
+					getBlockStyleVariationSelector( 'custom', selector )
+				).toBe( expected );
+			}
+		);
+	} );
+
+	describe( 'scopeFeatureSelectors', () => {
+		it( 'correctly scopes selectors while maintaining selectors object structure', () => {
+			const actual = scopeFeatureSelectors( '.custom, .secondary', {
+				color: '.my-block h1',
+				typography: {
+					root: '.my-block',
+					lineHeight: '.my-block h1',
+				},
+			} );
+
+			expect( actual ).toEqual( {
+				color: '.custom .my-block h1, .secondary .my-block h1',
+				typography: {
+					root: '.custom .my-block, .secondary .my-block',
+					lineHeight: '.custom .my-block h1, .secondary .my-block h1',
+				},
+			} );
+		} );
+	} );
+
+	describe( 'getResolvedThemeFilePath()', () => {
+		it.each( [
+			[
+				'file:./assets/image.jpg',
+				'https://wordpress.org/assets/image.jpg',
+				'Should return absolute URL if found in themeFileURIs',
+			],
+			[
+				'file:./misc/image.jpg',
+				'file:./misc/image.jpg',
+				'Should return value if not found in themeFileURIs',
+			],
+			[
+				'https://wordpress.org/assets/image.jpg',
+				'https://wordpress.org/assets/image.jpg',
+				'Should not match absolute URLs',
+			],
+		] )(
+			'Given file %s and return value %s: %s',
+			( file, returnedValue ) => {
+				expect(
+					getResolvedThemeFilePath(
+						file,
+						themeJson._links[ 'wp:theme-file' ]
+					) === returnedValue
+				).toBe( true );
+			}
+		);
+	} );
+
+	describe( 'getResolvedRefValue()', () => {
+		it.each( [
+			[ 'blue', 'blue', null ],
+			[ 0, 0, themeJson ],
+			[
+				{ ref: 'styles.background.backgroundImage' },
+				{ url: 'file:./assets/image.jpg' },
+				themeJson,
+			],
+			[
+				{ ref: 'styles.blocks.core/group.spacing.padding.top' },
+				0,
+				themeJson,
+			],
+			[
+				{
+					ref: 'styles.blocks.core/group.background.backgroundImage',
+				},
+				undefined,
+				themeJson,
+			],
+		] )(
+			'Given ruleValue %s return expected value of %s',
+			( ruleValue, returnedValue, tree ) => {
+				expect( getResolvedRefValue( ruleValue, tree ) ).toEqual(
+					returnedValue
+				);
+			}
+		);
+	} );
+
+	describe( 'getResolvedValue()', () => {
+		it.each( [
+			[ 'blue', 'blue', null ],
+			[ 0, 0, themeJson ],
+			[
+				{ ref: 'styles.background.backgroundImage' },
+				{ url: 'https://wordpress.org/assets/image.jpg' },
+				themeJson,
+			],
+			[
+				{
+					ref: 'styles.blocks.core/group.background.backgroundImage',
+				},
+				undefined,
+				themeJson,
+			],
+		] )(
+			'Given ruleValue %s return expected value of %s',
+			( ruleValue, returnedValue, tree ) => {
+				expect( getResolvedValue( ruleValue, tree ) ).toEqual(
+					returnedValue
+				);
+			}
+		);
+	} );
 } );

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

@@ -9,7 +9,6 @@ import {
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { useCallback, useMemo, useEffect } from '@wordpress/element';
-import { getValueFromVariable } from '@wordpress/global-styles-engine';
 
 /**
  * Internal dependencies
@@ -22,7 +21,7 @@ import TextAlignmentControl from '../text-alignment-control';
 import TextTransformControl from '../text-transform-control';
 import TextDecorationControl from '../text-decoration-control';
 import WritingModeControl from '../writing-mode-control';
-import { useToolsPanelDropdownMenuProps } from './utils';
+import { getValueFromVariable, useToolsPanelDropdownMenuProps } from './utils';
 import { setImmutably } from '../../utils/object';
 import {
 	getMergedFontFamiliesAndFontFamilyFaces,
@@ -213,6 +212,30 @@ export default function TypographyPanel( {
 	const mergedFontSizes = getMergedFontSizes( settings );
 
 	const fontSize = decodeValue( inheritedValue?.typography?.fontSize );
+
+	// Extract the slug from the CSS custom property if it exists
+	const currentFontSizeSlug = ( () => {
+		const rawValue = inheritedValue?.typography?.fontSize;
+		if ( ! rawValue || typeof rawValue !== 'string' ) {
+			return undefined;
+		}
+
+		// Block supports use `var:preset` format.
+		if ( rawValue.startsWith( 'var:preset|font-size|' ) ) {
+			return rawValue.replace( 'var:preset|font-size|', '' );
+		}
+
+		// Global styles data uses `var(--wp--preset)` format.
+		const cssVarMatch = rawValue.match(
+			/^var\(--wp--preset--font-size--([^)]+)\)$/
+		);
+		if ( cssVarMatch ) {
+			return cssVarMatch[ 1 ];
+		}
+
+		return undefined;
+	} )();
+
 	const setFontSize = ( newValue, metadata ) => {
 		const actualValue = !! metadata?.slug
 			? `var:preset|font-size|${ metadata?.slug }`
@@ -433,7 +456,8 @@ export default function TypographyPanel( {
 					panelId={ panelId }
 				>
 					<FontSizePicker
-						value={ fontSize }
+						value={ currentFontSizeSlug || fontSize }
+						valueMode={ currentFontSizeSlug ? 'slug' : 'literal' }
 						onChange={ setFontSize }
 						fontSizes={ mergedFontSizes }
 						disableCustomFontSizes={ disableCustomFontSizes }

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

@@ -1,8 +1,141 @@
+/**
+ * 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,
+	getTypographyValueAndUnit,
+} from '../font-sizes/fluid-utils';
 import { getFontStylesAndWeights } from '../../utils/get-font-styles-and-weights';
 
+/**
+ * @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 Specifies the minimum and maximum font size value of a fluid font size.
+ */
+
+/**
+ * @typedef {Object} TypographySettings
+ * @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.
+ *
+ * The Core PHP equivalent is wp_get_typography_font_size_value().
+ *
+ * @param {Preset}                     preset
+ * @param {Object}                     settings
+ * @param {boolean|TypographySettings} settings.typography.fluid  Whether fluid typography is enabled, and, optionally, fluid font size options.
+ * @param {?Object}                    settings.typography.layout Layout options.
+ *
+ * @return {string|*} A font-size value or the value of preset.size.
+ */
+export function getTypographyFontSizeValue( preset, settings ) {
+	const { size: defaultSize } = preset;
+
+	/*
+	 * Catch falsy values and 0/'0'. Fluid calculations cannot be performed on `0`.
+	 * Also return early when a preset font size explicitly disables fluid typography with `false`.
+	 */
+	if ( ! defaultSize || '0' === defaultSize || false === preset?.fluid ) {
+		return defaultSize;
+	}
+
+	/*
+	 * Return early when fluid typography is disabled in the settings, and there
+	 * are no local settings to enable it for the individual preset.
+	 *
+	 * If this condition isn't met, either the settings or individual preset settings
+	 * have enabled fluid typography.
+	 */
+	if (
+		! isFluidTypographyEnabled( settings?.typography ) &&
+		! isFluidTypographyEnabled( preset )
+	) {
+		return defaultSize;
+	}
+
+	let fluidTypographySettings =
+		getFluidTypographyOptionsFromSettings( settings );
+	fluidTypographySettings =
+		typeof fluidTypographySettings?.fluid === 'object'
+			? fluidTypographySettings?.fluid
+			: {};
+
+	const fluidFontSizeValue = getComputedFluidTypographyValue( {
+		minimumFontSize: preset?.fluid?.min,
+		maximumFontSize: preset?.fluid?.max,
+		fontSize: defaultSize,
+		minimumFontSizeLimit: fluidTypographySettings?.minFontSize,
+		maximumViewportWidth: fluidTypographySettings?.maxViewportWidth,
+		minimumViewportWidth: fluidTypographySettings?.minViewportWidth,
+	} );
+
+	if ( !! fluidFontSizeValue ) {
+		return fluidFontSizeValue;
+	}
+
+	return defaultSize;
+}
+
+function isFluidTypographyEnabled( typographySettings ) {
+	const fluidSettings = typographySettings?.fluid;
+	return (
+		true === fluidSettings ||
+		( fluidSettings &&
+			typeof fluidSettings === 'object' &&
+			Object.keys( fluidSettings ).length > 0 )
+	);
+}
+
+/**
+ * Returns fluid typography settings from theme.json setting object.
+ *
+ * @param {Object} settings            Theme.json settings
+ * @param {Object} settings.typography Theme.json typography settings
+ * @param {Object} settings.layout     Theme.json layout settings
+ * @return {TypographySettings} Fluid typography settings
+ */
+export function getFluidTypographyOptionsFromSettings( settings ) {
+	const typographySettings = settings?.typography;
+	const layoutSettings = settings?.layout;
+	const defaultMaxViewportWidth = getTypographyValueAndUnit(
+		layoutSettings?.wideSize
+	)
+		? layoutSettings?.wideSize
+		: null;
+	return isFluidTypographyEnabled( typographySettings ) &&
+		defaultMaxViewportWidth
+		? {
+				fluid: {
+					maxViewportWidth: defaultMaxViewportWidth,
+					...typographySettings.fluid,
+				},
+		  }
+		: {
+				fluid: typographySettings?.fluid,
+		  };
+}
+
 /**
  * Returns an object of merged font families and the font faces from the selected font family
  * based on the theme.json settings object and the currently selected font family.