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

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

@@ -1,258 +1,9 @@
 /**
  * Internal dependencies
  */
-import {
-	areGlobalStyleConfigsEqual,
-	getBlockStyleVariationSelector,
-	getPresetVariableFromValue,
-	getValueFromVariable,
-	scopeFeatureSelectors,
-	getResolvedThemeFilePath,
-	getResolvedRefValue,
-	getResolvedValue,
-} from '../utils';
+import { areGlobalStyleConfigsEqual } 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 },
@@ -304,196 +55,4 @@ 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,6 +9,7 @@ import {
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { useCallback, useMemo, useEffect } from '@wordpress/element';
+import { getValueFromVariable } from '@wordpress/global-styles-engine';
 
 /**
  * Internal dependencies
@@ -21,7 +22,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 { getValueFromVariable, useToolsPanelDropdownMenuProps } from './utils';
+import { useToolsPanelDropdownMenuProps } from './utils';
 import { setImmutably } from '../../utils/object';
 import {
 	getMergedFontFamiliesAndFontFamilyFaces,

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

@@ -1,141 +1,8 @@
-/**
- * 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.