@elementor/editor-global-classes 4.1.0-720 → 4.1.0-722

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elementor/editor-global-classes",
-  "version": "4.1.0-720",
+  "version": "4.1.0-722",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -39,28 +39,28 @@
     "dev": "tsup --config=../../tsup.dev.ts"
   },
   "dependencies": {
-    "@elementor/editor": "4.1.0-720",
-    "@elementor/editor-current-user": "4.1.0-720",
-    "@elementor/editor-documents": "4.1.0-720",
-    "@elementor/editor-editing-panel": "4.1.0-720",
-    "@elementor/editor-mcp": "4.1.0-720",
-    "@elementor/editor-panels": "4.1.0-720",
-    "@elementor/editor-props": "4.1.0-720",
-    "@elementor/editor-variables": "4.1.0-720",
-    "@elementor/editor-styles": "4.1.0-720",
-    "@elementor/editor-canvas": "4.1.0-720",
-    "@elementor/editor-styles-repository": "4.1.0-720",
-    "@elementor/editor-ui": "4.1.0-720",
-    "@elementor/editor-v1-adapters": "4.1.0-720",
-    "@elementor/http-client": "4.1.0-720",
+    "@elementor/editor": "4.1.0-722",
+    "@elementor/editor-current-user": "4.1.0-722",
+    "@elementor/editor-documents": "4.1.0-722",
+    "@elementor/editor-editing-panel": "4.1.0-722",
+    "@elementor/editor-mcp": "4.1.0-722",
+    "@elementor/editor-panels": "4.1.0-722",
+    "@elementor/editor-props": "4.1.0-722",
+    "@elementor/editor-variables": "4.1.0-722",
+    "@elementor/editor-styles": "4.1.0-722",
+    "@elementor/editor-canvas": "4.1.0-722",
+    "@elementor/editor-styles-repository": "4.1.0-722",
+    "@elementor/editor-ui": "4.1.0-722",
+    "@elementor/editor-v1-adapters": "4.1.0-722",
+    "@elementor/http-client": "4.1.0-722",
     "@elementor/icons": "^1.68.0",
-    "@elementor/query": "4.1.0-720",
-    "@elementor/schema": "4.1.0-720",
-    "@elementor/store": "4.1.0-720",
+    "@elementor/query": "4.1.0-722",
+    "@elementor/schema": "4.1.0-722",
+    "@elementor/store": "4.1.0-722",
     "@elementor/ui": "1.36.17",
-    "@elementor/utils": "4.1.0-720",
+    "@elementor/utils": "4.1.0-722",
     "@wordpress/i18n": "^5.13.0",
-    "@elementor/events": "4.1.0-720"
+    "@elementor/events": "4.1.0-722"
   },
   "peerDependencies": {
     "react": "^18.3.1",

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

@@ -34,6 +34,7 @@ import { useDirtyState } from '../../hooks/use-dirty-state';
 import { useFilters } from '../../hooks/use-filters';
 import { saveGlobalClasses } from '../../save-global-classes';
 import { slice } from '../../store';
+import { trackGlobalClasses } from '../../utils/tracking';
 import { ActiveFilters } from '../search-and-filter/components/filter/active-filters';
 import { CssClassFilter } from '../search-and-filter/components/filter/css-class-filter';
 import { ClassManagerSearch } from '../search-and-filter/components/search/class-manager-search';
@@ -113,6 +114,7 @@ export function ClassManagerPanel() {
 				},
 			} )
 		);
+		trackGlobalClasses( { event: 'classSyncToV3', classId, action: 'unsync' } );
 		setStopSyncConfirmation( null );
 	}, [] );
 
@@ -125,6 +127,7 @@ export function ClassManagerPanel() {
 				},
 			} )
 		);
+		trackGlobalClasses( { event: 'classSyncToV3', classId, action: 'sync' } );
 		setStartSyncConfirmation( null );
 	}, [] );
 
