@elementor/editor-variables 0.16.0 → 0.18.0

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

@@ -1,26 +1,37 @@
 import * as React from 'react';
-import { ColorFilterIcon } from '@elementor/icons';
-import { Box, Typography, UnstableTag as Tag, type UnstableTagProps } from '@elementor/ui';
+import { AlertTriangleFilledIcon } from '@elementor/icons';
+import { Box, Chip, type ChipProps, type Theme, Tooltip, Typography } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
-export const DeletedTag = ( { label }: UnstableTagProps ) => {
+export const DeletedTag = React.forwardRef< HTMLDivElement, ChipProps >( ( { label, onClick, ...props }, ref ) => {
 	return (
-		<Tag
-			showActionsOnHover
-			fullWidth
+		<Chip
+			ref={ ref }
+			size="tiny"
+			color="warning"
+			shape="rounded"
+			variant="standard"
+			onClick={ onClick }
+			icon={ <AlertTriangleFilledIcon /> }
 			label={
-				<Box sx={ { display: 'inline-grid', minWidth: 0 } }>
-					<Typography sx={ { lineHeight: 1.34 } } variant="caption" noWrap>
-						{ label }
-					</Typography>
-				</Box>
-			}
-			startIcon={ <ColorFilterIcon fontSize="tiny" /> }
-			endAdornment={
-				<Typography sx={ { lineHeight: 1.34 } } variant="caption" noWrap>
-					({ __( 'deleted', 'elementor' ) })
-				</Typography>
+				<Tooltip title={ label } placement="top">
+					<Box sx={ { display: 'flex', gap: 0.5, alignItems: 'center' } }>
+						<Typography variant="caption" noWrap>
+							{ label }
+						</Typography>
+						<Typography variant="caption" noWrap sx={ { textOverflow: 'initial', overflow: 'visible' } }>
+							({ __( 'deleted', 'elementor' ) })
+						</Typography>
+					</Box>
+				</Tooltip>
 			}
+			sx={ {
+				height: ( theme: Theme ) => theme.spacing( 3.5 ),
+				borderRadius: ( theme: Theme ) => theme.spacing( 1 ),
+				justifyContent: 'flex-start',
+				width: '100%',
+			} }
+			{ ...props }
 		/>
 	);
-};
+} );

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

@@ -1,20 +1,76 @@
 import * as React from 'react';
-import { useRef } from 'react';
-import { Box } from '@elementor/ui';
+import { useState } from 'react';
+import { useBoundProp } from '@elementor/editor-controls';
+import { type PropTypeUtil } from '@elementor/editor-props';
+import { isExperimentActive } from '@elementor/editor-v1-adapters';
+import { Backdrop, Infotip } from '@elementor/ui';
 
+import { restoreVariable } from '../../../hooks/use-prop-variables';
 import { type Variable } from '../../../types';
+import { DeletedVariableAlert } from '../deleted-variable-alert';
 import { DeletedTag } from '../tags/deleted-tag';
 
+const isV331Active = isExperimentActive( 'e_v_3_31' );
+
 type Props = {
 	variable: Variable;
+	variablePropTypeUtil: PropTypeUtil< string, string >;
+	fallbackPropTypeUtil: PropTypeUtil< string, string | null > | PropTypeUtil< string, string >;
 };
 
