@elementor/editor-editing-panel 1.24.0 → 1.27.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elementor/editor-editing-panel",
-  "version": "1.24.0",
+  "version": "1.27.0",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -40,15 +40,16 @@
   },
   "dependencies": {
     "@elementor/editor": "0.18.5",
-    "@elementor/editor-controls": "0.21.0",
+    "@elementor/editor-canvas": "0.17.0",
+    "@elementor/editor-controls": "0.24.0",
     "@elementor/editor-current-user": "0.3.0",
-    "@elementor/editor-elements": "0.7.0",
+    "@elementor/editor-elements": "0.8.0",
     "@elementor/editor-panels": "0.14.0",
     "@elementor/editor-props": "0.11.1",
-    "@elementor/editor-responsive": "0.13.3",
-    "@elementor/editor-styles": "0.6.4",
-    "@elementor/editor-styles-repository": "0.8.1",
-    "@elementor/editor-ui": "0.5.1",
+    "@elementor/editor-responsive": "0.13.4",
+    "@elementor/editor-styles": "0.6.5",
+    "@elementor/editor-styles-repository": "0.8.3",
+    "@elementor/editor-ui": "0.7.0",
     "@elementor/editor-v1-adapters": "0.11.0",
     "@elementor/icons": "1.37.0",
     "@elementor/locations": "0.7.7",

package/src/components/css-classes/css-class-item.tsx

@@ -154,11 +154,11 @@ export function CssClassItem( {
 
 const validateLabel = ( newLabel: string ) => {
 	if ( ! stylesRepository.isLabelValid( newLabel ) ) {
-		return __( 'Format is not valid', 'elementor' );
+		return __( 'Invalid format', 'elementor' );
 	}
 
 	if ( stylesRepository.isLabelExist( newLabel ) ) {
-		return __( 'Existing name', 'elementor' );
+		return __( 'Name exists', 'elementor' );
 	}
 
 	return null;

package/src/components/css-classes/css-class-menu.tsx

@@ -1,12 +1,14 @@
 import * as React from 'react';
 import { type StyleDefinitionState } from '@elementor/editor-styles';
-import { stylesRepository } from '@elementor/editor-styles-repository';
+import { ELEMENTS_STYLES_PROVIDER_KEY, stylesRepository } from '@elementor/editor-styles-repository';
 import { MenuListItem } from '@elementor/editor-ui';
-import { bindMenu, Divider, Menu, MenuSubheader, type PopupState } from '@elementor/ui';
+import { bindMenu, Divider, Menu, MenuSubheader, type PopupState, Stack } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
 import { useStyle } from '../../contexts/style-context';
 import { useUnapplyClass } from '../../hooks/use-unapply-class';
+import { type StyleDefinitionStateWithNormal } from '../../styles-inheritance/types';
+import { StyleIndicator, type StyleIndicatorVariant } from '../style-indicator';
 
 const STATES: NonNullable< StyleDefinitionState >[] = [ 'hover', 'focus', 'active' ];
 
@@ -19,13 +21,17 @@ type CssClassMenuProps = {
 };
 
 export function CssClassMenu( { styleId, provider, popupState, handleRename, anchorEl }: CssClassMenuProps ) {
+	const styledStates = useStyledStates( styleId );
+
+	const indicatorVariant = provider === ELEMENTS_STYLES_PROVIDER_KEY ? 'local' : 'global';
+
 	const handleKeyDown = ( e: React.KeyboardEvent< HTMLElement > ) => {
 		e.stopPropagation();
 	};
 
 	return (
 		<Menu
-			MenuListProps={ { dense: true } }
+			MenuListProps={ { dense: true, sx: { minWidth: '160px' } } }
 			{ ...bindMenu( popupState ) }
 			anchorEl={ anchorEl }
 			anchorOrigin={ {
@@ -41,18 +47,44 @@ export function CssClassMenu( { styleId, provider, popupState, handleRename, anc
 			{ /* It has to be an array since MUI menu doesn't accept a Fragment as a child, and wrapping the items with an HTML element disrupts keyboard navigation */ }
 			{ getMenuItemsByProvider( { provider, styleId, handleRename, closeMenu: popupState.close } ) }
 			<MenuSubheader sx={ { typography: 'caption', color: 'text.secondary', pb: 0.5, pt: 1 } }>
-				{ __( 'Pseudo classes', 'elementor' ) }
+				{ __( 'States', 'elementor' ) }
 			</MenuSubheader>
-			<StateMenuItem key="normal" state={ null } styleId={ styleId } closeMenu={ popupState.close } />
+			<StateMenuItem
+				key="normal"
+				state={ null }
+				styleId={ styleId }
+				closeMenu={ popupState.close }
+				isStyled={ styledStates.normal }
+				indicatorVariant={ indicatorVariant }
+			/>
 			{ STATES.map( ( state ) => {
 				return (
-					<StateMenuItem key={ state } state={ state } styleId={ styleId } closeMenu={ popupState.close } />
+					<StateMenuItem
+						key={ state }
+						state={ state }
+						styleId={ styleId }
+						closeMenu={ popupState.close }
+						isStyled={ styledStates[ state ] }
+						indicatorVariant={ indicatorVariant }
+					/>
 				);
 			} ) }
 		</Menu>
 	);
 }
 
+function useStyledStates( styleId: string | null ): Partial< Record< StyleDefinitionStateWithNormal, true > > {
+	const { meta } = useStyle();
+
+	const styleDef = stylesRepository.all().find( ( style ) => style.id === styleId );
+
+	return Object.fromEntries(
+		styleDef?.variants
+			.filter( ( variant ) => meta.breakpoint === variant.meta.breakpoint )
+			.map( ( variant ) => [ variant.meta.state ?? 'normal', true ] ) ?? []
+	);
+}
+
 function getMenuItemsByProvider( {
 	provider,
 	styleId,
@@ -82,7 +114,7 @@ function getMenuItemsByProvider( {
 		actions.unshift(
 			<MenuSubheader
 				key="provider-label"
-				sx={ { typography: 'caption', color: 'text.secondary', pb: 0.5, pt: 1 } }
+				sx={ { typography: 'caption', color: 'text.secondary', pb: 0.5, pt: 1, textTransform: 'capitalize' } }
 			>
 				{ providerInstance?.labels?.singular }
 			</MenuSubheader>
@@ -97,9 +129,18 @@ type StateMenuItemProps = {
 	state: StyleDefinitionState;
 	styleId: string | null;
 	closeMenu: () => void;
+	isStyled?: boolean;
+	indicatorVariant: StyleIndicatorVariant;
 };
 
-function StateMenuItem( { state, styleId, closeMenu, ...props }: StateMenuItemProps ) {
+function StateMenuItem( {
+	state,
+	styleId,
+	closeMenu,
+	isStyled = false,
+	indicatorVariant,
+	...props
+}: StateMenuItemProps ) {
 	const { id: activeId, setId: setActiveId, setMetaState: setActiveMetaState, meta } = useStyle();
 	const { state: activeState } = meta;
 
@@ -121,7 +162,12 @@ function StateMenuItem( { state, styleId, closeMenu, ...props }: StateMenuItemPr
 				closeMenu();
 			} }
 		>
-			{ state ? state : 'Normal' }
+			<Stack gap={ 0.75 } direction="row" alignItems="center">
+				{ isStyled && (
+					<StyleIndicator aria-label={ __( 'Has style', 'elementor' ) } variant={ indicatorVariant } />
+				) }
+				{ state ?? 'normal' }
+			</Stack>
 		</MenuListItem>
 	);
 }

package/src/components/css-classes/css-class-selector.tsx

@@ -64,7 +64,7 @@ export function CssClassSelector() {
 		<Stack gap={ 1 } p={ 2 }>
 			<Stack direction="row" gap={ 1 } alignItems="center" justifyContent="space-between">
 				<Typography component="label" variant="caption" htmlFor={ ID }>
-					{ __( 'CSS classes', 'elementor' ) }
+					{ __( 'Classes', 'elementor' ) }
 				</Typography>
 				<Stack direction="row" gap={ 1 }>
 					<ClassSelectorActionsSlot />
@@ -148,7 +148,8 @@ function useOptions() {
 					color: isElements ? 'accent' : 'global',
 					icon: isElements ? <MapPinIcon /> : null,
 					provider: provider.key,
-					group: provider.labels?.plural,
+					// translators: %s is the plural label of the provider (e.g "Existing classes").
+					group: __( 'Existing %s', 'elementor' ).replace( '%s', provider.labels?.plural ?? '' ),
 				};
 			} );
 		} );
@@ -164,9 +165,9 @@ function useCreateActions( {
 	return useCreateActionsByProvider().map( ( [ provider, create ] ): Action< StyleDefOption > => {
 		return {
 			// translators: %s is the label of the new class.
-			label: ( value ) => __( 'Create new "%s"', 'elementor' ).replace( '%s', value ),
-			// translators: %s is the singular label of css class provider (e.g "Global CSS Class").
-			group: __( 'Create New %s', 'elementor' ).replace( '%s', provider.labels?.singular ?? '' ),
+			label: ( value ) => __( 'Create "%s"', 'elementor' ).replace( '%s', value ),
+			// translators: %s is the singular label of css class provider (e.g "CSS Class").
+			group: __( 'Create a new %s', 'elementor' ).replace( '%s', provider.labels?.singular ?? '' ),
 			condition: ( _, inputValue ) => isLabelValid( inputValue ) && ! hasReachedLimit( provider ),
 			apply: ( label ) => {
 				const createdId = create( label );

package/src/components/editing-panel-tabs.tsx

@@ -19,14 +19,7 @@ export const EditingPanelTabs = () => {
 		// Reference: https://react.dev/learn/preserving-and-resetting-state#resetting-a-form-with-a-key
 		<Fragment key={ element.id }>
 			<Stack direction="column" sx={ { width: '100%' } }>
-				<Tabs
-					variant="fullWidth"
-					indicatorColor="secondary"
-					textColor="inherit"
-					size="small"
-					sx={ { mt: 0.5 } }
-					{ ...getTabsProps() }
-				>
+				<Tabs variant="fullWidth" size="small" sx={ { mt: 0.5 } } { ...getTabsProps() }>
 					<Tab label={ __( 'General', 'elementor' ) } { ...getTabProps( 'settings' ) } />
 					<Tab label={ __( 'Style', 'elementor' ) } { ...getTabProps( 'style' ) } />
 				</Tabs>

package/src/components/style-indicator.tsx

@@ -0,0 +1,23 @@
+import { styled } from '@elementor/ui';
+
+export type StyleIndicatorVariant = 'overridden' | 'local' | 'global';
+
+export const StyleIndicator = styled( 'div', {
+	shouldForwardProp: ( prop ) => prop !== 'variant',
+} )< { variant?: StyleIndicatorVariant } >`
+	width: 5px;
+	height: 5px;
+	border-radius: 50%;
+	background-color: ${ ( { theme, variant } ) => {
+		switch ( variant ) {
+			case 'overridden':
+				return theme.palette.warning.light;
+			case 'global':
+				return theme.palette.global.dark;
+			case 'local':
+				return theme.palette.accent.main;
+			default:
+				return theme.palette.text.disabled;
+		}
+	} };
+`;

package/src/components/style-sections/border-section/border-radius-field.tsx

@@ -13,7 +13,6 @@ import { __ } from '@wordpress/i18n';
 
 import { StylesField } from '../../../controls-registry/styles-field';
 import { useDirection } from '../../../hooks/use-direction';
-import { RotatedIcon } from '../layout-section/utils/rotated-icon';
 
 const StartStartIcon = withDirection( RadiusTopLeftIcon );
 const StartEndIcon = withDirection( RadiusTopRightIcon );
@@ -32,22 +31,22 @@ const getEndEndLabel = ( isSiteRtl: boolean ) =>
 const getCorners = ( isSiteRtl: boolean ): EqualUnequalItems => [
 	{
 		label: getStartStartLabel( isSiteRtl ),
-		icon: <RotatedIcon icon={ StartStartIcon } size="tiny" />,
+		icon: <StartStartIcon fontSize={ 'tiny' } />,
 		bind: 'start-start',
 	},
 	{
 		label: getStartEndLabel( isSiteRtl ),
-		icon: <RotatedIcon icon={ StartEndIcon } size="tiny" />,
+		icon: <StartEndIcon fontSize={ 'tiny' } />,
 		bind: 'start-end',
 	},
 	{
 		label: getEndStartLabel( isSiteRtl ),
-		icon: <RotatedIcon icon={ EndStartIcon } size="tiny" />,
+		icon: <EndStartIcon fontSize={ 'tiny' } />,
 		bind: 'end-start',
 	},
 	{
 		label: getEndEndLabel( isSiteRtl ),
-		icon: <RotatedIcon icon={ EndEndIcon } size="tiny" />,
+		icon: <EndEndIcon fontSize={ 'tiny' } />,
 		bind: 'end-end',
 	},
 ];

package/src/components/style-sections/border-section/border-width-field.tsx

@@ -7,7 +7,6 @@ import { __ } from '@wordpress/i18n';
 
 import { StylesField } from '../../../controls-registry/styles-field';
 import { useDirection } from '../../../hooks/use-direction';
-import { RotatedIcon } from '../layout-section/utils/rotated-icon';
 
 const InlineStartIcon = withDirection( SideRightIcon );
 const InlineEndIcon = withDirection( SideLeftIcon );
@@ -20,7 +19,7 @@ const getEdges = ( isSiteRtl: boolean ): EqualUnequalItems => [
 	},
 	{
 		label: isSiteRtl ? __( 'Left', 'elementor' ) : __( 'Right', 'elementor' ),
-		icon: <RotatedIcon icon={ InlineStartIcon } size="tiny" />,
+		icon: <InlineStartIcon fontSize={ 'tiny' } />,
 		bind: 'inline-end',
 	},
 	{
@@ -30,7 +29,7 @@ const getEdges = ( isSiteRtl: boolean ): EqualUnequalItems => [
 	},
 	{
 		label: isSiteRtl ? __( 'Right', 'elementor' ) : __( 'Left', 'elementor' ),
-		icon: <RotatedIcon icon={ InlineEndIcon } size="tiny" />,
+		icon: <InlineEndIcon fontSize={ 'tiny' } />,
 		bind: 'inline-start',
 	},
 ];

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/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/contexts/style-context.tsx

@@ -50,7 +50,7 @@ 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 );
 	} );

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/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/styles-inheritance/create-snapshots-manager.ts

@@ -10,12 +10,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 +104,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,13 +132,13 @@ 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 ] ) => {
 			if ( ! snapshot[ key ] ) {
@@ -146,7 +146,7 @@ function buildInitialSnapshotFromStyles( styles: StyleVariantWithId[] ): StylesI
 			}
 
 			const snapshotPropValue: SnapshotPropValue = {
-				...styleVariantWithId,
+				...styleData,
 				value,
 			};
 

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 )?.key ?? 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,
 			} );
 		} );
 	} );