@elementor/editor-controls 0.14.0 → 0.16.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@elementor/editor-controls",
   "description": "This package contains the controls model and utils for the Elementor editor",
-  "version": "0.14.0",
+  "version": "0.16.0",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -40,15 +40,17 @@
     "dev": "tsup --config=../../tsup.dev.ts"
   },
   "dependencies": {
-    "@elementor/editor-props": "0.9.3",
+    "@elementor/editor-props": "0.10.0",
     "@elementor/env": "0.3.5",
-    "@elementor/http": "0.1.3",
-    "@elementor/icons": "1.31.0",
+    "@elementor/http": "0.1.4",
+    "@elementor/icons": "1.37.0",
+    "@elementor/query": "0.2.4",
     "@elementor/session": "0.1.0",
     "@elementor/ui": "1.26.0",
     "@elementor/utils": "0.4.0",
-    "@elementor/wp-media": "0.4.2",
-    "@wordpress/i18n": "^5.13.0"
+    "@elementor/wp-media": "0.5.0",
+    "@wordpress/i18n": "^5.13.0",
+    "@tanstack/react-virtual": "3.13.3"
   },
   "devDependencies": {
     "tsup": "^8.3.5"

package/src/api.ts

@@ -0,0 +1,16 @@
+import { httpService } from '@elementor/http';
+
+const ELEMENTOR_SETTING_URL = 'elementor/v1/settings';
+
+type Response< T > = { data: { value: T }; success: boolean };
+
+export const apiClient = {
+	getElementorSetting: < T >( key: string ) =>
+		httpService()
+			.get< Response< T > >( `${ ELEMENTOR_SETTING_URL }/${ key }` )
+			.then( ( res ) => formatSettingResponse( res.data ) ),
+	updateElementorSetting: < T >( key: string, value: T ) =>
+		httpService().put( `${ ELEMENTOR_SETTING_URL }/${ key }`, { value } ),
+};
+
+const formatSettingResponse = < T >( response: Response< T > ) => response.data.value;

package/src/components/repeater.tsx

@@ -9,6 +9,7 @@ import {
 	IconButton,
 	Popover,
 	Stack,
+	Tooltip,
 	Typography,
 	UnstableTag,
 	type UnstableTagProps,
@@ -200,6 +201,10 @@ const RepeaterItem = ( {
 
 	const popoverProps = bindPopover( popoverState );
 
+	const duplicateLabel = __( 'Duplicate', 'elementor' );
+	const toggleLabel = disabled ? __( 'Show', 'elementor' ) : __( 'Hide', 'elementor' );
+	const removeLabel = __( 'Remove', 'elementor' );
+
 	return (
 		<>
 			<UnstableTag
@@ -213,29 +218,21 @@ const RepeaterItem = ( {
 				startIcon={ startIcon }
 				actions={
 					<>
-						<IconButton
-							size={ SIZE }
-							onClick={ duplicateItem }
-							aria-label={ __( 'Duplicate item', 'elementor' ) }
-						>
-							<CopyIcon fontSize={ SIZE } />
-						</IconButton>
-						<IconButton
-							size={ SIZE }
-							onClick={ toggleDisableItem }
-							aria-label={
-								disabled ? __( 'Enable item', 'elementor' ) : __( 'Disable item', 'elementor' )
-							}
-						>
-							{ disabled ? <EyeOffIcon fontSize={ SIZE } /> : <EyeIcon fontSize={ SIZE } /> }
-						</IconButton>
-						<IconButton
-							size={ SIZE }
-							onClick={ removeItem }
-							aria-label={ __( 'Remove item', 'elementor' ) }
-						>
-							<XIcon fontSize={ SIZE } />
-						</IconButton>
+						<Tooltip title={ duplicateLabel } placement="top">
+							<IconButton size={ SIZE } onClick={ duplicateItem } aria-label={ duplicateLabel }>
+								<CopyIcon fontSize={ SIZE } />
+							</IconButton>
+						</Tooltip>
+						<Tooltip title={ toggleLabel } placement="top">
+							<IconButton size={ SIZE } onClick={ toggleDisableItem } aria-label={ toggleLabel }>
+								{ disabled ? <EyeOffIcon fontSize={ SIZE } /> : <EyeIcon fontSize={ SIZE } /> }
+							</IconButton>
+						</Tooltip>
+						<Tooltip title={ removeLabel } placement="top">
+							<IconButton size={ SIZE } onClick={ removeItem } aria-label={ removeLabel }>
+								<XIcon fontSize={ SIZE } />
+							</IconButton>
+						</Tooltip>
 					</>
 				}
 				sx={ { backgroundColor: 'background.paper' } }

package/src/controls/background-control/background-gradient-color-control.tsx

@@ -0,0 +1,101 @@
+import * as React from 'react';
+import {
+	backgroundGradientOverlayPropTypeUtil,
+	type BackgroundGradientOverlayPropValue,
+	type BackgroundOverlayItemPropValue,
+	colorPropTypeUtil,
+	type ColorPropValue,
+	colorStopPropTypeUtil,
+	gradientColorStopPropTypeUtil,
+	numberPropTypeUtil,
+	type NumberPropValue,
+	stringPropTypeUtil,
+	type TransformablePropValue,
+} from '@elementor/editor-props';
+import { UnstableGradientBox } from '@elementor/ui';
+
+import { useBoundProp } from '../../bound-prop-context';
+import ControlActions from '../../control-actions/control-actions';
+import { createControl } from '../../create-control';
+
+export type ColorStop = TransformablePropValue<
+	'color-stop',
+	{
+		color: ColorPropValue;
+		offset: NumberPropValue;
+	}
+>;
+
+export const BackgroundGradientColorControl = createControl( () => {
+	const { value, setValue } = useBoundProp( backgroundGradientOverlayPropTypeUtil );
+
+	const handleChange = ( newValue: BackgroundGradientOverlayPropValue[ 'value' ] ) => {
+		const transformedValue = createTransformableValue( newValue );
+
+		if ( transformedValue.positions ) {
+			transformedValue.positions = stringPropTypeUtil.create( newValue.positions.join( ' ' ) );
+		}
+
+		setValue( transformedValue );
+	};
+
+	// TODO: To support Global variables this won't be needed when we have a flexible Gradient Box
+	const createTransformableValue = ( newValue: BackgroundGradientOverlayPropValue[ 'value' ] ) => ( {
+		...newValue,
+		type: stringPropTypeUtil.create( newValue.type ),
+		angle: numberPropTypeUtil.create( newValue.angle ),
+		stops: gradientColorStopPropTypeUtil.create(
+			newValue.stops.map( ( { color, offset }: { color: string; offset: number } ) =>
+				colorStopPropTypeUtil.create( {
+					color: colorPropTypeUtil.create( color ),
+					offset: numberPropTypeUtil.create( offset ),
+				} )
+			)
+		),
+	} );
+
+	// TODO: To support Global variables this won't be needed when we have a flexible Gradient Box
+	const normalizeValue = () => {
+		if ( ! value ) {
+			return;
+		}
+
+		const { type, angle, stops, positions } = value;
+
+		return {
+			type: type.value,
+			angle: angle.value,
+			stops: stops.value.map( ( { value: { color, offset } }: ColorStop ) => ( {
+				color: color.value,
+				offset: offset.value,
+			} ) ),
+			positions: positions?.value.split( ' ' ),
+		};
+	};
+
+	return (
+		<ControlActions>
+			<UnstableGradientBox
+				sx={ { width: 'auto', padding: 1.5 } }
+				value={ normalizeValue() }
+				onChange={ handleChange }
+			/>
+		</ControlActions>
+	);
+} );
+
+export const initialBackgroundGradientOverlay: BackgroundOverlayItemPropValue =
+	backgroundGradientOverlayPropTypeUtil.create( {
+		type: stringPropTypeUtil.create( 'linear' ),
+		angle: numberPropTypeUtil.create( 180 ),
+		stops: gradientColorStopPropTypeUtil.create( [
+			colorStopPropTypeUtil.create( {
+				color: stringPropTypeUtil.create( 'var(--primary-color)' ),
+				offset: numberPropTypeUtil.create( 0 ),
+			} ),
+			colorStopPropTypeUtil.create( {
+				color: colorPropTypeUtil.create( 'rgb(255,255,255)' ),
+				offset: numberPropTypeUtil.create( 100 ),
+			} ),
+		] ),
+	} );

package/src/controls/background-control/background-overlay/background-overlay-repeater-control.tsx

@@ -17,6 +17,11 @@ import { createControl } from '../../../create-control';
 import { env } from '../../../env';
 import { ColorControl } from '../../color-control';
 import { ImageControl } from '../../image-control';
+import {
+	BackgroundGradientColorControl,
+	type ColorStop,
+	initialBackgroundGradientOverlay,
+} from '../background-gradient-color-control';
 import { BackgroundImageOverlayAttachment } from './background-image-overlay/background-image-overlay-attachment';
 import { BackgroundImageOverlayPosition } from './background-image-overlay/background-image-overlay-position';
 import { BackgroundImageOverlayRepeat } from './background-image-overlay/background-image-overlay-repeat';
@@ -93,6 +98,7 @@ const Content = () => {
 	const { getTabsProps, getTabProps, getTabPanelProps } = useBackgroundTabsHistory( {
 		image: getInitialBackgroundOverlay().value,
 		color: initialBackgroundColorOverlay.value,
+		gradient: initialBackgroundGradientOverlay.value,
 	} );
 
 	return (
@@ -100,6 +106,7 @@ const Content = () => {
 			<Box sx={ { borderBottom: 1, borderColor: 'divider' } }>
 				<Tabs { ...getTabsProps() } aria-label={ __( 'Background Overlay', 'elementor' ) }>
 					<Tab label={ __( 'Image', 'elementor' ) } { ...getTabProps( 'image' ) } />
+					<Tab label={ __( 'Gradient', 'elementor' ) } { ...getTabProps( 'gradient' ) } />
 					<Tab label={ __( 'Color', 'elementor' ) } { ...getTabProps( 'color' ) } />
 				</Tabs>
 			</Box>
@@ -108,12 +115,11 @@ const Content = () => {
 					<ImageOverlayContent />
 				</PopoverContent>
 			</TabPanel>
+			<TabPanel sx={ { p: 1.5 } } { ...getTabPanelProps( 'gradient' ) }>
+				<BackgroundGradientColorControl />
+			</TabPanel>
 			<TabPanel { ...getTabPanelProps( 'color' ) } sx={ { p: 1.5 } }>
-				<Grid container spacing={ 1 } alignItems="center">
-					<Grid item xs={ 12 }>
-						<ColorControl propTypeUtil={ backgroundColorOverlayPropTypeUtil } />
-					</Grid>
-				</Grid>
+				<ColorControl propTypeUtil={ backgroundColorOverlayPropTypeUtil } />
 			</TabPanel>
 		</Box>
 	);
@@ -125,6 +131,8 @@ const ItemIcon = ( { value }: { value: BackgroundOverlayItemPropValue } ) => {
 			return <ItemIconImage value={ value as BackgroundImageOverlay } />;
 		case 'background-color-overlay':
 			return <ItemIconColor value={ value } />;
+		case 'background-gradient-overlay':
+			return <ItemIconGradient value={ value } />;
 		default:
 			return null;
 	}
@@ -140,12 +148,20 @@ const ItemIconImage = ( { value }: { value: BackgroundImageOverlay } ) => {
 	return <CardMedia image={ imageUrl } sx={ { height: 13, width: 13, borderRadius: '4px' } } />;
 };
 
+const ItemIconGradient = ( { value }: { value: BackgroundOverlayItemPropValue } ) => {
+	const gradient = getGradientValue( value );
+
+	return <UnstableColorIndicator size="inherit" component="span" value={ gradient } />;
+};
+
 const ItemLabel = ( { value }: { value: BackgroundOverlayItemPropValue } ) => {
 	switch ( value.$$type ) {
 		case 'background-image-overlay':
 			return <ItemLabelImage value={ value as BackgroundImageOverlay } />;
 		case 'background-color-overlay':
 			return <ItemLabelColor value={ value } />;
+		case 'background-gradient-overlay':
+			return <ItemLabelGradient value={ value } />;
 		default:
 			return null;
 	}
@@ -161,6 +177,14 @@ const ItemLabelImage = ( { value }: { value: BackgroundImageOverlay } ) => {
 	return <span>{ imageTitle }</span>;
 };
 
+const ItemLabelGradient = ( { value }: { value: BackgroundOverlayItemPropValue } ) => {
+	if ( value.value.type.value === 'linear' ) {
+		return <span>{ __( 'Linear Gradient', 'elementor' ) }</span>;
+	}
+
+	return <span>{ __( 'Radial Gradient', 'elementor' ) }</span>;
+};
+
 const ImageOverlayContent = () => {
 	const propContext = useBoundProp( backgroundImageOverlayPropTypeUtil );
 
@@ -210,3 +234,17 @@ const useImage = ( image: BackgroundImageOverlay ) => {
 
 	return { imageTitle, imageUrl };
 };
+
+const getGradientValue = ( value: BackgroundOverlayItemPropValue ) => {
+	const gradient = value.value;
+
+	const stops = gradient.stops.value
+		?.map( ( { value: { color, offset } }: ColorStop ) => `${ color.value } ${ offset.value ?? 0 }%` )
+		?.join( ',' );
+
+	if ( gradient.type.value === 'linear' ) {
+		return `linear-gradient(${ gradient.angle.value }deg, ${ stops })`;
+	}
+
+	return `radial-gradient(circle at ${ gradient.positions.value }, ${ stops })`;
+};

package/src/controls/background-control/background-overlay/use-background-tabs-history.ts

@@ -1,6 +1,7 @@
 import { useRef } from 'react';
 import {
 	backgroundColorOverlayPropTypeUtil,
+	backgroundGradientOverlayPropTypeUtil,
 	backgroundImageOverlayPropTypeUtil,
 	type BackgroundOverlayItemPropValue,
 } from '@elementor/editor-props';
@@ -9,25 +10,41 @@ import { useTabs } from '@elementor/ui';
 import { useBoundProp } from '../../../bound-prop-context';
 import { type BackgroundImageOverlay } from './types';
 
-type OverlayType = 'image' | 'color';
+type OverlayType = 'image' | 'gradient' | 'color';
 
 type InitialBackgroundValues = {
 	color: BackgroundOverlayItemPropValue[ 'value' ];
 	image: BackgroundImageOverlay[ 'value' ];
+	gradient: BackgroundOverlayItemPropValue[ 'value' ];
 };
 
 export const useBackgroundTabsHistory = ( {
 	color: initialBackgroundColorOverlay,
 	image: initialBackgroundImageOverlay,
+	gradient: initialBackgroundGradientOverlay,
 }: InitialBackgroundValues ) => {
 	const { value: imageValue, setValue: setImageValue } = useBoundProp( backgroundImageOverlayPropTypeUtil );
 	const { value: colorValue, setValue: setColorValue } = useBoundProp( backgroundColorOverlayPropTypeUtil );
+	const { value: gradientValue, setValue: setGradientValue } = useBoundProp( backgroundGradientOverlayPropTypeUtil );
 
-	const { getTabsProps, getTabProps, getTabPanelProps } = useTabs< OverlayType >( colorValue ? 'color' : 'image' );
+	const getCurrentOverlayType = (): OverlayType => {
+		if ( colorValue ) {
+			return 'color';
+		}
+
+		if ( gradientValue ) {
+			return 'gradient';
+		}
+
+		return 'image';
+	};
+
+	const { getTabsProps, getTabProps, getTabPanelProps } = useTabs< OverlayType >( getCurrentOverlayType() );
 
 	const valuesHistory = useRef< InitialBackgroundValues >( {
 		image: initialBackgroundImageOverlay,
 		color: initialBackgroundColorOverlay,
+		gradient: initialBackgroundGradientOverlay,
 	} );
 
 	const saveToHistory = ( key: keyof InitialBackgroundValues, value: BackgroundOverlayItemPropValue[ 'value' ] ) => {
@@ -42,6 +59,15 @@ export const useBackgroundTabsHistory = ( {
 				setImageValue( valuesHistory.current.image );
 
 				saveToHistory( 'color', colorValue );
+				saveToHistory( 'gradient', gradientValue );
+
+				break;
+
+			case 'gradient':
+				setGradientValue( valuesHistory.current.gradient );
+
+				saveToHistory( 'color', colorValue );
+				saveToHistory( 'image', imageValue );
 
 				break;
 
@@ -49,6 +75,7 @@ export const useBackgroundTabsHistory = ( {
 				setColorValue( valuesHistory.current.color );
 
 				saveToHistory( 'image', imageValue );
+				saveToHistory( 'gradient', gradientValue );
 		}
 
 		return getTabsProps().onChange( e, tabName );

package/src/controls/equal-unequal-sizes-control.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { type ReactNode, useId, useRef } from 'react';
 import { type PropKey, type PropTypeUtil, sizePropTypeUtil, type SizePropValue } from '@elementor/editor-props';
-import { bindPopover, bindToggle, Grid, Popover, Stack, ToggleButton, usePopupState } from '@elementor/ui';
+import { bindPopover, bindToggle, Grid, Popover, Stack, ToggleButton, Tooltip, usePopupState } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
 import { PropKeyProvider, PropProvider, useBoundProp } from '../bound-prop-context';
@@ -23,6 +23,7 @@ export type EqualUnequalItems = [ Item, Item, Item, Item ];
 type Props< TMultiPropType extends string, TPropValue extends MultiSizePropValue > = {
 	label: string;
 	icon: ReactNode;
+	tooltipLabel: string;
 	items: EqualUnequalItems;
 	multiSizePropTypeUtil: PropTypeUtil< TMultiPropType, TPropValue >;
 };
@@ -44,6 +45,7 @@ const isEqualSizes = ( propValue: MultiSizePropValue, items: EqualUnequalItems )
 export function EqualUnequalSizesControl< TMultiPropType extends string, TPropValue extends MultiSizePropValue >( {
 	label,
 	icon,
+	tooltipLabel,
 	items,
 	multiSizePropTypeUtil,
 }: Props< TMultiPropType, TPropValue > ) {
@@ -104,15 +106,18 @@ export function EqualUnequalSizesControl< TMultiPropType extends string, TPropVa
 				<Grid item xs={ 6 }>
 					<Stack direction="row" alignItems="center" gap={ 1 }>
 						<SizeControl placeholder={ isMixed ? __( 'Mixed', 'elementor' ) : undefined } />
-						<ToggleButton
-							size={ 'tiny' }
-							value={ 'check' }
-							sx={ { marginLeft: 'auto' } }
-							{ ...bindToggle( popupState ) }
-							selected={ popupState.isOpen }
-						>
-							{ icon }
-						</ToggleButton>
+						<Tooltip title={ tooltipLabel } placement="top">
+							<ToggleButton
+								size={ 'tiny' }
+								value={ 'check' }
+								sx={ { marginLeft: 'auto' } }
+								{ ...bindToggle( popupState ) }
+								selected={ popupState.isOpen }
+								aria-label={ tooltipLabel }
+							>
+								{ icon }
+							</ToggleButton>
+						</Tooltip>
 					</Stack>
 				</Grid>
 			</Grid>

package/src/controls/font-family-control/enqueue-font.tsx

@@ -0,0 +1,15 @@
+type EnqueueFont = ( fontFamily: string, context?: 'preview' | 'editor' ) => void;
+
+type ExtendedWindow = Window & {
+	elementor?: {
+		helpers?: {
+			enqueueFont?: EnqueueFont;
+		};
+	};
+};
+
+export const enqueueFont: EnqueueFont = ( fontFamily, context = 'editor' ) => {
+	const extendedWindow = window as unknown as ExtendedWindow;
+
+	return extendedWindow.elementor?.helpers?.enqueueFont?.( fontFamily, context ) ?? null;
+};