@elementor/editor-variables 4.1.0-manual → 4.2.0-839

package/src/init.ts

@@ -3,6 +3,7 @@ import { registerControlReplacement } from '@elementor/editor-controls';
 import { getMCPByDomain } from '@elementor/editor-mcp';
 import { __registerPanel as registerPanel } from '@elementor/editor-panels';
 import { isTransformable, type PropValue } from '@elementor/editor-props';
+import { isExperimentActive } from '@elementor/editor-v1-adapters';
 import { controlActionsMenu } from '@elementor/menus';
 
 import { GlobalStylesImportListener } from './components/global-styles-import-listener';
@@ -59,17 +60,19 @@ export function init() {
 		component: GlobalStylesImportListener,
 	} );
 
-	injectIntoLogic( {
-		id: 'variables-open-panel-from-url',
-		component: OpenPanelFromUrl,
-	} );
+	if ( ! isExperimentActive( 'e_editor_design_system_panel' ) ) {
+		injectIntoLogic( {
+			id: 'variables-open-panel-from-url',
+			component: OpenPanelFromUrl,
+		} );
 
-	injectIntoLogic( {
-		id: 'variables-open-panel-from-event',
-		component: OpenPanelFromEvent,
-	} );
+		injectIntoLogic( {
+			id: 'variables-open-panel-from-event',
+			component: OpenPanelFromEvent,
+		} );
 
-	registerPanel( panel );
+		registerPanel( panel );
+	}
 }
 
 function hasVariableAssigned( value: PropValue ) {

package/src/mcp/manage-variable-tool.ts

@@ -2,6 +2,7 @@ import { type MCPRegistryEntry } from '@elementor/editor-mcp';
 import { z } from '@elementor/schema';
 
 import { service } from '../service';
+import { validateLabel } from '../utils/validations';
 import { GLOBAL_VARIABLES_URI } from './variables-resource';
 
 export const initManageVariableTool = ( reg: MCPRegistryEntry ) => {
@@ -68,12 +69,20 @@ function getServiceActions( svc: typeof service ) {
 			if ( ! type || ! label || ! value ) {
 				throw new Error( 'Create requires type, label, and value' );
 			}
+			const labelError = validateLabel( label );
+			if ( labelError ) {
+				throw new Error( labelError );
+			}
 			return svc.create( { type, label, value } );
 		},
 		update( { id, label, value }: Opts< { id: string; label: string; value: string } > ) {
 			if ( ! id || ! label || ! value ) {
 				throw new Error( 'Update requires id, label, and value' );
 			}
+			const labelError = validateLabel( label );
+			if ( labelError ) {
+				throw new Error( labelError );
+			}
 			return svc.update( id, { label, value } );
 		},
 		delete( { id }: Opts< { id: string } > ) {

package/src/mcp/variables-resource.ts

@@ -1,38 +1,54 @@
 import { type MCPRegistryEntry } from '@elementor/editor-mcp';
+import { __privateListenTo as listenTo, commandEndEvent } from '@elementor/editor-v1-adapters';
 
 import { service } from '../service';
 import { type TVariable } from '../storage';
 
 export const GLOBAL_VARIABLES_URI = 'elementor://global-variables';
 
+type GlobalVariablesResourceEntry =
+	| ( TVariable & { version: 'v4' } )
+	| ( Record< string, unknown > & { version: 'v3' } );
+
+const buildGlobalVariablesPayload = async (): Promise< Record< string, GlobalVariablesResourceEntry > > => {
+	const merged: Record< string, GlobalVariablesResourceEntry > = {};
+	Object.entries( service.variables() ).forEach( ( [ id, variable ] ) => {
+		if ( ! variable.deleted ) {
+			merged[ id ] = { ...variable, version: 'v4' };
+		}
+	} );
+	return merged;
+};
+
 export const initVariablesResource = ( variablesMcpEntry: MCPRegistryEntry, canvasMcpEntry: MCPRegistryEntry ) => {
 	[ canvasMcpEntry, variablesMcpEntry ].forEach( ( entry ) => {
 		const { resource, sendResourceUpdated } = entry;
+
+		const notifyGlobalVariablesUpdated = () => {
+			sendResourceUpdated( {
+				uri: GLOBAL_VARIABLES_URI,
+			} );
+		};
+
 		resource(
 			'global-variables',
 			GLOBAL_VARIABLES_URI,
 			{
-				description:
-					'List of Global variables. Defined as a key-value store (ID as key, global-variable object as value)',
+				description: 'Global variables available (v4)',
 			},
 			async () => {
-				const variables: Record< string, TVariable > = {};
-				Object.entries( service.variables() ).forEach( ( [ id, variable ] ) => {
-					if ( ! variable.deleted ) {
-						variables[ id ] = variable;
-					}
-				} );
+				const variables = await buildGlobalVariablesPayload();
 
 				return {
-					contents: [ { uri: GLOBAL_VARIABLES_URI, text: JSON.stringify( variables ) } ],
+					contents: [
+						{ uri: GLOBAL_VARIABLES_URI, mimeType: 'application/json', text: JSON.stringify( variables ) },
+					],
 				};
 			}
 		);
 
-		window.addEventListener( 'variables:updated', () => {
-			sendResourceUpdated( {
-				uri: GLOBAL_VARIABLES_URI,
-			} );
-		} );
+		window.addEventListener( 'variables:updated', notifyGlobalVariablesUpdated );
+
+		listenTo( commandEndEvent( 'document/save/update' ), notifyGlobalVariablesUpdated );
 	} );
 };

package/src/repeater-injections.ts

@@ -3,6 +3,7 @@ import {
 	backgroundColorOverlayPropTypeUtil,
 	cssFilterFunctionPropUtil,
 	dropShadowFilterPropTypeUtil,
+	moveTransformPropTypeUtil,
 	type PropValue,
 	selectionSizePropTypeUtil,
 	shadowPropTypeUtil,
@@ -16,6 +17,7 @@ import {
 	FilterDropShadowIconIndicator,
 	FilterDropShadowRepeaterLabel,
 	FilterSingleSizeRepeaterLabel,
+	TransformRepeaterLabel,
 	TransitionsSizeVariableLabel,
 } from './components/variables-repeater-item-slot';
 import { colorVariablePropTypeUtil, customSizeVariablePropTypeUtil, sizeVariablePropTypeUtil } from './prop-types';
@@ -28,6 +30,7 @@ export function registerRepeaterInjections() {
 	backgroundOverlayRepeaterInjections();
 	boxShadowRepeaterInjections();
 	transitionsRepeaterInjections();
+	transformRepeaterInjections();
 	filterRepeaterInjections();
 }
 
@@ -75,6 +78,25 @@ function boxShadowRepeaterInjections() {
 	} );
 }
 
+function transformRepeaterInjections() {
+	injectIntoRepeaterItemLabel( {
+		id: 'transform-size-variables-label',
+		component: TransformRepeaterLabel,
+		condition: ( { value }: Args ) => {
+			if ( moveTransformPropTypeUtil.isValid( value ) ) {
+				const { x: xAxis, y: yAxis, z: zAxis } = moveTransformPropTypeUtil.extract( value ) || {};
+				return (
+					hasAssignedSizeVariable( xAxis ) ||
+					hasAssignedSizeVariable( yAxis ) ||
+					hasAssignedSizeVariable( zAxis )
+				);
+			}
+
+			return false;
+		},
+	} );
+}
+
 function transitionsRepeaterInjections() {
 	injectIntoRepeaterItemLabel( {
 		id: 'transition-size-variables-label',

package/src/types.ts

@@ -1,17 +1,8 @@
 import type * as React from 'react';
+import { type StyleVariables, type Variable } from '@elementor/editor-styles';
 import { type VirtualizedItem } from '@elementor/editor-ui';
 
-export type Variable = {
-	key?: string;
-	label: string;
-	value: string;
-	type: string;
-	deleted?: boolean;
-	deleted_at?: string;
-	sync_to_v3?: boolean;
-};
-
-export type StyleVariables = Record< string, Variable >;
+export type { StyleVariables, Variable };
 
 export type ExtendedVirtualizedItem = VirtualizedItem< 'item', string > & {
 	icon: React.ReactNode;