@elementor/editor-controls 0.15.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.15.0",
+  "version": "0.16.0",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -40,10 +40,10 @@
     "dev": "tsup --config=../../tsup.dev.ts"
   },
   "dependencies": {
-    "@elementor/editor-props": "0.9.4",
+    "@elementor/editor-props": "0.10.0",
     "@elementor/env": "0.3.5",
     "@elementor/http": "0.1.4",
-    "@elementor/icons": "1.35.0",
+    "@elementor/icons": "1.37.0",
     "@elementor/query": "0.2.4",
     "@elementor/session": "0.1.0",
     "@elementor/ui": "1.26.0",

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/font-family-control/font-family-control.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { useEffect, useRef, useState } from 'react';
 import { stringPropTypeUtil } from '@elementor/editor-props';
-import { ChevronDownIcon, EditIcon, PhotoIcon, SearchIcon, XIcon } from '@elementor/icons';
+import { ChevronDownIcon, SearchIcon, TextIcon, XIcon } from '@elementor/icons';
 import {
 	bindPopover,
 	bindTrigger,
@@ -72,7 +72,7 @@ export const FontFamilyControl = createControl( ( { fontFamilies }: FontFamilyCo
 			>
 				<Stack>
 					<Stack direction="row" alignItems="center" pl={ 1.5 } pr={ 0.5 } py={ 1.5 }>
-						<EditIcon fontSize={ SIZE } sx={ { mr: 0.5 } } />
+						<TextIcon fontSize={ SIZE } sx={ { mr: 0.5 } } />
 						<Typography variant="subtitle2">{ __( 'Font Family', 'elementor' ) }</Typography>
 						<IconButton size={ SIZE } sx={ { ml: 'auto' } } onClick={ handleClose }>
 							<XIcon fontSize={ SIZE } />
@@ -105,24 +105,40 @@ export const FontFamilyControl = createControl( ( { fontFamilies }: FontFamilyCo
 						/>
 					) : (
 						<Box sx={ { overflowY: 'auto', height: 260, width: 220 } }>
-							<Stack alignItems="center" p={ 2.5 } gap={ 1.5 }>
-								<PhotoIcon fontSize="large" />
-								<Typography align="center" variant="caption" color="text.secondary">
-									{ __( 'Sorry, nothing matched', 'elementor' ) }
-									<br />
-									&ldquo;{ searchValue }&rdquo;.
-								</Typography>
+							<Stack alignItems="center" p={ 2.5 } gap={ 1.5 } overflow={ 'hidden' }>
+								<TextIcon fontSize="large" />
+								<Box sx={ { maxWidth: 160, overflow: 'hidden' } }>
+									<Typography align="center" variant="subtitle2" color="text.secondary">
+										{ __( 'Sorry, nothing matched', 'elementor' ) }
+									</Typography>
+									<Typography
+										variant="subtitle2"
+										color="text.secondary"
+										sx={ {
+											display: 'flex',
+											width: '100%',
+											justifyContent: 'center',
+										} }
+									>
+										<span>&ldquo;</span>
+										<span
+											style={ { maxWidth: '80%', overflow: 'hidden', textOverflow: 'ellipsis' } }
+										>
+											{ searchValue }
+										</span>
+										<span>&rdquo;.</span>
+									</Typography>
+								</Box>
 								<Typography align="center" variant="caption" color="text.secondary">
+									{ __( 'Try something else.', 'elementor' ) }
 									<Link
 										color="secondary"
 										variant="caption"
 										component="button"
 										onClick={ () => setSearchValue( '' ) }
 									>
-										{ __( 'Clear the filters', 'elementor' ) }
+										{ __( 'Clear & try again', 'elementor' ) }
 									</Link>
-									&nbsp;
-									{ __( 'and try again.', 'elementor' ) }
 								</Typography>
 							</Stack>
 						</Box>