@elementor/editor-global-classes 0.11.1 → 0.12.0

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

@@ -30,7 +30,11 @@ export const ClassManagerIntroduction = () => {
 const IntroductionContent = () => {
 	return (
 		<Stack gap={ 1.5 } padding={ 3 }>
-			<Image sx={ { width: '100%', height: '312px' } } src="" alt="Introduction" />
+			<Image
+				sx={ { width: '100%', height: '312px' } }
+				src="https://assets.elementor.com/packages/v1/images/class-manager-intro.svg"
+				alt=""
+			/>
 			<Box>
 				<Typography variant={ 'body2' }>
 					{ __(

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

@@ -1,5 +1,10 @@
 import * as React from 'react';
-import { useEffect } from 'react';
+import { useEffect, useState } from 'react';
+import {
+	__useActiveDocument as useActiveDocument,
+	getDocumentModifiedStatus,
+	setDocumentModifiedStatus,
+} from '@elementor/editor-documents';
 import {
 	__createPanel as createPanel,
 	Panel,
@@ -10,11 +15,12 @@ import {
 } from '@elementor/editor-panels';
 import { changeEditMode } from '@elementor/editor-v1-adapters';
 import { XIcon } from '@elementor/icons';
+import { useMutation } from '@elementor/query';
 import { Alert, Box, Button, ErrorBoundary, IconButton, type IconButtonProps, Stack } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
 import { useDirtyState } from '../../hooks/use-dirty-state';
-import { publishGlobalClasses } from '../../publish-global-classes';
+import { saveGlobalClasses } from '../../save-global-classes';
 import { ClassManagerIntroduction } from './class-manager-introduction';
 import { FlippedColorSwatchIcon } from './flipped-color-swatch-icon';
 import { GlobalClassesList } from './global-classes-list';
@@ -29,16 +35,29 @@ const id = 'global-classes-manager';
 export const { panel, usePanelActions } = createPanel( {
 	id,
 	component: ClassManagerPanel,
-	onOpen: () => changeEditMode( id ),
-	onClose: () => changeEditMode( 'edit' ),
 	allowedEditModes: [ 'edit', id ],
+	onOpen: () => {
+		changeEditMode( id );
+
+		return getDocumentModifiedStatus();
+	},
+	onClose: ( documentModifiedState ) => {
+		changeEditMode( 'edit' );
+
+		if ( getDocumentModifiedStatus() !== documentModifiedState ) {
+			setDocumentModifiedStatus( documentModifiedState );
+		}
+	},
 } );
 
 export function ClassManagerPanel() {
 	const isDirty = useDirtyState();
+
 	const { close: closePanel } = usePanelActions();
 	const { open: openSaveChangesDialog, close: closeSaveChangesDialog, isOpen: isSaveChangesDialogOpen } = useDialog();
 
+	const { mutateAsync: publish, isPending: isPublishing } = usePublish();
+
 	usePreventUnload();
 
 	return (
@@ -65,16 +84,17 @@ export function ClassManagerPanel() {
 						</Stack>
 					</PanelHeader>
 					<PanelBody px={ 2 }>
-						<GlobalClassesList />
+						<GlobalClassesList disabled={ isPublishing } />
 					</PanelBody>
 					<PanelFooter>
 						<Button
 							fullWidth
 							size="small"
-							variant="contained"
 							color="global"
+							variant="contained"
+							onClick={ publish }
 							disabled={ ! isDirty }
-							onClick={ publishGlobalClasses }
+							loading={ isPublishing }
 						>
 							{ __( 'Save changes', 'elementor' ) }
 						</Button>
@@ -102,7 +122,7 @@ export function ClassManagerPanel() {
 							confirm: {
 								label: __( 'Save & Continue', 'elementor' ),
 								action: async () => {
-									await publishGlobalClasses();
+									await publish();
 									closeSaveChangesDialog();
 									closePanel();
 								},
@@ -146,3 +166,17 @@ const usePreventUnload = () => {
 		};
 	}, [ isDirty ] );
 };
+
+const usePublish = () => {
+	const document = useActiveDocument();
+	const [ initialDocumentStatus ] = useState( document?.isDirty ?? false );
+
+	return useMutation( {
+		mutationFn: () => saveGlobalClasses( { context: 'frontend' } ),
+		onSuccess: () => {
+			if ( initialDocumentStatus !== document?.isDirty ) {
+				setDocumentModifiedStatus( initialDocumentStatus );
+			}
+		},
+	} );
+};

package/src/components/class-manager/global-classes-list.tsx

@@ -31,7 +31,7 @@ import { DeleteConfirmationProvider, useDeleteConfirmation } from './delete-conf
 import { FlippedColorSwatchIcon } from './flipped-color-swatch-icon';
 import { SortableItem, SortableProvider, SortableTrigger, type SortableTriggerProps } from './sortable';
 
-export const GlobalClassesList = () => {
+export const GlobalClassesList = ( { disabled }: { disabled?: boolean } ) => {
 	const cssClasses = useOrderedClasses();
 
 	const [ classesOrder, reorderClasses ] = useReorder();
@@ -57,7 +57,7 @@ export const GlobalClassesList = () => {
 										label={ label }
 										renameClass={ renameClass }
 										selected={ isDragged }
-										disabled={ isDragPlaceholder }
+										disabled={ disabled || isDragPlaceholder }
 										sortableTriggerProps={ { ...triggerProps, style: triggerStyle } }
 									/>
 								) }

package/src/save-global-classes.ts

@@ -0,0 +1,27 @@
+import { __dispatch as dispatch, __getState as getState } from '@elementor/store';
+
+import { apiClient, type UpdateContext } from './api';
+import { type GlobalClassesState, slice } from './store';
+
+type Options = {
+	context: UpdateContext;
+};
+
+export async function saveGlobalClasses( { context }: Options ) {
+	const state: GlobalClassesState = getState().globalClasses;
+
+	const data = {
+		items: state.items,
+		order: state.order,
+	};
+
+	if ( context === 'preview' ) {
+		await apiClient.saveDraft( data );
+
+		return;
+	}
+
+	await apiClient.publish( data );
+
+	dispatch( slice.actions.setPristine() );
+}

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

@@ -1,7 +1,8 @@
-import { __privateRunCommandSync as runCommandSync, registerDataHook } from '@elementor/editor-v1-adapters';
+import { setDocumentModifiedStatus } from '@elementor/editor-documents';
+import { registerDataHook } from '@elementor/editor-v1-adapters';
 import { __getState as getState, __subscribeWithSelector as subscribeWithSelector } from '@elementor/store';
 
-import { publishGlobalClasses } from './publish-global-classes';
+import { saveGlobalClasses } from './save-global-classes';
 import { selectIsDirty } from './store';
 
 export function syncWithDocumentSave() {
@@ -18,12 +19,16 @@ function syncDirtyState() {
 			return;
 		}
 
-		runCommandSync( 'document/save/set-is-modified', { status: true }, { internal: true } );
+		setDocumentModifiedStatus( true );
 	} );
 }
 
 function bindSaveAction() {
-	registerDataHook( 'after', 'document/save/save', publishGlobalClasses );
+	registerDataHook( 'after', 'document/save/save', ( args ) => {
+		return saveGlobalClasses( {
+			context: args.status === 'publish' ? 'frontend' : 'preview',
+		} );
+	} );
 }
 
 function isDirty() {

package/src/publish-global-classes.ts

@@ -1,23 +0,0 @@
-import { __dispatch as dispatch, __getState as getState } from '@elementor/store';
-
-import { apiClient } from './api';
-import { type GlobalClassesState, selectIsDirty, slice } from './store';
-
-export async function publishGlobalClasses() {
-	if ( ! isDirty() ) {
-		return;
-	}
-
-	const state: GlobalClassesState = getState().globalClasses;
-
-	await apiClient.update( {
-		items: state.items,
-		order: state.order,
-	} );
-
-	dispatch( slice.actions.setPristine() );
-}
-
-function isDirty() {
-	return selectIsDirty( getState() );
-}