@elementor/editor-editing-panel 1.24.0 → 1.28.0

package/src/components/style-sections/layout-section/flex-size-field.tsx

@@ -6,14 +6,14 @@ import {
 	SizeControl,
 	type ToggleButtonGroupItem,
 } from '@elementor/editor-controls';
-import type { NumberPropValue, SizePropValue } from '@elementor/editor-props';
+import { numberPropTypeUtil, type NumberPropValue, type SizePropValue } from '@elementor/editor-props';
 import { ExpandIcon, PencilIcon, ShrinkIcon } from '@elementor/icons';
-import { DirectionProvider, Grid, ThemeProvider, Typography } from '@elementor/ui';
+import { DirectionProvider, Grid, ThemeProvider } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
 import { StylesField } from '../../../controls-registry/styles-field';
 import { useDirection } from '../../../hooks/use-direction';
-import { useStylesField } from '../../../hooks/use-styles-field';
+import { useStylesFields } from '../../../hooks/use-styles-fields';
 import { ControlLabel } from '../../control-label';
 import { SectionContent } from '../../section-content';
 
@@ -43,45 +43,55 @@ const items: ToggleButtonGroupItem< GroupItem >[] = [
 ];
 
 export const FlexSizeField = () => {
-	const { isSiteRtl } = useDirection(),
-		[ growField, setGrowField ] = useStylesField< NumberPropValue | null >( 'flex-grow' ),
-		[ shrinkField, setShrinkField ] = useStylesField< NumberPropValue | null >( 'flex-shrink' ),
-		[ basisField, setBasisField ] = useStylesField< SizePropValue | null >( 'flex-basis' );
+	const { isSiteRtl } = useDirection();
 
-	const grow = growField?.value || null,
-		shrink = shrinkField?.value || null,
-		basis = basisField?.value || null;
+	const [ fields, setFields ] = useStylesFields< {
+		'flex-grow': NumberPropValue | null;
+		'flex-shrink': NumberPropValue | null;
+		'flex-basis': SizePropValue | null;
+	} >( [ 'flex-grow', 'flex-shrink', 'flex-basis' ] );
+
+	const grow = fields?.[ 'flex-grow' ]?.value || null;
+	const shrink = fields?.[ 'flex-shrink' ]?.value || null;
+	const basis = fields?.[ 'flex-basis' ]?.value || null;
 
 	const currentGroup = useMemo( () => getActiveGroup( { grow, shrink, basis } ), [ grow, shrink, basis ] ),
 		[ activeGroup, setActiveGroup ] = useState( currentGroup );
 
 	const onChangeGroup = ( group: GroupItem | null = null ) => {
 		setActiveGroup( group );
-		setBasisField( null );
 
 		if ( ! group || group === 'custom' ) {
-			setGrowField( null );
-			setShrinkField( null );
+			setFields( {
+				'flex-basis': null,
+				'flex-grow': null,
+				'flex-shrink': null,
+			} );
 
 			return;
 		}
 
 		if ( group === 'flex-grow' ) {
-			setGrowField( { $$type: 'number', value: DEFAULT } );
-			setShrinkField( null );
+			setFields( {
+				'flex-basis': null,
+				'flex-grow': numberPropTypeUtil.create( DEFAULT ),
+				'flex-shrink': null,
+			} );
 
 			return;
 		}
 
-		setGrowField( null );
-		setShrinkField( { $$type: 'number', value: DEFAULT } );
+		setFields( {
+			'flex-basis': null,
+			'flex-grow': null,
+			'flex-shrink': numberPropTypeUtil.create( DEFAULT ),
+		} );
 	};
 
 	return (
 		<DirectionProvider rtl={ isSiteRtl }>
 			<ThemeProvider>
 				<SectionContent>
-					<Typography fontSize="large">{ activeGroup }</Typography>
 					<Grid container gap={ 2 } alignItems="center" flexWrap="nowrap">
 						<Grid item xs={ 6 }>
 							<StylesField bind={ activeGroup ?? '' }>

package/src/components/style-sections/layout-section/layout-section.tsx

@@ -12,7 +12,7 @@ import { SectionContent } from '../../section-content';
 import { AlignContentField } from './align-content-field';
 import { AlignItemsField } from './align-items-field';
 import { AlignSelfChild } from './align-self-child-field';
-import { DisplayField } from './display-field';
+import { DisplayField, useDisplayPlaceholderValue } from './display-field';
 import { FlexDirectionField } from './flex-direction-field';
 import { FlexOrderField } from './flex-order-field';
 import { FlexSizeField } from './flex-size-field';
@@ -22,6 +22,8 @@ import { WrapField } from './wrap-field';
 
 export const LayoutSection = () => {
 	const [ display ] = useStylesField< StringPropValue >( 'display' );
+	const displayPlaceholder = useDisplayPlaceholderValue();
+	const isDisplayFlex = shouldDisplayFlexFields( display, displayPlaceholder as StringPropValue );
 	const { element } = useElement();
 	const parent = useParentElement( element.id );
 	const parentStyle = useComputedStyle( parent?.id || null );
@@ -29,7 +31,7 @@ export const LayoutSection = () => {
 	return (
 		<SectionContent>
 			<DisplayField />
-			{ ( 'flex' === display?.value || 'inline-flex' === display?.value ) && <FlexFields /> }
+			{ isDisplayFlex && <FlexFields /> }
 			{ 'flex' === parentStyle?.display && <FlexChildFields /> }
 		</SectionContent>
 	);
@@ -60,3 +62,13 @@ const FlexChildFields = () => (
 		<FlexSizeField />
 	</>
 );
+
+const shouldDisplayFlexFields = ( display: StringPropValue | null, local: StringPropValue ) => {
+	const value = display?.value ?? local?.value;
+
+	if ( ! value ) {
+		return false;
+	}
+
+	return 'flex' === value || 'inline-flex' === value;
+};

package/src/components/style-sections/typography-section/text-alignment-field.tsx

@@ -6,18 +6,17 @@ import { __ } from '@wordpress/i18n';
 
 import { StylesField } from '../../../controls-registry/styles-field';
 import { ControlLabel } from '../../control-label';
-import { RotatedIcon } from '../layout-section/utils/rotated-icon';
 
 type Alignments = 'start' | 'center' | 'end' | 'justify';
 
-const StartIcon = withDirection( AlignLeftIcon );
-const EndIcon = withDirection( AlignRightIcon );
+const AlignStartIcon = withDirection( AlignLeftIcon );
+const AlignEndIcon = withDirection( AlignRightIcon );
 
 const options: ToggleButtonGroupItem< Alignments >[] = [
 	{
 		value: 'start',
 		label: __( 'Start', 'elementor' ),
-		renderContent: () => <RotatedIcon icon={ StartIcon } size="tiny" />,
+		renderContent: ( { size } ) => <AlignStartIcon fontSize={ size } />,
 		showTooltip: true,
 	},
 	{
@@ -29,7 +28,7 @@ const options: ToggleButtonGroupItem< Alignments >[] = [
 	{
 		value: 'end',
 		label: __( 'End', 'elementor' ),
-		renderContent: () => <RotatedIcon icon={ EndIcon } size="tiny" />,
+		renderContent: ( { size } ) => <AlignEndIcon fontSize={ size } />,
 		showTooltip: true,
 	},
 	{
@@ -45,7 +44,7 @@ export const TextAlignmentField = () => {
 		<StylesField bind={ 'text-align' }>
 			<Grid container gap={ 2 } alignItems="center" flexWrap="nowrap">
 				<Grid item xs={ 6 }>
-					<ControlLabel>{ __( 'Alignment', 'elementor' ) }</ControlLabel>
+					<ControlLabel>{ __( 'Text align', 'elementor' ) }</ControlLabel>
 				</Grid>
 				<Grid item xs={ 6 } display="flex" justifyContent="end">
 					<ToggleControl options={ options } />

package/src/components/style-tab.tsx

@@ -1,7 +1,6 @@
 import * as React from 'react';
 import { useState } from 'react';
-import { getElementStyles, useElementSetting } from '@elementor/editor-elements';
-import { CLASSES_PROP_KEY, type ClassesPropValue, type PropKey } from '@elementor/editor-props';
+import { CLASSES_PROP_KEY } from '@elementor/editor-props';
 import { useActiveBreakpoint } from '@elementor/editor-responsive';
 import { type StyleDefinitionID, type StyleDefinitionState } from '@elementor/editor-styles';
 import { SessionStorageProvider } from '@elementor/session';
@@ -12,6 +11,7 @@ import { ClassesPropProvider } from '../contexts/classes-prop-context';
 import { useElement } from '../contexts/element-context';
 import { StyleProvider } from '../contexts/style-context';
 import { StyleInheritanceProvider } from '../contexts/styles-inheritance-context';
+import { useActiveStyleDefId } from '../hooks/use-active-style-def-id';
 import { CssClassSelector } from './css-classes/css-class-selector';
 import { Section } from './section';
 import { SectionsList } from './sections-list';
@@ -78,23 +78,6 @@ export const StyleTab = () => {
 	);
 };
 
-function useActiveStyleDefId( currentClassesProp: PropKey ) {
-	const [ activeStyledDefId, setActiveStyledDefId ] = useState< StyleDefinitionID | null >( null );
-
-	const fallback = useFirstElementStyleDef( currentClassesProp );
-
-	return [ activeStyledDefId || fallback?.id || null, setActiveStyledDefId ] as const;
-}
-
-function useFirstElementStyleDef( currentClassesProp: PropKey ) {
-	const { element } = useElement();
-
-	const classesIds = useElementSetting< ClassesPropValue >( element.id, currentClassesProp )?.value || [];
-	const stylesDefs = getElementStyles( element.id ) ?? {};
-
-	return Object.values( stylesDefs ).find( ( styleDef ) => classesIds.includes( styleDef.id ) );
-}
-
 function useCurrentClassesProp(): string {
 	const { elementType } = useElement();
 

package/src/contexts/style-context.tsx

@@ -50,9 +50,9 @@ export function useStyle() {
 	return context;
 }
 
-function getProviderByStyleId( styleId: StyleDefinitionID ) {
+export function getProviderByStyleId( styleId: StyleDefinitionID ) {
 	const styleProvider = stylesRepository.getProviders().find( ( provider ) => {
-		return provider.actions.get().find( ( style ) => style.id === styleId );
+		return provider.actions.all().find( ( style ) => style.id === styleId );
 	} );
 
 	return styleProvider ?? null;

package/src/controls-registry/control-type-container.tsx

@@ -23,7 +23,7 @@ const StyledContainer = styled( Box, {
 const getGridLayout = ( layout: ControlLayout ) => ( {
 	justifyContent: 'space-between',
 	gridTemplateColumns: {
-		full: '1fr',
-		'two-columns': 'repeat(2, 1fr)',
+		full: 'minmax(0, 1fr)',
+		'two-columns': 'repeat(2, minmax(0, 1fr))',
 	}[ layout ],
 } );

package/src/controls-registry/styles-field.tsx

@@ -9,10 +9,11 @@ import { createTopLevelOjectType } from './create-top-level-object-type';
 
 export type StylesFieldProps = {
 	bind: PropKey;
+	placeholder?: PropValue;
 	children: React.ReactNode;
 };
 
-export const StylesField = ( { bind, children }: StylesFieldProps ) => {
+export const StylesField = ( { bind, placeholder, children }: StylesFieldProps ) => {
 	const [ value, setValue ] = useStylesField( bind );
 
 	const stylesSchema = getStylesSchema();
@@ -20,6 +21,7 @@ export const StylesField = ( { bind, children }: StylesFieldProps ) => {
 	const propType = createTopLevelOjectType( { schema: stylesSchema } );
 
 	const values = { [ bind ]: value };
+	const placeholderValues = { [ bind ]: placeholder };
 
 	const setValues = ( newValue: Record< string, PropValue > ) => {
 		setValue( newValue[ bind ] );
@@ -34,7 +36,12 @@ export const StylesField = ( { bind, children }: StylesFieldProps ) => {
 				},
 			] }
 		>
-			<PropProvider propType={ propType } value={ values } setValue={ setValues }>
+			<PropProvider
+				propType={ propType }
+				value={ values }
+				setValue={ setValues }
+				placeholder={ placeholderValues }
+			>
 				<PropKeyProvider bind={ bind }>{ children }</PropKeyProvider>
 			</PropProvider>
 		</ControlAdornmentsProvider>

package/src/dynamics/dynamic-transformer.ts

@@ -0,0 +1,61 @@
+import { createTransformer } from '@elementor/editor-canvas';
+import { isTransformable, type Props } from '@elementor/editor-props';
+
+import { DynamicTagsManagerNotFoundError } from './errors';
+import { type ExtendedWindow } from './types';
+
+type Dynamic = {
+	name?: string;
+	settings?: Props;
+};
+
+export const dynamicTransformer = createTransformer( ( value: Dynamic ) => {
+	if ( ! value.name ) {
+		return null;
+	}
+
+	return getDynamicValue( value.name, simpleTransform( value.settings ?? {} ) );
+} );
+
+// Temporary naive transformation until we'll have a `backendTransformer` that
+// will replace the `dynamicTransformer` client implementation.
+function simpleTransform( props: Props ) {
+	const transformed = Object.entries( props ).map( ( [ settingKey, settingValue ] ) => {
+		const value = isTransformable( settingValue ) ? settingValue.value : settingValue;
+
+		return [ settingKey, value ] as const;
+	} );
+
+	return Object.fromEntries( transformed );
+}
+
+function getDynamicValue( name: string, settings: Record< string, unknown > ) {
+	const extendedWindow = window as unknown as ExtendedWindow;
+	const { dynamicTags } = extendedWindow.elementor ?? {};
+
+	if ( ! dynamicTags ) {
+		throw new DynamicTagsManagerNotFoundError();
+	}
+
+	const getTagValue = () => {
+		const tag = dynamicTags.createTag( 'v4-dynamic-tag', name, settings );
+
+		if ( ! tag ) {
+			return null;
+		}
+
+		return dynamicTags.loadTagDataFromCache( tag ) ?? null;
+	};
+
+	const tagValue = getTagValue();
+
+	if ( tagValue !== null ) {
+		return tagValue;
+	}
+
+	return new Promise( ( resolve ) => {
+		dynamicTags.refreshCacheFromServer( () => {
+			resolve( getTagValue() );
+		} );
+	} );
+}

package/src/dynamics/errors.ts

@@ -0,0 +1,6 @@
+import { createError } from '@elementor/utils';
+
+export const DynamicTagsManagerNotFoundError = createError( {
+	code: 'dynamic_tags_manager_not_found',
+	message: 'Dynamic tags manager not found',
+} );

package/src/dynamics/init.ts

@@ -1,6 +1,9 @@
+import { settingsTransformersRegistry, styleTransformersRegistry } from '@elementor/editor-canvas';
+
 import { replaceControl } from '../control-replacement';
 import { controlActionsMenu } from '../controls-actions';
 import { DynamicSelectionControl } from './components/dynamic-selection-control';
+import { dynamicTransformer } from './dynamic-transformer';
 import { usePropDynamicAction } from './hooks/use-prop-dynamic-action';
 import { isDynamicPropValue } from './utils';
 
@@ -16,4 +19,7 @@ export const init = () => {
 		id: 'dynamic-tags',
 		useProps: usePropDynamicAction,
 	} );
+
+	styleTransformersRegistry.register( 'dynamic', dynamicTransformer );
+	settingsTransformersRegistry.register( 'dynamic', dynamicTransformer );
 };

package/src/dynamics/types.ts

@@ -9,6 +9,7 @@ export type ExtendedWindow = Window & {
 				groups: Record< DynamicTag[ 'group' ], { title: string } >;
 			};
 		};
+		dynamicTags?: DynamicTagsManager;
 	};
 };
 
@@ -34,3 +35,19 @@ export type DynamicPropValue = TransformablePropValue<
 	'dynamic',
 	{ name: string; settings?: Record< string, unknown > }
 >;
+
+export type DynamicTagsManager = {
+	createTag: ( id: string, name: string, settings: Record< string, unknown > ) => TagInstance;
+	loadTagDataFromCache: ( tag: TagInstance ) => unknown;
+	refreshCacheFromServer: ( callback: () => void ) => void;
+};
+
+export type TagInstance = {
+	options: {
+		id: string;
+		name: string;
+	};
+	model: {
+		toJSON: () => Record< string, unknown >;
+	};
+};

package/src/hooks/use-active-style-def-id.ts

@@ -0,0 +1,36 @@
+import { useState } from 'react';
+import { getElementStyles, useElementSetting } from '@elementor/editor-elements';
+import { type ClassesPropValue, type PropKey } from '@elementor/editor-props';
+import { type StyleDefinitionID } from '@elementor/editor-styles';
+
+import { useElement } from '../contexts/element-context';
+
+export function useActiveStyleDefId( classProp: PropKey ) {
+	const [ activeStyledDefId, setActiveStyledDefId ] = useState< StyleDefinitionID | null >( null );
+
+	const appliedClassesIds = useAppliedClassesIds( classProp )?.value || [];
+
+	const fallback = useFirstAppliedClass( appliedClassesIds );
+
+	const activeAndAppliedClassId = useActiveAndAppliedClassId( activeStyledDefId, appliedClassesIds );
+	return [ activeAndAppliedClassId || fallback?.id || null, setActiveStyledDefId ] as const;
+}
+
+function useFirstAppliedClass( appliedClassesIds: string[] ) {
+	const { element } = useElement();
+	const stylesDefs = getElementStyles( element.id ) ?? {};
+
+	return Object.values( stylesDefs ).find( ( styleDef ) => appliedClassesIds.includes( styleDef.id ) );
+}
+
+function useAppliedClassesIds( classProp: PropKey ) {
+	const { element } = useElement();
+
+	return useElementSetting< ClassesPropValue >( element.id, classProp );
+}
+
+function useActiveAndAppliedClassId( id: StyleDefinitionID | null, appliedClassesIds: string[] ) {
+	const isClassApplied = !! id && appliedClassesIds.includes( id );
+
+	return isClassApplied ? id : null;
+}

package/src/hooks/use-styles-fields.ts

@@ -9,7 +9,7 @@ import {
 import type { Props } from '@elementor/editor-props';
 import { getVariantByMeta, type StyleDefinition, type StyleDefinitionVariant } from '@elementor/editor-styles';
 import { type StylesProvider } from '@elementor/editor-styles-repository';
-import { LOCAL_STYLES_RESERVED_LABEL } from '@elementor/editor-styles-repository';
+import { ELEMENTS_STYLES_RESERVED_LABEL } from '@elementor/editor-styles-repository';
 import { undoable } from '@elementor/editor-v1-adapters';
 import { __ } from '@wordpress/i18n';
 
@@ -78,10 +78,10 @@ function getProps< T extends Props >( { styleId, elementId, provider, meta, prop
 		return null;
 	}
 
-	const style = provider.actions.getById?.( styleId, { elementId } );
+	const style = provider.actions.get( styleId, { elementId } );
 
 	if ( ! style ) {
-		throw new StyleNotFoundUnderProviderError( { context: { styleId, providerKey: provider.key } } );
+		throw new StyleNotFoundUnderProviderError( { context: { styleId, providerKey: provider.getKey() } } );
 	}
 
 	const variant = getVariantByMeta( style, meta );
@@ -100,7 +100,7 @@ function useUndoableCreateElementStyle() {
 				do: ( payload: UndoableCreateElementStyleArgs ) => {
 					return createElementStyle( {
 						...payload,
-						label: LOCAL_STYLES_RESERVED_LABEL,
+						label: ELEMENTS_STYLES_RESERVED_LABEL,
 					} );
 				},
 
@@ -112,7 +112,7 @@ function useUndoableCreateElementStyle() {
 					return createElementStyle( {
 						...payload,
 						styleId,
-						label: LOCAL_STYLES_RESERVED_LABEL,
+						label: ELEMENTS_STYLES_RESERVED_LABEL,
 					} );
 				},
 			},
@@ -139,11 +139,11 @@ function useUndoableUpdateStyle() {
 				do: ( { elementId, styleId, provider, meta, props }: UndoableUpdateStyleArgs ) => {
 					if ( ! provider.actions.updateProps ) {
 						throw new StylesProviderCannotUpdatePropsError( {
-							context: { providerKey: provider.key },
+							context: { providerKey: provider.getKey() },
 						} );
 					}
 
-					const style = provider.actions.getById( styleId, { elementId } );
+					const style = provider.actions.get( styleId, { elementId } );
 
 					const prevProps = getCurrentProps( style, meta );
 

package/src/index.ts

@@ -4,6 +4,4 @@ export { replaceControl } from './control-replacement';
 export { injectIntoClassSelectorActions } from './components/css-classes/css-class-selector';
 export { usePanelActions, usePanelStatus } from './panel';
 
-import init from './init';
-
-init();
+export { init } from './init';

package/src/init.ts

@@ -8,7 +8,7 @@ import { init as initDynamics } from './dynamics/init';
 import { panel } from './panel';
 import { isAtomicWidgetSelected } from './sync/is-atomic-widget-selected';
 
-export default function init() {
+export function init() {
 	registerPanel( panel );
 	blockV1Panel();
 

package/src/styles-inheritance/create-snapshots-manager.ts

@@ -1,3 +1,4 @@
+import { filterEmptyValues } from '@elementor/editor-props';
 import { type BreakpointId, type BreakpointNode } from '@elementor/editor-responsive';
 import { type StyleDefinitionState } from '@elementor/editor-styles';
 
@@ -10,12 +11,12 @@ import {
 	type StylesInheritanceSnapshot,
 	type StylesInheritanceSnapshotGetter,
 	type StylesInheritanceSnapshotsSlot,
-	type StyleVariantWithId,
+	type StyleVariantDetails,
 } from './types';
 import { DEFAULT_STATE, getBreakpointKey, getStateKey } from './utils';
 
 export function createSnapshotsManager(
-	getStylesByMeta: ( meta: StyleInheritanceMetaProps ) => StyleVariantWithId[],
+	getStylesByMeta: ( meta: StyleInheritanceMetaProps ) => StyleVariantDetails[],
 	breakpointsRoot: BreakpointNode
 ): StylesInheritanceSnapshotGetter {
 	const breakpointsInheritancePaths = makeBreakpointsInheritancePaths( breakpointsRoot );
@@ -104,7 +105,7 @@ function makeBreakpointsInheritancePaths( root: BreakpointNode ): BreakpointsInh
 
 // creates a snapshot slot for a specific breakpoint and state
 function buildStateSnapshotSlot(
-	styles: StyleVariantWithId[],
+	styles: StyleVariantDetails[],
 	parentBreakpoint: BreakpointStatesSlotsMapping | undefined,
 	currentBreakpoint: BreakpointStatesSlotsMapping,
 	state: StyleDefinitionState
@@ -132,22 +133,28 @@ function buildStateSnapshotSlot(
 }
 
 // creates an initial snapshot based on the passed style variants only
-function buildInitialSnapshotFromStyles( styles: StyleVariantWithId[] ): StylesInheritanceSnapshotsSlot {
+function buildInitialSnapshotFromStyles( styles: StyleVariantDetails[] ): StylesInheritanceSnapshotsSlot {
 	const snapshot: StylesInheritanceSnapshot = {};
 
-	styles.forEach( ( styleVariantWithId ) => {
+	styles.forEach( ( styleData ) => {
 		const {
-			styleVariant: { props },
-		} = styleVariantWithId;
+			variant: { props },
+		} = styleData;
 
 		Object.entries( props ).forEach( ( [ key, value ] ) => {
+			const filteredValue = filterEmptyValues( value );
+
+			if ( filteredValue === null ) {
+				return;
+			}
+
 			if ( ! snapshot[ key ] ) {
 				snapshot[ key ] = [];
 			}
 
 			const snapshotPropValue: SnapshotPropValue = {
-				...styleVariantWithId,
-				value,
+				...styleData,
+				value: filteredValue,
 			};
 
 			snapshot[ key ].push( snapshotPropValue );

package/src/styles-inheritance/create-styles-inheritance.ts

@@ -1,6 +1,7 @@
 import { type BreakpointNode } from '@elementor/editor-responsive';
 import { type StyleDefinition } from '@elementor/editor-styles';
 
+import { getProviderByStyleId } from '../contexts/style-context';
 import { createSnapshotsManager } from './create-snapshots-manager';
 import { type BreakpointsStatesStyles, type StyleInheritanceMetaProps, type StylesInheritanceSnapshot } from './types';
 import { getBreakpointKey, getStateKey } from './utils';
@@ -21,9 +22,11 @@ function buildStyleVariantsByMetaMapping( styleDefs: StyleDefinition[] ): Breakp
 	const breakpointStateSlots: BreakpointsStatesStyles = {};
 
 	styleDefs.forEach( ( styleDef ) => {
+		const provider = getProviderByStyleId( styleDef.id )?.getKey() ?? null;
+
 		// iterate over each style definition's variants and place them in the corresponding breakpoint's base or state styles
-		styleDef.variants.forEach( ( styleVariant ) => {
-			const { meta } = styleVariant;
+		styleDef.variants.forEach( ( variant ) => {
+			const { meta } = variant;
 			const { state, breakpoint } = meta;
 
 			const breakpointKey = getBreakpointKey( breakpoint );
@@ -40,8 +43,9 @@ function buildStyleVariantsByMetaMapping( styleDefs: StyleDefinition[] ): Breakp
 			}
 
 			breakpointNode[ stateKey ].push( {
-				styleId: styleDef.id,
-				styleVariant,
+				style: styleDef,
+				variant,
+				provider,
 			} );
 		} );
 	} );