@elementor/editor-global-classes 4.0.0-manual → 4.0.1

package/package.json

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

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

@@ -2,8 +2,7 @@ import * as React from 'react';
 import { useRef, useState } from 'react';
 import { validateStyleLabel } from '@elementor/editor-styles-repository';
 import { EditableField, EllipsisWithTooltip, MenuListItem, useEditable, WarningInfotip } from '@elementor/editor-ui';
-import { isExperimentActive } from '@elementor/editor-v1-adapters';
-import { DotsVerticalIcon } from '@elementor/icons';
+import { DotsVerticalIcon, RefreshIcon, RefreshOffIcon } from '@elementor/icons';
 import {
 	bindMenu,
 	bindTrigger,
@@ -142,18 +141,21 @@ export const ClassItem = ( {
 						{ __( 'Rename', 'elementor' ) }
 					</Typography>
 				</MenuListItem>
-				{ isExperimentActive( 'e_design_system_sync' ) && onToggleSync && (
+				{ onToggleSync && (
 					<MenuListItem
 						onClick={ () => {
 							popupState.close();
 							onToggleSync( id, ! syncToV3 );
 						} }
 					>
-						<Typography variant="caption" sx={ { color: 'text.primary' } }>
-							{ syncToV3
-								? __( 'Stop syncing to Version 3', 'elementor' )
-								: __( 'Sync to Version 3', 'elementor' ) }
-						</Typography>
+						<Stack direction="row" alignItems="center" gap={ 1 }>
+							{ syncToV3 ? <RefreshOffIcon fontSize="tiny" /> : <RefreshIcon fontSize="tiny" /> }
+							<Typography variant="caption" sx={ { color: 'text.primary' } }>
+								{ syncToV3
+									? __( 'Stop syncing to Global Fonts', 'elementor' )
+									: __( 'Sync to Global Fonts', 'elementor' ) }
+							</Typography>
+						</Stack>
 					</MenuListItem>
 				) }
 				<MenuListItem

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 ) }
 				/>
@@ -338,7 +342,7 @@ const StopSyncConfirmationDialog = ( { open, onClose, onConfirm }: StopSyncConfi
 			</ConfirmationDialog.Title>
 			<ConfirmationDialog.Content>
 				<ConfirmationDialog.ContentText>
-					{ __( "You're about to stop syncing a typography class to version 3.", 'elementor' ) }
+					{ __( "You're about to stop syncing a typography class to Global Fonts.", 'elementor' ) }
 				</ConfirmationDialog.ContentText>
 				<ConfirmationDialog.ContentText sx={ { mt: 1 } }>
 					{ __(

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?.();
 	};
@@ -37,10 +63,10 @@ export const StartSyncToV3Modal = ( { externalOpen, onExternalClose, onConfirm }
 			<DialogContent sx={ { p: 0 } }>
 				<Box component="img" src={ IMAGE_URL } alt="" sx={ { width: '100%', display: 'block' } } />
 				<Box sx={ { px: 3, pt: 4, pb: 1 } }>
-					<Typography variant="h6">{ __( 'Sync class to version 3 Global Fonts', 'elementor' ) }</Typography>
+					<Typography variant="h6">{ __( 'Sync class to Global Fonts', 'elementor' ) }</Typography>
 					<Typography variant="body2" color="secondary" sx={ { mb: 2, pt: 1 } }>
 						{ __(
-							'Only typography settings supported in version 3 will be applied, including: font family, responsive font sizes, weight, text transform, decoration, line height, letter spacing, and word spacing. Changes made in the class will automatically apply to version 3.',
+							'Only typography settings supported in Global Fonts will be applied, including: font family, responsive font sizes, weight, text transform, decoration, line height, letter spacing, and word spacing. Changes made in the class will automatically apply to Global Fonts.',
 							'elementor'
 						) }
 					</Typography>
@@ -67,7 +93,7 @@ export const StartSyncToV3Modal = ( { externalOpen, onExternalClose, onConfirm }
 						{ __( 'Cancel', 'elementor' ) }
 					</Button>
 					<Button onClick={ handleConfirm } variant="contained" size="small">
-						{ __( 'Sync to version 3', 'elementor' ) }
+						{ __( 'Sync to Global Fonts', 'elementor' ) }
 					</Button>
 				</Box>
 			</DialogActions>

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

@@ -0,0 +1,61 @@
+import { useEffect } from 'react';
+import { __useDispatch as useDispatch } from '@elementor/store';
+
+import { apiClient } from '../api';
+import { slice } from '../store';
+
+export function GlobalStylesImportListener() {
+	const dispatch = useDispatch();
+
+	useEffect( () => {
+		const handleGlobalStylesImported = ( event: CustomEvent ) => {
+			const importedClasses = event.detail?.global_classes;
+
+			if ( importedClasses?.items && importedClasses?.order ) {
+				dispatch(
+					slice.actions.load( {
+						preview: {
+							items: importedClasses.items,
+							order: importedClasses.order,
+						},
+						frontend: {
+							items: importedClasses.items,
+							order: importedClasses.order,
+						},
+					} )
+				);
+			}
+
+			Promise.all( [ apiClient.all( 'preview' ), apiClient.all( 'frontend' ) ] )
+				.then( ( [ previewRes, frontendRes ] ) => {
+					const { data: previewData } = previewRes;
+					const { data: frontendData } = frontendRes;
+
+					dispatch(
+						slice.actions.load( {
+							preview: {
+								items: previewData.data,
+								order: previewData.meta.order,
+							},
+							frontend: {
+								items: frontendData.data,
+								order: frontendData.meta.order,
+							},
+						} )
+					);
+				} )
+				.catch( () => {} );
+		};
+
+		window.addEventListener( 'elementor/global-styles/imported', handleGlobalStylesImported as EventListener );
+
+		return () => {
+			window.removeEventListener(
+				'elementor/global-styles/imported',
+				handleGlobalStylesImported as EventListener
+			);
+		};
+	}, [ dispatch ] );
+
+	return null;
+}

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';
@@ -11,6 +12,7 @@ import { __registerSlice as registerSlice } from '@elementor/store';
 import { ClassManagerButton } from './components/class-manager/class-manager-button';
 import { panel } from './components/class-manager/class-manager-panel';
 import { ConvertLocalClassToGlobalClass } from './components/convert-local-class-to-global-class';
+import { GlobalStylesImportListener } from './components/global-styles-import-listener';
 import { OpenPanelFromUrl } from './components/open-panel-from-url';
 import { PopulateStore } from './components/populate-store';
 import { GLOBAL_CLASSES_PROVIDER_KEY, globalClassesStylesProvider } from './global-classes-styles-provider';
@@ -35,6 +37,11 @@ export function init() {
 		component: SyncWithDocumentSave,
 	} );
 
+	injectIntoLogic( {
+		id: 'global-classes-import-listener',
+		component: GlobalStylesImportListener,
+	} );
+
 	injectIntoLogic( {
 		id: 'global-classes-prefetch-css-class-usage',
 		component: PrefetchCssClassUsage,
@@ -60,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/save-global-classes.tsx

@@ -24,6 +24,9 @@ export async function saveGlobalClasses( { context, onApprove }: Options ) {
 	} );
 
 	dispatch( slice.actions.reset( { context } ) );
+
+	window.dispatchEvent( new CustomEvent( 'classes:updated', { detail: { context } } ) );
+
 	if ( response?.data?.data?.code === API_ERROR_CODES.DUPLICATED_LABEL ) {
 		dispatch( slice.actions.updateMultiple( response.data.data.modifiedLabels ) );
 		trackGlobalClasses( {

package/src/sync-with-document-save.ts

@@ -7,10 +7,13 @@ import { UPDATE_CLASS_CAPABILITY_KEY } from './capabilities';
 import { saveGlobalClasses } from './save-global-classes';
 import { selectIsDirty } from './store';
 
+let pendingSave: Promise< void > | null = null;
+
 export function syncWithDocumentSave( panelActions?: { open: () => void } ) {
 	const unsubscribe = syncDirtyState();
 
 	bindSaveAction( panelActions );
+	bindBeforeSaveTemplateAction();
 
 	return unsubscribe;
 }
@@ -25,25 +28,51 @@ function syncDirtyState() {
 	} );
 }
 
-function bindSaveAction( panelActions?: { open: () => void } ) {
-	registerDataHook( 'dependency', 'document/save/save', ( args ) => {
-		const user = getCurrentUser();
+function triggerSave( panelActions?: { open: () => void }, context: 'preview' | 'frontend' = 'preview' ) {
+	const user = getCurrentUser();
+	const canEdit = user?.capabilities.includes( UPDATE_CLASS_CAPABILITY_KEY );
 
-		const canEdit = user?.capabilities.includes( UPDATE_CLASS_CAPABILITY_KEY );
+	if ( ! canEdit ) {
+		return null;
+	}
 
-		if ( ! canEdit ) {
-			return true;
-		}
+	if ( pendingSave ) {
+		return pendingSave;
+	}
 
-		saveGlobalClasses( {
-			context: args.status === 'publish' ? 'frontend' : 'preview',
-			onApprove: panelActions?.open,
-		} );
+	const promise = saveGlobalClasses( {
+		context,
+		onApprove: panelActions?.open,
+	} );
+
+	pendingSave = promise;
+	promise.finally( () => {
+		pendingSave = null;
+	} );
+
+	return promise;
+}
+
+function bindSaveAction( panelActions?: { open: () => void } ) {
+	registerDataHook( 'dependency', 'document/save/save', ( args ) => {
+		triggerSave( panelActions, args.status === 'publish' ? 'frontend' : 'preview' );
 
 		return true;
 	} );
 }
 
+function bindBeforeSaveTemplateAction() {
+	window.addEventListener( 'elementor/global-styles/before-save', ( ( event: CustomEvent ) => {
+		if ( ! pendingSave && isDirty() ) {
+			triggerSave();
+		}
+
+		if ( pendingSave ) {
+			event.detail.promises.push( pendingSave );
+		}
+	} ) as EventListener );
+}
+
 function isDirty() {
 	return selectIsDirty( getState() );
 }

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