@elementor/editor-global-classes 4.1.0-830 → 4.1.0-832

package/package.json

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

package/src/api.ts

@@ -1,4 +1,4 @@
-import { type StyleDefinition, type StyleDefinitionID, type StyleDefinitionsMap } from '@elementor/editor-styles';
+import { type StyleDefinition, type StyleDefinitionID } from '@elementor/editor-styles';
 import { type HttpResponse, httpService } from '@elementor/http-client';
 
 import { type CssClassUsage } from './components/css-class-usage/types';
@@ -7,13 +7,24 @@ import { type GlobalClasses } from './store';
 const RESOURCE_URL = '/global-classes';
 const BASE_URL = 'elementor/v1';
 const RESOURCE_USAGE_URL = `${ RESOURCE_URL }/usage`;
+const RESOURCE_POST_URL = `${ RESOURCE_URL }/post`;
+const RESOURCE_STYLES_URL = `${ RESOURCE_URL }/styles`;
 
 type GlobalClassesUsageResponse = HttpResponse< CssClassUsage >;
 
-export type GlobalClassesGetAllResponse = HttpResponse<
-	StyleDefinitionsMap,
+export type GlobalClassIndexEntry = {
+	id: StyleDefinitionID;
+	label: string;
+};
+
+export type GlobalClassesIndexHttpResponse = HttpResponse< GlobalClassIndexEntry[], Record< string, never > >;
+
+export type StyleDefinitionsNullableMap = Record< StyleDefinitionID, StyleDefinition | null >;
+
+export type GlobalClassesStylesHttpResponse = HttpResponse<
+	StyleDefinitionsNullableMap,
 	{
-		order: StyleDefinition[ 'id' ][];
+		order: StyleDefinitionID[];
 	}
 >;
 
