@elementor/editor-variables 0.16.0 → 3.32.0-20

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-initial-value.ts

@@ -0,0 +1,22 @@
+import { useBoundProp } from '@elementor/editor-controls';
+
+import { hasVariableType } from '../variables-registry/variable-type-registry';
+import { useVariable } from './use-prop-variables';
+
+type PropValue = {
+	$$type: string;
+	value: string;
+};
+
+export const useInitialValue = () => {
+	const { value: initial }: { value: PropValue } = useBoundProp();
+
+	const hasAssignedVariable = hasVariableType( initial?.$$type ) && Boolean( initial?.value );
+	const variable = useVariable( hasAssignedVariable ? initial.value : '' );
+
+	if ( hasAssignedVariable ) {
+		return variable ? variable.value : '';
+	}
+
+	return initial?.value ?? '';
+};

package/src/hooks/use-permissions.ts

@@ -0,0 +1,15 @@
+import { useCurrentUserCapabilities } from '@elementor/editor-current-user';
+
+export const usePermissions = () => {
+	const { canUser } = useCurrentUserCapabilities();
+
+	return {
+		canAssign: () => canUser( 'edit_posts' ),
+		canUnlink: () => canUser( 'edit_posts' ),
+		canAdd: () => canUser( 'manage_options' ),
+		canDelete: () => canUser( 'manage_options' ),
+		canEdit: () => canUser( 'manage_options' ),
+		canRestore: () => canUser( 'manage_options' ),
+		canManageSettings: () => canUser( 'manage_options' ),
+	};
+};

package/src/hooks/use-prop-variable-action.tsx

@@ -0,0 +1,53 @@
+import * as React from 'react';
+import { type PopoverActionProps, useBoundProp } from '@elementor/editor-editing-panel';
+import { type PropType } from '@elementor/editor-props';
+import { ColorFilterIcon } from '@elementor/icons';
+import { __ } from '@wordpress/i18n';
+
+import { VariableSelectionPopover } from '../components/variable-selection-popover';
+import { trackVariableEvent } from '../utils/tracking';
+import { getVariableType } from '../variables-registry/variable-type-registry';
+
+export const usePropVariableAction = (): PopoverActionProps => {
+	const { propType, path } = useBoundProp();
+	const variable = resolveVariableFromPropType( propType );
+
+	return {
+		visible: Boolean( variable ),
+		icon: ColorFilterIcon,
+		title: __( 'Variables', 'elementor' ),
+		content: ( { close: closePopover } ) => {
+			if ( ! variable ) {
+				return null;
+			}
+
+			trackOpenVariablePopover( path, variable.variableType );
+
+			return <VariableSelectionPopover closePopover={ closePopover } propTypeKey={ variable.propTypeUtil.key } />;
+		},
+	};
+};
+
+const resolveVariableFromPropType = ( propType: PropType ) => {
+	if ( propType.kind !== 'union' ) {
+		return undefined;
+	}
+
+	for ( const key of Object.keys( propType.prop_types ) ) {
+		const variable = getVariableType( key );
+
+		if ( variable ) {
+			return variable;
+		}
+	}
+
+	return undefined;
+};
+
+const trackOpenVariablePopover = ( path: string[], variableType: string ) => {
+	trackVariableEvent( {
+		varType: variableType,
+		controlPath: path.join( '.' ),
+		action: 'open',
+	} );
+};

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

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

package/src/index.ts

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

package/src/init.ts

@@ -1,13 +1,32 @@
 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 { initColorVariables } from './init-color-variables';
-import { initFontVariables } from './init-font-variables';
+import { panel } from './components/variables-manager/variables-manager-panel';
+import { VariableControl } from './controls/variable-control';
+import { usePropVariableAction } from './hooks/use-prop-variable-action';
+import { registerVariableTypes } from './register-variable-types';
 import { StyleVariablesRenderer } from './renderers/style-variables-renderer';
+import { registerRepeaterInjections } from './repeater-injections';
 import { service as variablesService } from './service';
+import { hasVariableType } from './variables-registry/variable-type-registry';
+
+const { registerPopoverAction } = controlActionsMenu;
 
 export function init() {
-	initColorVariables();
-	initFontVariables();
+	registerVariableTypes();
+	registerRepeaterInjections();
+
+	registerControlReplacement( {
+		component: VariableControl,
+		condition: ( { value } ) => hasAssignedVariable( value ),
+	} );
+
+	registerPopoverAction( {
+		id: 'variables',
+		useProps: usePropVariableAction,
+	} );
 
 	variablesService.init();
 
@@ -15,4 +34,14 @@ export function init() {
 		id: 'canvas-style-variables-render',
 		component: StyleVariablesRenderer,
 	} );
