@elementor/editor-global-classes 4.2.0-922 → 4.2.0-923

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elementor/editor-global-classes",
-  "version": "4.2.0-922",
+  "version": "4.2.0-923",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -39,29 +39,29 @@
     "dev": "tsup --config=../../tsup.dev.ts"
   },
   "dependencies": {
-    "@elementor/editor": "4.2.0-922",
-    "@elementor/editor-current-user": "4.2.0-922",
-    "@elementor/editor-documents": "4.2.0-922",
-    "@elementor/editor-editing-panel": "4.2.0-922",
-    "@elementor/editor-mcp": "4.2.0-922",
-    "@elementor/editor-panels": "4.2.0-922",
-    "@elementor/editor-props": "4.2.0-922",
-    "@elementor/editor-variables": "4.2.0-922",
-    "@elementor/editor-styles": "4.2.0-922",
-    "@elementor/editor-canvas": "4.2.0-922",
-    "@elementor/editor-styles-repository": "4.2.0-922",
-    "@elementor/editor-ui": "4.2.0-922",
-    "@elementor/editor-v1-adapters": "4.2.0-922",
-    "@elementor/http-client": "4.2.0-922",
+    "@elementor/editor": "4.2.0-923",
+    "@elementor/editor-current-user": "4.2.0-923",
+    "@elementor/editor-documents": "4.2.0-923",
+    "@elementor/editor-editing-panel": "4.2.0-923",
+    "@elementor/editor-mcp": "4.2.0-923",
+    "@elementor/editor-panels": "4.2.0-923",
+    "@elementor/editor-props": "4.2.0-923",
+    "@elementor/editor-variables": "4.2.0-923",
+    "@elementor/editor-styles": "4.2.0-923",
+    "@elementor/editor-canvas": "4.2.0-923",
+    "@elementor/editor-styles-repository": "4.2.0-923",
+    "@elementor/editor-ui": "4.2.0-923",
+    "@elementor/editor-v1-adapters": "4.2.0-923",
+    "@elementor/http-client": "4.2.0-923",
     "@elementor/icons": "~1.75.1",
-    "@elementor/query": "4.2.0-922",
-    "@elementor/schema": "4.2.0-922",
-    "@elementor/store": "4.2.0-922",
+    "@elementor/query": "4.2.0-923",
+    "@elementor/schema": "4.2.0-923",
+    "@elementor/store": "4.2.0-923",
     "@elementor/ui": "1.37.5",
-    "@elementor/utils": "4.2.0-922",
+    "@elementor/utils": "4.2.0-923",
     "@tanstack/react-virtual": "^3.13.24",
     "@wordpress/i18n": "^5.13.0",
-    "@elementor/events": "4.2.0-922"
+    "@elementor/events": "4.2.0-923"
   },
   "peerDependencies": {
     "react": "^18.3.1",

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

@@ -9,6 +9,7 @@ import { __ } from '@wordpress/i18n';
 import { useClassesOrder } from '../../hooks/use-classes-order';
 import { useFilters } from '../../hooks/use-filters';
 import { useOrderedClasses } from '../../hooks/use-ordered-classes';
+import { loadExistingClasses } from '../../load-existing-classes';
 import { slice } from '../../store';
 import { trackGlobalClasses } from '../../utils/tracking';
 import { useSearchAndFilters } from '../search-and-filter/context';
@@ -21,6 +22,8 @@ import { SortableItem, SortableProvider } from './sortable';
 const ROW_HEIGHT = 40;
 const OVERSCAN = 6;
 
+type LoadingClassesMap = Record< StyleDefinitionID, boolean >;
+
 type GlobalClassesListProps = {
 	disabled?: boolean;
 	scrollElement?: HTMLElement | null;
@@ -41,6 +44,17 @@ export const GlobalClassesList = ( {
 	const dispatch = useDispatch();
 	const filters = useFilters();
 	const [ draggedItemId, setDraggedItemId ] = useState< StyleDefinitionID | null >( null );
+	const [ loading, setLoading ] = useState< LoadingClassesMap >( {} );
+
+	const addLoadingClass = ( classId: StyleDefinitionID ) =>
+		setLoading( ( prev ) => ( { ...prev, [ classId ]: true } ) );
+
+	const removeLoadingClass = ( classId: StyleDefinitionID ) =>
+		setLoading( ( prev ) => {
+			const { [ classId ]: _, ...rest } = prev;
+			return rest;
+		} );
+
 	const draggedItemLabel = cssClasses.find( ( cssClass ) => cssClass.id === draggedItemId )?.label ?? '';
 	const [ classesOrder, reorderClasses ] = useReorder( draggedItemId, setDraggedItemId, draggedItemLabel ?? '' );
 	const filteredCssClasses = useFilteredCssClasses();
@@ -133,25 +147,34 @@ export const GlobalClassesList = ( {
 									<ClassItem
 										id={ cssClass.id }
 										label={ cssClass.label }
-										renameClass={ ( newLabel: string ) => {
-											trackGlobalClasses( {
-												event: 'classRenamed',
-												classId: cssClass.id,
-												oldValue: cssClass.label,
-												newValue: newLabel,
-												source: 'class-manager',
-											} );
-											dispatch(
-												slice.actions.update( {
-													style: {
-														id: cssClass.id,
-														label: newLabel,
-													},
-												} )
-											);
+										renameClass={ async ( newLabel: string ) => {
+											addLoadingClass( cssClass.id );
+
+											try {
+												trackGlobalClasses( {
+													event: 'classRenamed',
+													classId: cssClass.id,
+													oldValue: cssClass.label,
+													newValue: newLabel,
+													source: 'class-manager',
+												} );
+
+												void ( await loadExistingClasses( [ cssClass.id ] ) );
+
+												dispatch(
+													slice.actions.update( {
+														style: {
+															id: cssClass.id,
+															label: newLabel,
+														},
+													} )
+												);
+											} finally {
+												removeLoadingClass( cssClass.id );
+											}
 										} }
 										selected={ isDragged }
-										disabled={ disabled || isDragPlaceholder }
+										disabled={ disabled || isDragPlaceholder || loading[ cssClass.id ] }
 										sortableTriggerProps={ {
 											...triggerProps,
 											style: triggerStyle,

package/src/load-document-classes.ts

@@ -27,14 +27,21 @@ function resetGlobalClassesState( globalOrder: StyleDefinitionID[], classLabels:
 }
 
 export async function loadCurrentDocumentClasses() {
-	const previewIndexRes = await apiClient.all( 'preview' );
+	const [ previewIndexRes, frontendIndexRes ] = await Promise.all( [
+		apiClient.all( 'preview' ),
+		apiClient.all( 'frontend' ),
+	] );
+
 	const previewIndex = previewIndexRes.data.data;
+	const frontendIndex = frontendIndexRes.data.data;
+
 	const classLabels = createLabelsForClasses( previewIndex );
-	const globalOrder = previewIndex.map( ( e ) => e.id );
+	const previewOrder = previewIndex.map( ( e ) => e.id );
+	const frontendOrder = frontendIndex.map( ( e ) => e.id );
 
 	// This is intended to establish the baseline with current labels and order
 	// without it we won't be able to properly resolve the styles' class names
-	resetGlobalClassesState( globalOrder, classLabels );
+	resetGlobalClassesState( previewOrder, classLabels );
 
 	const postId = getCurrentDocument()?.id;
 	if ( ! postId ) {
@@ -51,8 +58,8 @@ export async function loadCurrentDocumentClasses() {
 
 	dispatch(
 		slice.actions.load( {
-			preview: { items: previewItems, order: globalOrder },
-			frontend: { items: frontendItems, order: globalOrder },
+			preview: { items: previewItems, order: previewOrder },
+			frontend: { items: frontendItems, order: frontendOrder },
 			classLabels,
 		} )
 	);

package/src/store.ts

@@ -339,7 +339,7 @@ export const selectClass = ( state: SliceState< typeof slice >, id: StyleDefinit
 	state[ SLICE_NAME ].data.items[ id ] ?? null;
 
 export const selectEmptyCssClass = createSelector( selectData, ( { items } ) =>
-	Object.values( items ).filter( ( cssClass ) => cssClass.variants.length === 0 )
+	Object.values( items ).filter( ( cssClass ) => ( cssClass.variants?.length ?? 0 ) === 0 )
 );
 
 export const selectIsClassFetched = ( state: SliceState< typeof slice >, id: StyleDefinitionID ) =>