-export const DeletedVariable = ( { variable }: Props ) => {
-	const anchorRef = useRef< HTMLDivElement >( null );
+export const DeletedVariable = ( { variable, variablePropTypeUtil, fallbackPropTypeUtil }: Props ) => {
+	const { setValue } = useBoundProp();
+	const [ showInfotip, setShowInfotip ] = useState< boolean >( false );
+
+	const toggleInfotip = () => setShowInfotip( ( prev ) => ! prev );
+
+	const closeInfotip = () => setShowInfotip( false );
+
+	const unlinkVariable = () => {
+		setValue( fallbackPropTypeUtil.create( variable.value ) );
+	};
+
+	const handleRestore = () => {
+		if ( ! variable.key ) {
+			return;
+		}
+
+		restoreVariable( variable.key ).then( ( key ) => {
+			setValue( variablePropTypeUtil.create( key ) );
+			closeInfotip();
+		} );
+	};
 
 	return (
-		<Box ref={ anchorRef }>
-			<DeletedTag label={ variable.label } />
-		</Box>
+		<>
+			{ showInfotip && <Backdrop open onClick={ closeInfotip } invisible /> }
+			<Infotip
+				color="warning"
+				placement="right-start"
+				open={ showInfotip }
+				disableHoverListener
+				onClose={ closeInfotip }
+				content={
+					<DeletedVariableAlert
+						onClose={ closeInfotip }
+						onUnlink={ unlinkVariable }
+						onRestore={ isV331Active ? handleRestore : undefined }
+						label={ variable.label }
+					/>
+				}
+				slotProps={ {
+					popper: {
+						modifiers: [
+							{
+								name: 'offset',
+								options: { offset: [ 0, 24 ] },
+							},
+						],
+					},
+				} }
+			>
+				<DeletedTag label={ variable.label } onClick={ toggleInfotip } />
+			</Infotip>
+		</>
 	);
 };

package/src/controls/color-variable-control.tsx

@@ -19,7 +19,13 @@ export const ColorVariableControl = () => {
 	const isVariableDeleted = assignedVariable?.deleted;
 
 	if ( isVariableDeleted ) {
-		return <DeletedVariable variable={ assignedVariable } />;
+		return (
+			<DeletedVariable
+				variable={ assignedVariable }
+				variablePropTypeUtil={ colorVariablePropTypeUtil }
+				fallbackPropTypeUtil={ colorPropTypeUtil }
+			/>
+		);
 	}
 
 	return (

package/src/controls/font-variable-control.tsx

@@ -18,7 +18,13 @@ export const FontVariableControl = () => {
 	const isVariableDeleted = assignedVariable?.deleted;
 
 	if ( isVariableDeleted ) {
-		return <DeletedVariable variable={ assignedVariable } />;
+		return (
+			<DeletedVariable
+				variable={ assignedVariable }
+				variablePropTypeUtil={ fontVariablePropTypeUtil }
+				fallbackPropTypeUtil={ stringPropTypeUtil }
+			/>
+		);
 	}
 
 	return (

package/src/create-style-variables-repository.ts

@@ -1,3 +1,5 @@
+import { fontVariablePropTypeUtil } from './prop-types/font-variable-prop-type';
+import { enqueueFont } from './sync/enqueue-font';
 import { type StyleVariables, type Variable } from './types';
 
 type VariablesChangeCallback = ( variables: StyleVariables ) => void;
@@ -21,16 +23,41 @@ export const createStyleVariablesRepository = () => {
 		}
 	};
 
-	const shouldUpdate = ( key: string, newValue: string ): boolean => {
-		return ! ( key in variables ) || variables[ key ] !== newValue;
+	const shouldUpdate = ( key: string, maybeUpdated: Variable ): boolean => {
+		if ( ! ( key in variables ) ) {
+			return true;
+		}
+
+		if ( variables[ key ].label !== maybeUpdated.label ) {
+			return true;
+		}
+
+		if ( variables[ key ].value !== maybeUpdated.value ) {
+			return true;
+		}
+
+		if ( ! variables[ key ]?.deleted && maybeUpdated?.deleted ) {
+			return true;
+		}
+
+		if ( variables[ key ]?.deleted && ! maybeUpdated?.deleted ) {
+			return true;
+		}
+
+		return false;
 	};
 
 	const applyUpdates = ( updatedVars: Variables ): boolean => {
 		let hasChanges = false;
 
-		for ( const [ key, { value } ] of Object.entries( updatedVars ) ) {
-			if ( shouldUpdate( key, value ) ) {
-				variables[ key ] = value;
+		for ( const [ key, variable ] of Object.entries( updatedVars ) ) {
+			if ( shouldUpdate( key, variable ) ) {
+				variables[ key ] = variable;
+
+				if ( variable.type === fontVariablePropTypeUtil.key ) {
+					fontEnqueue( variable.value );
+				}
+
 				hasChanges = true;
 			}
 		}
@@ -38,6 +65,18 @@ export const createStyleVariablesRepository = () => {
 		return hasChanges;
 	};
 
+	const fontEnqueue = ( value: string ): void => {
+		if ( ! value ) {
+			return;
+		}
+
+		try {
+			enqueueFont( value );
+		} catch {
+			// This prevents font enqueueing failures from breaking variable updates
+		}
+	};
+
 	const update = ( updatedVars: Variables ) => {
 		if ( applyUpdates( updatedVars ) ) {
 			notify();

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

@@ -66,3 +66,9 @@ export const deleteVariable = ( deleteId: string ) => {
 		return id;
 	} );
 };
+
+export const restoreVariable = ( restoreId: string ) => {
+	return service.restore( restoreId ).then( ( { id }: { id: string } ) => {
+		return id;
+	} );
+};

package/src/renderers/style-variables-renderer.tsx

@@ -5,7 +5,7 @@ import { Portal } from '@elementor/ui';
 
 import { styleVariablesRepository } from '../style-variables-repository';
 import { getCanvasIframeDocument } from '../sync/get-canvas-iframe-document';
-import { type StyleVariables } from '../types';
+import { type StyleVariables, type Variable } from '../types';
 
 const VARIABLES_WRAPPER = 'body';
 
@@ -49,8 +49,14 @@ function useStyleVariables() {
 	return variables;
 }
 
+function cssVariableDeclaration( key: string, variable: Variable ) {
+	const variableName = variable?.deleted ? key : variable.label;
+	const value = variable.value;
+
+	return `--${ variableName }:${ value };`;
+}
+
 function convertToCssVariables( variables: StyleVariables ): string {
-	return Object.entries( variables )
-		.map( ( [ key, value ] ) => `--${ key }:${ value };` )
-		.join( '' );
+	const listOfVariables = Object.entries( variables );
+	return listOfVariables.map( ( [ key, variable ] ) => cssVariableDeclaration( key, variable ) ).join( '' );
 }

package/src/service.ts

@@ -1,3 +1,6 @@
+import { type AxiosResponse } from '@elementor/http-client';
+import { __ } from '@wordpress/i18n';
+
 import { apiClient } from './api';
 import { OP_RW, Storage, type TVariablesList } from './storage';
 import { styleVariablesRepository } from './style-variables-repository';
@@ -44,7 +47,8 @@ export const service = {
 				const { success, data: payload } = response.data;
 
 				if ( ! success ) {
-					throw new Error( 'Unexpected response from server' );
+					const errorMessage = payload?.message || __( 'Unexpected response from server', 'elementor' );
+					throw new Error( errorMessage );
 				}
 
 				return payload;
@@ -66,6 +70,10 @@ export const service = {
 					id: variableId,
 					variable: createdVariable,
 				};
+			} )
+			.catch( ( error ) => {
+				const message = getErrorMessage( error.response );
+				throw message ? new Error( message ) : error;
 			} );
 	},
 
@@ -76,7 +84,8 @@ export const service = {
 				const { success, data: payload } = response.data;
 
 				if ( ! success ) {
-					throw new Error( 'Unexpected response from server' );
+					const errorMessage = payload?.message || __( 'Unexpected response from server', 'elementor' );
+					throw new Error( errorMessage );
 				}
 
 				return payload;
@@ -98,6 +107,10 @@ export const service = {
 					id: variableId,
 					variable: updatedVariable,
 				};
+			} )
+			.catch( ( error ) => {
+				const message = getErrorMessage( error.response );
+				throw message ? new Error( message ) : error;
 			} );
 	},
 
@@ -172,3 +185,11 @@ const handleWatermark = ( operation: string, newWatermark: number ) => {
 	}
 	storage.watermark( newWatermark );
 };
+
+const getErrorMessage = ( response: AxiosResponse ) => {
+	if ( response?.data?.code === 'duplicated_label' ) {
+		return __( 'This variable name already exists. Please choose a unique name.', 'elementor' );
+	}
+
+	return __( 'There was a glitch. Try saving your variable again.', 'elementor' );
+};

package/src/sync/enqueue-font.ts

@@ -0,0 +1,7 @@
+import { type CanvasExtendedWindow, type EnqueueFont } from './types';
+
+export const enqueueFont: EnqueueFont = ( fontFamily, context = 'preview' ) => {
+	const extendedWindow = window as unknown as CanvasExtendedWindow;
+
+	return extendedWindow.elementor?.helpers?.enqueueFont?.( fontFamily, context ) ?? null;
+};

package/src/sync/types.ts

@@ -1,5 +1,10 @@
+export type EnqueueFont = ( fontFamily: string, context?: 'preview' | 'editor' ) => void;
+
 export type CanvasExtendedWindow = Window & {
 	elementor?: {
 		$preview?: [ HTMLIFrameElement ];
+		helpers?: {
+			enqueueFont?: EnqueueFont;
+		};
 	};
 };

package/src/transformers/variable-transformer.ts

@@ -1,9 +1,27 @@
 import { createTransformer } from '@elementor/editor-canvas';
 
-export const variableTransformer = createTransformer( ( value: string ) => {
-	if ( ! value.trim() ) {
+import { service } from '../service';
+
+export const variableTransformer = createTransformer( ( id: string ) => {
+	const variables = service.variables();
+
+	let name = id;
+	let fallbackValue = '';
+
+	if ( variables[ id ] ) {
+		fallbackValue = variables[ id ].value;
+		if ( ! variables[ id ]?.deleted ) {
+			name = variables[ id ].label;
+		}
+	}
+
+	if ( ! name.trim() ) {
 		return null;
 	}
 
-	return `var(--${ value })`;
+	if ( ! fallbackValue.trim() ) {
+		return `var(--${ name })`;
+	}
+
+	return `var(--${ name }, ${ fallbackValue })`;
 } );

package/src/types.ts

@@ -10,7 +10,7 @@ export type Variable = {
 	deleted_at?: string;
 };
 
-export type StyleVariables = Record< string, string >;
+export type StyleVariables = Record< string, Variable >;
 
 export type ExtendedVirtualizedItem = VirtualizedItem< 'item', string > & {
 	icon: React.ReactNode;

package/src/utils/validations.ts

@@ -4,12 +4,12 @@ export const VARIABLE_LABEL_MAX_LENGTH = 50;
 
 export const validateLabel = ( name: string ): string => {
 	if ( ! name.trim() ) {
-		return __( 'Missing variable name.', 'elementor' );
+		return __( 'Give your variable a name.', 'elementor' );
 	}
 
 	const allowedChars = /^[a-zA-Z0-9_-]+$/;
 	if ( ! allowedChars.test( name ) ) {
-		return __( 'Names can only use letters, numbers, dashes (-) and underscores (_).', 'elementor' );
+		return __( 'Use letters, numbers, dashes (-), or underscores (_) for the name.', 'elementor' );
 	}
 
 	const hasAlphanumeric = /[a-zA-Z0-9]/;
@@ -18,7 +18,7 @@ export const validateLabel = ( name: string ): string => {
 	}
 
 	if ( VARIABLE_LABEL_MAX_LENGTH < name.length ) {
-		return __( 'Variable names can contain up to 50 characters.', 'elementor' );
+		return __( 'Keep names up to 50 characters.', 'elementor' );
 	}
 
 	return '';
@@ -27,7 +27,7 @@ export const validateLabel = ( name: string ): string => {
 export const labelHint = ( name: string ): string => {
 	const hintThreshold = VARIABLE_LABEL_MAX_LENGTH * 0.8 - 1;
 	if ( hintThreshold < name.length ) {
-		return __( 'Variable names can contain up to 50 characters.', 'elementor' );
+		return __( 'Keep names up to 50 characters.', 'elementor' );
 	}
 
 	return '';
@@ -35,7 +35,7 @@ export const labelHint = ( name: string ): string => {
 
 export const validateValue = ( value: string ): string => {
 	if ( ! value.trim() ) {
-		return __( 'Missing variable value.', 'elementor' );
+		return __( 'Add a value to complete your variable.', 'elementor' );
 	}
 
 	return '';