@wordpress/block-editor 11.8.0 → 12.1.0

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

@@ -27,7 +27,7 @@ import { shadow as shadowIcon, Icon, check } from '@wordpress/icons';
  * Internal dependencies
  */
 import { getValueFromVariable } from './utils';
-import { immutableSet } from '../../utils/object';
+import { setImmutably } from '../../utils/object';
 
 export function useHasEffectsPanel( settings ) {
 	const hasShadowControl = useHasShadowControl( settings );
@@ -81,7 +81,7 @@ export default function EffectsPanel( {
 	const hasShadowEnabled = useHasShadowControl( settings );
 	const shadow = decodeValue( inheritedValue?.shadow );
 	const setShadow = ( newValue ) => {
-		onChange( immutableSet( value, [ 'shadow' ], newValue ) );
+		onChange( setImmutably( value, [ 'shadow' ], newValue ) );
 	};
 	const hasShadow = () => !! value?.shadow;
 	const resetShadow = () => setShadow( undefined );

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

@@ -1,11 +1,26 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
 /**
  * WordPress dependencies
  */
 import {
 	__experimentalToolsPanel as ToolsPanel,
 	__experimentalToolsPanelItem as ToolsPanelItem,
+	__experimentalItemGroup as ItemGroup,
+	__experimentalHStack as HStack,
+	__experimentalZStack as ZStack,
 	__experimentalVStack as VStack,
+	__experimentalDropdownContentWrapper as DropdownContentWrapper,
+	Button,
+	ColorIndicator,
 	DuotonePicker,
+	DuotoneSwatch,
+	Dropdown,
+	Flex,
+	FlexItem,
 } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { useCallback, useMemo } from '@wordpress/element';
@@ -14,7 +29,7 @@ import { useCallback, useMemo } from '@wordpress/element';
  * Internal dependencies
  */
 import { getValueFromVariable } from './utils';
-import { immutableSet } from '../../utils/object';
+import { setImmutably } from '../../utils/object';
 
 const EMPTY_ARRAY = [];
 function useMultiOriginColorPresets(
@@ -75,6 +90,29 @@ const DEFAULT_CONTROLS = {
 	duotone: true,
 };
 
+const popoverProps = {
+	placement: 'left-start',
+	offset: 36,
+	shift: true,
+	className: 'block-editor-duotone-control__popover',
+	headerTitle: __( 'Duotone' ),
+};
+
+const LabeledColorIndicator = ( { indicator, label } ) => (
+	<HStack justify="flex-start">
+		<ZStack isLayered={ false } offset={ -8 }>
+			<Flex expanded={ false }>
+				{ indicator === 'unset' || ! indicator ? (
+					<ColorIndicator className="block-editor-duotone-control__unset-indicator" />
+				) : (
+					<DuotoneSwatch values={ indicator } />
+				) }
+			</Flex>
+		</ZStack>
+		<FlexItem title={ label }>{ label }</FlexItem>
+	</HStack>
+);
+
 export default function FiltersPanel( {
 	as: Wrapper = FiltersToolsPanel,
 	value,
@@ -105,11 +143,16 @@ export default function FiltersPanel( {
 		const settedValue = duotonePreset
 			? `var:preset|duotone|${ duotonePreset.slug }`
 			: newValue;
-		onChange( immutableSet( value, [ 'filter', 'duotone' ], settedValue ) );
+		onChange( setImmutably( value, [ 'filter', 'duotone' ], settedValue ) );
 	};
 	const hasDuotone = () => !! value?.filter?.duotone;
 	const resetDuotone = () => setDuotone( undefined );
 
+	const disableCustomColors = ! settings?.color?.custom;
+	const disableCustomDuotone =
+		! settings?.color?.customDuotone ||
+		( colorPalette?.length === 0 && disableCustomColors );
+
 	const resetAllFilter = useCallback( ( previousValue ) => {
 		return {
 			...previousValue,
@@ -135,21 +178,51 @@ export default function FiltersPanel( {
 					isShownByDefault={ defaultControls.duotone }
 					panelId={ panelId }
 				>
-					<VStack>
-						<p>
-							{ __(
-								'Create a two-tone color effect without losing your original image.'
-							) }
-						</p>
-						<DuotonePicker
-							colorPalette={ colorPalette }
-							duotonePalette={ duotonePalette }
-							disableCustomColors={ true }
-							disableCustomDuotone={ true }
-							value={ duotone }
-							onChange={ setDuotone }
-						/>
-					</VStack>
+					<Dropdown
+						popoverProps={ popoverProps }
+						className="block-editor-global-styles-filters-panel__dropdown"
+						renderToggle={ ( { onToggle, isOpen } ) => {
+							const toggleProps = {
+								onClick: onToggle,
+								className: classnames( { 'is-open': isOpen } ),
+								'aria-expanded': isOpen,
+							};
+
+							return (
+								<ItemGroup isBordered isSeparated>
+									<Button { ...toggleProps }>
+										<LabeledColorIndicator
+											indicator={ duotone }
+											label={ __( 'Duotone' ) }
+										/>
+									</Button>
+								</ItemGroup>
+							);
+						} }
+						renderContent={ () => (
+							<DropdownContentWrapper paddingSize="medium">
+								<VStack>
+									<p>
+										{ __(
+											'Create a two-tone color effect without losing your original image.'
+										) }
+									</p>
+									<DuotonePicker
+										colorPalette={ colorPalette }
+										duotonePalette={ duotonePalette }
+										disableCustomColors={
+											disableCustomColors
+										}
+										disableCustomDuotone={
+											disableCustomDuotone
+										}
+										value={ duotone }
+										onChange={ setDuotone }
+									/>
+								</VStack>
+							</DropdownContentWrapper>
+						) }
+					/>
 				</ToolsPanelItem>
 			) }
 		</Wrapper>

package/src/components/global-styles/hooks.js

@@ -181,11 +181,7 @@ export function useGlobalStyle(
 	let rawResult, result;
 	switch ( source ) {
 		case 'all':
-			rawResult =
-				// The styles.css path is allowed to be empty, so don't revert to base if undefined.
-				finalPath === 'styles.css'
-					? get( userConfig, finalPath )
-					: get( mergedConfig, finalPath );
+			rawResult = get( mergedConfig, finalPath );
 			result = shouldDecodeEncode
 				? getValueFromVariable( mergedConfig, blockName, rawResult )
 				: rawResult;

package/src/components/global-styles/index.js

@@ -5,7 +5,10 @@ export {
 	useSettingsForBlockElement,
 } from './hooks';
 export { getBlockCSSSelector } from './get-block-css-selector';
-export { useGlobalStylesOutput } from './use-global-styles-output';
+export {
+	useGlobalStylesOutput,
+	useGlobalStylesOutputWithConfig,
+} from './use-global-styles-output';
 export { GlobalStylesContext } from './context';
 export {
 	default as TypographyPanel,
@@ -19,3 +22,5 @@ export { default as BorderPanel, useHasBorderPanel } from './border-panel';
 export { default as ColorPanel, useHasColorPanel } from './color-panel';
 export { default as EffectsPanel, useHasEffectsPanel } from './effects-panel';
 export { default as FiltersPanel, useHasFiltersPanel } from './filters-panel';
+export { default as AdvancedPanel } from './advanced-panel';
+export { areGlobalStyleConfigsEqual } from './utils';

package/src/components/global-styles/style.scss

@@ -6,11 +6,12 @@
 	width: 230px;
 }
 
+.block-editor-global-styles-filters-panel__dropdown,
 .block-editor-global-styles-effects-panel__shadow-dropdown {
 	display: block;
 	padding: 0;
 
-	> button {
+	button {
 		width: 100%;
 		padding: $grid-unit-10;
 
@@ -40,3 +41,17 @@
 	height: 24px;
 	width: 24px;
 }
+
+.block-editor-global-styles-advanced-panel__custom-css-input textarea {
+	font-family: $editor_html_font;
+}
+
+.block-editor-global-styles-advanced-panel__custom-css-validation-wrapper {
+	position: absolute;
+	bottom: $grid-unit-20;
+	right: $grid-unit * 3;
+}
+
+.block-editor-global-styles-advanced-panel__custom-css-validation-icon {
+	fill: $alert-red;
+}

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

@@ -89,11 +89,11 @@ describe( 'typography utils', () => {
 					fluid: true,
 				},
 				expected:
-					'clamp(1.313rem, 1.313rem + ((1vw - 0.48rem) * 0.84), 1.75rem)',
+					'clamp(1.119rem, 1.119rem + ((1vw - 0.2rem) * 0.789), 1.75rem)',
 			},
 
 			{
-				message: 'should return clamp value with eem min and max units',
+				message: 'should return clamp value with em min and max units',
 				preset: {
 					size: '1.75em',
 				},
@@ -101,19 +101,19 @@ describe( 'typography utils', () => {
 					fluid: true,
 				},
 				expected:
-					'clamp(1.313em, 1.313rem + ((1vw - 0.48em) * 0.84), 1.75em)',
+					'clamp(1.119em, 1.119rem + ((1vw - 0.2em) * 0.789), 1.75em)',
 			},
 
 			{
 				message: 'should return clamp value for floats',
 				preset: {
-					size: '100.175px',
+					size: '70.175px',
 				},
 				typographySettings: {
 					fluid: true,
 				},
 				expected:
-					'clamp(75.131px, 4.696rem + ((1vw - 7.68px) * 3.01), 100.175px)',
+					'clamp(37.897px, 2.369rem + ((1vw - 3.2px) * 2.522), 70.175px)',
 			},
 
 			{
@@ -127,20 +127,20 @@ describe( 'typography utils', () => {
 					fluid: true,
 				},
 				expected:
-					'clamp(24.75px, 1.547rem + ((1vw - 7.68px) * 0.992), 33px)',
+					'clamp(20.515px, 1.282rem + ((1vw - 3.2px) * 0.975), 33px)',
 			},
 
 			{
 				message: 'should coerce float to `px` and returns clamp value',
 				preset: {
-					size: 100.23,
+					size: 70.175,
 					fluid: true,
 				},
 				typographySettings: {
 					fluid: true,
 				},
 				expected:
-					'clamp(75.173px, 4.698rem + ((1vw - 7.68px) * 3.012), 100.23px)',
+					'clamp(37.897px, 2.369rem + ((1vw - 3.2px) * 2.522), 70.175px)',
 			},
 
 			{
@@ -154,7 +154,7 @@ describe( 'typography utils', () => {
 					fluid: true,
 				},
 				expected:
-					'clamp(21px, 1.313rem + ((1vw - 7.68px) * 0.841), 28px)',
+					'clamp(17.905px, 1.119rem + ((1vw - 3.2px) * 0.789), 28px)',
 			},
 
 			{
@@ -167,7 +167,7 @@ describe( 'typography utils', () => {
 					fluid: true,
 				},
 				expected:
-					'clamp(21px, 1.313rem + ((1vw - 7.68px) * 0.841), 28px)',
+					'clamp(17.905px, 1.119rem + ((1vw - 3.2px) * 0.789), 28px)',
 			},
 
 			{
@@ -183,8 +183,7 @@ describe( 'typography utils', () => {
 				typographySettings: {
 					fluid: true,
 				},
-				expected:
-					'clamp(5rem, 5rem + ((1vw - 0.48rem) * -5.769), 32px)',
+				expected: 'clamp(5rem, 5rem + ((1vw - 0.2rem) * -3.75), 32px)',
 			},
 
 			{
@@ -240,14 +239,14 @@ describe( 'typography utils', () => {
 					fluid: true,
 				},
 				expected:
-					'clamp(20px, 1.25rem + ((1vw - 7.68px) * 93.75), 50rem)',
+					'clamp(20px, 1.25rem + ((1vw - 3.2px) * 60.938), 50rem)',
 			},
 
 			{
 				message:
 					'should return clamp value where no fluid max size is set',
 				preset: {
-					size: '28px',
+					size: '50px',
 					fluid: {
 						min: '2.6rem',
 					},
@@ -256,7 +255,7 @@ describe( 'typography utils', () => {
 					fluid: true,
 				},
 				expected:
-					'clamp(2.6rem, 2.6rem + ((1vw - 0.48rem) * -1.635), 28px)',
+					'clamp(2.6rem, 2.6rem + ((1vw - 0.2rem) * 0.656), 50px)',
 			},
 
 			{
@@ -272,7 +271,7 @@ describe( 'typography utils', () => {
 					fluid: true,
 				},
 				expected:
-					'clamp(21px, 1.313rem + ((1vw - 7.68px) * 7.091), 80px)',
+					'clamp(17.905px, 1.119rem + ((1vw - 3.2px) * 4.851), 80px)',
 			},
 
 			{
@@ -289,7 +288,7 @@ describe( 'typography utils', () => {
 					fluid: true,
 				},
 				expected:
-					'clamp(0.5rem, 0.5rem + ((1vw - 0.48rem) * 8.654), 5rem)',
+					'clamp(0.5rem, 0.5rem + ((1vw - 0.2rem) * 5.625), 5rem)',
 			},
 
 			{
@@ -305,7 +304,7 @@ describe( 'typography utils', () => {
 					fluid: true,
 				},
 				expected:
-					'clamp(12px, 0.75rem + ((1vw - 7.68px) * 0.962), 20px)',
+					'clamp(12px, 0.75rem + ((1vw - 3.2px) * 0.625), 20px)',
 			},
 
 			{
@@ -321,7 +320,7 @@ describe( 'typography utils', () => {
 					fluid: true,
 				},
 				expected:
-					'clamp(0.875rem, 0.875rem + ((1vw - 0.48rem) * 36.779), 20rem)',
+					'clamp(0.875rem, 0.875rem + ((1vw - 0.2rem) * 23.906), 20rem)',
 			},
 
 			{
@@ -337,7 +336,7 @@ describe( 'typography utils', () => {
 				typographySettings: {
 					fluid: true,
 				},
-				expected: 'clamp(30px, 1.875rem + ((1vw - 7.68px) * 1), 30px)',
+				expected: 'clamp(30px, 1.875rem + ((1vw - 3.2px) * 1), 30px)',
 			},
 
 			{
@@ -352,7 +351,7 @@ describe( 'typography utils', () => {
 					},
 				},
 				expected:
-					'clamp(14px, 0.875rem + ((1vw - 7.68px) * 0.12), 15px)',
+					'clamp(14px, 0.875rem + ((1vw - 3.2px) * 0.078), 15px)',
 			},
 
 			// Equivalent custom config PHP unit tests in `test_should_covert_font_sizes_to_fluid_values()`.
@@ -366,7 +365,7 @@ describe( 'typography utils', () => {
 						minFontSize: '16px',
 					},
 				},
-				expected: 'clamp(16px, 1rem + ((1vw - 7.68px) * 0.12), 17px)',
+				expected: 'clamp(16px, 1rem + ((1vw - 3.2px) * 0.078), 17px)',
 			},
 
 			{
@@ -382,6 +381,48 @@ describe( 'typography utils', () => {
 				},
 				expected: '15px',
 			},
+
+			{
+				message:
+					'should apply scaled min font size for em values when custom min font size is not set',
+				preset: {
+					size: '12rem',
+				},
+				typographySettings: {
+					fluid: true,
+				},
+				expected:
+					'clamp(5.174rem, 5.174rem + ((1vw - 0.2rem) * 8.533), 12rem)',
+			},
+
+			{
+				message:
+					'should apply scaled min font size for px values when custom min font size is not set',
+				preset: {
+					size: '200px',
+				},
+				typographySettings: {
+					fluid: true,
+				},
+				expected:
+					'clamp(85.342px, 5.334rem + ((1vw - 3.2px) * 8.958), 200px)',
+			},
+
+			{
+				message:
+					'should not apply scaled min font size for minimum font size when custom min font size is set',
+				preset: {
+					size: '200px',
+					fluid: {
+						min: '100px',
+					},
+				},
+				typographySettings: {
+					fluid: true,
+				},
+				expected:
+					'clamp(100px, 6.25rem + ((1vw - 3.2px) * 7.813), 200px)',
+			},
 		].forEach( ( { message, preset, typographySettings, expected } ) => {
 			it( `${ message }`, () => {
 				expect(

package/src/components/global-styles/test/use-global-styles-output.js

@@ -480,10 +480,128 @@ describe( 'global styles renderer', () => {
 			expect( toStyles( tree, blockSelectors ) ).toEqual(
 				'body {margin: 0;}' +
 					'body{background-color: red;margin: 10px;padding: 10px;}a{color: blue;}a:hover{color: orange;}a:focus{color: orange;}h1{font-size: 42px;}.wp-block-group{margin-top: 10px;margin-right: 20px;margin-bottom: 30px;margin-left: 40px;padding-top: 11px;padding-right: 22px;padding-bottom: 33px;padding-left: 44px;}h1,h2,h3,h4,h5,h6{color: orange;}h1 a,h2 a,h3 a,h4 a,h5 a,h6 a{color: hotpink;}h1 a:hover,h2 a:hover,h3 a:hover,h4 a:hover,h5 a:hover,h6 a:hover{color: red;}h1 a:focus,h2 a:focus,h3 a:focus,h4 a:focus,h5 a:focus,h6 a:focus{color: red;}' +
-					'.wp-block-image img, .wp-block-image .wp-crop-area{border-radius: 9999px}.wp-block-image{color: red;}.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }' +
+					'.wp-block-image img, .wp-block-image .wp-crop-area{border-radius: 9999px;}.wp-block-image{color: red;}.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }' +
 					'.has-white-color{color: var(--wp--preset--color--white) !important;}.has-white-background-color{background-color: var(--wp--preset--color--white) !important;}.has-white-border-color{border-color: var(--wp--preset--color--white) !important;}.has-black-color{color: var(--wp--preset--color--black) !important;}.has-black-background-color{background-color: var(--wp--preset--color--black) !important;}.has-black-border-color{border-color: var(--wp--preset--color--black) !important;}h1.has-blue-color,h2.has-blue-color,h3.has-blue-color,h4.has-blue-color,h5.has-blue-color,h6.has-blue-color{color: var(--wp--preset--color--blue) !important;}h1.has-blue-background-color,h2.has-blue-background-color,h3.has-blue-background-color,h4.has-blue-background-color,h5.has-blue-background-color,h6.has-blue-background-color{background-color: var(--wp--preset--color--blue) !important;}h1.has-blue-border-color,h2.has-blue-border-color,h3.has-blue-border-color,h4.has-blue-border-color,h5.has-blue-border-color,h6.has-blue-border-color{border-color: var(--wp--preset--color--blue) !important;}'
 			);
 		} );
+
+		it( 'should handle feature selectors', () => {
+			const tree = {
+				styles: {
+					blocks: {
+						'core/image': {
+							color: {
+								text: 'red',
+							},
+							spacing: {
+								padding: {
+									top: '1px',
+								},
+							},
+							border: {
+								color: 'red',
+								radius: '9999px',
+							},
+						},
+					},
+				},
+			};
+
+			const blockSelectors = {
+				'core/image': {
+					selector: '.wp-image',
+					featureSelectors: {
+						spacing: '.wp-image-spacing',
+						border: {
+							root: '.wp-image-border',
+							color: '.wp-image-border-color',
+						},
+					},
+				},
+			};
+
+			expect( toStyles( Object.freeze( tree ), blockSelectors ) ).toEqual(
+				'body {margin: 0;}' +
+					'.wp-image-spacing{padding-top: 1px;}.wp-image-border-color{border-color: red;}.wp-image-border{border-radius: 9999px;}.wp-image{color: red;}' +
+					'.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }'
+			);
+		} );
+
+		it( 'should handle block variations', () => {
+			const tree = {
+				styles: {
+					blocks: {
+						'core/image': {
+							variations: {
+								foo: {
+									color: {
+										text: 'blue',
+									},
+									spacing: {
+										padding: {
+											top: '2px',
+										},
+									},
+									border: {
+										color: 'blue',
+									},
+								},
+							},
+						},
+					},
+				},
+			};
+
+			const blockSelectors = {
+				'core/image': {
+					selector: '.wp-image',
+					featureSelectors: {
+						spacing: '.wp-image-spacing',
+						border: {
+							root: '.wp-image-border',
+							color: '.wp-image-border-color',
+						},
+					},
+					styleVariationSelectors: {
+						foo: '.is-style-foo.wp-image',
+					},
+				},
+			};
+
+			expect( toStyles( Object.freeze( tree ), blockSelectors ) ).toEqual(
+				'body {margin: 0;}' +
+					'.is-style-foo.wp-image.wp-image-spacing{padding-top: 2px;}.is-style-foo.wp-image.wp-image-border-color{border-color: blue;}.is-style-foo.wp-image{color: blue;}' +
+					'.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }'
+			);
+		} );
+
+		it( 'should handle duotone filter', () => {
+			const tree = {
+				styles: {
+					blocks: {
+						'core/image': {
+							filter: {
+								duotone: 'blur(5px)',
+							},
+						},
+					},
+				},
+			};
+
+			const blockSelectors = {
+				'core/image': {
+					selector: '.wp-image',
+					duotoneSelector: '.wp-image img',
+				},
+			};
+
+			expect( toStyles( Object.freeze( tree ), blockSelectors ) ).toEqual(
+				'body {margin: 0;}' +
+					'.wp-image img{filter: blur(5px);}' +
+					'.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }'
+			);
+		} );
+
 		it( 'should output content and wide size variables if values are specified', () => {
 			const tree = {
 				settings: {
@@ -493,7 +611,7 @@ describe( 'global styles renderer', () => {
 					},
 				},
 			};
-			expect( toStyles( tree, 'body' ) ).toEqual(
+			expect( toStyles( Object.freeze( tree ), 'body' ) ).toEqual(
 				'body {margin: 0; --wp--style--global--content-size: 840px; --wp--style--global--wide-size: 1100px;}.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }'
 			);
 		} );
@@ -678,8 +796,9 @@ describe( 'global styles renderer', () => {
 				selectors: imageSelectors,
 			};
 			const blockTypes = [ imageBlock ];
+			const getBlockStyles = () => [ { name: 'foo' } ];
 
-			expect( getBlockSelectors( blockTypes, () => {} ) ).toEqual( {
+			expect( getBlockSelectors( blockTypes, getBlockStyles ) ).toEqual( {
 				'core/image': {
 					name: imageBlock.name,
 					selector: imageSelectors.root,
@@ -690,6 +809,9 @@ describe( 'global styles renderer', () => {
 						border: '.my-image img, .my-image .crop-area',
 						filter: { duotone: 'img' },
 					},
+					styleVariationSelectors: {
+						foo: '.is-style-foo.my-image',
+					},
 					hasLayoutSupport: false,
 				},
 			} );
@@ -811,7 +933,7 @@ describe( 'global styles renderer', () => {
 				'padding-bottom: 33px',
 				'padding-left: 33px',
 				'font-family: sans-serif',
-				'font-size: clamp(14px, 0.875rem + ((1vw - 7.68px) * 0.12), 15px)',
+				'font-size: clamp(14px, 0.875rem + ((1vw - 3.2px) * 0.078), 15px)',
 			] );
 		} );
 

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

@@ -1,7 +1,11 @@
 /**
  * Internal dependencies
  */
-import { getPresetVariableFromValue, getValueFromVariable } from '../utils';
+import {
+	areGlobalStyleConfigsEqual,
+	getPresetVariableFromValue,
+	getValueFromVariable,
+} from '../utils';
 
 describe( 'editor utils', () => {
 	const themeJson = {
@@ -203,4 +207,56 @@ describe( 'editor utils', () => {
 			} );
 		} );
 	} );
+
+	describe( 'areGlobalStyleConfigsEqual', () => {
+		test.each( [
+			{ original: null, variation: null, expected: true },
+			{ original: {}, variation: {}, expected: true },
+			{ original: {}, variation: undefined, expected: false },
+			{
+				original: {
+					styles: {
+						color: { text: 'var(--wp--preset--color--red)' },
+					},
+				},
+				variation: {
+					styles: {
+						color: { text: 'var(--wp--preset--color--blue)' },
+					},
+				},
+				expected: false,
+			},
+			{ original: {}, variation: undefined, expected: false },
+			{
+				original: {
+					styles: {
+						color: { text: 'var(--wp--preset--color--red)' },
+					},
+					settings: {
+						typography: {
+							fontSize: true,
+						},
+					},
+				},
+				variation: {
+					styles: {
+						color: { text: 'var(--wp--preset--color--red)' },
+					},
+					settings: {
+						typography: {
+							fontSize: true,
+						},
+					},
+				},
+				expected: true,
+			},
+		] )(
+			'.areGlobalStyleConfigsEqual( $original, $variation )',
+			( { original, variation, expected } ) => {
+				expect(
+					areGlobalStyleConfigsEqual( original, variation )
+				).toBe( expected );
+			}
+		);
+	} );
 } );