@elementor/editor-global-classes 4.2.0-888 → 4.2.0-895

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elementor/editor-global-classes",
-  "version": "4.2.0-888",
+  "version": "4.2.0-895",
   "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-888",
-    "@elementor/editor-current-user": "4.2.0-888",
-    "@elementor/editor-documents": "4.2.0-888",
-    "@elementor/editor-editing-panel": "4.2.0-888",
-    "@elementor/editor-mcp": "4.2.0-888",
-    "@elementor/editor-panels": "4.2.0-888",
-    "@elementor/editor-props": "4.2.0-888",
-    "@elementor/editor-variables": "4.2.0-888",
-    "@elementor/editor-styles": "4.2.0-888",
-    "@elementor/editor-canvas": "4.2.0-888",
-    "@elementor/editor-styles-repository": "4.2.0-888",
-    "@elementor/editor-ui": "4.2.0-888",
-    "@elementor/editor-v1-adapters": "4.2.0-888",
-    "@elementor/http-client": "4.2.0-888",
+    "@elementor/editor": "4.2.0-895",
+    "@elementor/editor-current-user": "4.2.0-895",
+    "@elementor/editor-documents": "4.2.0-895",
+    "@elementor/editor-editing-panel": "4.2.0-895",
+    "@elementor/editor-mcp": "4.2.0-895",
+    "@elementor/editor-panels": "4.2.0-895",
+    "@elementor/editor-props": "4.2.0-895",
+    "@elementor/editor-variables": "4.2.0-895",
+    "@elementor/editor-styles": "4.2.0-895",
+    "@elementor/editor-canvas": "4.2.0-895",
+    "@elementor/editor-styles-repository": "4.2.0-895",
+    "@elementor/editor-ui": "4.2.0-895",
+    "@elementor/editor-v1-adapters": "4.2.0-895",
+    "@elementor/http-client": "4.2.0-895",
     "@elementor/icons": "~1.75.1",
-    "@elementor/query": "4.2.0-888",
-    "@elementor/schema": "4.2.0-888",
-    "@elementor/store": "4.2.0-888",
+    "@elementor/query": "4.2.0-895",
+    "@elementor/schema": "4.2.0-895",
+    "@elementor/store": "4.2.0-895",
     "@elementor/ui": "1.37.5",
-    "@elementor/utils": "4.2.0-888",
+    "@elementor/utils": "4.2.0-895",
     "@tanstack/react-virtual": "^3.13.24",
     "@wordpress/i18n": "^5.13.0",