+
+	registerPanel( panel );
+}
+
+function hasAssignedVariable( propValue: PropValue ) {
+	if ( propValue && typeof propValue === 'object' && '$$type' in propValue ) {
+		return hasVariableType( propValue.$$type );
+	}
+
+	return false;
 }

package/src/register-variable-types.tsx

@@ -0,0 +1,29 @@
+import * as React from 'react';
+import { colorPropTypeUtil, stringPropTypeUtil } from '@elementor/editor-props';
+import { BrushIcon, TextIcon } from '@elementor/icons';
+
+import { ColorField } from './components/fields/color-field';
+import { FontField } from './components/fields/font-field';
+import { ColorIndicator } from './components/ui/color-indicator';
+import { colorVariablePropTypeUtil } from './prop-types/color-variable-prop-type';
+import { fontVariablePropTypeUtil } from './prop-types/font-variable-prop-type';
+import { registerVariableType } from './variables-registry/variable-type-registry';
+
+export function registerVariableTypes() {
+	registerVariableType( {
+		valueField: ColorField,
+		icon: BrushIcon,
+		propTypeUtil: colorVariablePropTypeUtil,
+		fallbackPropTypeUtil: colorPropTypeUtil,
+		variableType: 'color',
+		startIcon: ( { value } ) => <ColorIndicator size="inherit" component="span" value={ value } />,
+	} );
+
+	registerVariableType( {
+		valueField: FontField,
+		icon: TextIcon,
+		propTypeUtil: fontVariablePropTypeUtil,
+		fallbackPropTypeUtil: stringPropTypeUtil,
+		variableType: 'font',
+	} );
+}

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

@@ -6,7 +6,7 @@ import {
 	BackgroundRepeaterLabel,
 	BoxShadowRepeaterColorIndicator,
 } from './components/variables-repeater-item-slot';
-import { hasAssignedColorVariable } from './utils';
+import { colorVariablePropTypeUtil } from './prop-types/color-variable-prop-type';
 
 export function registerRepeaterInjections() {
 	injectIntoRepeaterItemIcon( {
@@ -33,3 +33,7 @@ export function registerRepeaterInjections() {
 		},
 	} );
 }
+
+const hasAssignedColorVariable = ( propValue: PropValue ): boolean => {
+	return !! colorVariablePropTypeUtil.isValid( propValue );
+};

package/src/service.ts

@@ -1,3 +1,5 @@
+import { __ } from '@wordpress/i18n';
+
 import { apiClient } from './api';
 import { OP_RW, Storage, type TVariablesList } from './storage';
 import { styleVariablesRepository } from './style-variables-repository';
@@ -44,7 +46,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;
@@ -76,7 +79,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;
@@ -133,9 +137,9 @@ export const service = {
 			} );
 	},
 
