@elementor/editor-variables 3.33.0-98 → 3.35.0-324

package/src/components/variables-manager/variables-manager-table.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { createElement, useState } from 'react';
+import { createElement, useEffect, useRef } from 'react';
 import { EllipsisWithTooltip } from '@elementor/editor-ui';
 import { GripVerticalIcon } from '@elementor/icons';
 import {
@@ -20,18 +20,54 @@ import { __ } from '@wordpress/i18n';
 import { type TVariablesList } from '../../storage';
 import { getVariableType } from '../../variables-registry/variable-type-registry';
 import { LabelField } from '../fields/label-field';
-import { VariableEditMenu, type VariableManagerMenuAction } from './variable-edit-menu';
+import { VariableEditMenu, type VariableManagerMenuAction } from './ui/variable-edit-menu';
+import { VariableTableCell } from './ui/variable-table-cell';
 import { VariableEditableCell } from './variable-editable-cell';
-import { VariableTableCell } from './variable-table-cell';
 
 type Props = {
 	menuActions: VariableManagerMenuAction[];
 	variables: TVariablesList;
 	onChange: ( variables: TVariablesList ) => void;
+	autoEditVariableId?: string;
+	onAutoEditComplete?: () => void;
+	onFieldError?: ( hasError: boolean ) => void;
 };
 
-export const VariablesManagerTable = ( { menuActions, variables, onChange: handleOnChange }: Props ) => {
-	const [ ids, setIds ] = useState< string[] >( Object.keys( variables ) );
+export const VariablesManagerTable = ( {
+	menuActions,
+	variables,
+	onChange: handleOnChange,
+	autoEditVariableId,
+	onAutoEditComplete,
+	onFieldError,
+}: Props ) => {
+	const tableContainerRef = useRef< HTMLDivElement >( null );
+	const variableRowRefs = useRef< Map< string, HTMLTableRowElement > >( new Map() );
+
+	useEffect( () => {
+		if ( autoEditVariableId && tableContainerRef.current ) {
+			const rowElement = variableRowRefs.current.get( autoEditVariableId );
+			if ( rowElement ) {
+				setTimeout( () => {
+					rowElement.scrollIntoView( {
+						behavior: 'smooth',
+						block: 'center',
+						inline: 'nearest',
+					} );
+				}, 100 );
+			}
+		}
+	}, [ autoEditVariableId ] );
+
+	const handleRowRef = ( id: string ) => ( ref: HTMLTableRowElement | null ) => {
+		if ( ref ) {
+			variableRowRefs.current.set( id, ref );
+		} else {
+			variableRowRefs.current.delete( id );
+		}
+	};
+
+	const ids = Object.keys( variables ).sort( sortVariablesOrder( variables ) );
 	const rows = ids
 		.filter( ( id ) => ! variables[ id ].deleted )
 		.map( ( id ) => {
@@ -40,9 +76,9 @@ export const VariablesManagerTable = ( { menuActions, variables, onChange: handl
 
 			return {
 				id,
+				type: variable.type,
 				name: variable.label,
 				value: variable.value,
-				type: variable.type,
 				...variableType,
 			};
 		} );
@@ -52,8 +88,24 @@ export const VariablesManagerTable = ( { menuActions, variables, onChange: handl
 		tableLayout: 'fixed',
 	};
 
+	const handleReorder = ( newIds: string[] ) => {
+		const updatedVariables = { ...variables };
+
+		newIds.forEach( ( id, index ) => {
+			const current = updatedVariables[ id ];
+
+			if ( ! current ) {
+				return;
+			}
+
+			updatedVariables[ id ] = Object.assign( {}, current, { order: index + 1 } );
+		} );
+
+		handleOnChange( updatedVariables );
+	};
+
 	return (
-		<TableContainer sx={ { overflow: 'initial' } }>
+		<TableContainer ref={ tableContainerRef } sx={ { overflow: 'initial' } }>
 			<Table sx={ tableSX } aria-label="Variables manager list with drag and drop reordering" stickyHeader>
 				<TableHead>
 					<TableRow>
@@ -66,7 +118,7 @@ export const VariablesManagerTable = ( { menuActions, variables, onChange: handl
 				<TableBody>
 					<UnstableSortableProvider
 						value={ ids }
-						onChange={ setIds }
+						onChange={ handleReorder }
 						variant="static"
 						restrictAxis
 						dragOverlay={ ( { children: dragOverlayChildren, ...dragOverlayProps } ) => (
@@ -88,9 +140,7 @@ export const VariablesManagerTable = ( { menuActions, variables, onChange: handl
 									isDragged,
 									dropPosition,
 									setTriggerRef,
-									isDragOverlay,
 									isSorting,
-									index,
 								}: UnstableSortableItemRenderProps ) => {
 									const showIndicationBefore = showDropIndication && dropPosition === 'before';
 									const showIndicationAfter = showDropIndication && dropPosition === 'after';
@@ -98,6 +148,7 @@ export const VariablesManagerTable = ( { menuActions, variables, onChange: handl
 									return (
 										<TableRow
 											{ ...itemProps }
+											ref={ handleRowRef( 'table-ref-' + row.id ) }
 											selected={ isDragged }
 											sx={ {
 												...( showIndicationBefore && {
@@ -123,7 +174,6 @@ export const VariablesManagerTable = ( { menuActions, variables, onChange: handl
 												},
 											} }
 											style={ { ...itemStyle, ...triggerStyle } }
-											disableDivider={ isDragOverlay || index === rows.length - 1 }
 										>
 											<VariableTableCell noPadding width={ 10 } maxWidth={ 10 }>
 												<IconButton
@@ -148,15 +198,34 @@ export const VariablesManagerTable = ( { menuActions, variables, onChange: handl
 														}
 													} }
 													prefixElement={ createElement( row.icon, { fontSize: 'inherit' } ) }
-													editableElement={ ( { value, onChange } ) => (
+													editableElement={ ( {
+														value,
+														onChange,
+														onValidationChange,
+														error,
+													} ) => (
 														<LabelField
 															id={ 'variable-label-' + row.id }
 															size="tiny"
 															value={ value }
 															onChange={ onChange }
+															onErrorChange={ ( errorMsg ) => {
+																onValidationChange?.( errorMsg );
+																onFieldError?.( !! errorMsg );
+															} }
+															error={ error }
 															focusOnShow
+															selectOnShow={ autoEditVariableId === row.id }
+															showWarningInfotip={ true }
+															variables={ variables }
 														/>
 													) }
+													autoEdit={ autoEditVariableId === row.id }
+													onRowRef={ handleRowRef( row.id ) }
+													onAutoEditComplete={
+														autoEditVariableId === row.id ? onAutoEditComplete : undefined
+													}
+													fieldType="label"
 												>
 													<EllipsisWithTooltip
 														title={ row.name }
@@ -177,12 +246,46 @@ export const VariablesManagerTable = ( { menuActions, variables, onChange: handl
 															} );
 														}
 													} }
-													editableElement={ row.valueField }
+													editableElement={ ( {
+														value,
+														onChange,
+														onValidationChange,
+														error,
+													} ) =>
+														row.valueField( {
+															ref: {
+																current: variableRowRefs.current.get(
+																	'table-ref-' + row.id
+																) as HTMLElement,
+															},
+															value,
+															onChange,
+															onPropTypeKeyChange: ( type ) => {
+																handleOnChange( {
+																	...variables,
+																	[ row.id ]: { ...variables[ row.id ], type },
+																} );
+															},
+															propTypeKey: row.type,
+															onValidationChange: ( errorMsg ) => {
+																onValidationChange?.( errorMsg );
+																onFieldError?.( !! errorMsg );
+															},
+															error,
+														} )
+													}
+													onRowRef={ handleRowRef( row.id ) }
+													gap={ 0.25 }
+													fieldType="value"
 												>
 													{ row.startIcon && row.startIcon( { value: row.value } ) }
 													<EllipsisWithTooltip
 														title={ row.value }
-														sx={ { border: '4px solid transparent' } }
+														sx={ {
+															border: '4px solid transparent',
+															lineHeight: '1',
+															pt: 0.25,
+														} }
 													>
 														{ row.value }
 													</EllipsisWithTooltip>
@@ -214,3 +317,10 @@ export const VariablesManagerTable = ( { menuActions, variables, onChange: handl
 		</TableContainer>
 	);
 };
+function sortVariablesOrder( variables: TVariablesList ): ( a: string, b: string ) => number {
+	return ( a, b ) => {
+		const orderA = variables[ a ]?.order ?? Number.MAX_SAFE_INTEGER;
+		const orderB = variables[ b ]?.order ?? Number.MAX_SAFE_INTEGER;
+		return orderA - orderB;
+	};
+}

package/src/components/variables-selection.tsx

@@ -1,22 +1,24 @@
 import * as React from 'react';
 import { useState } from 'react';
-import { useBoundProp } from '@elementor/editor-controls';
 import { PopoverBody } from '@elementor/editor-editing-panel';
-import { PopoverHeader, PopoverMenuList, PopoverSearch, type VirtualizedItem } from '@elementor/editor-ui';
+import { PopoverHeader, PopoverMenuList, SearchField, type VirtualizedItem } from '@elementor/editor-ui';
 import { ColorFilterIcon, PlusIcon, SettingsIcon } from '@elementor/icons';
-import { Divider, IconButton } from '@elementor/ui';
+import { Divider, IconButton, Tooltip } from '@elementor/ui';
 import { __, sprintf } from '@wordpress/i18n';
 
 import { useVariableType } from '../context/variable-type-context';
 import { useFilteredVariables } from '../hooks/use-prop-variables';
+import { useVariableBoundProp } from '../hooks/use-variable-bound-prop';
 import { type ExtendedVirtualizedItem } from '../types';
-import { trackVariableEvent } from '../utils/tracking';
+import { trackVariableEvent, trackVariablesManagerEvent } from '../utils/tracking';
+import { EmptyState } from './ui/empty-state';
 import { MenuItemContent } from './ui/menu-item-content';
 import { NoSearchResults } from './ui/no-search-results';
-import { NoVariables } from './ui/no-variables';
 import { VariablesStyledMenuList } from './ui/styled-menu-list';
 
 const SIZE = 'tiny';
+const CREATE_LABEL = __( 'Create variable', 'elementor' );
+const MANAGER_LABEL = __( 'Variables Manager', 'elementor' );
 
 type Props = {
 	closePopover: () => void;
@@ -28,13 +30,14 @@ type Props = {
 export const VariablesSelection = ( { closePopover, onAdd, onEdit, onSettings }: Props ) => {
 	const { icon: VariableIcon, startIcon, variableType, propTypeUtil } = useVariableType();
 
-	const { value: variable, setValue: setVariable, path } = useBoundProp( propTypeUtil );
+	const { value: variable, setValue: setVariable, path } = useVariableBoundProp();
 	const [ searchValue, setSearchValue ] = useState( '' );
 
 	const {
 		list: variables,
 		hasMatches: hasSearchResults,
 		isSourceNotEmpty: hasVariables,
+		hasNoCompatibleVariables,
 	} = useFilteredVariables( searchValue, propTypeUtil.key );
 
 	const handleSetVariable = ( key: string ) => {
@@ -60,17 +63,40 @@ export const VariablesSelection = ( { closePopover, onAdd, onEdit, onSettings }:
 
 	if ( onAdd ) {
 		actions.push(
-			<IconButton key="add" size={ SIZE } onClick={ onAddAndTrack }>
-				<PlusIcon fontSize={ SIZE } />
-			</IconButton>
+			<Tooltip key="add" placement="top" title={ CREATE_LABEL }>
+				<IconButton
+					id="add-variable-button"
+					size={ SIZE }
+					onClick={ onAddAndTrack }
+					aria-label={ CREATE_LABEL }
+				>
+					<PlusIcon fontSize={ SIZE } />
+				</IconButton>
+			</Tooltip>
 		);
 	}
 
 	if ( onSettings ) {
+		const handleOpenManager = () => {
+			onSettings();
+			trackVariablesManagerEvent( {
+				action: 'openManager',
+				varType: variableType,
+				controlPath: path.join( '.' ),
+			} );
+		};
+
 		actions.push(
-			<IconButton key="settings" size={ SIZE } onClick={ onSettings }>
-				<SettingsIcon fontSize={ SIZE } />
-			</IconButton>
+			<Tooltip key="settings" placement="top" title={ MANAGER_LABEL }>
+				<IconButton
+					id="variables-manager-button"
+					size={ SIZE }
+					onClick={ handleOpenManager }
+					aria-label={ MANAGER_LABEL }
+				>
+					<SettingsIcon fontSize={ SIZE } />
+				</IconButton>
+			</Tooltip>
 		);
 	}
 
@@ -109,7 +135,7 @@ export const VariablesSelection = ( { closePopover, onAdd, onEdit, onSettings }:
 			/>
 
 			{ hasVariables && (
-				<PopoverSearch
+				<SearchField
 					value={ searchValue }
 					onSearch={ handleSearch }
 					placeholder={ __( 'Search', 'elementor' ) }
@@ -140,8 +166,28 @@ export const VariablesSelection = ( { closePopover, onAdd, onEdit, onSettings }:
 				/>
 			) }
 
-			{ ! hasVariables && (
-				<NoVariables title={ noVariableTitle } icon={ <VariableIcon fontSize="large" /> } onAdd={ onAdd } />
+			{ ! hasVariables && ! hasNoCompatibleVariables && (
+				<EmptyState
+					title={ noVariableTitle }
+					message={ __(
+						'Variables are saved attributes that you can apply anywhere on your site.',
+						'elementor'
+					) }
+					icon={ <VariableIcon fontSize="large" /> }
+					onAdd={ onAdd }
+				/>
+			) }
+
+			{ hasNoCompatibleVariables && (
+				<EmptyState
+					title={ __( 'No compatible variables', 'elementor' ) }
+					message={ __(
+						'Looks like none of your variables work with this control. Create a new variable to use it here.',
+						'elementor'
+					) }
+					icon={ <VariableIcon fontSize="large" /> }
+					onAdd={ onAdd }
+				/>
 			) }
 		</PopoverBody>
 	);

package/src/controls/variable-control.tsx

@@ -12,7 +12,7 @@ import { getVariableType } from '../variables-registry/variable-type-registry';
 export const VariableControl = () => {
 	const boundProp = useBoundProp();
 
-	const boundPropValue = boundProp.value as TransformablePropValue< string, string >;
+	const boundPropValue = ( boundProp.value ?? boundProp.placeholder ) as TransformablePropValue< string, string >;
 
 	const assignedVariable = useVariable( boundPropValue?.value );
 

package/src/hooks/use-prop-variables.ts

@@ -5,6 +5,8 @@ import { type PropKey } from '@elementor/editor-props';
 import { useVariableType } from '../context/variable-type-context';
 import { service } from '../service';
 import { type NormalizedVariable, type Variable } from '../types';
+import { filterBySearch } from '../utils/filter-by-search';
+import { getVariableType, getVariableTypes } from '../variables-registry/variable-type-registry';
 
 export const getVariables = ( includeDeleted = true ) => {
 	const variables = service.variables();
@@ -33,12 +35,18 @@ export const useFilteredVariables = ( searchValue: string, propTypeKey: string )
 	const baseVariables = usePropVariables( propTypeKey );
 
 	const typeFilteredVariables = useVariableSelectionFilter( baseVariables );
-	const searchFilteredVariables = filterVariablesBySearchValue( typeFilteredVariables, searchValue );
+	const searchFilteredVariables = filterBySearch( typeFilteredVariables, searchValue );
+	const sortedVariables = searchFilteredVariables.sort( ( a, b ) => {
+		const orderA = a.order ?? Number.MAX_SAFE_INTEGER;
+		const orderB = b.order ?? Number.MAX_SAFE_INTEGER;
+		return orderA - orderB;
+	} );
 
 	return {
-		list: searchFilteredVariables,
+		list: sortedVariables,
 		hasMatches: searchFilteredVariables.length > 0,
 		isSourceNotEmpty: typeFilteredVariables.length > 0,
+		hasNoCompatibleVariables: baseVariables.length > 0 && typeFilteredVariables.length === 0,
 	};
 };
 
@@ -49,24 +57,35 @@ const useVariableSelectionFilter = ( variables: NormalizedVariable[] ): Normaliz
 	return selectionFilter ? selectionFilter( variables, propType ) : variables;
 };
 
-const filterVariablesBySearchValue = ( variables: NormalizedVariable[], searchValue: string ): NormalizedVariable[] => {
-	const lowerSearchValue = searchValue.toLowerCase();
-	return variables.filter( ( { label } ) => label.toLowerCase().includes( lowerSearchValue ) );
-};
-
 const usePropVariables = ( propKey: PropKey ): NormalizedVariable[] => {
 	return useMemo( () => normalizeVariables( propKey ), [ propKey ] );
 };
 
+const getMatchingTypes = ( propKey: string ): string[] => {
+	const matchingTypes: string[] = [];
+	const allTypes = getVariableTypes();
+	const variableType = getVariableType( propKey );
+
+	Object.entries( allTypes ).forEach( ( [ key, typeOptions ] ) => {
+		if ( variableType.variableType === typeOptions.variableType ) {
+			matchingTypes.push( key );
+		}
+	} );
+
+	return matchingTypes;
+};
+
 const normalizeVariables = ( propKey: string ) => {
 	const variables = getVariables( false );
+	const matchingTypes = getMatchingTypes( propKey );
 
 	return Object.entries( variables )
-		.filter( ( [ , variable ] ) => variable.type === propKey )
-		.map( ( [ key, { label, value } ] ) => ( {
+		.filter( ( [ , variable ] ) => matchingTypes.includes( variable.type ) )
+		.map( ( [ key, { label, value, order } ] ) => ( {
 			key,
 			label,
 			value,
+			order,
 		} ) );
 };
 

package/src/hooks/use-variable-bound-prop.ts

@@ -0,0 +1,42 @@
+import { useBoundProp } from '@elementor/editor-controls';
+import { isTransformable, type PropValue } from '@elementor/editor-props';
+
+import { useVariableType } from '../context/variable-type-context';
+
+type BoundProp = ReturnType< typeof useBoundProp< PropValue > >;
+
+type VariableBoundProp = ReturnType< typeof useBoundProp< string > > & {
+	setVariableValue: ( value: PropValue ) => void;
+	variableId: string | null;
+};
+
+export const useVariableBoundProp = (): VariableBoundProp => {
+	const { propTypeUtil } = useVariableType();
+	const boundProp = useBoundProp( propTypeUtil );
+
+	return {
+		...boundProp,
+		setVariableValue: ( value: PropValue ) => resolveBoundPropAndSetValue( value, boundProp as BoundProp ),
+		variableId: boundProp.value ?? boundProp.placeholder,
+	};
+};
+
+export const resolveBoundPropAndSetValue = ( value: PropValue, boundProp: BoundProp ) => {
+	const propValue = unwrapValue( boundProp.value );
+	const placeholder = unwrapValue( boundProp.placeholder );
+	const newValue = unwrapValue( value );
+
+	if ( ! propValue && placeholder === newValue ) {
+		return boundProp.setValue( null );
+	}
+
+	return boundProp.setValue( value );
+};
+
+const unwrapValue = ( input: PropValue ): PropValue => {
+	if ( isTransformable( input ) ) {
+		return input.value;
+	}
+
+	return input;
+};

package/src/index.ts

@@ -1,2 +1,3 @@
 export { init } from './init';
 export { registerVariableType } from './variables-registry/variable-type-registry';
+export { registerVariableTypes } from './register-variable-types';

package/src/init.ts

@@ -1,11 +1,12 @@
 import { injectIntoTop } from '@elementor/editor';
 import { controlActionsMenu, registerControlReplacement } from '@elementor/editor-editing-panel';
 import { __registerPanel as registerPanel } from '@elementor/editor-panels';
-import type { PropValue } from '@elementor/editor-props';
+import { isTransformable, type PropValue } from '@elementor/editor-props';
 
 import { panel } from './components/variables-manager/variables-manager-panel';
 import { VariableControl } from './controls/variable-control';
 import { usePropVariableAction } from './hooks/use-prop-variable-action';
+import { initMcp } from './mcp';
 import { registerVariableTypes } from './register-variable-types';
 import { StyleVariablesRenderer } from './renderers/style-variables-renderer';
 import { registerRepeaterInjections } from './repeater-injections';
@@ -20,7 +21,7 @@ export function init() {
 
 	registerControlReplacement( {
 		component: VariableControl,
-		condition: ( { value } ) => hasAssignedVariable( value ),
+		condition: ( { value, placeholder } ) => hasVariable( value ) || hasVariable( placeholder ),
 	} );
 
 	registerPopoverAction( {
@@ -28,7 +29,9 @@ export function init() {
 		useProps: usePropVariableAction,
 	} );
 
-	variablesService.init();
+	variablesService.init().then( () => {
+		initMcp();
+	} );
 
 	injectIntoTop( {
 		id: 'canvas-style-variables-render',
@@ -38,9 +41,9 @@ export function init() {
 	registerPanel( panel );
 }
 
-function hasAssignedVariable( propValue: PropValue ) {
-	if ( propValue && typeof propValue === 'object' && '$$type' in propValue ) {
-		return hasVariableType( propValue.$$type );
+function hasVariable( value: PropValue ) {
+	if ( isTransformable( value ) ) {
+		return hasVariableType( value.$$type );
 	}
 
 	return false;

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

@@ -0,0 +1,70 @@
+import { getMCPByDomain } from '@elementor/editor-mcp';
+import { z } from '@elementor/schema';
+
+import { service } from '../service';
+
+const InputSchema = {
+	type: z
+		.string()
+		.describe( 'The type of the variable. Example values: "global-color-variable" or "global-font-variable".' ),
+	label: z.string().describe( 'The label of the variable, displayed to the user' ),
+	value: z.string().describe( 'The value of the variable, should correspond to the type' ),
+};
+
+const OutputSchema = {
+	status: z.enum( [ 'ok', 'error' ] ).describe( 'The status of the operation' ),
+	message: z.string().optional().describe( 'Optional message providing additional information about the operation' ),
+};
+
+export const initCreateVariableTool = () => {
+	getMCPByDomain( 'variables' ).addTool( {
+		name: 'create-global-variable',
+		schema: InputSchema,
+		outputSchema: OutputSchema,
+		description: `Create a new global variable
+## When to use this tool:
+- When a user requests to create a new global variable in the Elementor editor.
+- When you need to add a new variable to be used in the editor.
+
+## Prequisites:
+- Ensure you have the most up-to-date list of existing global variables to avoid label duplication. You can use the "list-global-variables" tool to fetch the current variables.
+- Make sure when creating a new variable, the label is unique and not already in use.
+- If the user does not provide a label, ask them to provide one before proceeding.
+- If the user does not provide a type, ask them to provide one before proceeding.
+- If the user does not provide a value, ask them to provide one before proceeding.
+
+## Required parameters:
+- type: The type of the variable. Possible values are 'global-color-variable' or 'global-font-variable'.
+- label: The label of the variable, displayed to the user. Must be unique and not already in use.
+- value: The value of the variable. For color variables, this should be a valid CSS color (e.g., 'rgb(255,0,0)', '#ff0000', 'red'). For font variables, this should be a valid font family (e.g., 'Arial', 'serif').
+
+## Example tool call (JSON format):
+\`\`\`json
+{ "type": "global-color-variable", "label": "My Cool Color", "value": "rgb(1,2,3)" }
+\`\`\`
+
+## Example tool response (JSON format):
+\`\`\`json
+{ "status": "ok" }
+\`\`\`
+
+## Example to a failed tool response, which must be displayed to the end user. If the error message is not plain, attempt to find the most useful part of the message and display it.
+{ "status": "error", "message": "Unsupported type 'global-kuku-variable'" }
+
+In that case, inform the user the type is unsupported and they should try another type, perhaps consult to online documentation.
+`,
+		handler: async ( params ) => {
+			const { type, label, value } = params;
+			try {
+				await service.create( { type, label, value } );
+			} catch ( error ) {
+				const message: string = ( error as Error ).message || 'Unknown server error';
+				return {
+					status: 'error',
+					message: `There was an error creating the variable: ${ message }`,
+				};
+			}
+			return { status: 'ok' };
+		},
+	} );
+};

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

@@ -0,0 +1,50 @@
+import { getMCPByDomain } from '@elementor/editor-mcp';
+import { z } from '@elementor/schema';
+
+import { service } from '../service';
+
+export const initDeleteVariableTool = () => {
+	getMCPByDomain( 'variables' ).addTool( {
+		name: 'delete-global-variable',
+		schema: {
+			id: z.string().describe( 'The unique identifier of the variable to be deleted.' ),
+		},
+		outputSchema: {
+			status: z.enum( [ 'ok', 'error' ] ).describe( 'The status of the operation' ),
+		},
+		description: `Delete an existing global variable
+    
+## When to use this tool:
+- When a user requests to delete an existing global variable in the Elementor editor.
+- When you need to remove a variable that is no longer needed or relevant, with the user's confirmation.
+
+## Prerequisites:
+- Ensure you have the most up-to-date list of existing global variables. You can use the "list-global-variables" tool to fetch the current variables.
+- Reference the variable by the "id" property, given from the "list-global-variables" tool.
+- Make sure you have the unique identifier of the variable to be deleted before using this tool.
+- Confirm with the user that they want to proceed with the deletion, as this action is irreversible.
+
+<notice>
+A use might reference a variable by it's label, but you must always use the unique identifier (id) to delete it.
+If you only have the label, use the "list-global-variables" tool to find the corresponding id.
+</notice>
+
+<important>
+This operation is destructive and cannot be undone. Ensure that the user is fully aware of the consequences before proceeding.
+When a variable is deleted, all references to it in all pages accross the website will lose their effect.
+</important>`,
+		handler: async ( params ) => {
+			const { id } = params;
+			try {
+				await service.delete( id );
+				return { status: 'ok' };
+				// eslint-disable-next-line @typescript-eslint/no-unused-vars
+			} catch ( err: unknown ) {
+				return {
+					status: 'error',
+				};
+			}
+		},
+		isDestrcutive: true,
+	} );
+};

package/src/mcp/index.ts

@@ -0,0 +1,17 @@
+import { getMCPByDomain } from '@elementor/editor-mcp';
+
+import { initCreateVariableTool } from './create-variable-tool';
+import { initDeleteVariableTool } from './delete-variable-tool';
+import { initListVariablesTool } from './list-variables-tool';
+import { initUpdateVariableTool } from './update-variable-tool';
+import { initVariablesResource } from './variables-resource';
+
+export function initMcp() {
+	const { setMCPDescription } = getMCPByDomain( 'variables' );
+	setMCPDescription( `Elementor Editor Variables MCP` );
+	initListVariablesTool();
+	initCreateVariableTool();
+	initUpdateVariableTool();
+	initDeleteVariableTool();
+	initVariablesResource();
+}