-    "@elementor/events": "4.2.0-888"
+    "@elementor/events": "4.2.0-895"
   },
   "peerDependencies": {
     "react": "^18.3.1",

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

@@ -1,10 +1,5 @@
 import * as React from 'react';
-import {
-	__useActiveDocument as useActiveDocument,
-	__useActiveDocumentActions as useActiveDocumentActions,
-} from '@elementor/editor-documents';
 import { useUserStylesCapability } from '@elementor/editor-styles-repository';
-import { SaveChangesDialog, useDialog } from '@elementor/editor-ui';
 import { IconButton, Tooltip } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
@@ -13,17 +8,9 @@ import { usePrefetchCssClassUsage } from '../../hooks/use-prefetch-css-class-usa
 import { trackGlobalClasses } from '../../utils/tracking';
 import { FlippedColorSwatchIcon } from './flipped-color-swatch-icon';
 
-const trackGlobalClassesButton = () => {
-	trackGlobalClasses( {
-		event: 'classManagerOpened',
-		source: 'style-panel',
-	} );
-};
+const EVENT_TOGGLE_DESIGN_SYSTEM = 'elementor/toggle-design-system';
 
 export const ClassManagerButton = () => {
-	const document = useActiveDocument();
-	const { save: saveDocument } = useActiveDocumentActions();
-	const { open: openSaveChangesDialog, close: closeSaveChangesDialog, isOpen: isSaveChangesDialogOpen } = useDialog();
 	const { prefetchClassesUsage } = usePrefetchCssClassUsage();
 
 	const { userCan } = useUserStylesCapability();
@@ -34,64 +21,25 @@ export const ClassManagerButton = () => {
 		return null;
 	}
 
-	const toggleClassesManagerPanel = () => {
+	const handleOpenPanel = () => {
 		window.dispatchEvent(
-			new CustomEvent( 'elementor/toggle-design-system', {
+			new CustomEvent( EVENT_TOGGLE_DESIGN_SYSTEM, {
 				detail: { tab: 'classes' as const },
 			} )
 		);
-	};
-
-	const handleOpenPanel = () => {
-		if ( document?.isDirty ) {
-			openSaveChangesDialog();
-			return;
-		}
-
-		toggleClassesManagerPanel();
 
-		trackGlobalClassesButton();
+		trackGlobalClasses( {
+			event: 'classManagerOpened',
+			source: 'style-panel',
+		} );
 		prefetchClassesUsage();
 	};
 
 	return (
-		<>
-			<Tooltip title={ __( 'Class Manager', 'elementor' ) } placement="top">
-				<IconButton size="tiny" onClick={ handleOpenPanel } sx={ { marginInlineEnd: -0.75 } }>
-					<FlippedColorSwatchIcon fontSize="tiny" />
-				</IconButton>
-			</Tooltip>
-			{ isSaveChangesDialogOpen && (
-				<SaveChangesDialog>
-					<SaveChangesDialog.Title>{ __( 'You have unsaved changes', 'elementor' ) }</SaveChangesDialog.Title>
-					<SaveChangesDialog.Content>
-						<SaveChangesDialog.ContentText sx={ { mb: 2 } }>
-							{ __(
-								"To open the Class Manager, save your page first. You can't continue without saving.",
-								'elementor'
-							) }
-						</SaveChangesDialog.ContentText>
-					</SaveChangesDialog.Content>
-					<SaveChangesDialog.Actions
-						actions={ {
-							cancel: {
-								label: __( 'Stay here', 'elementor' ),
-								action: closeSaveChangesDialog,
-							},
-							confirm: {
-								label: __( 'Save & Continue', 'elementor' ),
-								action: async () => {
-									await saveDocument();
-									closeSaveChangesDialog();
-									toggleClassesManagerPanel();
-									trackGlobalClassesButton();
-									prefetchClassesUsage();
-								},
-							},
-						} }
-					/>
-				</SaveChangesDialog>
-			) }
-		</>
+		<Tooltip title={ __( 'Class Manager', 'elementor' ) } placement="top">
+			<IconButton size="tiny" onClick={ handleOpenPanel } sx={ { marginInlineEnd: -0.75 } }>
+				<FlippedColorSwatchIcon fontSize="tiny" />
+			</IconButton>
+		</Tooltip>
 	);
 };

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

@@ -37,18 +37,34 @@ type StopSyncConfirmationDialogProps = {
 export type ClassManagerPanelEmbeddedProps = {
 	onRequestClose: () => void | Promise< void >;
 	onExposeCloseAttempt?: ( attemptClose: ( () => void ) | null ) => void;
+	isActive?: boolean;
 };
 
-export function ClassManagerPanelEmbedded( { onRequestClose, onExposeCloseAttempt }: ClassManagerPanelEmbeddedProps ) {
-	return <ClassManagerPanelContent onRequestClose={ onRequestClose } onExposeCloseAttempt={ onExposeCloseAttempt } />;
+export function ClassManagerPanelEmbedded( {
+	onRequestClose,
+	onExposeCloseAttempt,
+	isActive,
+}: ClassManagerPanelEmbeddedProps ) {
+	return (
+		<ClassManagerPanelContent
+			onRequestClose={ onRequestClose }
+			onExposeCloseAttempt={ onExposeCloseAttempt }
+			isActive={ isActive }
+		/>
+	);
 }
 
 type ClassManagerPanelContentProps = {
 	onRequestClose: () => void | Promise< void >;
 	onExposeCloseAttempt?: ( attemptClose: ( () => void ) | null ) => void;
+	isActive?: boolean;
 };
 
-function ClassManagerPanelContent( { onRequestClose, onExposeCloseAttempt }: ClassManagerPanelContentProps ) {
+function ClassManagerPanelContent( {
+	onRequestClose,
+	onExposeCloseAttempt,
+	isActive = true,
+}: ClassManagerPanelContentProps ) {
 	const isDirty = useDirtyState();
 	const { open: openSaveChangesDialog, close: closeSaveChangesDialog, isOpen: isSaveChangesDialogOpen } = useDialog();
 	const [ stopSyncConfirmation, setStopSyncConfirmation ] = useState< string | null >( null );
@@ -192,7 +208,7 @@ function ClassManagerPanelContent( { onRequestClose, onExposeCloseAttempt }: Cla
 					</Stack>
 				</SearchAndFilterProvider>
 			</ErrorBoundary>
-			<ClassManagerIntroduction />
+			{ isActive && <ClassManagerIntroduction /> }
 			{ startSyncConfirmation && (
 				<StartSyncToV3Modal
 					externalOpen

package/src/load-existing-classes.ts

@@ -40,8 +40,10 @@ async function fetchAndMergeClasses(): Promise< void > {
 		return;
 	}
 
-	const previewResponse = await apiClient.getStylesByIds( idsToFetch, 'preview' );
-	const frontendResponse = await apiClient.getStylesByIds( idsToFetch, 'frontend' );
+	const [ previewResponse, frontendResponse ] = await Promise.all( [
+		apiClient.getStylesByIds( idsToFetch, 'preview' ),
+		apiClient.getStylesByIds( idsToFetch, 'frontend' ),
+	] );
 	const previewItems = styleDefinitionsMapWithoutNull( previewResponse.data.data );
 	const frontendItems = styleDefinitionsMapWithoutNull( frontendResponse.data.data );
 

package/src/mcp-integration/mcp-manage-global-classes.ts

@@ -1,4 +1,4 @@
-import { BREAKPOINTS_SCHEMA_URI, STYLE_SCHEMA_URI } from '@elementor/editor-canvas';
+import { BREAKPOINTS_SCHEMA_FULL_URI, STYLE_SCHEMA_FULL_URI } from '@elementor/editor-canvas';
 import { type MCPRegistryEntry } from '@elementor/editor-mcp';
 import { type Props, Schema } from '@elementor/editor-props';
 import { type BreakpointId } from '@elementor/editor-responsive';
@@ -8,6 +8,7 @@ import { type Utils as IUtils } from '@elementor/editor-variables';
 import { z } from '@elementor/schema';
 
 import { globalClassesStylesProvider } from '../global-classes-styles-provider';
+import { loadExistingClasses } from '../load-existing-classes';
 import { saveGlobalClasses } from '../save-global-classes';
 import { GLOBAL_CLASSES_URI } from './classes-resource';
 
@@ -23,21 +24,39 @@ const schema = {
 	globalClassName: z.string().optional().describe( 'Global class name (required for create)' ),
 	props: z.object( {
 		default: z
-			.record( z.any() )
+			.record(
+				z.string().describe( 'The style property name' ),
+				z.any().describe( `The style PropValue, refer to [${ STYLE_SCHEMA_FULL_URI }] how to generate values` )
+			)
 			.describe(
-				'key-value of style-schema PropValues. Available properties at dynamic resource "elementor://styles/schema/{property-name}"'
+				'An object record containing style property names and their new values. MUST contain at least one property — empty objects are rejected.'
 			),
 		hover: z
-			.record( z.any() )
-			.describe( 'key-value of style-schema PropValues, for :hover css state. optional' )
+			.record(
+				z.string().describe( 'The style property name' ),
+				z.any().describe( `The style PropValue, refer to [${ STYLE_SCHEMA_FULL_URI }] how to generate values` )
+			)
+			.describe(
+				'An object record containing style property names and their new values to be set on the element. for :hover css state. optional'
+			)
 			.optional(),
 		focus: z
-			.record( z.any() )
-			.describe( 'key-value of style-schema PropValues, for :focus css state. optional' )
+			.record(
+				z.string().describe( 'The style property name' ),
+				z.any().describe( `The style PropValue, refer to [${ STYLE_SCHEMA_FULL_URI }] how to generate values` )
+			)
+			.describe(
+				'An object record containing style property names and their new values to be set on the element. for :focus css state. optional'
+			)
 			.optional(),
 		active: z
-			.record( z.any() )
-			.describe( 'key-value of style-schema PropValues, for :active css state. optional' )
+			.record(
+				z.string().describe( 'The style property name' ),
+				z.any().describe( `The style PropValue, refer to [${ STYLE_SCHEMA_FULL_URI }] how to generate values` )
+			)
+			.describe(
+				'An object record containing style property names and their new values to be set on the element. for :active css state. optional'
+			)
 			.optional(),
 	} ),
 	breakpoint: z
@@ -105,13 +124,25 @@ const handler = async ( input: InputSchema ): Promise< OutputSchema > => {
 		} );
 	} );
 
+	if ( action !== 'delete' ) {
+		const hasAnyProps = Object.values( propsWithStates ).some(
+			( stateProps ) => Object.keys( stateProps ).length > 0
+		);
+		if ( ! hasAnyProps ) {
+			throw new Error(
+				`Props must not be empty. Each prop must be a PropValue object from the style schema.\n\nExample: { "display": { "$$type": "string", "value": "flex" }, "flex-direction": { "$$type": "string", "value": "column" } }\n\n${ STYLE_SCHEMA_FULL_URI } to get the allowed values (look at the "value" enum in the schema response), then construct { "$$type": "string", "value": "<chosen value>" } for each property.\nAvailable Properties: ${ validProps.join(
+					', '
+				) }`
+			);
+		}
+	}
+
 	if ( errors.length > 0 ) {
-		return {
-			status: 'error',
-			message: `Validation errors:\n${ errors.join( '\n' ) }\nAvailable Properties: ${ validProps.join(
+		throw new Error(
+			`Validation errors:\n${ errors.join( '\n' ) }\nAvailable Properties: ${ validProps.join(
 				', '
-			) }\nUpdate your input and try again.`,
-		};
+			) }\nUpdate your input and try again.`
+		);
 	}
 
 	// TODO: see https://elementor.atlassian.net/browse/ED-22513 for better cross-module access
@@ -133,6 +164,17 @@ const handler = async ( input: InputSchema ): Promise< OutputSchema > => {
 	} as { status: 'error' | 'ok'; message?: string; classId?: string };
 
 	try {
+		if ( action === 'delete' ) {
+			const deleted = await attemptDelete( {
+				classId,
+				stylesProvider: globalClassesStylesProvider,
+			} );
+			if ( deleted ) {
+				return { status: 'ok', message: `deleted global class with ID ${ classId }` };
+			}
+			throw new Error( 'error deleting class' );
+		}
+
 		let currentAction = action;
 		for await ( const [ state, props ] of Object.entries( propsWithStates ) ) {
 			switch ( currentAction ) {
@@ -148,16 +190,13 @@ const handler = async ( input: InputSchema ): Promise< OutputSchema > => {
 						// NOTE: for multiple iterations as the state changes, the next execution would be update an existing class
 						currentAction = 'modify';
 						classId = newClassId;
+						result = {
+							status: 'ok',
+							message: `created global class with ID ${ newClassId }`,
+						};
+					} else {
+						throw new Error( 'error creating class' );
 					}
-					result = newClassId
-						? {
-								status: 'ok',
-								message: `created global class with ID ${ newClassId }`,
-						  }
-						: {
-								status: 'error',
-								message: 'error creating class',
-						  };
 					break;
 				case 'modify':
 					const updated = await attemptUpdate( {
@@ -167,24 +206,11 @@ const handler = async ( input: InputSchema ): Promise< OutputSchema > => {
 						breakpoint: breakpointValue as BreakpointId,
 						state: state as StyleDefinitionState,
 					} );
-					result = updated
-						? { status: 'ok', classId }
-						: {
-								status: 'error',
-								message: 'error modifying class',
-						  };
-					break;
-				case 'delete':
-					const deleted = await attemptDelete( {
-						classId,
-						stylesProvider: globalClassesStylesProvider,
-					} );
-					result = deleted
-						? { status: 'ok', message: `deleted global class with ID ${ classId }` }
-						: {
-								status: 'error',
-								message: 'error deleting class',
-						  };
+					if ( updated ) {
+						result = { status: 'ok', classId };
+					} else {
+						throw new Error( 'error modifying class' );
+					}
 					break;
 				default:
 					throw new Error( `Unsupported action ${ action }` );
@@ -206,10 +232,21 @@ export const initManageGlobalClasses = ( reg: MCPRegistryEntry ) => {
 		name: 'manage-global-classes',
 		requiredResources: [
 			{ uri: GLOBAL_CLASSES_URI, description: 'Global classes list' },
-			{ uri: STYLE_SCHEMA_URI, description: 'Style schema resources' },
-			{ uri: BREAKPOINTS_SCHEMA_URI, description: 'Breakpoints list' },
+			{ uri: STYLE_SCHEMA_FULL_URI, description: 'Style schema resources' },
+			{ uri: BREAKPOINTS_SCHEMA_FULL_URI, description: 'Breakpoints list' },
 		],
-		description: `Create or modify global classes for reusable design-system styling. Class names must reflect purpose (e.g. heading-primary, button-cta). Create classes BEFORE compositions. Do NOT create classes for one-off styles or layout-specific properties.`,
+		description: `Create or modify global classes for reusable design-system styling. Class names must reflect purpose (e.g. heading-primary, button-cta). Create classes BEFORE applying them. Do NOT create classes for one-off styles.
+
+IMPORTANT: props must contain actual CSS property values — never pass empty objects.
+Fetch ${ STYLE_SCHEMA_FULL_URI } to get the allowed values for each property, then use them to build the props object.
+
+Example — creating a flex column class:
+props.default = {
+  "display": { "$$type": "string", "value": "flex" },
+  "flex-direction": { "$$type": "string", "value": "column" }
+}
+
+The style schema returns a JSON Schema. Extract the "value" enum to pick the right value, then construct { "$$type": "string", "value": "<picked value>" }.`,
 		schema,
 		outputSchema,
 		handler,
@@ -249,7 +286,7 @@ async function attemptCreate( opts: Opts ) {
 		return newClassId;
 	} catch {
 		deleteClass( newClassId );
-		return null;
+		throw new Error( 'error creating class' );
 	}
 }
 
@@ -262,6 +299,7 @@ async function attemptUpdate( opts: Opts ) {
 	if ( ! updateProps || ! update ) {
 		throw new Error( 'User is unable to update global classes' );
 	}
+	await loadExistingClasses( [ classId ] );
 	const snapshot = structuredClone( stylesProvider.actions.all() );
 	try {
 		updateProps( {
@@ -269,7 +307,7 @@ async function attemptUpdate( opts: Opts ) {
 			props,
 			meta: {
 				breakpoint,
-				state,
+				state: ( state as string ) === 'default' ? null : state,
 			},
 		} );
 		await saveGlobalClasses( { context: 'frontend' } );
@@ -282,7 +320,7 @@ async function attemptUpdate( opts: Opts ) {
 			} );
 		} );
 		await saveGlobalClasses( { context: 'frontend' } );
-		return false;
+		throw new Error( 'error updating class' );
 	}
 }
 
@@ -300,11 +338,7 @@ async function attemptDelete( opts: Pick< Opts, 'classId' | 'stylesProvider' > )
 	if ( ! targetClass ) {
 		throw new Error( `Class with ID "${ classId }" not found` );
 	}
-	try {
-		deleteClass( classId );
-		await saveGlobalClasses( { context: 'frontend' } );
-		return true;
-	} catch {
-		return false;
-	}
+	deleteClass( classId );
+	await saveGlobalClasses( { context: 'frontend' } );
+	return true;
 }