@elementor/editor-variables 4.0.0-683 → 4.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elementor/editor-variables",
-  "version": "4.0.0-683",
+  "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-683",
-    "@elementor/editor-canvas": "4.0.0-683",
-    "@elementor/editor-controls": "4.0.0-683",
-    "@elementor/editor-current-user": "4.0.0-683",
-    "@elementor/editor-mcp": "4.0.0-683",
-    "@elementor/editor-panels": "4.0.0-683",
-    "@elementor/editor-props": "4.0.0-683",
-    "@elementor/editor-ui": "4.0.0-683",
-    "@elementor/editor-v1-adapters": "4.0.0-683",
-    "@elementor/menus": "4.0.0-683",
-    "@elementor/http-client": "4.0.0-683",
-    "@elementor/icons": "^1.68.0",
-    "@elementor/events": "4.0.0-683",
-    "@elementor/schema": "4.0.0-683",
+    "@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-683",
+    "@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/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/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 );
+					} }
 				/>
 			) }
 

package/src/init.ts

@@ -1,9 +1,11 @@
 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';
@@ -44,7 +46,7 @@ export function init() {
 	} );
 
 	variablesService.init().then( () => {
-		initMcp();
+		initMcp( getMCPByDomain( 'variables' ), getMCPByDomain( 'canvas' ) );
 	} );
 
 	injectIntoTop( {
@@ -52,6 +54,11 @@ export function init() {
 		component: StyleVariablesRenderer,
 	} );
 
+	injectIntoLogic( {
+		id: 'variables-import-listener',
+		component: GlobalStylesImportListener,
+	} );
+
 	injectIntoLogic( {
 		id: 'variables-open-panel-from-url',
 		component: OpenPanelFromUrl,

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

@@ -2,8 +2,7 @@ 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';
@@ -28,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 Global Colors', 'elementor' ),
-					icon: ResetIcon,
+					icon: RefreshOffIcon,
 					color: 'text.primary',
 					onClick: () => handlers.onStopSync( variableId ),
 				} );
 			} else {
 				actions.push( {
 					name: __( 'Sync to Global Colors', 'elementor' ),
-					icon: ResetIcon,
+					icon: RefreshIcon,
 					color: 'text.primary',
 					onClick: () => handlers.onStartSync( variableId ),
 				} );

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 {}
+};