@elementor/editor-global-classes 4.1.0-686 → 4.1.0-688

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elementor/editor-global-classes",
-  "version": "4.1.0-686",
+  "version": "4.1.0-688",
   "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-686",
-    "@elementor/editor-current-user": "4.1.0-686",
-    "@elementor/editor-documents": "4.1.0-686",
-    "@elementor/editor-editing-panel": "4.1.0-686",
-    "@elementor/editor-mcp": "4.1.0-686",
-    "@elementor/editor-panels": "4.1.0-686",
-    "@elementor/editor-props": "4.1.0-686",
-    "@elementor/editor-variables": "4.1.0-686",
-    "@elementor/editor-styles": "4.1.0-686",
-    "@elementor/editor-canvas": "4.1.0-686",
-    "@elementor/editor-styles-repository": "4.1.0-686",
-    "@elementor/editor-ui": "4.1.0-686",
-    "@elementor/editor-v1-adapters": "4.1.0-686",
-    "@elementor/http-client": "4.1.0-686",
+    "@elementor/editor": "4.1.0-688",
+    "@elementor/editor-current-user": "4.1.0-688",
+    "@elementor/editor-documents": "4.1.0-688",
+    "@elementor/editor-editing-panel": "4.1.0-688",
+    "@elementor/editor-mcp": "4.1.0-688",
+    "@elementor/editor-panels": "4.1.0-688",
+    "@elementor/editor-props": "4.1.0-688",
+    "@elementor/editor-variables": "4.1.0-688",
+    "@elementor/editor-styles": "4.1.0-688",
+    "@elementor/editor-canvas": "4.1.0-688",
+    "@elementor/editor-styles-repository": "4.1.0-688",
+    "@elementor/editor-ui": "4.1.0-688",
+    "@elementor/editor-v1-adapters": "4.1.0-688",
+    "@elementor/http-client": "4.1.0-688",
     "@elementor/icons": "^1.68.0",
-    "@elementor/query": "4.1.0-686",
-    "@elementor/schema": "4.1.0-686",
-    "@elementor/store": "4.1.0-686",
+    "@elementor/query": "4.1.0-688",
+    "@elementor/schema": "4.1.0-688",
+    "@elementor/store": "4.1.0-688",
     "@elementor/ui": "1.36.17",
-    "@elementor/utils": "4.1.0-686",
+    "@elementor/utils": "4.1.0-688",
     "@wordpress/i18n": "^5.13.0",
-    "@elementor/events": "4.1.0-686"
+    "@elementor/events": "4.1.0-688"
   },
   "peerDependencies": {
     "react": "^18.3.1",

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

@@ -11,6 +11,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 +36,11 @@ export function init() {
 		component: SyncWithDocumentSave,
 	} );
 
+	injectIntoLogic( {
+		id: 'global-classes-import-listener',
+		component: GlobalStylesImportListener,
+	} );
+
 	injectIntoLogic( {
 		id: 'global-classes-prefetch-css-class-usage',
 		component: PrefetchCssClassUsage,

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