@elementor/editor-variables 0.18.0 → 3.32.0-21

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

@@ -67,8 +67,8 @@ export const deleteVariable = ( deleteId: string ) => {
 	} );
 };
 
-export const restoreVariable = ( restoreId: string ) => {
-	return service.restore( restoreId ).then( ( { id }: { id: string } ) => {
+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/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,4 +1,3 @@
-import { type AxiosResponse } from '@elementor/http-client';
 import { __ } from '@wordpress/i18n';
 
 import { apiClient } from './api';
@@ -70,10 +69,6 @@ export const service = {
 					id: variableId,
 					variable: createdVariable,
 				};
-			} )
-			.catch( ( error ) => {
-				const message = getErrorMessage( error.response );
-				throw message ? new Error( message ) : error;
 			} );
 	},
 
@@ -107,10 +102,6 @@ export const service = {
 					id: variableId,
 					variable: updatedVariable,
 				};
-			} )
-			.catch( ( error ) => {
-				const message = getErrorMessage( error.response );
-				throw message ? new Error( message ) : error;
 			} );
 	},
 
@@ -146,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;
 
@@ -185,11 +176,3 @@ 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/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,27 +1,14 @@
 import { createTransformer } from '@elementor/editor-canvas';
 
 import { service } from '../service';
+import { resolveCssVariable } from './utils/resolve-css-variable';
 
 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() ) {
+	if ( ! variables[ id ] ) {
 		return null;
 	}
 
-	if ( ! fallbackValue.trim() ) {
-		return `var(--${ name })`;
-	}
-
-	return `var(--${ name }, ${ fallbackValue })`;
+	return resolveCssVariable( id, variables[ id ] );
 } );

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 __( 'Give your variable a name.', 'elementor' );
+		return ERROR_MESSAGES.MISSING_VARIABLE_NAME;
 	}
 
 	const allowedChars = /^[a-zA-Z0-9_-]+$/;
 	if ( ! allowedChars.test( name ) ) {
-		return __( 'Use letters, numbers, dashes (-), or underscores (_) for the name.', '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 __( 'Keep names 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 __( 'Keep names 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 __( 'Add a value to complete your variable.', '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();