@elementor/editor-variables 4.0.0-manual → 4.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elementor/editor-variables",
-  "version": "4.0.0-manual",
+  "version": "4.0.0",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -39,22 +39,22 @@
     "dev": "tsup --config=../../tsup.dev.ts"
   },
   "dependencies": {
-    "@elementor/editor": "4.0.0-manual",
-    "@elementor/editor-canvas": "4.0.0-manual",
-    "@elementor/editor-controls": "4.0.0-manual",
-    "@elementor/editor-current-user": "4.0.0-manual",
-    "@elementor/editor-mcp": "4.0.0-manual",
-    "@elementor/editor-panels": "4.0.0-manual",
-    "@elementor/editor-props": "4.0.0-manual",
-    "@elementor/editor-ui": "4.0.0-manual",
-    "@elementor/editor-v1-adapters": "4.0.0-manual",
-    "@elementor/menus": "4.0.0-manual",
-    "@elementor/http-client": "4.0.0-manual",
-    "@elementor/icons": "^1.68.0",
-    "@elementor/events": "4.0.0-manual",
-    "@elementor/schema": "4.0.0-manual",
+    "@elementor/editor": "4.0.0",
+    "@elementor/editor-canvas": "4.0.0",
+    "@elementor/editor-controls": "4.0.0",
+    "@elementor/editor-current-user": "4.0.0",
+    "@elementor/editor-mcp": "4.0.0",
+    "@elementor/editor-panels": "4.0.0",
+    "@elementor/editor-props": "4.0.0",
+    "@elementor/editor-ui": "4.0.0",
+    "@elementor/editor-v1-adapters": "4.0.0",
+    "@elementor/menus": "4.0.0",
+    "@elementor/http-client": "4.0.0",
+    "@elementor/icons": "^1.72.0",
+    "@elementor/events": "4.0.0",
+    "@elementor/schema": "4.0.0",
     "@elementor/ui": "1.37.2",
-    "@elementor/utils": "4.0.0-manual",
+    "@elementor/utils": "4.0.0",
     "@wordpress/i18n": "^5.13.0"
   },
   "peerDependencies": {

package/src/components/global-styles-import-listener.tsx

@@ -0,0 +1,33 @@
+import { useEffect } from 'react';
+
+import { service } from '../service';
+import { styleVariablesRepository } from '../style-variables-repository';
+
+export function GlobalStylesImportListener() {
+	useEffect( () => {
+		const handleGlobalStylesImported = ( event: CustomEvent ) => {
+			const importedVars = event.detail?.global_variables;
+
+			if ( ! importedVars ) {
+				return;
+			}
+
+			if ( importedVars.data && typeof importedVars.data === 'object' ) {
+				styleVariablesRepository.update( importedVars.data );
+			}
+
+			service.load();
+		};
+
+		window.addEventListener( 'elementor/global-styles/imported', handleGlobalStylesImported as EventListener );
+
+		return () => {
+			window.removeEventListener(
+				'elementor/global-styles/imported',
+				handleGlobalStylesImported as EventListener
+			);
+		};
+	}, [] );
+
+	return null;
+}

package/src/components/open-panel-from-event.tsx

@@ -0,0 +1,46 @@
+import { useEffect, useRef, useState } from 'react';
+import {
+	__privateListenTo as listenTo,
+	__privateOpenRoute as openRoute,
+	routeOpenEvent,
+} from '@elementor/editor-v1-adapters';
+
+import { usePanelActions } from './variables-manager/variables-manager-panel';
+
+const EVENT_NAME = 'elementor/open-variables-manager';
+const DEFAULT_PANEL_ROUTE = 'panel/elements/categories';
+
+export function OpenPanelFromEvent() {
+	const { open } = usePanelActions();
+	const pendingRef = useRef( false );
+	const [ readyToOpen, setReadyToOpen ] = useState( false );
+
+	useEffect( () => {
+		if ( readyToOpen ) {
+			setReadyToOpen( false );
+			open();
+		}
+	}, [ readyToOpen, open ] );
+
+	useEffect( () => {
+		return listenTo( routeOpenEvent( DEFAULT_PANEL_ROUTE ), () => {
+			if ( pendingRef.current ) {
+				pendingRef.current = false;
+				setReadyToOpen( true );
+			}
+		} );
+	}, [] );
+
+	useEffect( () => {
+		const handler = () => {
+			pendingRef.current = true;
+			openRoute( DEFAULT_PANEL_ROUTE );
+		};
+
+		window.addEventListener( EVENT_NAME, handler );
+
+		return () => window.removeEventListener( EVENT_NAME, handler );
+	}, [] );
+
+	return null;
+}

package/src/components/ui/variable-promotion-chip.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
-import { forwardRef, type MouseEvent, useImperativeHandle, useState } from 'react';
+import { forwardRef, type MouseEvent, useCallback, useImperativeHandle, useState } from 'react';
+import { type PromotionTrackingData, trackUpgradePromotionClick, trackViewPromotion } from '@elementor/editor-controls';
 import { PromotionChip, PromotionPopover, useCanvasClickHandler } from '@elementor/editor-ui';
 import { Box } from '@elementor/ui';
 import { capitalize } from '@elementor/utils';
@@ -8,6 +9,7 @@ import { __, sprintf } from '@wordpress/i18n';
 type VariablePromotionChipProps = {
 	variableType: string;
 	upgradeUrl: string;
+	trackingData: PromotionTrackingData;
 };
 
 export type VariablePromotionChipRef = {
@@ -15,14 +17,21 @@ export type VariablePromotionChipRef = {
 };
 
 export const VariablePromotionChip = forwardRef< VariablePromotionChipRef, VariablePromotionChipProps >(
-	( { variableType, upgradeUrl }, ref ) => {
+	( { variableType, upgradeUrl, trackingData }, ref ) => {
 		const [ isOpen, setIsOpen ] = useState( false );
 
 		useCanvasClickHandler( isOpen, () => setIsOpen( false ) );
 
-		const toggle = () => setIsOpen( ( prev ) => ! prev );
+		const toggle = useCallback( () => {
+			setIsOpen( ( prev ) => {
+				if ( ! prev ) {
+					trackViewPromotion( trackingData );
+				}
+				return ! prev;
+			} );
+		}, [ trackingData ] );
 
-		useImperativeHandle( ref, () => ( { toggle } ), [] );
+		useImperativeHandle( ref, () => ( { toggle } ), [ toggle ] );
 
 		const title = sprintf(
 			/* translators: %s: Variable Type. */
@@ -47,6 +56,7 @@ export const VariablePromotionChip = forwardRef< VariablePromotionChipRef, Varia
 					e.stopPropagation();
 					setIsOpen( false );
 				} }
+				onCtaClick={ () => trackUpgradePromotionClick( trackingData ) }
 			>
 				<Box
 					onClick={ ( e: MouseEvent ) => {

package/src/components/variable-creation.tsx

@@ -142,11 +142,12 @@ export const VariableCreation = ( { onGoBack, onClose }: Props ) => {
 						} }
 						onErrorChange={ ( errorMsg ) => {
 							setLabelFieldError( {
-								value: label,
+								value: '',
 								message: errorMsg,
 							} );
 						} }
 						onKeyDown={ handleKeyDown }
+						focusOnShow
 					/>
 				</FormField>
 				{ ValueField && (

package/src/components/variable-edit.tsx

@@ -208,11 +208,12 @@ export const VariableEdit = ( { onClose, onGoBack, onSubmit, editId }: Props ) =
 							} }
 							onErrorChange={ ( errorMsg ) => {
 								setLabelFieldError( {
-									value: label,
+									value: '',
 									message: errorMsg,
 								} );
 							} }
 							onKeyDown={ handleKeyDown }
+							focusOnShow
 						/>
 					</FormField>
 					{ ValueField && (

package/src/components/variable-restore.tsx

@@ -127,11 +127,12 @@ export const VariableRestore = ( { variableId, onClose, onSubmit }: Props ) => {
 							} }
 							onErrorChange={ ( errorMsg ) => {
 								setLabelFieldError( {
-									value: label,
+									value: '',
 									message: errorMsg,
 								} );
 							} }
 							onKeyDown={ handleKeyDown }
+							focusOnShow
 						/>
 					</FormField>
 					{ ValueField && (

package/src/components/variables-manager/ui/variable-table-row.tsx

@@ -13,6 +13,8 @@ import { VariableEditableCell } from '../variable-editable-cell';
 import { VariableEditMenu, type VariableManagerMenuAction } from './variable-edit-menu';
 import { VariableTableCell } from './variable-table-cell';
 
+const TRACKING_DATA = { target_name: 'variables_manager', target_location: 'variables_manager' } as const;
+
 export type Row = ReturnType< typeof getVariableType > & {
 	id: string;
 	type: string;
@@ -200,6 +202,7 @@ export const VariableRow = (
 							variableType={ row.variableType }
 							upgradeUrl={ `https://go.elementor.com/renew-license-manager-${ row.variableType }-variable` }
 							ref={ promotionRef }
+							trackingData={ TRACKING_DATA }
 						/>
 					) }
 					<VariableEditMenu menuActions={ menuActions( row.id ) } disabled={ isSorting } itemId={ row.id } />

package/src/components/variables-manager/variables-manager-create-menu.tsx

@@ -11,6 +11,12 @@ import { trackVariablesManagerEvent } from '../../utils/tracking';
 import { getVariableTypes } from '../../variables-registry/variable-type-registry';
 import { VariablePromotionChip, type VariablePromotionChipRef } from '../ui/variable-promotion-chip';
 
+const TRACKING_DATA = {
+	target_name: 'variables_manager',
+	target_location: 'variables_manager',
+	location_l1: 'create variable menu',
+} as const;
+
 export const SIZE = 'tiny';
 
 type MenuOptionConfig = {
@@ -133,6 +139,7 @@ const MenuOption = ( {
 					variableType={ config.variableType }
 					upgradeUrl={ `https://go.elementor.com/go-pro-manager-${ config.variableType }-variable/` }
 					ref={ promotionRef }
+					trackingData={ TRACKING_DATA }
 				/>
 			) }
 		</MenuItem>
@@ -142,13 +149,19 @@ const MenuOption = ( {
 export const getDefaultName = ( variables: TVariablesList, baseName: string ) => {
 	const pattern = new RegExp( `^${ baseName }-(\\d+)$`, 'i' );
 
-	let counter = 1;
+	const takenNumbers = new Set< number >();
 
 	Object.values( variables ).forEach( ( variable ) => {
-		if ( pattern.test( variable.label ) ) {
-			counter = Math.max( counter, parseInt( variable.label.match( pattern )?.[ 1 ] ?? '0', 10 ) + 1 );
+		const match = variable.label.match( pattern );
+		if ( match ) {
+			takenNumbers.add( parseInt( match[ 1 ], 10 ) );
 		}
 	} );
 
+	let counter = 1;
+	while ( takenNumbers.has( counter ) ) {
+		counter++;
+	}
+
 	return `${ baseName }-${ counter }`;
 };

package/src/components/variables-manager/variables-manager-panel.tsx

@@ -25,7 +25,7 @@ import {
 } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
-import { trackVariablesManagerEvent } from '../../utils/tracking';
+import { trackVariablesManagerEvent, trackVariableSyncToV3 } from '../../utils/tracking';
 import { type ErrorResponse, type MappedError, mapServerError } from '../../utils/validations';
 import { getMenuActionsForVariable, getVariableType } from '../../variables-registry/variable-type-registry';
 import { DeleteConfirmationDialog } from '../ui/delete-confirmation-dialog';
@@ -76,8 +76,8 @@ export function VariablesManagerPanel() {
 		handleOnChange,
 		createVariable,
 		handleDeleteVariable,
-		handleStartSync,
-		handleStopSync,
+		handleStartSync: startSyncFromState,
+		handleStopSync: stopSyncFromState,
 		handleSave,
 		isSaving,
 		handleSearch,
@@ -151,23 +151,37 @@ export function VariablesManagerPanel() {
 		[ handleDeleteVariable ]
 	);
 
-	const handleStopSyncWithConfirmation = useCallback(
+	const commitStopSync = useCallback(
 		( itemId: string ) => {
-			handleStopSync( itemId );
-			setStopSyncConfirmation( null );
+			stopSyncFromState( itemId );
+			const variable = variables[ itemId ];
+			if ( variable ) {
+				trackVariableSyncToV3( { variableLabel: variable.label, action: 'unsync' } );
+			}
 		},
-		[ handleStopSync ]
+		[ stopSyncFromState, variables ]
 	);
 
-	const handleShowStopSyncDialog = useCallback(
+	const handleStartSync = useCallback(
+		( itemId: string ) => {
+			startSyncFromState( itemId );
+			const variable = variables[ itemId ];
+			if ( variable ) {
+				trackVariableSyncToV3( { variableLabel: variable.label, action: 'sync' } );
+			}
+		},
+		[ startSyncFromState, variables ]
+	);
+
+	const handleStopSync = useCallback(
 		( itemId: string ) => {
 			if ( ! isStopSyncSuppressed ) {
 				setStopSyncConfirmation( itemId );
 			} else {
-				handleStopSync( itemId );
+				commitStopSync( itemId );
 			}
 		},
-		[ isStopSyncSuppressed, handleStopSync ]
+		[ isStopSyncSuppressed, commitStopSync ]
 	);
 
 	const buildMenuActions = useCallback(
@@ -182,7 +196,7 @@ export function VariablesManagerPanel() {
 				variableId,
 				handlers: {
 					onStartSync: handleStartSync,
-					onStopSync: handleShowStopSyncDialog,
+					onStopSync: handleStopSync,
 				},
 			} );
 
@@ -203,7 +217,7 @@ export function VariablesManagerPanel() {
 
 			return [ ...typeActions, deleteAction ];
 		},
-		[ variables, handleStartSync, handleShowStopSyncDialog ]
+		[ variables, handleStartSync, handleStopSync ]
 	);
 
 	const hasVariables = Object.keys( variables ).length > 0;
@@ -368,7 +382,10 @@ export function VariablesManagerPanel() {
 				<StopSyncConfirmationDialog
 					open
 					onClose={ () => setStopSyncConfirmation( null ) }
-					onConfirm={ () => handleStopSyncWithConfirmation( stopSyncConfirmation ) }
+					onConfirm={ () => {
+						commitStopSync( stopSyncConfirmation );
+						setStopSyncConfirmation( null );
+					} }
 				/>
 			) }
 
@@ -436,7 +453,7 @@ const StopSyncConfirmationDialog = ( { open, onClose, onConfirm }: StopSyncConfi
 			<ConfirmationDialog.Content>
 				<ConfirmationDialog.ContentText>
 					{ __(
-						'This will disconnect the variable color from version 3. Existing uses on your site will automatically switch to a default color.',
+						'This will disconnect the variable color from Global Colors. Existing uses on your site will automatically switch to a default color.',
 						'elementor'
 					) }
 				</ConfirmationDialog.ContentText>

package/src/components/variables-selection.tsx

@@ -1,5 +1,6 @@
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import * as React from 'react';
+import { trackUpgradePromotionClick, trackViewPromotion } from '@elementor/editor-controls';
 import {
 	PopoverHeader,
 	PopoverMenuList,
@@ -132,6 +133,16 @@ export const VariablesSelection = ( { closePopover, onAdd, onEdit, onSettings, d
 		setSearchValue( '' );
 	};
 
+	useEffect( () => {
+		if ( disabled ) {
+			trackViewPromotion( {
+				target_name: 'variables_popover',
+				target_location: 'widget_panel',
+				location_l1: 'variables_list',
+			} );
+		}
+	}, [ disabled ] );
+
 	return (
 		<SectionPopoverBody>
 			<PopoverHeader
@@ -172,6 +183,12 @@ export const VariablesSelection = ( { closePopover, onAdd, onEdit, onSettings, d
 								variableType
 							) }
 							upgradeUrl={ getProUpgradeUrl( variableType ) }
+							onCtaClick={ () =>
+								trackUpgradePromotionClick( {
+									target_name: 'variables_popover',
+									location_l1: 'variables_list',
+								} )
+							}
 						/>
 					) }
 				</>

package/src/init.ts

@@ -1,9 +1,12 @@
 import { injectIntoLogic, injectIntoTop } from '@elementor/editor';
 import { registerControlReplacement } from '@elementor/editor-controls';
+import { getMCPByDomain } from '@elementor/editor-mcp';
 import { __registerPanel as registerPanel } from '@elementor/editor-panels';
 import { isTransformable, type PropValue } from '@elementor/editor-props';
 import { controlActionsMenu } from '@elementor/menus';
 
+import { GlobalStylesImportListener } from './components/global-styles-import-listener';
+import { OpenPanelFromEvent } from './components/open-panel-from-event';
 import { OpenPanelFromUrl } from './components/open-panel-from-url';
 import { panel } from './components/variables-manager/variables-manager-panel';
 import { VariableControl } from './controls/variable-control';
@@ -43,7 +46,7 @@ export function init() {
 	} );
 
 	variablesService.init().then( () => {
-		initMcp();
+		initMcp( getMCPByDomain( 'variables' ), getMCPByDomain( 'canvas' ) );
 	} );
 
 	injectIntoTop( {
@@ -51,11 +54,21 @@ export function init() {
 		component: StyleVariablesRenderer,
 	} );
 
+	injectIntoLogic( {
+		id: 'variables-import-listener',
+		component: GlobalStylesImportListener,
+	} );
+
 	injectIntoLogic( {
 		id: 'variables-open-panel-from-url',
 		component: OpenPanelFromUrl,
 	} );
 
+	injectIntoLogic( {
+		id: 'variables-open-panel-from-event',
+		component: OpenPanelFromEvent,
+	} );
+
 	registerPanel( panel );
 }
 

package/src/mcp/index.ts

@@ -1,12 +1,18 @@
-import { isAngieAvailable } from '@elementor/editor-mcp';
+import { type MCPRegistryEntry } from '@elementor/editor-mcp';
 
 import { initManageVariableTool } from './manage-variable-tool';
 import { initVariablesResource } from './variables-resource';
 
-export function initMcp() {
-	if ( ! isAngieAvailable() ) {
-		return;
-	}
-	initManageVariableTool();
-	initVariablesResource();
+export function initMcp( reg: MCPRegistryEntry, canvasMcpEntry: MCPRegistryEntry ) {
+	const { setMCPDescription } = reg;
+	setMCPDescription(
+		`Everything related to V4 ( Atomic ) variables.
+# Global variables
+- Create/update/delete global variables
+- Get list of global variables
+- Get details of a global variable
+`
+	);
+	initManageVariableTool( reg );
+	initVariablesResource( reg, canvasMcpEntry );
 }

package/src/mcp/manage-variable-tool.ts

@@ -1,11 +1,12 @@
-import { getMCPByDomain } from '@elementor/editor-mcp';
+import { type MCPRegistryEntry } from '@elementor/editor-mcp';
 import { z } from '@elementor/schema';
 
 import { service } from '../service';
 import { GLOBAL_VARIABLES_URI } from './variables-resource';
 
-export const initManageVariableTool = () => {
-	getMCPByDomain( 'variables' ).addTool( {
+export const initManageVariableTool = ( reg: MCPRegistryEntry ) => {
+	const { addTool } = reg;
+	addTool( {
 		name: 'manage-global-variable',
 		schema: {
 			action: z.enum( [ 'create', 'update', 'delete' ] ).describe( 'Operation to perform' ),

package/src/mcp/variables-resource.ts

@@ -1,17 +1,14 @@
-import { getMCPByDomain } from '@elementor/editor-mcp';
+import { type MCPRegistryEntry } from '@elementor/editor-mcp';
 
 import { service } from '../service';
 import { type TVariable } from '../storage';
 
 export const GLOBAL_VARIABLES_URI = 'elementor://global-variables';
 
-export const initVariablesResource = () => {
-	const canvasMcpEntry = getMCPByDomain( 'canvas' );
-	const variablesMcpEntry = getMCPByDomain( 'variables' );
-
+export const initVariablesResource = ( variablesMcpEntry: MCPRegistryEntry, canvasMcpEntry: MCPRegistryEntry ) => {
 	[ canvasMcpEntry, variablesMcpEntry ].forEach( ( entry ) => {
-		const { mcpServer } = entry;
-		mcpServer.resource(
+		const { resource, sendResourceUpdated } = entry;
+		resource(
 			'global-variables',
 			GLOBAL_VARIABLES_URI,
 			{
@@ -33,7 +30,7 @@ export const initVariablesResource = () => {
 		);
 
 		window.addEventListener( 'variables:updated', () => {
-			mcpServer.server.sendResourceUpdated( {
+			sendResourceUpdated( {
 				uri: GLOBAL_VARIABLES_URI,
 			} );
 		} );

package/src/register-variable-types.tsx

@@ -1,8 +1,8 @@
 import * as React from 'react';
+import { trackUpgradePromotionClick } from '@elementor/editor-controls';
 import { colorPropTypeUtil, sizePropTypeUtil, stringPropTypeUtil } from '@elementor/editor-props';
 import { CtaButton } from '@elementor/editor-ui';
-import { isExperimentActive } from '@elementor/editor-v1-adapters';
-import { BrushIcon, ExpandDiagonalIcon, ResetIcon, TextIcon } from '@elementor/icons';
+import { BrushIcon, ExpandDiagonalIcon, RefreshIcon, RefreshOffIcon, TextIcon } from '@elementor/icons';
 import { __ } from '@wordpress/i18n';
 
 import { ColorField } from './components/fields/color-field';
@@ -27,21 +27,17 @@ export function registerVariableTypes() {
 		menuActionsFactory: ( { variable, variableId, handlers } ) => {
 			const actions = [];
 
-			if ( ! isExperimentActive( 'e_design_system_sync' ) ) {
-				return [];
-			}
-
 			if ( variable.sync_to_v3 ) {
 				actions.push( {
-					name: __( 'Stop syncing to Version 3', 'elementor' ),
-					icon: ResetIcon,
+					name: __( 'Stop syncing to Global Colors', 'elementor' ),
+					icon: RefreshOffIcon,
 					color: 'text.primary',
 					onClick: () => handlers.onStopSync( variableId ),
 				} );
 			} else {
 				actions.push( {
-					name: __( 'Sync to Version 3', 'elementor' ),
-					icon: ResetIcon,
+					name: __( 'Sync to Global Colors', 'elementor' ),
+					icon: RefreshIcon,
 					color: 'text.primary',
 					onClick: () => handlers.onStartSync( variableId ),
 				} );
@@ -69,7 +65,15 @@ export function registerVariableTypes() {
 		styleTransformer: EmptyTransformer,
 		variableType: 'size',
 		selectionFilter: () => [],
-		emptyState: <CtaButton size="small" href={ 'https://go.elementor.com/go-pro-panel-size-variable/' } />,
+		emptyState: (
+			<CtaButton
+				size="small"
+				href={ 'https://go.elementor.com/go-pro-panel-size-variable/' }
+				onClick={ () =>
+					trackUpgradePromotionClick( { target_name: 'variables_popover', location_l1: 'variables_list' } )
+				}
+			/>
+		),
 	};
 
 	registerVariableType( {

package/src/renderers/style-variables-renderer.tsx

@@ -10,7 +10,7 @@ import { Portal } from '@elementor/ui';
 import { styleVariablesRepository } from '../style-variables-repository';
 import { type StyleVariables, type Variable } from '../types';
 
-const VARIABLES_WRAPPER = 'body';
+const VARIABLES_WRAPPER = ':root';
 
 export function StyleVariablesRenderer() {
 	const container = usePortalContainer();

package/src/service.ts

@@ -216,17 +216,17 @@ export const service = {
 
 				if ( results ) {
 					results.forEach( ( result: OperationResult ) => {
-						if ( result.variable ) {
-							const { id: variableId, ...variableData } = result.variable;
+						const variableId = result.id;
 
+						if ( result.variable ) {
 							if ( result.type === 'create' ) {
-								storage.add( variableId, variableData );
+								storage.add( variableId, result.variable );
 							} else {
-								storage.update( variableId, variableData );
+								storage.update( variableId, result.variable );
 							}
 
 							styleVariablesRepository.update( {
-								[ variableId ]: variableData,
+								[ variableId ]: result.variable,
 							} );
 						}
 					} );

package/src/utils/tracking.ts

@@ -52,3 +52,32 @@ export const trackVariablesManagerEvent = ( { action, varType, controlPath }: Va
 
 	dispatchEvent?.( name, eventData );
 };
+
+type VariableSyncToV3Data = {
+	variableLabel: string;
+	action: 'sync' | 'unsync';
+};
+
+export const trackVariableSyncToV3 = ( { variableLabel, action }: VariableSyncToV3Data ) => {
+	try {
+		const { dispatchEvent, config } = getMixpanel();
+		if ( ! config?.names?.variables?.variableSyncToV3 ) {
+			return;
+		}
+
+		const name = config.names.variables.variableSyncToV3;
+		const isSync = action === 'sync';
+
+		dispatchEvent?.( name, {
+			interaction_type: 'click',
+			target_type: variableLabel,
+			target_name: isSync ? 'sync_to_v3' : 'unsync_to_v3',
+			interaction_result: isSync ? 'var_is_synced_to_V3' : 'var_is_unsynced_from_V3',
+			target_location: 'widget_panel',
+			location_l1: 'var_manager',
+			interaction_description: isSync
+				? `user_synced_${ variableLabel }_to_v3`
+				: `user_unsync_${ variableLabel }_from_v3`,
+		} );
+	} catch {}
+};