@elementor/editor-global-classes 0.7.0 → 0.8.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elementor/editor-global-classes",
-  "version": "0.7.0",
+  "version": "0.8.0",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -41,8 +41,8 @@
   "dependencies": {
     "@elementor/editor": "0.18.0",
     "@elementor/editor-current-user": "0.2.0",
-    "@elementor/editor-editing-panel": "1.12.0",
-    "@elementor/editor-panels": "0.11.0",
+    "@elementor/editor-editing-panel": "1.13.1",
+    "@elementor/editor-panels": "0.12.0",
     "@elementor/editor-props": "0.9.2",
     "@elementor/editor-styles": "0.5.7",
     "@elementor/editor-styles-repository": "0.7.2",

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

@@ -3,13 +3,16 @@ import {
 	__createPanel as createPanel,
 	Panel,
 	PanelBody,
+	PanelFooter,
 	PanelHeader,
 	PanelHeaderTitle,
 } from '@elementor/editor-panels';
 import { ColorSwatchIcon, XIcon } from '@elementor/icons';
-import { Alert, Box, ErrorBoundary, IconButton, type IconButtonProps, Stack } from '@elementor/ui';
+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 { ClassManagerIntroduction } from './class-manager-introduction';
 import { GlobalClassesList } from './global-classes-list';
 
@@ -18,7 +21,9 @@ export const { panel, usePanelActions } = createPanel( {
 	component: ClassManagerPanel,
 } );
 
-function ClassManagerPanel() {
+export function ClassManagerPanel() {
+	const isDirty = useDirtyState();
+
 	return (
 		<>
 			<ErrorBoundary fallback={ <ErrorBoundaryFallback /> }>
@@ -35,6 +40,18 @@ function ClassManagerPanel() {
 					<PanelBody px={ 2 }>
 						<GlobalClassesList />
 					</PanelBody>
+					<PanelFooter>
+						<Button
+							fullWidth
+							size="small"
+							variant="contained"
+							color="global"
+							disabled={ ! isDirty }
+							onClick={ publishGlobalClasses }
+						>
+							{ __( 'Save changes', 'elementor' ) }
+						</Button>
+					</PanelFooter>
 				</Panel>
 			</ErrorBoundary>
 			<ClassManagerIntroduction />

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

@@ -25,14 +25,15 @@ import {
 import { __ } from '@wordpress/i18n';
 
 import { globalClassesStylesProvider } from '../../global-classes-styles-provider';
-import { useGlobalClassesOrder, useOrderedGlobalClasses } from '../../store';
+import { useClassesOrder } from '../../hooks/use-classes-order';
+import { useOrderedClasses } from '../../hooks/use-ordered-classes';
 import { DeleteConfirmationProvider, useDeleteConfirmation } from './delete-confirmation-dialog';
 import { SortableItem, SortableItemIndicator, SortableProvider } from './sortable';
 
 export const GlobalClassesList = () => {
-	const cssClasses = useOrderedGlobalClasses();
+	const cssClasses = useOrderedClasses();
 
-	const [ classesOrder, reorderClasses ] = useClassesOrder();
+	const [ classesOrder, reorderClasses ] = useReorder();
 
 	if ( ! cssClasses?.length ) {
 		return <EmptyState />;
@@ -70,8 +71,8 @@ export const GlobalClassesList = () => {
 	);
 };
 
-const useClassesOrder = () => {
-	const order = useGlobalClassesOrder();
+const useReorder = () => {
+	const order = useClassesOrder();
 
 	const reorder = ( newIds: StyleDefinitionID[] ) => {
 		globalClassesStylesProvider.actions.setOrder( newIds );

package/src/global-classes-styles-provider.ts

@@ -8,19 +8,13 @@ import {
 import { __ } from '@wordpress/i18n';
 
 import { GlobalClassLabelAlreadyExistsError } from './errors';
-import {
-	selectClass,
-	selectGlobalClasses,
-	selectOrderedGlobalClasses,
-	slice,
-	type StateWithGlobalClasses,
-} from './store';
+import { selectClass, selectGlobalClasses, selectOrderedClasses, slice, type StateWithGlobalClasses } from './store';
 
 export const globalClassesStylesProvider = {
 	key: 'global-classes',
 	priority: 30,
 	actions: {
-		get: () => selectOrderedGlobalClasses( getState() ),
+		get: () => selectOrderedClasses( getState() ),
 		getById: ( id ) => selectClass( getState(), id ),
 		create: ( label ) => {
 			const classes = selectGlobalClasses( getState() );

package/src/hooks/use-classes-order.ts

@@ -0,0 +1,7 @@
+import { __useSelector as useSelector } from '@elementor/store';
+
+import { selectOrder } from '../store';
+
+export const useClassesOrder = () => {
+	return useSelector( selectOrder );
+};

package/src/hooks/use-dirty-state.ts

@@ -0,0 +1,7 @@
+import { __useSelector as useSelector } from '@elementor/store';
+
+import { selectIsDirty } from '../store';
+
+export const useDirtyState = () => {
+	return useSelector( selectIsDirty );
+};

package/src/hooks/use-ordered-classes.ts

@@ -0,0 +1,7 @@
+import { __useSelector as useSelector } from '@elementor/store';
+
+import { selectOrderedClasses } from '../store';
+
+export const useOrderedClasses = () => {
+	return useSelector( selectOrderedClasses );
+};

package/src/publish-global-classes.ts

@@ -0,0 +1,23 @@
+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() );
+}

package/src/store.ts

@@ -9,7 +9,6 @@ import { type UpdateActionPayload } from '@elementor/editor-styles-repository';
 import {
 	__createSelector as createSelector,
 	__createSlice as createSlice,
-	__useSelector as useSelector,
 	type PayloadAction,
 	type SliceState,
 } from '@elementor/store';
@@ -58,6 +57,8 @@ export const slice = createSlice( {
 		},
 		setOrder( state, { payload }: PayloadAction< StyleDefinitionID[] > ) {
 			state.order = payload;
+
+			state.isDirty = true;
 		},
 		update( state, { payload }: PayloadAction< { style: UpdateActionPayload } > ) {
 			const style = state.items[ payload.style.id ];
@@ -101,11 +102,11 @@ export const slice = createSlice( {
 } );
 
 // Selectors
-const selectOrder = ( state: SliceState< typeof slice > ) => state[ SLICE_NAME ].order;
+export const selectOrder = ( state: SliceState< typeof slice > ) => state[ SLICE_NAME ].order;
 
 export const selectGlobalClasses = ( state: SliceState< typeof slice > ) => state[ SLICE_NAME ].items;
 
-export const selectOrderedGlobalClasses = createSelector( selectGlobalClasses, selectOrder, ( items, order ) =>
+export const selectOrderedClasses = createSelector( selectGlobalClasses, selectOrder, ( items, order ) =>
 	order.map( ( id ) => items[ id ] )
 );
 
@@ -113,11 +114,3 @@ export const selectClass = ( state: SliceState< typeof slice >, id: StyleDefinit
 	state[ SLICE_NAME ].items[ id ] ?? null;
 
 export const selectIsDirty = ( state: SliceState< typeof slice > ) => state.globalClasses.isDirty;
-
-export const useOrderedGlobalClasses = () => {
-	const items = useSelector( selectOrderedGlobalClasses );
-
-	return items;
-};
-
-export const useGlobalClassesOrder = () => useSelector( selectOrder );

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

@@ -1,8 +1,8 @@
 import { __privateRunCommandSync as runCommandSync, registerDataHook } from '@elementor/editor-v1-adapters';
-import { __dispatch, __getState as getState, __subscribeWithSelector as subscribeWithSelector } from '@elementor/store';
+import { __getState as getState, __subscribeWithSelector as subscribeWithSelector } from '@elementor/store';
 
-import { apiClient } from './api';
-import { type GlobalClassesState, selectIsDirty, slice } from './store';
+import { publishGlobalClasses } from './publish-global-classes';
+import { selectIsDirty } from './store';
 
 export function syncWithDocumentSave() {
 	const unsubscribe = syncDirtyState();
@@ -23,20 +23,7 @@ function syncDirtyState() {
 }
 
 function bindSaveAction() {
-	registerDataHook( 'after', 'document/save/save', async () => {
-		if ( ! isDirty() ) {
-			return;
-		}
-
-		const state: GlobalClassesState = getState().globalClasses;
-
-		await apiClient.update( {
-			items: state.items,
-			order: state.order,
-		} );
-
-		__dispatch( slice.actions.setPristine() );
-	} );
+	registerDataHook( 'after', 'document/save/save', publishGlobalClasses );
 }
 
 function isDirty() {