-	restore: ( id: string ) => {
+	restore: ( id: string, label?: string, value?: string ) => {
 		return apiClient
-			.restore( id )
+			.restore( id, label, value )
 			.then( ( response ) => {
 				const { success, data: payload } = response.data;
 

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/inheritance-transformer.tsx

@@ -0,0 +1,30 @@
+import * as React from 'react';
+import { createTransformer } from '@elementor/editor-canvas';
+import { Stack, Typography } from '@elementor/ui';
+import { __ } from '@wordpress/i18n';
+
+import { ColorIndicator } from '../components/ui/color-indicator';
+import { colorVariablePropTypeUtil } from '../prop-types/color-variable-prop-type';
+import { service } from '../service';
+import { resolveCssVariable } from './utils/resolve-css-variable';
+
+export const inheritanceTransformer = createTransformer( ( id: string ) => {
+	const variables = service.variables();
+	const variable = variables[ id ];
+
+	if ( ! variable ) {
+		return <span>{ __( 'Missing variable', 'elementor' ) }</span>;
+	}
+
+	const showColorIndicator = variable.type === colorVariablePropTypeUtil.key;
+	const css = resolveCssVariable( id, variable );
+
+	return (
+		<Stack direction="row" spacing={ 0.5 } sx={ { paddingInline: '1px' } } alignItems="center">
+			{ showColorIndicator && <ColorIndicator size="inherit" value={ variable.value } /> }
+			<Typography variant="caption" overflow="hidden" whiteSpace="nowrap" textOverflow="ellipsis">
+				{ css }
+			</Typography>
+		</Stack>
+	);
+} );

package/src/transformers/utils/resolve-css-variable.ts

@@ -0,0 +1,24 @@
+import { type TVariable } from '../../storage';
+
+export const resolveCssVariable = ( id: string, variable: TVariable ) => {
+	let name = id;
+	let fallbackValue = '';
+
+	if ( variable ) {
+		fallbackValue = variable.value;
+	}
+
+	if ( variable && ! variable.deleted ) {
+		name = variable.label;
+	}
+
+	if ( ! name.trim() ) {
+		return null;
+	}
+
+	if ( ! fallbackValue.trim() ) {
+		return `var(--${ name })`;
+	}
+
+	return `var(--${ name }, ${ fallbackValue })`;
+};

package/src/transformers/variable-transformer.ts

@@ -1,9 +1,14 @@
 import { createTransformer } from '@elementor/editor-canvas';
 
-export const variableTransformer = createTransformer( ( value: string ) => {
-	if ( ! value.trim() ) {
+import { service } from '../service';
+import { resolveCssVariable } from './utils/resolve-css-variable';
+
+export const variableTransformer = createTransformer( ( id: string ) => {
+	const variables = service.variables();
+
+	if ( ! variables[ id ] ) {
 		return null;
 	}
 
-	return `var(--${ value })`;
+	return resolveCssVariable( id, variables[ id ] );
 } );

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/tracking.ts

@@ -0,0 +1,39 @@
+type VariableEventData = {
+	varType: string;
+	controlPath: string;
+	action: 'open' | 'add' | 'connect' | 'save';
+};
+
+export const trackVariableEvent = ( { varType, controlPath, action }: VariableEventData ) => {
+	const extendedWindow = window as unknown as Window & {
+		elementorCommon?: {
+			eventsManager?: {
+				dispatchEvent: ( name: string, data: Record< string, string > ) => void;
+				config?: {
+					locations: Record< string, string >;
+					secondaryLocations: Record< string, string >;
+					names: {
+						variables?: Record< string, string >;
+					};
+					triggers: Record< string, string >;
+					elements?: Record< string, string >;
+				};
+			};
+		};
+	};
+
+	const config = extendedWindow?.elementorCommon?.eventsManager?.config;
+	if ( ! config?.names?.variables?.[ action ] ) {
+		return;
+	}
+
+	const name = config.names.variables[ action ];
+	extendedWindow.elementorCommon?.eventsManager?.dispatchEvent( name, {
+		location: config.locations.variables,
+		secondaryLocation: config.secondaryLocations.variablesPopover,
+		trigger: config.triggers.click,
+		var_type: varType,
+		control_path: controlPath,
+		action_type: name,
+	} );
+};

package/src/utils/validations.ts

@@ -1,24 +1,58 @@
 import { __ } from '@wordpress/i18n';
 
+export const ERROR_MESSAGES = {
+	MISSING_VARIABLE_NAME: __( 'Give your variable a name.', 'elementor' ),
+	MISSING_VARIABLE_VALUE: __( 'Add a value to complete your variable.', 'elementor' ),
+	INVALID_CHARACTERS: __( 'Use letters, numbers, dashes (-), or underscores (_) for the name.', 'elementor' ),
+	NO_NON_SPECIAL_CHARACTER: __( 'Names have to include at least one non-special character.', 'elementor' ),
+	VARIABLE_LABEL_MAX_LENGTH: __( 'Keep names up to 50 characters.', 'elementor' ),
+	DUPLICATED_LABEL: __( 'This variable name already exists. Please choose a unique name.', 'elementor' ),
+	UNEXPECTED_ERROR: __( 'There was a glitch. Try saving your variable again.', 'elementor' ),
+} as const;
+
 export const VARIABLE_LABEL_MAX_LENGTH = 50;
 
+type ErrorResponse = {
+	response?: {
+		data?: {
+			code?: string;
+		};
+	};
+};
+
+export type MappedError = {
+	field: string;
+	message: string;
+};
+
+export const mapServerError = ( error: ErrorResponse ): MappedError | undefined => {
+	if ( error?.response?.data?.code === 'duplicated_label' ) {
+		return {
+			field: 'label',
+			message: ERROR_MESSAGES.DUPLICATED_LABEL,
+		};
+	}
+
+	return undefined;
+};
+
 export const validateLabel = ( name: string ): string => {
 	if ( ! name.trim() ) {
-		return __( 'Missing variable name.', 'elementor' );
+		return ERROR_MESSAGES.MISSING_VARIABLE_NAME;
 	}
 
 	const allowedChars = /^[a-zA-Z0-9_-]+$/;
 	if ( ! allowedChars.test( name ) ) {
-		return __( 'Names can only use letters, numbers, dashes (-) and underscores (_).', 'elementor' );
+		return ERROR_MESSAGES.INVALID_CHARACTERS;
 	}
 
 	const hasAlphanumeric = /[a-zA-Z0-9]/;
 	if ( ! hasAlphanumeric.test( name ) ) {
-		return __( 'Names have to include at least one non-special character.', 'elementor' );
+		return ERROR_MESSAGES.NO_NON_SPECIAL_CHARACTER;
 	}
 
 	if ( VARIABLE_LABEL_MAX_LENGTH < name.length ) {
-		return __( 'Variable names can contain up to 50 characters.', 'elementor' );
+		return ERROR_MESSAGES.VARIABLE_LABEL_MAX_LENGTH;
 	}
 
 	return '';
@@ -27,7 +61,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 ERROR_MESSAGES.VARIABLE_LABEL_MAX_LENGTH;
 	}
 
 	return '';
@@ -35,7 +69,7 @@ export const labelHint = ( name: string ): string => {
 
 export const validateValue = ( value: string ): string => {
 	if ( ! value.trim() ) {
-		return __( 'Missing variable value.', 'elementor' );
+		return ERROR_MESSAGES.MISSING_VARIABLE_VALUE;
 	}
 
 	return '';

package/src/variables-registry/create-variable-type-registry.ts

@@ -0,0 +1,77 @@
+import { type ForwardRefExoticComponent, type JSX, type RefAttributes } from 'react';
+import { styleTransformersRegistry } from '@elementor/editor-canvas';
+import { stylesInheritanceTransformersRegistry } from '@elementor/editor-editing-panel';
+import { type createPropUtils, type PropTypeKey, type PropTypeUtil } from '@elementor/editor-props';
+import { type SvgIconProps } from '@elementor/ui';
+
+import { inheritanceTransformer } from '../transformers/inheritance-transformer';
+import { variableTransformer } from '../transformers/variable-transformer';
+
+type ValueFieldProps = {
+	value: string;
+	onChange: ( value: string ) => void;
+};
+
+type FallbackPropTypeUtil = ReturnType< typeof createPropUtils >;
+
+type VariableTypeOptions = {
+	icon: ForwardRefExoticComponent< Omit< SvgIconProps, 'ref' > & RefAttributes< SVGSVGElement > >;
+	startIcon?: ( { value }: { value: string } ) => JSX.Element;
+	valueField: ( { value, onChange }: ValueFieldProps ) => JSX.Element;
+	variableType: string;
+	fallbackPropTypeUtil: FallbackPropTypeUtil;
+	propTypeUtil: PropTypeUtil< string, string >;
+};
+
+export type VariableTypesMap = Record< string, VariableTypeOptions >;
+
+export function createVariableTypeRegistry() {
+	const variableTypes: VariableTypesMap = {};
+
+	const registerVariableType = ( {
+		icon,
+		startIcon,
+		valueField,
+		propTypeUtil,
+		variableType,
+		fallbackPropTypeUtil,
+	}: VariableTypeOptions ) => {
+		if ( variableTypes[ propTypeUtil.key ] ) {
+			throw new Error( `Variable with key "${ propTypeUtil.key }" is already registered.` );
+		}
+
+		variableTypes[ propTypeUtil.key ] = {
+			icon,
+			startIcon,
+			valueField,
+			propTypeUtil,
+			variableType,
+			fallbackPropTypeUtil,
+		};
+
+		registerTransformer( propTypeUtil.key );
+		registerInheritanceTransformer( propTypeUtil.key );
+	};
+
+	const registerTransformer = ( key: PropTypeKey ) => {
+		styleTransformersRegistry.register( key, variableTransformer );
+	};
+
+	const registerInheritanceTransformer = ( key: PropTypeKey ) => {
+		stylesInheritanceTransformersRegistry.register( key, inheritanceTransformer );
+	};
+
+	const getVariableType = ( key: string ) => {
+		return variableTypes[ key ];
+	};
+
+	const hasVariableType = ( key: string ) => {
+		return key in variableTypes;
+	};
+
+	return {
+		registerVariableType,
+		getVariableType,
+		hasVariableType,
+	};
+}

package/src/variables-registry/variable-type-registry.ts

@@ -0,0 +1,3 @@
+import { createVariableTypeRegistry } from './create-variable-type-registry';
+
+export const { registerVariableType, getVariableType, hasVariableType } = createVariableTypeRegistry();