@elementor/editor-global-classes 4.1.0-manual → 4.2.0-839

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

@@ -11,7 +11,12 @@ import {
 } from '@elementor/ui';
 
 export const SortableProvider = < T extends string >( props: UnstableSortableProviderProps< T > ) => (
-	<UnstableSortableProvider restrictAxis variant="static" dragPlaceholderStyle={ { opacity: '1' } } { ...props } />
+	<UnstableSortableProvider
+		restrictAxis
+		variant="static"
+		dragPlaceholderStyle={ { visibility: 'hidden' } }
+		{ ...props }
+	/>
 );
 
 export type SortableTriggerProps = React.HTMLAttributes< HTMLDivElement >;
@@ -24,10 +29,11 @@ export const SortableTrigger = ( props: SortableTriggerProps ) => (
 
 type SortableItemProps = {
 	id: UnstableSortableItemProps[ 'id' ];
+	style?: React.CSSProperties;
 	children: ( props: Partial< UnstableSortableItemRenderProps > ) => React.ReactNode;
 };
 
-export const SortableItem = ( { children, id, ...props }: SortableItemProps ) => {
+export const SortableItem = ( { children, id, style, ...props }: SortableItemProps ) => {
 	return (
 		<UnstableSortableItem
 			{ ...props }
@@ -46,7 +52,7 @@ export const SortableItem = ( { children, id, ...props }: SortableItemProps ) =>
 				return (
 					<Box
 						{ ...itemProps }
-						style={ itemStyle }
+						style={ { ...itemStyle, ...( ! isDragOverlay ? style : null ) } }
 						component={ 'li' }
 						role="listitem"
 						sx={ {

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

@@ -1,59 +1,32 @@
 import { useEffect } from 'react';
+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( 'elementor/global-styles/imported', handleGlobalStylesImported as EventListener );
+		window.addEventListener( GLOBAL_STYLES_IMPORTED_EVENT, handleGlobalStylesImported as EventListener );
 
 		return () => {
-			window.removeEventListener(
-				'elementor/global-styles/imported',
-				handleGlobalStylesImported as EventListener
-			);
+			window.removeEventListener( GLOBAL_STYLES_IMPORTED_EVENT, handleGlobalStylesImported as EventListener );
 		};
 	}, [ dispatch ] );
 

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

@@ -1,4 +1,9 @@
-import { generateId, type StyleDefinition, type StyleDefinitionVariant } from '@elementor/editor-styles';
+import {
+	generateId,
+	type StyleDefinition,
+	type StyleDefinitionID,
+	type StyleDefinitionVariant,
+} from '@elementor/editor-styles';
 import { createStylesProvider } from '@elementor/editor-styles-repository';
 import {
 	__dispatch as dispatch,
@@ -9,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,
@@ -37,21 +45,45 @@ 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[] = [] ) => {
-			const classes = selectGlobalClasses( getState() );
-
-			const existingLabels = Object.values( classes ).map( ( style ) => style.label );
+		create: ( label, variants: StyleDefinitionVariant[] = [], id?: StyleDefinitionID ) => {
+			const existingClasses = Object.entries( selectClassLabels( getState() ) );
+			const existingLabels = existingClasses.map( ( [ , classLabel ] ) => classLabel );
 
 			if ( existingLabels.includes( label ) ) {
 				throw new GlobalClassLabelAlreadyExistsError( { context: { label } } );
 			}
 
-			const existingIds = Object.keys( classes );
-			const id = generateId( 'g-', existingIds );
+			const existingIds = existingClasses.map( ( [ existingId ] ) => existingId );
+
+			if ( ! id ) {
+				id = generateId( 'g-', existingIds );
+			}
 
 			dispatch(
 				slice.actions.add( {
@@ -80,6 +112,7 @@ export const globalClassesStylesProvider = createStylesProvider( {
 					id: args.id,
 					meta: args.meta,
 					props: args.props,
+					mode: args.mode,
 				} )
 			);
 		},
@@ -107,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

@@ -1,3 +1,12 @@
+export {
+	ClassManagerPanelEmbedded,
+	type ClassManagerPanelEmbeddedProps,
+} from './components/class-manager/class-manager-panel';
 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/init.ts

@@ -7,6 +7,7 @@ import {
 import { getMCPByDomain } from '@elementor/editor-mcp';
 import { __registerPanel as registerPanel } from '@elementor/editor-panels';
 import { stylesRepository } from '@elementor/editor-styles-repository';
+import { isExperimentActive } from '@elementor/editor-v1-adapters';
 import { __registerSlice as registerSlice } from '@elementor/store';
 
 import { ClassManagerButton } from './components/class-manager/class-manager-button';
@@ -23,7 +24,10 @@ import { SyncWithDocumentSave } from './sync-with-document';
 
 export function init() {
 	registerSlice( slice );
-	registerPanel( panel );
+
+	if ( ! isExperimentActive( 'e_editor_design_system_panel' ) ) {
+		registerPanel( panel );
+	}
 
 	stylesRepository.register( globalClassesStylesProvider );
 
@@ -47,10 +51,12 @@ export function init() {
 		component: PrefetchCssClassUsage,
 	} );
 
-	injectIntoLogic( {
-		id: 'global-classes-open-panel-from-url',
-		component: OpenPanelFromUrl,
-	} );
+	if ( ! isExperimentActive( 'e_editor_design_system_panel' ) ) {
+		injectIntoLogic( {
+			id: 'global-classes-open-panel-from-url',
+			component: OpenPanelFromUrl,
+		} );
+	}
 
 	injectIntoCssClassConvert( {
 		id: 'global-classes-convert-from-local-class',

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/mcp-integration/mcp-apply-unapply-global-classes.ts

@@ -79,7 +79,7 @@ export default function initMcpApplyUnapplyGlobalClasses( server: MCPRegistryEnt
 - Make sure you have the correct class ID that you want to unapply.
 
 <note>
-If the user want to unapply a class by it's name and not ID, retreive the id from the list, available at uri elementor://global-classes
+If the user want to unapply a class by it's name and not ID, retrieve the id from the list, available at uri elementor://global-classes
 </note>
 `,
 		handler: async ( params ) => {

package/src/mcp-integration/mcp-get-global-class-usages.ts

@@ -12,7 +12,7 @@ export default function initMcpApplyGetGlobalClassUsages( reg: MCPRegistryEntry
 				classId: z
 					.string()
 					.describe(
-						'The ID of the class, not visible to the user. To retreive the name of the class, use the "list-global-classes" tool'
+						'The ID of the class, not visible to the user. To retrieve the name of the class, use the "list-global-classes" tool'
 					),
 				usages: z.array(
 					z.object( {
@@ -32,13 +32,13 @@ export default function initMcpApplyGetGlobalClassUsages( reg: MCPRegistryEntry
 			intelligencePriority: 0.6,
 			speedPriority: 0.8,
 		},
-		description: `Retreive the usages of global-classes ACCROSS PAGES designed by Elementor editor.
+		description: `Retrieve the usages of global-classes ACROSS PAGES designed by Elementor editor.
 
-## Prequisites: CRITICAL
+## Prerequisites: CRITICAL
 - The list of global classes and their applid values is available at resource uri elementor://global-classes
 
 ## When to use this tool:
-- When a user requests to see where a specific global class is being used accross the site.
+- When a user requests to see where a specific global class is being used across the site.
 - When you need to manage or clean up unused global classes.
 - Before deleting a global class, to ensure it is not in use in any other pages.
 

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,
 	};
 }