@elementor/editor-variables 0.3.2 → 0.4.0

package/src/components/variables-selection-popover.tsx

@@ -16,21 +16,26 @@ import {
 import { __ } from '@wordpress/i18n';
 
 import { type Variable } from '../types';
-import { ColorIndicator } from './color-indicator';
 
 type Props = {
 	selectedVariable: Variable;
 	unlinkVariable: () => void;
 	children: ( { closePopover }: { closePopover: () => void } ) => React.ReactNode;
+	startTagAdornment?: React.ReactNode;
 };
 
-export const VariablesSelectionPopover = ( { selectedVariable, unlinkVariable, children }: Props ) => {
+export const VariablesSelectionPopover = ( {
+	selectedVariable,
+	unlinkVariable,
+	startTagAdornment,
+	children,
+}: Props ) => {
 	const id = useId();
 	const popupState = usePopupState( { variant: 'popover', popupId: `elementor-variables-action-${ id }` } );
 
 	const closePopover = () => popupState.close();
 
-	const { value, label } = selectedVariable;
+	const { label } = selectedVariable;
 
 	return (
 		<Box>
@@ -40,7 +45,7 @@ export const VariablesSelectionPopover = ( { selectedVariable, unlinkVariable, c
 				{ ...bindTrigger( popupState ) }
 				startIcon={
 					<Stack spacing={ 1 } direction="row" alignItems="center">
-						<ColorIndicator size="inherit" component="span" value={ value } />
+						{ startTagAdornment }
 						<ColorFilterIcon fontSize={ 'inherit' } sx={ { mr: 1 } } />
 					</Stack>
 				}

package/src/controls/{variables-selection-control.tsx → color-variables-selection-control.tsx}

@@ -1,12 +1,13 @@
 import * as React from 'react';
 import { useBoundProp } from '@elementor/editor-controls';
 
-import { VariablesSelection } from '../components/variables-selection';
+import { ColorIndicator } from '../components/color-indicator';
+import { ColorVariablesSelection } from '../components/color-variables-selection';
 import { VariablesSelectionPopover } from '../components/variables-selection-popover';
 import { useVariable } from '../hooks/use-prop-variables';
 import { colorVariablePropTypeUtil } from '../prop-types/color-variable-prop-type';
 
-export const VariablesSelectionControl = () => {
+export const ColorVariablesSelectionControl = () => {
 	const { setValue } = useBoundProp();
 	const { value: variableValue } = useBoundProp( colorVariablePropTypeUtil );
 
@@ -14,15 +15,19 @@ export const VariablesSelectionControl = () => {
 		setValue( '' );
 	};
 
-	const selectedVariable = useVariable( variableValue );
+	const selectedVariable = useVariable( colorVariablePropTypeUtil.key, variableValue );
 
 	if ( ! selectedVariable ) {
 		throw new Error( `Global color variable ${ variableValue } not found` );
 	}
 
 	return (
-		<VariablesSelectionPopover selectedVariable={ selectedVariable } unlinkVariable={ unlinkVariable }>
-			{ ( { closePopover } ) => <VariablesSelection onSelect={ closePopover } /> }
+		<VariablesSelectionPopover
+			selectedVariable={ selectedVariable }
+			unlinkVariable={ unlinkVariable }
+			startTagAdornment={ <ColorIndicator size="inherit" component="span" value={ selectedVariable.value } /> }
+		>
+			{ ( { closePopover } ) => <ColorVariablesSelection onSelect={ closePopover } /> }
 		</VariablesSelectionPopover>
 	);
 };

package/src/controls/font-variables-selection-control.tsx

@@ -0,0 +1,28 @@
+import * as React from 'react';
+import { useBoundProp } from '@elementor/editor-controls';
+
+import { FontVariablesSelection } from '../components/font-variables-selection';
+import { VariablesSelectionPopover } from '../components/variables-selection-popover';
+import { useVariable } from '../hooks/use-prop-variables';
+import { fontVariablePropTypeUtil } from '../prop-types/font-variable-prop-type';
+
+export const FontVariablesSelectionControl = () => {
+	const { setValue } = useBoundProp();
+	const { value: variableValue } = useBoundProp( fontVariablePropTypeUtil );
+
+	const unlinkVariable = () => {
+		setValue( '' );
+	};
+
+	const selectedVariable = useVariable( fontVariablePropTypeUtil.key, variableValue );
+
+	if ( ! selectedVariable ) {
+		throw new Error( `Global font variable ${ variableValue } not found` );
+	}
+
+	return (
+		<VariablesSelectionPopover selectedVariable={ selectedVariable } unlinkVariable={ unlinkVariable }>
+			{ ( { closePopover } ) => <FontVariablesSelection onSelect={ closePopover } /> }
+		</VariablesSelectionPopover>
+	);
+};

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

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import { type PopoverActionProps, useBoundProp } from '@elementor/editor-editing-panel';
+import { ColorFilterIcon } from '@elementor/icons';
+import { __ } from '@wordpress/i18n';
+
+import { ColorVariablesSelection } from '../components/color-variables-selection';
+import { supportsColorVariables } from '../utils';
+
+export const usePropColorVariableAction = (): PopoverActionProps => {
+	const { propType } = useBoundProp();
+
+	const visible = !! propType && supportsColorVariables( propType );
+
+	return {
+		visible,
+		icon: ColorFilterIcon,
+		title: __( 'Variables', 'elementor' ),
+		popoverContent: ( { closePopover } ) => <ColorVariablesSelection onSelect={ closePopover } />,
+	};
+};

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

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import { type PopoverActionProps, useBoundProp } from '@elementor/editor-editing-panel';
+import { ColorFilterIcon } from '@elementor/icons';
+import { __ } from '@wordpress/i18n';
+
+import { FontVariablesSelection } from '../components/font-variables-selection';
+import { supportsFontVariables } from '../utils';
+
+export const usePropFontVariableAction = (): PopoverActionProps => {
+	const { propType } = useBoundProp();
+
+	const visible = !! propType && supportsFontVariables( propType );
+
+	return {
+		visible,
+		icon: ColorFilterIcon,
+		title: __( 'Variables', 'elementor' ),
+		popoverContent: ( { closePopover } ) => <FontVariablesSelection onSelect={ closePopover } />,
+	};
+};

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

@@ -1,28 +1,26 @@
 import { useMemo } from 'react';
 
-import { type Variable } from '../types';
+type Variables = Record< string, { value: string; label: string } >;
 
-export const usePropVariables = () => {
-	return useMemo( () => getVariables(), [] );
+type VariablesGroup = Record< string, Variables >;
+
+export const usePropVariables = ( propTypeKey: string ) => {
+	return useMemo( () => normalizeVariables( propTypeKey ), [ propTypeKey ] );
 };
 
-export const useVariable = ( key: string ) => {
-	if ( ! variables[ key ] ) {
+export const useVariable = ( propTypeKey: string, key: string ) => {
+	if ( ! variables[ propTypeKey ][ key ] ) {
 		return null;
 	}
 
 	return {
-		...variables[ key ],
+		...variables[ propTypeKey ][ key ],
 		key,
 	};
 };
 
-const getVariables = (): Variable[] => {
-	return normalizeVariables();
-};
-
-const normalizeVariables = () => {
-	return Object.entries( variables ).map( ( [ key, { label, value } ] ) => ( {
+const normalizeVariables = ( propTypeKey: string ) => {
+	return Object.entries( variables[ propTypeKey ] ).map( ( [ key, { label, value } ] ) => ( {
 		key,
 		label,
 		value,
@@ -30,46 +28,4 @@ const normalizeVariables = () => {
 };
 
 // @ts-expect-error the temporary solution to get the list of variables from the server
-const variables: Record< string, { value: string; label: string } > = window?.ElementorV4Variables ?? {
-	'e-gc-001': {
-		value: '#ffffff',
-		label: 'Main: white',
-	},
-	'e-gc-002': {
-		value: '#000000',
-		label: 'Main: black',
-	},
-	'e-gc-a01': {
-		value: '#FF0000',
-		label: 'Danger: red',
-	},
-	'e-gc-a02': {
-		value: '#0000FF',
-		label: 'Informative: blue',
-	},
-	'e-gc-a03': {
-		value: '#FF7BE5',
-		label: 'Elementor: pint',
-	},
-	'e-gc-a04': {
-		value: '#808080',
-		label: 'Gray: background',
-	},
-
-	'e-gc-b01': {
-		value: '#213555',
-		label: 'Navy: primary',
-	},
-	'e-gc-b02': {
-		value: '#3E5879',
-		label: 'Navy: secondary',
-	},
-	'e-gc-b03': {
-		value: '#D8C4B6',
-		label: 'Navy: light',
-	},
-	'e-gc-b04': {
-		value: '#F5EFE7',
-		label: 'Navy long text variable name: background',
-	},
-};
+const variables: VariablesGroup = window?.ElementorV4Variables;

package/src/init-color-variables.ts

@@ -0,0 +1,24 @@
+import { styleTransformersRegistry } from '@elementor/editor-canvas';
+import { controlActionsMenu, registerControlReplacement } from '@elementor/editor-editing-panel';
+
+import { ColorVariablesSelectionControl } from './controls/color-variables-selection-control';
+import { usePropColorVariableAction } from './hooks/use-prop-color-variable-action';
+import { colorVariablePropTypeUtil } from './prop-types/color-variable-prop-type';
+import { variableTransformer } from './transformers/variable-transformer';
+import { hasAssignedColorVariable } from './utils';
+
+const { registerPopoverAction } = controlActionsMenu;
+
+export function initColorVariables() {
+	registerControlReplacement( {
+		component: ColorVariablesSelectionControl,
+		condition: ( { value } ) => hasAssignedColorVariable( value ),
+	} );
+
+	registerPopoverAction( {
+		id: 'color-variables',
+		useProps: usePropColorVariableAction,
+	} );
+
+	styleTransformersRegistry.register( colorVariablePropTypeUtil.key, variableTransformer );
+}

package/src/init-font-variables.ts

@@ -0,0 +1,24 @@
+import { styleTransformersRegistry } from '@elementor/editor-canvas';
+import { controlActionsMenu, registerControlReplacement } from '@elementor/editor-editing-panel';
+
+import { FontVariablesSelectionControl } from './controls/font-variables-selection-control';
+import { usePropFontVariableAction } from './hooks/use-prop-font-variable-action';
+import { fontVariablePropTypeUtil } from './prop-types/font-variable-prop-type';
+import { variableTransformer } from './transformers/variable-transformer';
+import { hasAssignedFontVariable } from './utils';
+
+const { registerPopoverAction } = controlActionsMenu;
+
+export function initFontVariables() {
+	registerControlReplacement( {
+		component: FontVariablesSelectionControl,
+		condition: ( { value } ) => hasAssignedFontVariable( value ),
+	} );
+
+	registerPopoverAction( {
+		id: 'font-variables',
+		useProps: usePropFontVariableAction,
+	} );
+
+	styleTransformersRegistry.register( fontVariablePropTypeUtil.key, variableTransformer );
+}

package/src/init.ts

@@ -1,24 +1,8 @@
-import { styleTransformersRegistry } from '@elementor/editor-canvas';
-import { controlActionsMenu, registerControlReplacement } from '@elementor/editor-editing-panel';
-
-import { VariablesSelectionControl } from './controls/variables-selection-control';
-import { usePropVariableAction } from './hooks/use-prop-variable-action';
-import { colorVariablePropTypeUtil } from './prop-types/color-variable-prop-type';
-import { variableTransformer } from './transformers/variable-transformer';
-import { hasAssignedVariable } from './utils';
-
-const { registerPopoverAction } = controlActionsMenu;
+import { initColorVariables } from './init-color-variables';
+import { initFontVariables } from './init-font-variables';
 
 export function init() {
-	registerControlReplacement( {
-		component: VariablesSelectionControl,
-		condition: ( { value } ) => hasAssignedVariable( value ),
-	} );
-
-	registerPopoverAction( {
-		id: 'variables',
-		useProps: usePropVariableAction,
-	} );
+	initColorVariables();
 
-	styleTransformersRegistry.register( colorVariablePropTypeUtil.key, variableTransformer );
+	initFontVariables();
 }

package/src/prop-types/font-variable-prop-type.ts

@@ -0,0 +1,4 @@
+import { createPropUtils } from '@elementor/editor-props';
+import { z } from '@elementor/schema';
+
+export const fontVariablePropTypeUtil = createPropUtils( 'global-font-variable', z.string() );

package/src/utils.ts

@@ -1,11 +1,20 @@
 import { type PropType, type PropValue } from '@elementor/editor-props';
 
 import { colorVariablePropTypeUtil } from './prop-types/color-variable-prop-type';
+import { fontVariablePropTypeUtil } from './prop-types/font-variable-prop-type';
 
-export const hasAssignedVariable = ( propValue: PropValue ): boolean => {
+export const hasAssignedColorVariable = ( propValue: PropValue ): boolean => {
 	return !! colorVariablePropTypeUtil.isValid( propValue );
 };
 
-export const supportsVariables = ( propType: PropType ): boolean => {
+export const supportsColorVariables = ( propType: PropType ): boolean => {
 	return propType.kind === 'union' && colorVariablePropTypeUtil.key in propType.prop_types;
 };
+
+export const hasAssignedFontVariable = ( propValue: PropValue ): boolean => {
+	return !! fontVariablePropTypeUtil.isValid( propValue );
+};
+
+export const supportsFontVariables = ( propType: PropType ): boolean => {
+	return propType.kind === 'union' && fontVariablePropTypeUtil.key in propType.prop_types;
+};

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

@@ -1,20 +0,0 @@
-import * as React from 'react';
-import { type PopoverActionProps, useBoundProp } from '@elementor/editor-editing-panel';
-import { ColorFilterIcon } from '@elementor/icons';
-import { __ } from '@wordpress/i18n';
-
-import { VariablesSelection } from '../components/variables-selection';
-import { supportsVariables } from '../utils';
-
-export const usePropVariableAction = (): PopoverActionProps => {
-	const { propType } = useBoundProp();
-
-	const visible = !! propType && supportsVariables( propType );
-
-	return {
-		visible,
-		icon: ColorFilterIcon,
-		title: __( 'Variables', 'elementor' ),
-		popoverContent: ( { closePopover } ) => <VariablesSelection onSelect={ closePopover } />,
-	};
-};