@@ -27,27 +38,33 @@ type UpdatePayload = GlobalClasses & {
 
 export type ApiContext = 'preview' | 'frontend';
 
+function saveGlobalClasses( context: ApiContext, payload: UpdatePayload ) {
+	return httpService().put( `${ BASE_URL }${ RESOURCE_URL }`, payload, {
+		params: { context },
+	} );
+}
+
 export const apiClient = {
 	usage: () => httpService().get< GlobalClassesUsageResponse >( `${ BASE_URL }${ RESOURCE_USAGE_URL }` ),
 
 	all: ( context: ApiContext = 'preview' ) =>
-		httpService().get< GlobalClassesGetAllResponse >( `${ BASE_URL }${ RESOURCE_URL }`, {
+		httpService().get< GlobalClassesIndexHttpResponse >( `${ BASE_URL }${ RESOURCE_URL }`, {
 			params: { context },
 		} ),
 
-	publish: ( payload: UpdatePayload ) =>
-		httpService().put( 'elementor/v1' + RESOURCE_URL, payload, {
-			params: {
-				context: 'frontend' satisfies ApiContext,
-			},
+	getStylesForPost: ( postId: number, context: ApiContext = 'preview' ) =>
+		httpService().get< GlobalClassesStylesHttpResponse >( `${ BASE_URL }${ RESOURCE_POST_URL }`, {
+			params: { context, post_id: postId },
 		} ),
 
-	saveDraft: ( payload: UpdatePayload ) =>
-		httpService().put( 'elementor/v1' + RESOURCE_URL, payload, {
-			params: {
-				context: 'preview' satisfies ApiContext,
-			},
+	getStylesByIds: ( ids: StyleDefinitionID[], context: ApiContext = 'preview' ) =>
+		httpService().get< GlobalClassesStylesHttpResponse >( `${ BASE_URL }${ RESOURCE_STYLES_URL }`, {
+			params: { context, ids: ids.join( ',' ) },
 		} ),
+
+	publish: ( payload: UpdatePayload ) => saveGlobalClasses( 'frontend', payload ),
+
+	saveDraft: ( payload: UpdatePayload ) => saveGlobalClasses( 'preview', payload ),
 };
 
 export const API_ERROR_CODES = {

package/src/components/global-styles-import-listener.tsx

@@ -1,51 +1,26 @@
 import { useEffect } from 'react';
-import { GLOBAL_STYLES_IMPORTED_EVENT } from '@elementor/editor-canvas';
+import { GLOBAL_STYLES_IMPORTED_EVENT, type ImportedGlobalStylesPayload } from '@elementor/editor-canvas';
 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;
+		const handleGlobalStylesImported = ( event: CustomEvent< ImportedGlobalStylesPayload > ) => {
+			const importedClasses = event.detail?.global_classes as ImportedGlobalStylesPayload[ 'global_classes' ];
 
 			if ( importedClasses?.items && importedClasses?.order ) {
+				const { items } = importedClasses;
+
 				dispatch(
-					slice.actions.load( {
-						preview: {
-							items: importedClasses.items,
-							order: importedClasses.order,
-						},
-						frontend: {
-							items: importedClasses.items,
-							order: importedClasses.order,
-						},
+					slice.actions.mergeExistingClasses( {
+						preview: items,
+						frontend: items,
 					} )
 				);
 			}
-
-			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( GLOBAL_STYLES_IMPORTED_EVENT, handleGlobalStylesImported as EventListener );

package/src/components/populate-store.tsx

@@ -1,33 +1,19 @@
 import { useEffect } from 'react';
-import { __useDispatch as useDispatch } from '@elementor/store';
+import { registerDataHook } from '@elementor/editor-v1-adapters';
 
-import { apiClient } from '../api';
-import { slice } from '../store';
+import { loadCurrentDocumentClasses } from '../load-document-classes';
 
 export function PopulateStore() {
-	const dispatch = useDispatch();
-
 	useEffect( () => {
-		Promise.all( [ apiClient.all( 'preview' ), apiClient.all( 'frontend' ) ] ).then(
-			( [ previewRes, frontendRes ] ) => {
-				const { data: previewData } = previewRes;
-				const { data: frontendData } = frontendRes;
+		// TODO - we run it early to have the labels mapping prior to the canvas rendering
+		// but in fact we need a way to re-render any dependant twig-templated widgets/elements once we get the initial data
+		// in case the canvas rendering has occurred prior to the resolving of this fetch
+		loadCurrentDocumentClasses();
 
-				dispatch(
-					slice.actions.load( {
-						preview: {
-							items: previewData.data,
-							order: previewData.meta.order,
-						},
-						frontend: {
-							items: frontendData.data,
-							order: frontendData.meta.order,
-						},
-					} )
-				);
-			}
-		);
-	}, [ dispatch ] );
+		registerDataHook( 'after', 'editor/documents/attach-preview', async () => {
+			await loadCurrentDocumentClasses();
+		} );
+	}, [] );
 
 	return null;
 }

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

@@ -14,20 +14,23 @@ import { __ } from '@wordpress/i18n';
 
 import { getCapabilities } from './capabilities';
 import { GlobalClassLabelAlreadyExistsError, GlobalClassTrackingError } from './errors';
+import { loadExistingClasses } from './load-existing-classes';
 import {
+	placeholderDefinition,
 	selectClass,
+	selectClassLabels,
 	selectData,
-	selectGlobalClasses,
+	selectIsClassFetched,
 	selectOrderedClasses,
 	slice,
 	type StateWithGlobalClasses,
 } from './store';
 import { trackGlobalClasses, type TrackingEvent } from './utils/tracking';
 
-const MAX_CLASSES = 100;
+const MAX_CLASSES = 5000;
 
 export const GLOBAL_CLASSES_PROVIDER_KEY = 'global-classes';
-const PREGENERATED_LINK_PATTERN = /^global-(preview|frontend)-[a-zA-Z_-]+-css$/;
+const PREGENERATED_LINK_PATTERN = /^global-([0-9]+-)?(preview|frontend)-[a-zA-Z_-]+-css$/;
 
 export const globalClassesStylesProvider = createStylesProvider( {
 	key: GLOBAL_CLASSES_PROVIDER_KEY,
@@ -42,21 +45,44 @@ export const globalClassesStylesProvider = createStylesProvider( {
 	capabilities: getCapabilities(),
 	actions: {
 		all: () => selectOrderedClasses( getState() ),
-		get: ( id ) => selectClass( getState(), id ),
+		get: ( id ) => {
+			const state = getState();
+
+			const isFetched = selectIsClassFetched( state, id );
+			const style = selectClass( state, id );
+
+			// the isFetched flag is based on the existence of the style in the initial data
+			// so if the style is created during the same session - it won't be stored as part of the initial data
+			if ( isFetched || style ) {
+				return style;
+			}
+
+			loadExistingClasses( [ id ] );
+
+			const label = selectClassLabels( state )[ id ] ?? id;
+			return placeholderDefinition( id, label );
+		},
 		resolveCssName: ( id: string ) => {
-			return selectClass( getState(), id )?.label ?? id;
+			const state = getState();
+			const loaded = selectClass( state, id );
+			if ( loaded ) {
+				return loaded.label;
+			}
+			const fromIndex = selectClassLabels( state )[ id ];
+			return fromIndex ?? id;
 		},
 		create: ( label, variants: StyleDefinitionVariant[] = [], id?: StyleDefinitionID ) => {
-			const classes = selectGlobalClasses( getState() );
-
-			const existingLabels = Object.values( classes ).map( ( style ) => style.label );
+			const existingClasses = Object.entries( selectClassLabels( getState() ) );
+			const existingLabels = existingClasses.map( ( [ , classLabel ] ) => classLabel );
 
 			if ( existingLabels.includes( label ) ) {
 				throw new GlobalClassLabelAlreadyExistsError( { context: { label } } );
 			}
 
+			const existingIds = existingClasses.map( ( [ existingId ] ) => existingId );
+
 			if ( ! id ) {
-				id = generateId( 'g-', Object.keys( classes ) );
+				id = generateId( 'g-', existingIds );
 			}
 
 			dispatch(
@@ -114,10 +140,10 @@ const subscribeWithStates = (
 	let previousState = selectData( getState() );
 
 	return subscribeWithSelector(
-		( state: StateWithGlobalClasses ) => state.globalClasses,
+		( state: StateWithGlobalClasses ) => selectData( state ),
 		( currentState ) => {
-			cb( previousState.items, currentState.data.items );
-			previousState = currentState.data;
+			cb( previousState.items, currentState.items );
+			previousState = currentState;
 		}
 	);
 };

package/src/index.ts

@@ -5,3 +5,8 @@ export {
 export { GLOBAL_CLASSES_URI } from './mcp-integration/classes-resource';
 
 export { init } from './init';
+
+export { loadExistingClasses } from './load-existing-classes';
+export { addDocumentClasses } from './load-document-classes';
+export type { GlobalClassIndexEntry } from './api';
+export { createLabelsForClasses } from './utils/create-labels-for-classes';

package/src/load-document-classes.ts

@@ -0,0 +1,76 @@
+import { getCurrentDocument } from '@elementor/editor-documents';
+import { type StyleDefinition, type StyleDefinitionID } from '@elementor/editor-styles';
+import { __dispatch as dispatch } from '@elementor/store';
+
+import { apiClient, type StyleDefinitionsNullableMap } from './api';
+import { slice } from './store';
+import { createLabelsForClasses } from './utils/create-labels-for-classes';
+
+export function styleDefinitionsMapWithoutNull(
+	map: StyleDefinitionsNullableMap
+): Record< StyleDefinitionID, StyleDefinition > {
+	return Object.fromEntries(
+		Object.entries( map ).filter(
+			( entry ): entry is [ StyleDefinitionID, StyleDefinition ] => entry[ 1 ] !== null
+		)
+	);
+}
+
+function resetGlobalClassesState( globalOrder: StyleDefinitionID[], classLabels: Record< StyleDefinitionID, string > ) {
+	dispatch(
+		slice.actions.load( {
+			preview: { items: {}, order: globalOrder },
+			frontend: { items: {}, order: globalOrder },
+			classLabels,
+		} )
+	);
+}
+
+export async function loadCurrentDocumentClasses() {
+	const previewIndexRes = await apiClient.all( 'preview' );
+	const previewIndex = previewIndexRes.data.data;
+	const classLabels = createLabelsForClasses( previewIndex );
+	const globalOrder = previewIndex.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 );
+
+	const postId = getCurrentDocument()?.id;
+	if ( ! postId ) {
+		return;
+	}
+
+	const [ previewPostRes, frontendPostRes ] = await Promise.all( [
+		apiClient.getStylesForPost( postId, 'preview' ),
+		apiClient.getStylesForPost( postId, 'frontend' ),
+	] );
+
+	const previewItems = styleDefinitionsMapWithoutNull( previewPostRes.data.data );
+	const frontendItems = styleDefinitionsMapWithoutNull( frontendPostRes.data.data );
+
+	dispatch(
+		slice.actions.load( {
+			preview: { items: previewItems, order: globalOrder },
+			frontend: { items: frontendItems, order: globalOrder },
+			classLabels,
+		} )
+	);
+}
+
+export async function addDocumentClasses( documentId: number ) {
+	const [ previewPostRes, frontendPostRes ] = await Promise.all( [
+		apiClient.getStylesForPost( documentId, 'preview' ),
+		apiClient.getStylesForPost( documentId, 'frontend' ),
+	] );
+
+	const previewItems = styleDefinitionsMapWithoutNull( previewPostRes.data.data );
+	const frontendItems = styleDefinitionsMapWithoutNull( frontendPostRes.data.data );
+
+	dispatch(
+		slice.actions.mergeExistingClasses( {
+			preview: previewItems,
+			frontend: frontendItems,
+		} )
+	);
+}

package/src/load-existing-classes.ts

@@ -0,0 +1,49 @@
+import { type StyleDefinitionID } from '@elementor/editor-styles';
+import { __dispatch as dispatch, __getState as getState } from '@elementor/store';
+
+import { apiClient } from './api';
+import { styleDefinitionsMapWithoutNull } from './load-document-classes';
+import { selectGlobalClasses, slice } from './store';
+
+let pendingLoad: Promise< void > | null = null;
+const pendingIds = new Set< StyleDefinitionID >();
+
+export async function loadExistingClasses( classIds: StyleDefinitionID[] ): Promise< void > {
+	const existingClasses = selectGlobalClasses( getState() );
+	const missingIds = classIds.filter( ( id ) => ! ( id in existingClasses ) );
+
+	if ( missingIds.length === 0 ) {
+		return;
+	}
+
+	missingIds.forEach( ( id ) => pendingIds.add( id ) );
+
+	if ( pendingLoad ) {
+		await pendingLoad;
+		return loadExistingClasses( classIds );
+	}
+
+	pendingLoad = fetchAndMergeClasses();
+
+	try {
+		await pendingLoad;
+	} finally {
+		pendingLoad = null;
+	}
+}
+
+async function fetchAndMergeClasses(): Promise< void > {
+	const idsToFetch = Array.from( pendingIds );
+	pendingIds.clear();
+
+	if ( idsToFetch.length === 0 ) {
+		return;
+	}
+
+	const previewResponse = await apiClient.getStylesByIds( idsToFetch, 'preview' );
+	const frontendResponse = await apiClient.getStylesByIds( idsToFetch, 'frontend' );
+	const previewItems = styleDefinitionsMapWithoutNull( previewResponse.data.data );
+	const frontendItems = styleDefinitionsMapWithoutNull( frontendResponse.data.data );
+
+	dispatch( slice.actions.mergeExistingClasses( { preview: previewItems, frontend: frontendItems } ) );
+}

package/src/mcp-integration/classes-resource.ts

@@ -1,13 +1,15 @@
 import { type MCPRegistryEntry } from '@elementor/editor-mcp';
+import { __getState as getState } from '@elementor/store';
 
 import { globalClassesStylesProvider } from '../global-classes-styles-provider';
+import { selectOrderedClasses } from '../store';
 
 export const GLOBAL_CLASSES_URI = 'elementor://global-classes';
 
 const STORAGE_KEY = 'elementor-global-classes';
 
 const updateLocalStorageCache = () => {
-	const classes = globalClassesStylesProvider.actions.all();
+	const classes = selectOrderedClasses( getState() );
 
 	localStorage.setItem( STORAGE_KEY, JSON.stringify( classes ) );
 };

package/src/save-global-classes.tsx

@@ -17,10 +17,17 @@ export async function saveGlobalClasses( { context, onApprove }: Options ) {
 	const state = selectData( getState() );
 	const apiAction = context === 'preview' ? apiClient.saveDraft : apiClient.publish;
 	const currentContext = context === 'preview' ? selectPreviewInitialData : selectFrontendInitialData;
+	const changes = calculateChanges( state, currentContext( getState() ) );
+
+	const touchedIds = [ ...changes.added, ...changes.modified ];
+	const touchedItems = Object.fromEntries(
+		touchedIds.map( ( id ) => [ id, state.items[ id ] ] ).filter( ( [ , v ] ) => v )
+	);
+
 	const response = await apiAction( {
-		items: state.items,
+		items: touchedItems,
 		order: state.order,
-		changes: calculateChanges( state, currentContext( getState() ) ),
+		changes,
 	} );
 
 	dispatch( slice.actions.reset( { context } ) );
@@ -29,10 +36,12 @@ export async function saveGlobalClasses( { context, onApprove }: Options ) {
 
 	if ( response?.data?.data?.code === API_ERROR_CODES.DUPLICATED_LABEL ) {
 		dispatch( slice.actions.updateMultiple( response.data.data.modifiedLabels ) );
+
 		trackGlobalClasses( {
 			event: 'classPublishConflict',
 			numOfConflicts: Object.keys( response.data.data.modifiedLabels ).length,
 		} );
+
 		openDialog( {
 			component: (
 				<DuplicateLabelDialog
@@ -48,11 +57,17 @@ function calculateChanges( state: GlobalClasses, initialData: GlobalClasses ) {
 	const stateIds = Object.keys( state.items );
 	const initialDataIds = Object.keys( initialData.items );
 
+	const { order: stateOrder } = state;
+	const { order: initialDataOrder } = initialData;
+
+	const order = stateOrder.join( ';' ) !== initialDataOrder.join( ';' );
+
 	return {
 		added: stateIds.filter( ( id ) => ! initialDataIds.includes( id ) ),
 		deleted: initialDataIds.filter( ( id ) => ! stateIds.includes( id ) ),
 		modified: stateIds.filter( ( id ) => {
 			return id in initialData.items && hash( state.items[ id ] ) !== hash( initialData.items[ id ] );
 		} ),
+		order,
 	};
 }