@elementor/editor-global-classes 0.14.1 → 0.15.4

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

@@ -1,10 +1,6 @@
 import * as React from 'react';
-import { useEffect, useState } from 'react';
-import {
-	__useActiveDocument as useActiveDocument,
-	getDocumentModifiedStatus,
-	setDocumentModifiedStatus,
-} from '@elementor/editor-documents';
+import { useEffect } from 'react';
+import { setDocumentModifiedStatus } from '@elementor/editor-documents';
 import {
 	__createPanel as createPanel,
 	Panel,
@@ -23,8 +19,10 @@ import { __ } from '@wordpress/i18n';
 import { useDirtyState } from '../../hooks/use-dirty-state';
 import { saveGlobalClasses } from '../../save-global-classes';
 import { ClassManagerIntroduction } from './class-manager-introduction';
+import { hasDeletedItems, onDelete } from './delete-class';
 import { FlippedColorSwatchIcon } from './flipped-color-swatch-icon';
 import { GlobalClassesList } from './global-classes-list';
+import { blockPanelInteractions, unblockPanelInteractions } from './panel-interactions';
 import { SaveChangesDialog, useDialog } from './save-changes-dialog';
 
 const id = 'global-classes-manager';
@@ -40,14 +38,12 @@ export const { panel, usePanelActions } = createPanel( {
 	onOpen: () => {
 		changeEditMode( id );
 
-		return getDocumentModifiedStatus();
+		blockPanelInteractions();
 	},
-	onClose: ( documentModifiedState ) => {
+	onClose: () => {
 		changeEditMode( 'edit' );
 
-		if ( getDocumentModifiedStatus() !== documentModifiedState ) {
-			setDocumentModifiedStatus( documentModifiedState );
-		}
+		unblockPanelInteractions();
 	},
 } );
 
@@ -62,81 +58,78 @@ export function ClassManagerPanel() {
 	usePreventUnload();
 
 	return (
-		<>
-			<ThemeProvider>
-				<ErrorBoundary fallback={ <ErrorBoundaryFallback /> }>
-					<Panel>
-						<PanelHeader>
-							<Stack p={ 1 } pl={ 2 } width="100%" direction="row" alignItems="center">
-								<PanelHeaderTitle sx={ { display: 'flex', alignItems: 'center', gap: 0.5 } }>
-									<FlippedColorSwatchIcon fontSize="inherit" />
-									{ __( 'CSS Class manager', 'elementor' ) }
-								</PanelHeaderTitle>
-								<CloseButton
-									sx={ { marginLeft: 'auto' } }
-									onClose={ () => {
-										if ( isDirty ) {
-											openSaveChangesDialog();
-											return;
-										}
-
-										closePanel();
-									} }
-								/>
-							</Stack>
-						</PanelHeader>
-						<PanelBody px={ 2 }>
-							<GlobalClassesList disabled={ isPublishing } />
-						</PanelBody>
-						<PanelFooter>
-							<Button
-								fullWidth
-								size="small"
-								color="global"
-								variant="contained"
-								onClick={ publish }
-								disabled={ ! isDirty }
-								loading={ isPublishing }
-							>
-								{ __( 'Save changes', 'elementor' ) }
-							</Button>
-						</PanelFooter>
-					</Panel>
-				</ErrorBoundary>
-				<ClassManagerIntroduction />
-				{ isSaveChangesDialogOpen && (
-					<SaveChangesDialog>
-						<SaveChangesDialog.Title>
-							{ __( 'You have unsaved changes', 'elementor' ) }
-						</SaveChangesDialog.Title>
-						<SaveChangesDialog.Content>
-							<SaveChangesDialog.ContentText>
-								{ __( 'You have unsaved changes in the Class Manager.', 'elementor' ) }
-							</SaveChangesDialog.ContentText>
-							<SaveChangesDialog.ContentText>
-								{ __( 'To avoid losing your updates, save your changes before leaving.', 'elementor' ) }
-							</SaveChangesDialog.ContentText>
-						</SaveChangesDialog.Content>
-						<SaveChangesDialog.Actions
-							actions={ {
-								cancel: {
-									label: __( 'Cancel', 'elementor' ),
-									action: closeSaveChangesDialog,
-								},
-								confirm: {
-									label: __( 'Save & Continue', 'elementor' ),
-									action: async () => {
-										await publish();
-										closeSaveChangesDialog();
-										closePanel();
-									},
+		<ThemeProvider>
+			<ErrorBoundary fallback={ <ErrorBoundaryFallback /> }>
+				<Panel>
+					<PanelHeader>
+						<Stack p={ 1 } pl={ 2 } width="100%" direction="row" alignItems="center">
+							<PanelHeaderTitle sx={ { display: 'flex', alignItems: 'center', gap: 0.5 } }>
+								<FlippedColorSwatchIcon fontSize="inherit" />
+								{ __( 'Class Manager', 'elementor' ) }
+							</PanelHeaderTitle>
+							<CloseButton
+								sx={ { marginLeft: 'auto' } }
+								disabled={ isPublishing }
+								onClose={ () => {
+									if ( isDirty ) {
+										openSaveChangesDialog();
+										return;
+									}
+
+									closePanel();
+								} }
+							/>
+						</Stack>
+					</PanelHeader>
+					<PanelBody px={ 2 }>
+						<GlobalClassesList disabled={ isPublishing } />
+					</PanelBody>
+					<PanelFooter>
+						<Button
+							fullWidth
+							size="small"
+							color="global"
+							variant="contained"
+							onClick={ publish }
+							disabled={ ! isDirty }
+							loading={ isPublishing }
+						>
+							{ __( 'Save changes', 'elementor' ) }
+						</Button>
+					</PanelFooter>
+				</Panel>
+			</ErrorBoundary>
+			<ClassManagerIntroduction />
+			{ isSaveChangesDialogOpen && (
+				<SaveChangesDialog>
+					<SaveChangesDialog.Title>{ __( 'You have unsaved changes', 'elementor' ) }</SaveChangesDialog.Title>
+					<SaveChangesDialog.Content>
+						<SaveChangesDialog.ContentText>
+							{ __( 'You have unsaved changes in the Class Manager.', 'elementor' ) }
+						</SaveChangesDialog.ContentText>
+						<SaveChangesDialog.ContentText>
+							{ __( 'To avoid losing your updates, save your changes before leaving.', 'elementor' ) }
+						</SaveChangesDialog.ContentText>
+					</SaveChangesDialog.Content>
+					<SaveChangesDialog.Actions
+						actions={ {
+							cancel: {
+								label: __( 'Cancel', 'elementor' ),
+								action: closeSaveChangesDialog,
+							},
+							confirm: {
+								label: __( 'Save & Continue', 'elementor' ),
+								action: async () => {
+									await publish();
+									closeSaveChangesDialog();
+									closePanel();
 								},
-							} }
-						/>
-					</SaveChangesDialog>
-				) }
-			</ThemeProvider>
-		</>
+							},
+						} }
+					/>
+				</SaveChangesDialog>
+			) }
+		</ThemeProvider>
 	);
 }
 
@@ -173,14 +166,13 @@ const usePreventUnload = () => {
 };
 
 const usePublish = () => {
-	const document = useActiveDocument();
-	const [ initialDocumentStatus ] = useState( document?.isDirty ?? false );
-
 	return useMutation( {
 		mutationFn: () => saveGlobalClasses( { context: 'frontend' } ),
-		onSuccess: () => {
-			if ( initialDocumentStatus !== document?.isDirty ) {
-				setDocumentModifiedStatus( initialDocumentStatus );
+		onSuccess: async () => {
+			setDocumentModifiedStatus( false );
+
+			if ( hasDeletedItems() ) {
+				await onDelete();
 			}
 		},
 	} );

package/src/components/class-manager/delete-class.ts

@@ -0,0 +1,36 @@
+import { getCurrentDocument, getV1DocumentsManager } from '@elementor/editor-documents';
+import { __privateRunCommand as runCommand } from '@elementor/editor-v1-adapters';
+import { __dispatch as dispatch } from '@elementor/store';
+
+import { slice } from '../../store';
+
+let isDeleted = false;
+
+export const deleteClass = ( id: string ) => {
+	dispatch( slice.actions.delete( id ) );
+
+	isDeleted = true;
+};
+
+export const onDelete = async () => {
+	await reloadDocument();
+
+	isDeleted = false;
+};
+
+export const hasDeletedItems = () => isDeleted;
+
+// When deleting a class, we remove it from all the documents that have it applied.
+// In order to reflect the changes in the active document, we need to reload it.
+const reloadDocument = () => {
+	const currentDocument = getCurrentDocument();
+	const documentsManager = getV1DocumentsManager();
+
+	documentsManager.invalidateCache();
+
+	return runCommand( 'editor/documents/switch', {
+		id: currentDocument?.id,
+		shouldScroll: false,
+		shouldNavigateToDefaultRoute: false,
+	} );
+};

package/src/components/class-manager/delete-confirmation-dialog.tsx

@@ -13,7 +13,7 @@ import {
 } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
-import { globalClassesStylesProvider } from '../../global-classes-styles-provider';
+import { deleteClass } from './delete-class';
 
 type DeleteConfirmationDialogProps = Pick< StyleDefinition, 'id' | 'label' >;
 
@@ -50,7 +50,7 @@ const DeleteConfirmationDialog = ( { label, id }: DeleteConfirmationDialogProps
 	const { closeDialog } = useDeleteConfirmation();
 
 	const onConfirm = () => {
-		globalClassesStylesProvider.actions.delete( id );
+		deleteClass( id );
 
 		closeDialog();
 	};
@@ -59,7 +59,7 @@ const DeleteConfirmationDialog = ( { label, id }: DeleteConfirmationDialogProps
 		<Dialog open onClose={ closeDialog } aria-labelledby={ TITLE_ID } maxWidth="xs">
 			<DialogTitle id={ TITLE_ID } display="flex" alignItems="center" gap={ 1 } sx={ { lineHeight: 1 } }>
 				<AlertOctagonFilledIcon color="error" />
-				{ __( 'Delete global class', 'elementor' ) }
+				{ __( 'Delete this class?', 'elementor' ) }
 			</DialogTitle>
 			<DialogContent>
 				<DialogContentText variant="body2" color="textPrimary">
@@ -75,7 +75,7 @@ const DeleteConfirmationDialog = ( { label, id }: DeleteConfirmationDialogProps
 			</DialogContent>
 			<DialogActions>
 				<Button color="secondary" onClick={ closeDialog }>
-					{ __( 'Cancel', 'elementor' ) }
+					{ __( 'Not now', 'elementor' ) }
 				</Button>
 				<Button variant="contained" color="error" onClick={ onConfirm }>
 					{ __( 'Delete', 'elementor' ) }

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

@@ -1,8 +1,9 @@
 import * as React from 'react';
 import { type StyleDefinitionID } from '@elementor/editor-styles';
-import { stylesRepository } from '@elementor/editor-styles-repository';
+import { validateStyleLabel } from '@elementor/editor-styles-repository';
 import { EditableField, EllipsisWithTooltip, MenuListItem, useEditable } from '@elementor/editor-ui';
 import { DotsVerticalIcon } from '@elementor/icons';
+import { __useDispatch as useDispatch } from '@elementor/store';
 import {
 	bindMenu,
 	bindTrigger,
@@ -22,15 +23,16 @@ import {
 } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
-import { globalClassesStylesProvider } from '../../global-classes-styles-provider';
 import { useClassesOrder } from '../../hooks/use-classes-order';
 import { useOrderedClasses } from '../../hooks/use-ordered-classes';
+import { slice } from '../../store';
 import { DeleteConfirmationProvider, useDeleteConfirmation } from './delete-confirmation-dialog';
 import { FlippedColorSwatchIcon } from './flipped-color-swatch-icon';
 import { SortableItem, SortableProvider, SortableTrigger, type SortableTriggerProps } from './sortable';
 
 export const GlobalClassesList = ( { disabled }: { disabled?: boolean } ) => {
 	const cssClasses = useOrderedClasses();
+	const dispatch = useDispatch();
 
 	const [ classesOrder, reorderClasses ] = useReorder();
 
@@ -44,7 +46,14 @@ export const GlobalClassesList = ( { disabled }: { disabled?: boolean } ) => {
 				<SortableProvider value={ classesOrder } onChange={ reorderClasses }>
 					{ cssClasses?.map( ( { id, label } ) => {
 						const renameClass = ( newLabel: string ) => {
-							globalClassesStylesProvider.actions.update( { label: newLabel, id } );
+							dispatch(
+								slice.actions.update( {
+									style: {
+										id,
+										label: newLabel,
+									},
+								} )
+							);
 						};
 
 						return (
@@ -69,10 +78,11 @@ export const GlobalClassesList = ( { disabled }: { disabled?: boolean } ) => {
 };
 
 const useReorder = () => {
+	const dispatch = useDispatch();
 	const order = useClassesOrder();
 
 	const reorder = ( newIds: StyleDefinitionID[] ) => {
-		globalClassesStylesProvider.actions.setOrder( newIds );
+		dispatch( slice.actions.setOrder( newIds ) );
 	};
 
 	return [ order, reorder ] as const;
@@ -257,13 +267,11 @@ const getIndicatorBorder = ( { isActive, isError, theme }: { isActive: boolean;
 };
 
 const validateLabel = ( newLabel: string ) => {
-	if ( ! stylesRepository.isLabelValid( newLabel ) ) {
-		return __( 'Format is not valid', 'elementor' );
-	}
+	const result = validateStyleLabel( newLabel );
 
-	if ( stylesRepository.isLabelExist( newLabel ) ) {
-		return __( 'Existing name', 'elementor' );
+	if ( result.isValid ) {
+		return null;
 	}
 
-	return null;
+	return result.error;
 };

package/src/components/class-manager/panel-interactions.ts

@@ -0,0 +1,24 @@
+type ExtendedWindow = Window & {
+	$e?: {
+		components?: {
+			get?: ( name: 'panel' ) =>
+				| {
+						blockUserInteractions?: () => void;
+						unblockUserInteractions?: () => void;
+				  }
+				| undefined;
+		};
+	};
+};
+
+export function blockPanelInteractions() {
+	const extendedWindow = window as unknown as ExtendedWindow;
+
+	extendedWindow.$e?.components?.get?.( 'panel' )?.blockUserInteractions?.();
+}
+
+export function unblockPanelInteractions() {
+	const extendedWindow = window as unknown as ExtendedWindow;
+
+	extendedWindow.$e?.components?.get?.( 'panel' )?.unblockUserInteractions?.();
+}

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

@@ -1,5 +1,5 @@
 import { generateId } from '@elementor/editor-styles';
-import type { StylesProvider } from '@elementor/editor-styles-repository';
+import { createStylesProvider } from '@elementor/editor-styles-repository';
 import {
 	__dispatch as dispatch,
 	__getState as getState,
@@ -12,13 +12,18 @@ import { selectClass, selectGlobalClasses, selectOrderedClasses, slice, type Sta
 
 const MAX_CLASSES = 50;
 
-export const globalClassesStylesProvider = {
+export const globalClassesStylesProvider = createStylesProvider( {
 	key: 'global-classes',
 	priority: 30,
 	limit: MAX_CLASSES,
+	labels: {
+		singular: __( 'class', 'elementor' ),
+		plural: __( 'classes', 'elementor' ),
+	},
+	subscribe: ( cb ) => subscribeWithSelector( ( state: StateWithGlobalClasses ) => state.globalClasses, cb ),
 	actions: {
-		get: () => selectOrderedClasses( getState() ),
-		getById: ( id ) => selectClass( getState(), id ),
+		all: () => selectOrderedClasses( getState() ),
+		get: ( id ) => selectClass( getState(), id ),
 		create: ( label ) => {
 			const classes = selectGlobalClasses( getState() );
 
@@ -52,9 +57,6 @@ export const globalClassesStylesProvider = {
 		delete: ( id ) => {
 			dispatch( slice.actions.delete( id ) );
 		},
-		setOrder: ( order ) => {
-			dispatch( slice.actions.setOrder( order ) );
-		},
 		updateProps: ( args ) => {
 			dispatch(
 				slice.actions.updateProps( {
@@ -65,9 +67,4 @@ export const globalClassesStylesProvider = {
 			);
 		},
 	},
-	subscribe: ( cb ) => subscribeWithSelector( ( state: StateWithGlobalClasses ) => state.globalClasses, cb ),
-	labels: {
-		singular: __( 'Global class', 'elementor' ),
-		plural: __( 'Global CSS classes', 'elementor' ),
-	},
-} satisfies StylesProvider;
+} );

package/src/index.ts

@@ -1,3 +1 @@
-import { init } from './init';
-
-init();
+export { init } from './init';