@elementor/editor-variables 3.33.0-98 → 3.34.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elementor/editor-variables",
-  "version": "3.33.0-98",
+  "version": "3.34.2",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -39,19 +39,21 @@
     "dev": "tsup --config=../../tsup.dev.ts"
   },
   "dependencies": {
-    "@elementor/editor": "3.33.0-98",
-    "@elementor/editor-canvas": "3.33.0-98",
-    "@elementor/editor-controls": "3.33.0-98",
-    "@elementor/editor-current-user": "3.33.0-98",
-    "@elementor/editor-editing-panel": "3.33.0-98",
-    "@elementor/editor-panels": "3.33.0-98",
-    "@elementor/editor-props": "3.33.0-98",
-    "@elementor/editor-ui": "3.33.0-98",
-    "@elementor/editor-v1-adapters": "3.33.0-98",
-    "@elementor/http-client": "3.33.0-98",
-    "@elementor/icons": "1.46.0",
-    "@elementor/schema": "3.33.0-98",
-    "@elementor/ui": "1.36.12",
+    "@elementor/editor": "3.34.2",
+    "@elementor/editor-canvas": "3.34.2",
+    "@elementor/editor-controls": "3.34.2",
+    "@elementor/editor-current-user": "3.34.2",
+    "@elementor/editor-editing-panel": "3.34.2",
+    "@elementor/editor-mcp": "3.34.2",
+    "@elementor/editor-panels": "3.34.2",
+    "@elementor/editor-props": "3.34.2",
+    "@elementor/editor-ui": "3.34.2",
+    "@elementor/editor-v1-adapters": "3.34.2",
+    "@elementor/http-client": "3.34.2",
+    "@elementor/icons": "^1.61.0",
+    "@elementor/mixpanel": "3.34.2",
+    "@elementor/schema": "3.34.2",
+    "@elementor/ui": "1.36.17",
     "@wordpress/i18n": "^5.13.0"
   },
   "peerDependencies": {

package/src/api.ts

@@ -1,5 +1,7 @@
 import { httpService } from '@elementor/http-client';
 
+import { type OperationType } from './batch-operations';
+
 const BASE_PATH = 'elementor/v1/variables';
 
 type RestoreVariablePayload = {
@@ -8,6 +10,24 @@ type RestoreVariablePayload = {
 	value?: string;
 };
 
+export type BatchOperation = {
+	type: OperationType;
+	id?: string;
+	variable?: {
+		id?: string;
+		type?: string;
+		label?: string;
+		value?: string;
+	};
+	label?: string;
+	value?: string;
+};
+
+export type BatchPayload = {
+	watermark: number;
+	operations: BatchOperation[];
+};
+
 export const apiClient = {
 	list: () => {
 		return httpService().get( BASE_PATH + '/list' );
@@ -46,4 +66,8 @@ export const apiClient = {
 
 		return httpService().post( BASE_PATH + '/restore', payload );
 	},
+
+	batch: ( payload: BatchPayload ) => {
+		return httpService().post( BASE_PATH + '/batch', payload );
+	},
 };

package/src/batch-operations.ts

@@ -0,0 +1,86 @@
+import { type BatchOperation } from './api';
+import { type TVariable, type TVariablesList } from './storage';
+
+export type OperationType = 'create' | 'update' | 'delete' | 'restore';
+
+export type OperationResult = {
+	id: string;
+	type: OperationType;
+	variable?: TVariable & { id: string };
+	deleted?: boolean;
+};
+
+export const generateTempId = (): string => {
+	const timestamp = Date.now().toString( 36 );
+	const random = Math.random().toString( 36 ).substring( 2, 8 );
+	return `tmp-${ timestamp }-${ random }`;
+};
+
+export const isTempId = ( id: string ): boolean => {
+	return id.startsWith( 'tmp-' );
+};
+
+export const buildOperationsArray = (
+	originalVariables: TVariablesList,
+	currentVariables: TVariablesList
+): BatchOperation[] => {
+	const operations: BatchOperation[] = [];
+
+	Object.entries( currentVariables ).forEach( ( [ id, variable ] ) => {
+		if ( isTempId( id ) ) {
+			operations.push( {
+				type: 'create',
+				variable: {
+					...variable,
+					id,
+				},
+			} );
+		} else if ( originalVariables[ id ] ) {
+			const original = originalVariables[ id ];
+
+			if ( original.deleted && ! variable.deleted ) {
+				operations.push( {
+					type: 'restore',
+					id,
+					...( original.label !== variable.label && { label: variable.label } ),
+					...( original.value !== variable.value && { value: variable.value } ),
+				} );
+			} else if (
+				! variable.deleted &&
+				( original.label !== variable.label ||
+					original.value !== variable.value ||
+					original.order !== variable.order )
+			) {
+				operations.push( {
+					type: 'update',
+					id,
+					variable: {
+						...( original.label !== variable.label && { label: variable.label } ),
+						...( original.value !== variable.value && { value: variable.value } ),
+						...( original.order !== variable.order && { order: variable.order } ),
+					},
+				} );
+			}
+		}
+	} );
+
+	Object.entries( originalVariables ).forEach( ( [ id, variable ] ) => {
+		if ( isTempId( id ) || variable.deleted ) {
+			return;
+		}
+
+		const currentVariable = currentVariables[ id ];
+
+		if ( ! currentVariable || currentVariable.deleted ) {
+			operations.push( {
+				type: 'delete',
+				id,
+			} );
+		}
+	} );
+
+	return operations.filter( ( op ) => {
+		const id = op.id || op.variable?.id;
+		return id && ! ( isTempId( id ) && currentVariables[ id ]?.deleted );
+	} );
+};

package/src/components/fields/color-field.tsx

@@ -30,6 +30,7 @@ export const ColorField = ( { value, onChange, onValidationChange }: ColorFieldP
 
 	return (
 		<UnstableColorField
+			id="color-variable-field"
 			size="tiny"
 			fullWidth
 			value={ color }

package/src/components/fields/font-field.tsx

@@ -68,12 +68,13 @@ export const FontField = ( { value, onChange, onValidationChange }: FontFieldPro
 				{ ...bindPopover( fontPopoverState ) }
 			>
 				<ItemSelector
+					id="font-family-variables-selector"
 					itemsList={ mapFontSubs }
 					selectedItem={ fontFamily }
 					onItemChange={ handleFontFamilyChange }
 					onClose={ fontPopoverState.close }
 					sectionWidth={ sectionWidth }
-					title={ __( 'Font Family', 'elementor' ) }
+					title={ __( 'Font family', 'elementor' ) }
 					itemStyle={ ( item ) => ( { fontFamily: item.value } ) }
 					onDebounce={ enqueueFont }
 					icon={ TextIcon as React.ElementType< { fontSize: string } > }

package/src/components/fields/label-field.tsx

@@ -1,8 +1,10 @@
 import * as React from 'react';
-import { useState } from 'react';
+import { useRef, useState } from 'react';
+import { WarningInfotip } from '@elementor/editor-ui';
 import { TextField, type TextFieldProps } from '@elementor/ui';
 
-import { validateLabel, VARIABLE_LABEL_MAX_LENGTH } from '../../utils/validations';
+import { type TVariablesList } from '../../storage';
+import { labelHint, validateLabel, VARIABLE_LABEL_MAX_LENGTH } from '../../utils/validations';
 function isLabelEqual( a: string, b: string ) {
 	return a.trim().toLowerCase() === b.trim().toLowerCase();
 }
@@ -21,7 +23,7 @@ export const useLabelError = ( initialError?: LabelErrorProps ) => {
 	};
 };
 
-type LabelFieldProps = {
+export type LabelFieldProps = {
 	value: string;
 	error?: LabelErrorProps;
 	onChange: ( value: string ) => void;
@@ -29,6 +31,9 @@ type LabelFieldProps = {
 	onErrorChange?: ( errorMsg: string ) => void;
 	size?: TextFieldProps[ 'size' ];
 	focusOnShow?: boolean;
+	selectOnShow?: boolean;
+	showWarningInfotip?: boolean;
+	variables?: TVariablesList;
 };
 
 export const LabelField = ( {
@@ -39,14 +44,19 @@ export const LabelField = ( {
 	onErrorChange,
 	size = 'tiny',
 	focusOnShow = false,
+	selectOnShow = false,
+	showWarningInfotip = false,
+	variables,
 }: LabelFieldProps ) => {
 	const [ label, setLabel ] = useState( value );
 	const [ errorMessage, setErrorMessage ] = useState( '' );
 
+	const fieldRef = useRef< HTMLElement >( null );
+
 	const handleChange = ( newValue: string ) => {
 		setLabel( newValue );
 
-		const errorMsg = validateLabel( newValue );
+		const errorMsg = validateLabel( newValue, variables );
 
 		setErrorMessage( errorMsg );
 		onErrorChange?.( errorMsg );
@@ -59,17 +69,43 @@ export const LabelField = ( {
 		errorMsg = error.message;
 	}
 
-	return (
+	const hintMsg = ! errorMsg ? labelHint( label ) : '';
+
+	const textField = (
 		<TextField
+			ref={ fieldRef }
 			id={ id }
 			size={ size }
 			fullWidth
 			value={ label }
 			error={ !! errorMsg }
 			onChange={ ( e: React.ChangeEvent< HTMLInputElement > ) => handleChange( e.target.value ) }
-			inputProps={ { maxLength: VARIABLE_LABEL_MAX_LENGTH } }
+			inputProps={ {
+				maxLength: VARIABLE_LABEL_MAX_LENGTH,
+				...( selectOnShow && { onFocus: ( e: React.FocusEvent< HTMLInputElement > ) => e.target.select() } ),
+				'aria-label': 'Name',
+			} }
 			// eslint-disable-next-line jsx-a11y/no-autofocus
 			autoFocus={ focusOnShow }
 		/>
 	);
+
+	if ( showWarningInfotip ) {
+		const tooltipWidth = Math.max( 240, fieldRef.current?.getBoundingClientRect().width ?? 240 );
+
+		return (
+			<WarningInfotip
+				open={ Boolean( errorMsg || hintMsg ) }
+				text={ errorMsg || hintMsg }
+				placement="bottom-start"
+				width={ tooltipWidth }
+				offset={ [ 0, -15 ] }
+				{ ...( hintMsg && { hasError: false } ) }
+			>
+				{ textField }
+			</WarningInfotip>
+		);
+	}
+
+	return textField;
 };

package/src/components/ui/deleted-variable-alert.tsx

@@ -1,6 +1,5 @@
 import * as React from 'react';
-import { useSectionWidth } from '@elementor/editor-editing-panel';
-import { Alert, AlertAction, AlertTitle, ClickAwayListener } from '@elementor/ui';
+import { Alert, AlertAction, AlertTitle, ClickAwayListener, Typography } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
 type DeletedVariableAlertProps = {
@@ -11,8 +10,6 @@ type DeletedVariableAlertProps = {
 };
 
 export const DeletedVariableAlert = ( { onClose, onUnlink, onRestore, label }: DeletedVariableAlertProps ) => {
-	const sectionWidth = useSectionWidth();
-
 	return (
 		<ClickAwayListener onClickAway={ onClose }>
 			<Alert
@@ -33,14 +30,21 @@ export const DeletedVariableAlert = ( { onClose, onUnlink, onRestore, label }: D
 						) }
 					</>
 				}
-				sx={ { width: sectionWidth } }
+				sx={ { maxWidth: 300 } }
 			>
 				<AlertTitle>{ __( 'Deleted variable', 'elementor' ) }</AlertTitle>
-				{ __( 'The variable', 'elementor' ) } &apos;{ label }&apos;{ ' ' }
-				{ __(
-					'has been deleted, but it is still referenced in this location. You may restore the variable or unlink it to assign a different value.',
-					'elementor'
-				) }
+				<Typography variant="body2" color="textPrimary">
+					{ __( 'The variable', 'elementor' ) }
+					&nbsp;&apos;
+					<Typography variant="body2" component="span" sx={ { lineBreak: 'anywhere' } }>
+						{ label }
+					</Typography>
+					&apos;&nbsp;
+					{ __(
+						'has been deleted, but it is still referenced in this location. You may restore the variable or unlink it to assign a different value.',
+						'elementor'
+					) }
+				</Typography>
 			</Alert>
 		</ClickAwayListener>
 	);

package/src/components/ui/{no-variables.tsx → empty-state.tsx}

@@ -6,33 +6,28 @@ import { usePermissions } from '../../hooks/use-permissions';
 
 type Props = {
 	icon?: React.ReactNode;
-	title?: string;
+	title: string;
+	message: string;
 	onAdd?: () => void;
 };
 
-export const NoVariables = ( { icon, title, onAdd }: Props ) => {
+export const EmptyState = ( { icon, title, message, onAdd }: Props ) => {
 	const canAdd = usePermissions().canAdd();
 
 	return (
 		<Stack
 			gap={ 1 }
 			alignItems="center"
-			justifyContent="center"
+			justifyContent="flex-start"
 			height="100%"
 			color="text.secondary"
-			sx={ { p: 2.5, pb: 5.5 } }
+			sx={ { p: 2.5, pt: 8, pb: 5.5 } }
 		>
 			{ icon }
 
 			{ canAdd ? (
 				<>
-					<NoVariablesContent
-						title={ title || __( 'Create your first variable', 'elementor' ) }
-						message={ __(
-							'Variables are saved attributes that you can apply anywhere on your site.',
-							'elementor'
-						) }
-					/>
+					<Content title={ title } message={ message } />
 					{ onAdd && (
 						<Button variant="outlined" color="secondary" size="small" onClick={ onAdd }>
 							{ __( 'Create a variable', 'elementor' ) }
@@ -40,7 +35,7 @@ export const NoVariables = ( { icon, title, onAdd }: Props ) => {
 					) }
 				</>
 			) : (
-				<NoVariablesContent
+				<Content
 					title={ __( 'There are no variables', 'elementor' ) }
 					message={ __( 'With your current role, you can only connect and detach variables.', 'elementor' ) }
 				/>
@@ -54,7 +49,7 @@ type NoVariablesContentProps = {
 	message: string;
 };
 
-function NoVariablesContent( { title, message }: NoVariablesContentProps ) {
+function Content( { title, message }: NoVariablesContentProps ) {
 	return (
 		<>
 			<Typography align="center" variant="subtitle2">

package/src/components/ui/menu-item-content.tsx

@@ -1,10 +1,11 @@
 import * as React from 'react';
 import { EllipsisWithTooltip, type VirtualizedItem } from '@elementor/editor-ui';
 import { EditIcon } from '@elementor/icons';
-import { Box, IconButton, ListItemIcon, Typography } from '@elementor/ui';
+import { Box, IconButton, ListItemIcon, Tooltip, Typography } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
 const SIZE = 'tiny';
+const EDIT_LABEL = __( 'Edit variable', 'elementor' );
 
 export const MenuItemContent = < T, V extends string >( { item }: { item: VirtualizedItem< T, V > } ) => {
 	const onEdit = item.onEdit as ( ( value: V ) => void ) | undefined;
@@ -41,16 +42,18 @@ export const MenuItemContent = < T, V extends string >( { item }: { item: Virtua
 				) }
 			</Box>
 			{ !! onEdit && (
-				<IconButton
-					sx={ { mx: 1, opacity: '0' } }
-					onClick={ ( e: React.MouseEvent< HTMLButtonElement > ) => {
-						e.stopPropagation();
-						onEdit( item.value );
-					} }
-					aria-label={ __( 'Edit', 'elementor' ) }
-				>
-					<EditIcon color="action" fontSize={ SIZE } />
-				</IconButton>
+				<Tooltip placement="top" title={ EDIT_LABEL }>
+					<IconButton
+						sx={ { mx: 1, opacity: '0' } }
+						onClick={ ( e: React.MouseEvent< HTMLButtonElement > ) => {
+							e.stopPropagation();
+							onEdit( item.value );
+						} }
+						aria-label={ EDIT_LABEL }
+					>
+						<EditIcon color="action" fontSize={ SIZE } />
+					</IconButton>
+				</Tooltip>
 			) }
 		</>
 	);

package/src/components/ui/mismatch-variable-alert.tsx

@@ -1,6 +1,5 @@
 import * as React from 'react';
-import { useSectionWidth } from '@elementor/editor-editing-panel';
-import { Alert, AlertAction, AlertTitle, ClickAwayListener } from '@elementor/ui';
+import { Alert, AlertAction, AlertTitle, ClickAwayListener, Typography } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
 type AlertProps = {
@@ -22,8 +21,6 @@ const i18n = {
 };
 
 export const MismatchVariableAlert = ( { onClose, onClear, triggerSelect }: AlertProps ) => {
-	const sectionWidth = useSectionWidth();
-
 	return (
 		<ClickAwayListener onClickAway={ onClose }>
 			<Alert
@@ -44,13 +41,12 @@ export const MismatchVariableAlert = ( { onClose, onClear, triggerSelect }: Aler
 						) }
 					</>
 				}
-				sx={ {
-					width: sectionWidth,
-					minWidth: 300,
-				} }
+				sx={ { maxWidth: 300 } }
 			>
 				<AlertTitle>{ i18n.title }</AlertTitle>
-				{ i18n.message }
+				<Typography variant="body2" color="textPrimary">
+					{ i18n.message }
+				</Typography>
 			</Alert>
 		</ClickAwayListener>
 	);

package/src/components/ui/missing-variable-alert.tsx

@@ -1,6 +1,5 @@
 import * as React from 'react';
-import { useSectionWidth } from '@elementor/editor-editing-panel';
-import { Alert, AlertAction, AlertTitle, ClickAwayListener } from '@elementor/ui';
+import { Alert, AlertAction, AlertTitle, ClickAwayListener, Typography } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
 type MissingVariableAlertProps = {
@@ -9,8 +8,6 @@ type MissingVariableAlertProps = {
 };
 
 export const MissingVariableAlert = ( { onClose, onClear }: MissingVariableAlertProps ) => {
-	const sectionWidth = useSectionWidth();
-
 	return (
 		<ClickAwayListener onClickAway={ onClose }>
 			<Alert
@@ -26,13 +23,15 @@ export const MissingVariableAlert = ( { onClose, onClear }: MissingVariableAlert
 						) }
 					</>
 				}
-				sx={ { width: sectionWidth } }
+				sx={ { maxWidth: 300 } }
 			>
 				<AlertTitle>{ __( 'This variable is missing', 'elementor' ) }</AlertTitle>
-				{ __(
-					'It may have been deleted. Try clearing this field and select a different value or variable.',
-					'elementor'
-				) }
+				<Typography variant="body2" color="textPrimary">
+					{ __(
+						'It may have been deleted. Try clearing this field and select a different value or variable.',
+						'elementor'
+					) }
+				</Typography>
 			</Alert>
 		</ClickAwayListener>
 	);

package/src/components/ui/no-search-results.tsx

@@ -14,10 +14,9 @@ export const NoSearchResults = ( { searchValue, onClear, icon }: Props ) => {
 			gap={ 1 }
 			alignItems="center"
 			justifyContent="center"
-			height="100%"
 			p={ 2.5 }
 			color="text.secondary"
-			sx={ { pb: 3.5 } }
+			sx={ { pb: 3.5, pt: 8 } }
 		>
 			{ icon }
 			<Typography align="center" variant="subtitle2">

package/src/components/ui/tags/assigned-tag.tsx

@@ -4,6 +4,7 @@ import { Box, IconButton, Stack, Tooltip, Typography, UnstableTag as Tag, type U
 import { __ } from '@wordpress/i18n';
 
 export const SIZE = 'tiny';
+const UNLINK_LABEL = __( 'Unlink variable', 'elementor' );
 
 interface VariableTagProps extends UnstableTagProps {
 	onUnlink?: () => void;
@@ -14,9 +15,11 @@ export const AssignedTag = ( { startIcon, label, onUnlink, ...props }: VariableT
 
 	if ( onUnlink ) {
 		actions.push(
-			<IconButton key="unlink" size={ SIZE } onClick={ onUnlink } aria-label={ __( 'Unlink', 'elementor' ) }>
-				<DetachIcon fontSize={ SIZE } />
-			</IconButton>
+			<Tooltip key="unlink" title={ UNLINK_LABEL } placement="bottom">
+				<IconButton size={ SIZE } onClick={ onUnlink } aria-label={ UNLINK_LABEL }>
+					<DetachIcon fontSize={ SIZE } />
+				</IconButton>
+			</Tooltip>
 		);
 	}
 

package/src/components/ui/tags/warning-variable-tag.tsx

@@ -0,0 +1,44 @@
+import * as React from 'react';
+import { AlertTriangleFilledIcon } from '@elementor/icons';
+import { Box, Chip, type ChipProps, type Theme, Tooltip, Typography } from '@elementor/ui';
+
+interface WarningVariableTagProps extends ChipProps {
+	label: string;
+	suffix?: string;
+}
+
+export const WarningVariableTag = React.forwardRef< HTMLDivElement, WarningVariableTagProps >(
+	( { label, suffix, onClick, icon, ...props }, ref ) => {
+		const displayText = suffix ? `${ label } (${ suffix })` : label;
+
+		return (
+			<Chip
+				ref={ ref }
+				size="tiny"
+				color="warning"
+				shape="rounded"
+				variant="standard"
+				onClick={ onClick }
+				icon={ <AlertTriangleFilledIcon /> }
+				label={
+					<Tooltip title={ displayText } placement="top">
+						<Box sx={ { display: 'inline-grid', minWidth: 0 } }>
+							<Typography variant="caption" noWrap sx={ { lineHeight: 1.34 } }>
+								{ displayText }
+							</Typography>
+						</Box>
+					</Tooltip>
+				}
+				sx={ {
+					height: ( theme: Theme ) => theme.spacing( 3.5 ),
+					borderRadius: ( theme: Theme ) => theme.spacing( 1 ),
+					justifyContent: 'flex-start',
+					width: '100%',
+				} }
+				{ ...props }
+			/>
+		);
+	}
+);
+
+WarningVariableTag.displayName = 'WarningVariableTag';

package/src/components/ui/variable/deleted-variable.tsx

@@ -3,16 +3,18 @@ import { useId, useRef, useState } from 'react';
 import { useBoundProp } from '@elementor/editor-controls';
 import { type PropTypeKey } from '@elementor/editor-props';
 import { Backdrop, bindPopover, Box, Infotip, Popover, usePopupState } from '@elementor/ui';
+import { __ } from '@wordpress/i18n';
 
 import { VariableTypeProvider } from '../../../context/variable-type-context';
 import { usePermissions } from '../../../hooks/use-permissions';
 import { restoreVariable } from '../../../hooks/use-prop-variables';
+import { resolveBoundPropAndSetValue } from '../../../hooks/use-variable-bound-prop';
 import { type Variable } from '../../../types';
 import { createUnlinkHandler } from '../../../utils/unlink-variable';
 import { getVariableType } from '../../../variables-registry/variable-type-registry';
 import { VariableRestore } from '../../variable-restore';
 import { DeletedVariableAlert } from '../deleted-variable-alert';
-import { DeletedTag } from '../tags/deleted-tag';
+import { WarningVariableTag } from '../tags/warning-variable-tag';
 
 type Props = {
 	variable: Variable;
@@ -27,7 +29,7 @@ type Handlers = {
 export const DeletedVariable = ( { variable, propTypeKey }: Props ) => {
 	const { propTypeUtil } = getVariableType( propTypeKey );
 
-	const { setValue } = useBoundProp();
+	const boundProp = useBoundProp();
 
 	const userPermissions = usePermissions();
 
@@ -46,7 +48,7 @@ export const DeletedVariable = ( { variable, propTypeKey }: Props ) => {
 	const handlers: Handlers = {};
 
 	if ( userPermissions.canUnlink() ) {
-		handlers.onUnlink = createUnlinkHandler( variable, propTypeKey, setValue );
+		handlers.onUnlink = createUnlinkHandler( variable, propTypeKey, boundProp.setValue );
 	}
 
 	if ( userPermissions.canRestore() ) {
@@ -56,8 +58,9 @@ export const DeletedVariable = ( { variable, propTypeKey }: Props ) => {
 			}
 
 			restoreVariable( variable.key )
-				.then( ( key ) => {
-					setValue( propTypeUtil.create( key ) );
+				.then( ( id ) => {
+					resolveBoundPropAndSetValue( propTypeUtil.create( id ), boundProp );
+
 					closeInfotip();
 				} )
 				.catch( () => {
@@ -101,7 +104,11 @@ export const DeletedVariable = ( { variable, propTypeKey }: Props ) => {
 						},
 					} }
 				>
-					<DeletedTag label={ variable.label } onClick={ toggleInfotip } />
+					<WarningVariableTag
+						label={ variable.label }
+						onClick={ toggleInfotip }
+						suffix={ __( 'deleted', 'elementor' ) }
+					/>
 				</Infotip>
 
 				<Popover