@@ -221,6 +224,7 @@ export function ClassManagerPanel() {
 			{ startSyncConfirmation && (
 				<StartSyncToV3Modal
 					externalOpen
+					classId={ startSyncConfirmation }
 					onExternalClose={ () => setStartSyncConfirmation( null ) }
 					onConfirm={ () => handleStartSync( startSyncConfirmation ) }
 				/>

package/src/components/class-manager/start-sync-to-v3-modal.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import {
 	Box,
 	Button,
@@ -12,22 +12,48 @@ import {
 } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
+import { trackGlobalClasses } from '../../utils/tracking';
+
 const IMAGE_URL = 'https://assets.elementor.com/packages/v1/images/class-manager-sync-modal.png';
 
 type StartSyncToV3ModalProps = {
 	externalOpen?: boolean;
+	classId?: string;
 	onExternalClose?: () => void;
 	onConfirm?: () => void;
 };
 
-export const StartSyncToV3Modal = ( { externalOpen, onExternalClose, onConfirm }: StartSyncToV3ModalProps = {} ) => {
+export const StartSyncToV3Modal = ( {
+	externalOpen,
+	classId,
+	onExternalClose,
+	onConfirm,
+}: StartSyncToV3ModalProps = {} ) => {
 	const [ shouldShowAgain, setShouldShowAgain ] = useState( true );
+	const hasTrackedExposure = useRef( false );
+
+	useEffect( () => {
+		if ( externalOpen && classId && ! hasTrackedExposure.current ) {
+			hasTrackedExposure.current = true;
+			trackGlobalClasses( { event: 'classSyncToV3PopupShown', classId } );
+		}
+
+		if ( ! externalOpen ) {
+			hasTrackedExposure.current = false;
+		}
+	}, [ externalOpen, classId ] );
 
 	const handleClose = () => {
+		if ( classId ) {
+			trackGlobalClasses( { event: 'classSyncToV3PopupClick', classId, action: 'cancel' } );
+		}
 		onExternalClose?.();
 	};
 
 	const handleConfirm = () => {
+		if ( classId ) {
+			trackGlobalClasses( { event: 'classSyncToV3PopupClick', classId, action: 'sync' } );
+		}
 		onConfirm?.();
 		onExternalClose?.();
 	};

package/src/init.ts

@@ -4,6 +4,7 @@ import {
 	injectIntoCssClassConvert,
 	registerStyleProviderToColors,
 } from '@elementor/editor-editing-panel';
+import { getMCPByDomain } from '@elementor/editor-mcp';
 import { __registerPanel as registerPanel } from '@elementor/editor-panels';
 import { stylesRepository } from '@elementor/editor-styles-repository';
 import { __registerSlice as registerSlice } from '@elementor/store';
@@ -66,5 +67,8 @@ export function init() {
 		getThemeColor: ( theme ) => theme.palette.global.dark,
 	} );
 
-	initMcpIntegration();
+	initMcpIntegration(
+		getMCPByDomain( 'classes', { instructions: 'MCP server for management of Elementor global classes' } ),
+		getMCPByDomain( 'canvas' )
+	);
 }

package/src/mcp-integration/classes-resource.ts

@@ -1,4 +1,4 @@
-import { getMCPByDomain } from '@elementor/editor-mcp';
+import { type MCPRegistryEntry } from '@elementor/editor-mcp';
 
 import { globalClassesStylesProvider } from '../global-classes-styles-provider';
 
@@ -12,10 +12,7 @@ const updateLocalStorageCache = () => {
 	localStorage.setItem( STORAGE_KEY, JSON.stringify( classes ) );
 };
 
-export const initClassesResource = () => {
-	const canvasMcpEntry = getMCPByDomain( 'canvas' );
-	const classesMcpEntry = getMCPByDomain( 'classes' );
-
+export const initClassesResource = ( classesMcpEntry: MCPRegistryEntry, canvasMcpEntry: MCPRegistryEntry ) => {
 	[ canvasMcpEntry, classesMcpEntry ].forEach( ( entry ) => {
 		const { mcpServer, resource, waitForReady } = entry;
 		resource(

package/src/mcp-integration/index.ts

@@ -1,16 +1,23 @@
-import { getMCPByDomain } from '@elementor/editor-mcp';
+import { type MCPRegistryEntry } from '@elementor/editor-mcp';
 
 import { initClassesResource } from './classes-resource';
 import initMcpApplyUnapplyGlobalClasses from './mcp-apply-unapply-global-classes';
 import initMcpApplyGetGlobalClassUsages from './mcp-get-global-class-usages';
 import { initManageGlobalClasses } from './mcp-manage-global-classes';
 
-export const initMcpIntegration = () => {
-	const reg = getMCPByDomain( 'classes', {
-		instructions: 'MCP server for management of Elementor global classes',
-	} );
+export const initMcpIntegration = ( reg: MCPRegistryEntry, canvasMcpEntry: MCPRegistryEntry ) => {
+	const { setMCPDescription } = reg;
+	setMCPDescription(
+		`Everything related to V4 ( Atomic ) global classes.
+# Global classes
+- Create/update/delete global classes
+- Get list of global classes
+- Get details of a global class
+- Get details of a global class
+`
+	);
 	initMcpApplyUnapplyGlobalClasses( reg );
 	initMcpApplyGetGlobalClassUsages( reg );
 	initManageGlobalClasses( reg );
-	initClassesResource();
+	initClassesResource( reg, canvasMcpEntry );
 };

package/src/utils/tracking.ts

@@ -72,6 +72,17 @@ type EventMap = {
 		type: string;
 		source: 'global' | 'local';
 	};
+	classSyncToV3PopupShown: {
+		classId: StyleDefinitionID;
+	};
+	classSyncToV3: {
+		classId: StyleDefinitionID;
+		action: 'sync' | 'unsync';
+	};
+	classSyncToV3PopupClick: {
+		classId: StyleDefinitionID;
+		action: 'sync' | 'cancel';
+	};
 };
 
 export type TrackingEvent = {
@@ -138,6 +149,43 @@ const getSanitizedData = async ( payload: TrackingEvent ): Promise< Record< stri
 				return { ...payload, classTitle: getCssClass( payload.classId ).label };
 			}
 			break;
+		case 'classSyncToV3PopupShown':
+			return {
+				...payload,
+				interaction_type: 'popup_shown',
+				target_type: 'popup',
+				target_name: 'sync_to_v3_popup',
+				interaction_result: 'popup_viewed',
+				target_location: 'widget_panel',
+				location_l1: 'class_manager',
+			};
+		case 'classSyncToV3': {
+			const classLabel = getCssClass( payload.classId ).label;
+			const isSync = payload.action === 'sync';
+			return {
+				...payload,
+				interaction_type: 'click',
+				target_type: classLabel,
+				target_name: isSync ? 'sync_to_v3' : 'unsync_to_v3',
+				interaction_result: isSync ? 'class_is_synced_to_V3' : 'class_is_unsynced_from_V3',
+				target_location: 'widget_panel',
+				location_l1: 'class_manager',
+				interaction_description: isSync
+					? `user_synced_${ classLabel }_to_v3`
+					: `user_unsync_${ classLabel }_from_v3`,
+			};
+		}
+		case 'classSyncToV3PopupClick': {
+			const isSyncAction = payload.action === 'sync';
+			return {
+				...payload,
+				interaction_type: 'click',
+				target_type: 'button',
+				target_name: isSyncAction ? 'sync_to_v3' : 'cancel',
+				interaction_result: isSyncAction ? 'class_is_synced' : 'cancel',
+				target_location: 'sync_to_v3_popup',
+			};
+		}
 		default:
 			return payload;
 	}