@elementor/editor-variables 0.15.0 → 0.18.0

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

@@ -1,14 +1,11 @@
 import * as React from 'react';
 import { EllipsisWithTooltip, type VirtualizedItem } from '@elementor/editor-ui';
-import { isExperimentActive } from '@elementor/editor-v1-adapters';
 import { EditIcon } from '@elementor/icons';
 import { Box, IconButton, ListItemIcon, Typography } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
 const SIZE = 'tiny';
 
-const isVersion330Active = isExperimentActive( 'e_v_3_30' );
-
 export const MenuItemContent = < T, V extends string >( { item }: { item: VirtualizedItem< T, V > } ) => {
 	const onEdit = item.onEdit as ( ( value: V ) => void ) | undefined;
 
@@ -27,8 +24,8 @@ export const MenuItemContent = < T, V extends string >( { item }: { item: Virtua
 				<EllipsisWithTooltip
 					title={ item.label || item.value }
 					as={ Typography }
-					variant={ isVersion330Active ? 'caption' : 'body2' }
-					color={ isVersion330Active ? 'text.primary' : 'text.secondary' }
+					variant="caption"
+					color="text.primary"
 					sx={ { marginTop: '1px', lineHeight: '2' } }
 					maxWidth="50%"
 				/>

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

@@ -0,0 +1,45 @@
+import * as React from 'react';
+import { DetachIcon } from '@elementor/icons';
+import { Box, IconButton, Stack, Tooltip, Typography, UnstableTag as Tag, type UnstableTagProps } from '@elementor/ui';
+import { __ } from '@wordpress/i18n';
+
+export const SIZE = 'tiny';
+
+interface VariableTagProps extends UnstableTagProps {
+	onUnlink?: () => void;
+}
+
+export const AssignedTag = ( { startIcon, label, onUnlink, ...props }: VariableTagProps ) => {
+	const actions = [];
+
+	if ( onUnlink ) {
+		actions.push(
+			<IconButton key="unlink" size={ SIZE } onClick={ onUnlink } aria-label={ __( 'Unlink', 'elementor' ) }>
+				<DetachIcon fontSize={ SIZE } />
+			</IconButton>
+		);
+	}
+
+	return (
+		<Tooltip title={ label } placement="top">
+			<Tag
+				fullWidth
+				showActionsOnHover
+				startIcon={
+					<Stack gap={ 0.5 } direction="row" alignItems="center">
+						{ startIcon }
+					</Stack>
+				}
+				label={
+					<Box sx={ { display: 'inline-grid', minWidth: 0 } }>
+						<Typography sx={ { lineHeight: 1.34 } } variant="caption" noWrap>
+							{ label }
+						</Typography>
+					</Box>
+				}
+				actions={ actions }
+				{ ...props }
+			/>
+		</Tooltip>
+	);
+};

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

@@ -0,0 +1,37 @@
+import * as React from 'react';
+import { AlertTriangleFilledIcon } from '@elementor/icons';
+import { Box, Chip, type ChipProps, type Theme, Tooltip, Typography } from '@elementor/ui';
+import { __ } from '@wordpress/i18n';
+
+export const DeletedTag = React.forwardRef< HTMLDivElement, ChipProps >( ( { label, onClick, ...props }, ref ) => {
+	return (
+		<Chip
+			ref={ ref }
+			size="tiny"
+			color="warning"
+			shape="rounded"
+			variant="standard"
+			onClick={ onClick }
+			icon={ <AlertTriangleFilledIcon /> }
+			label={
+				<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/assigned-variable.tsx

@@ -0,0 +1,70 @@
+import { useId, useRef } from 'react';
+import * as React from 'react';
+import { useBoundProp } from '@elementor/editor-controls';
+import { type PropTypeUtil } from '@elementor/editor-props';
+import { ColorFilterIcon } from '@elementor/icons';
+import { bindPopover, bindTrigger, Box, Popover, usePopupState } from '@elementor/ui';
+
+import { type Variable } from '../../../types';
+import { VariableSelectionPopover } from '../../variable-selection-popover';
+import { AssignedTag, SIZE } from '../tags/assigned-tag';
+
+type Props = {
+	variablePropTypeUtil: PropTypeUtil< string, string >;
+	fallbackPropTypeUtil: PropTypeUtil< string, string | null > | PropTypeUtil< string, string >;
+	additionalStartIcon?: React.ReactNode;
+	variable: Variable;
+};
+
+export const AssignedVariable = ( {
+	variable,
+	variablePropTypeUtil,
+	fallbackPropTypeUtil,
+	additionalStartIcon,
+}: Props ) => {
+	const { setValue } = useBoundProp();
+	const anchorRef = useRef< HTMLDivElement >( null );
+
+	const popupId = useId();
+	const popupState = usePopupState( {
+		variant: 'popover',
+		popupId: `elementor-variables-list-${ popupId }`,
+	} );
+
+	const unlinkVariable = () => {
+		setValue( fallbackPropTypeUtil.create( variable.value ) );
+	};
+
+	return (
+		<Box ref={ anchorRef }>
+			<AssignedTag
+				label={ variable.label }
+				startIcon={
+					<>
+						<ColorFilterIcon fontSize={ SIZE } />
+
+						{ additionalStartIcon }
+					</>
+				}
+				onUnlink={ unlinkVariable }
+				{ ...bindTrigger( popupState ) }
+			/>
+			<Popover
+				disableScrollLock
+				anchorEl={ anchorRef.current }
+				anchorOrigin={ { vertical: 'bottom', horizontal: 'right' } }
+				transformOrigin={ { vertical: 'top', horizontal: 'right' } }
+				PaperProps={ {
+					sx: { my: 1 },
+				} }
+				{ ...bindPopover( popupState ) }
+			>
+				<VariableSelectionPopover
+					selectedVariable={ variable }
+					closePopover={ popupState.close }
+					propTypeKey={ variablePropTypeUtil.key }
+				/>
+			</Popover>
+		</Box>
+	);
+};

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

@@ -0,0 +1,76 @@
+import * as React from 'react';
+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, 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 (
+		<>
+			{ 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

@@ -1,66 +1,39 @@
 import * as React from 'react';
-import { useId, useRef } from 'react';
 import { useBoundProp } from '@elementor/editor-controls';
 import { colorPropTypeUtil } from '@elementor/editor-props';
-import { ColorFilterIcon } from '@elementor/icons';
-import { bindPopover, bindTrigger, Box, Popover, usePopupState } from '@elementor/ui';
 
 import { ColorIndicator } from '../components/ui/color-indicator';
-import { SIZE, VariableTag } from '../components/ui/variable-tag';
-import { VariableSelectionPopover } from '../components/variable-selection-popover';
+import { AssignedVariable } from '../components/ui/variable/assigned-variable';
+import { DeletedVariable } from '../components/ui/variable/deleted-variable';
 import { useVariable } from '../hooks/use-prop-variables';
 import { colorVariablePropTypeUtil } from '../prop-types/color-variable-prop-type';
 
 export const ColorVariableControl = () => {
-	const { setValue: setColor } = useBoundProp();
 	const { value: variableValue } = useBoundProp( colorVariablePropTypeUtil );
+	const assignedVariable = useVariable( variableValue );
 
-	const anchorRef = useRef< HTMLDivElement >( null );
-
-	const popupId = useId();
-	const popupState = usePopupState( {
-		variant: 'popover',
-		popupId: `elementor-variables-list-${ popupId }`,
-	} );
-
-	const selectedVariable = useVariable( variableValue );
-	if ( ! selectedVariable ) {
+	if ( ! assignedVariable ) {
 		throw new Error( `Global color variable ${ variableValue } not found` );
 	}
 
-	const unlinkVariable = () => {
-		setColor( colorPropTypeUtil.create( selectedVariable.value ) );
-	};
+	const isVariableDeleted = assignedVariable?.deleted;
 
-	return (
-		<Box ref={ anchorRef }>
-			<VariableTag
-				label={ selectedVariable.label }
-				startIcon={
-					<>
-						<ColorFilterIcon fontSize={ SIZE } />
-						<ColorIndicator size="inherit" value={ selectedVariable.value } component="span" />
-					</>
-				}
-				onUnlink={ unlinkVariable }
-				{ ...bindTrigger( popupState ) }
+	if ( isVariableDeleted ) {
+		return (
+			<DeletedVariable
+				variable={ assignedVariable }
+				variablePropTypeUtil={ colorVariablePropTypeUtil }
+				fallbackPropTypeUtil={ colorPropTypeUtil }
 			/>
-			<Popover
-				disableScrollLock
-				anchorEl={ anchorRef.current }
-				anchorOrigin={ { vertical: 'bottom', horizontal: 'right' } }
-				transformOrigin={ { vertical: 'top', horizontal: 'right' } }
-				PaperProps={ {
-					sx: { my: 1 },
-				} }
-				{ ...bindPopover( popupState ) }
-			>
-				<VariableSelectionPopover
-					selectedVariable={ selectedVariable }
-					closePopover={ popupState.close }
-					propTypeKey={ colorVariablePropTypeUtil.key }
-				/>
-			</Popover>
-		</Box>
+		);
+	}
+
+	return (
+		<AssignedVariable
+			variable={ assignedVariable }
+			variablePropTypeUtil={ colorVariablePropTypeUtil }
+			fallbackPropTypeUtil={ colorPropTypeUtil }
+			additionalStartIcon={ <ColorIndicator size="inherit" value={ assignedVariable.value } component="span" /> }
+		/>
 	);
 };

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

@@ -1,60 +1,37 @@
 import * as React from 'react';
-import { useId, useRef } from 'react';
 import { useBoundProp } from '@elementor/editor-controls';
 import { stringPropTypeUtil } from '@elementor/editor-props';
-import { ColorFilterIcon } from '@elementor/icons';
-import { bindPopover, bindTrigger, Box, Popover, usePopupState } from '@elementor/ui';
 
-import { SIZE, VariableTag } from '../components/ui/variable-tag';
-import { VariableSelectionPopover } from '../components/variable-selection-popover';
+import { AssignedVariable } from '../components/ui/variable/assigned-variable';
+import { DeletedVariable } from '../components/ui/variable/deleted-variable';
 import { useVariable } from '../hooks/use-prop-variables';
 import { fontVariablePropTypeUtil } from '../prop-types/font-variable-prop-type';
 
 export const FontVariableControl = () => {
-	const { setValue: setFontFamily } = useBoundProp();
 	const { value: variableValue } = useBoundProp( fontVariablePropTypeUtil );
+	const assignedVariable = useVariable( variableValue );
 
-	const anchorRef = useRef< HTMLDivElement >( null );
-
-	const popupId = useId();
-	const popupState = usePopupState( {
-		variant: 'popover',
-		popupId: `elementor-variables-list-${ popupId }`,
-	} );
-
-	const selectedVariable = useVariable( variableValue );
-	if ( ! selectedVariable ) {
+	if ( ! assignedVariable ) {
 		throw new Error( `Global font variable ${ variableValue } not found` );
 	}
 
-	const unlinkVariable = () => {
-		setFontFamily( stringPropTypeUtil.create( selectedVariable.value ) );
-	};
+	const isVariableDeleted = assignedVariable?.deleted;
 
-	return (
-		<Box ref={ anchorRef }>
-			<VariableTag
-				label={ selectedVariable.label }
-				startIcon={ <ColorFilterIcon fontSize={ SIZE } /> }
-				onUnlink={ unlinkVariable }
-				{ ...bindTrigger( popupState ) }
+	if ( isVariableDeleted ) {
+		return (
+			<DeletedVariable
+				variable={ assignedVariable }
+				variablePropTypeUtil={ fontVariablePropTypeUtil }
+				fallbackPropTypeUtil={ stringPropTypeUtil }
 			/>
-			<Popover
-				disableScrollLock
-				anchorEl={ anchorRef.current }
-				anchorOrigin={ { vertical: 'bottom', horizontal: 'right' } }
-				transformOrigin={ { vertical: 'top', horizontal: 'right' } }
-				PaperProps={ {
-					sx: { my: 1 },
-				} }
-				{ ...bindPopover( popupState ) }
-			>
-				<VariableSelectionPopover
-					selectedVariable={ selectedVariable }
-					closePopover={ popupState.close }
-					propTypeKey={ fontVariablePropTypeUtil.key }
-				/>
-			</Popover>
-		</Box>
+		);
+	}
+
+	return (
+		<AssignedVariable
+			variable={ assignedVariable }
+			variablePropTypeUtil={ fontVariablePropTypeUtil }
+			fallbackPropTypeUtil={ stringPropTypeUtil }
+		/>
 	);
 };

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/init-color-variables.ts

@@ -1,32 +1,16 @@
 import { styleTransformersRegistry } from '@elementor/editor-canvas';
-import { injectIntoRepeaterItemIcon, injectIntoRepeaterItemLabel } from '@elementor/editor-controls';
 import { controlActionsMenu, registerControlReplacement } from '@elementor/editor-editing-panel';
-import { backgroundColorOverlayPropTypeUtil, type PropValue, shadowPropTypeUtil } from '@elementor/editor-props';
 
-import {
-	BackgroundRepeaterColorIndicator,
-	BackgroundRepeaterLabel,
-	BoxShadowRepeaterColorIndicator,
-} from './components/variables-repeater-item-slot';
 import { ColorVariableControl } from './controls/color-variable-control';
 import { usePropColorVariableAction } from './hooks/use-prop-color-variable-action';
 import { colorVariablePropTypeUtil } from './prop-types/color-variable-prop-type';
+import { registerRepeaterInjections } from './repeater-injections';
 import { variableTransformer } from './transformers/variable-transformer';
 import { hasAssignedColorVariable } from './utils';
 
 const { registerPopoverAction } = controlActionsMenu;
 
-const conditions = {
-	backgroundOverlay: ( { value: prop }: { value: PropValue } ) => {
-		return hasAssignedColorVariable( backgroundColorOverlayPropTypeUtil.extract( prop )?.color );
-	},
-
-	boxShadow: ( { value: prop }: { value: PropValue } ) => {
-		return hasAssignedColorVariable( shadowPropTypeUtil.extract( prop )?.color );
-	},
-};
-
-function registerControlsAndActions() {
+export function initColorVariables() {
 	registerControlReplacement( {
 		component: ColorVariableControl,
 		condition: ( { value } ) => hasAssignedColorVariable( value ),
@@ -36,37 +20,8 @@ function registerControlsAndActions() {
 		id: 'color-variables',
 		useProps: usePropColorVariableAction,
 	} );
-}
-
-function registerRepeaterItemIcons() {
-	injectIntoRepeaterItemIcon( {
-		id: 'color-variables-background-icon',
-		component: BackgroundRepeaterColorIndicator,
-		condition: conditions.backgroundOverlay,
-	} );
-
-	injectIntoRepeaterItemIcon( {
-		id: 'color-variables-icon',
-		component: BoxShadowRepeaterColorIndicator,
-		condition: conditions.boxShadow,
-	} );
-}
 
-function registerRepeaterItemLabels() {
-	injectIntoRepeaterItemLabel( {
-		id: 'color-variables-label',
-		component: BackgroundRepeaterLabel,
-		condition: conditions.backgroundOverlay,
-	} );
-}
-
-function registerStyleTransformers() {
 	styleTransformersRegistry.register( colorVariablePropTypeUtil.key, variableTransformer );
-}
 
-export function initColorVariables() {
-	registerControlsAndActions();
-	registerRepeaterItemIcons();
-	registerRepeaterItemLabels();
-	registerStyleTransformers();
+	registerRepeaterInjections();
 }

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/repeater-injections.ts

@@ -0,0 +1,35 @@
+import { injectIntoRepeaterItemIcon, injectIntoRepeaterItemLabel } from '@elementor/editor-controls';
+import { backgroundColorOverlayPropTypeUtil, type PropValue, shadowPropTypeUtil } from '@elementor/editor-props';
+
+import {
+	BackgroundRepeaterColorIndicator,
+	BackgroundRepeaterLabel,
+	BoxShadowRepeaterColorIndicator,
+} from './components/variables-repeater-item-slot';
+import { hasAssignedColorVariable } from './utils';
+
+export function registerRepeaterInjections() {
+	injectIntoRepeaterItemIcon( {
+		id: 'color-variables-background-icon',
+		component: BackgroundRepeaterColorIndicator,
+		condition: ( { value: prop }: { value: PropValue } ) => {
+			return hasAssignedColorVariable( backgroundColorOverlayPropTypeUtil.extract( prop )?.color );
+		},
+	} );
+
+	injectIntoRepeaterItemIcon( {
+		id: 'color-variables-icon',
+		component: BoxShadowRepeaterColorIndicator,
+		condition: ( { value: prop }: { value: PropValue } ) => {
+			return hasAssignedColorVariable( shadowPropTypeUtil.extract( prop )?.color );
+		},
+	} );
+
+	injectIntoRepeaterItemLabel( {
+		id: 'color-variables-label',
+		component: BackgroundRepeaterLabel,
+		condition: ( { value: prop }: { value: PropValue } ) => {
+			return hasAssignedColorVariable( backgroundColorOverlayPropTypeUtil.extract( prop )?.color );
+		},
+	} );
+}