@elementor/editor-controls 0.15.0 → 0.17.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.17.0",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -40,17 +40,19 @@
     "dev": "tsup --config=../../tsup.dev.ts"
   },
   "dependencies": {
-    "@elementor/editor-props": "0.9.4",
+    "@elementor/editor-current-user": "0.3.0",
+    "@elementor/editor-elements": "0.6.3",
+    "@elementor/editor-props": "0.11.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",
     "@elementor/utils": "0.4.0",
-    "@elementor/wp-media": "0.5.0",
-    "@wordpress/i18n": "^5.13.0",
-    "@tanstack/react-virtual": "3.13.3"
+    "@elementor/wp-media": "0.6.0",
+    "@tanstack/react-virtual": "3.13.3",
+    "@wordpress/i18n": "^5.13.0"
   },
   "devDependencies": {
     "tsup": "^8.3.5"

package/src/components/control-toggle-button-group.tsx

@@ -43,6 +43,8 @@ type Props< TValue > = {
 	  }
 );
 
+// The maximum number of buttons that can be displayed in the group
+const MAX_VISIBLE_ITEMS = 4;
 export const ControlToggleButtonGroup = < TValue, >( {
 	justify = 'end',
 	size = 'tiny',
@@ -69,6 +71,9 @@ export const ControlToggleButtonGroup = < TValue, >( {
 			exclusive={ exclusive }
 			sx={ {
 				direction: isRtl ? 'rtl /* @noflip */' : 'ltr /* @noflip */',
+				display: 'grid',
+				gridTemplateColumns: `repeat(${ items.length }, 1fr)`,
+				width: `${ ( items.length / MAX_VISIBLE_ITEMS ) * 100 }%`,
 			} }
 		>
 			{ items.map( ( { label, value: buttonValue, renderContent: Content, showTooltip } ) =>

package/src/components/enable-unfiltered-modal.tsx

@@ -0,0 +1,130 @@
+import * as React from 'react';
+import { useState } from 'react';
+import { useCurrentUserCapabilities } from '@elementor/editor-current-user';
+import {
+	Button,
+	CircularProgress,
+	Dialog,
+	DialogActions,
+	DialogContent,
+	DialogContentText,
+	DialogHeader,
+	DialogTitle,
+	Divider,
+} from '@elementor/ui';
+import { __ } from '@wordpress/i18n';
+
+import { useUpdateUnfilteredFilesUpload } from '../hooks/use-unfiltered-files-upload';
+
+type EnableUnfilteredModalProps = {
+	open: boolean;
+	onClose: ( enabled: boolean ) => void;
+};
+
+type LocalModalProps = {
+	open: boolean;
+	onClose: ( enabled: boolean ) => void;
+	isPending?: boolean;
+	isError?: boolean;
+	handleEnable: () => void;
+};
+
+const ADMIN_TITLE_TEXT = __( 'Enable Unfiltered Uploads', 'elementor' );
+const ADMIN_CONTENT_TEXT = __(
+	'Before you enable unfiltered files upload, note that such files include a security risk. Elementor does run a process to remove possible malicious code, but there is still risk involved when using such files.',
+	'elementor'
+);
+const NON_ADMIN_TITLE_TEXT = __( "Sorry, you can't upload that file yet", 'elementor' );
+const NON_ADMIN_CONTENT_TEXT = __(
+	'This is because this file type may pose a security risk. To upload them anyway, ask the site administrator to enable unfiltered file uploads.',
+	'elementor'
+);
+
+const ADMIN_FAILED_CONTENT_TEXT_PT1 = __( 'Failed to enable unfiltered files upload.', 'elementor' );
+
+const ADMIN_FAILED_CONTENT_TEXT_PT2 = __(
+	'You can try again, if the problem persists, please contact support.',
+	'elementor'
+);
+
+const WAIT_FOR_CLOSE_TIMEOUT_MS = 300;
+
+export const EnableUnfilteredModal = ( props: EnableUnfilteredModalProps ) => {
+	const { mutateAsync, isPending } = useUpdateUnfilteredFilesUpload();
+	const { canUser } = useCurrentUserCapabilities();
+	const [ isError, setIsError ] = useState( false );
+	const canManageOptions = canUser( 'manage_options' );
+
+	const onClose = ( enabled: boolean ) => {
+		props.onClose( enabled );
+		setTimeout( () => setIsError( false ), WAIT_FOR_CLOSE_TIMEOUT_MS );
+	};
+
+	const handleEnable = async () => {
+		try {
+			const response = await mutateAsync( { allowUnfilteredFilesUpload: true } );
+			if ( response?.data?.success === false ) {
+				setIsError( true );
+			} else {
+				props.onClose( true );
+			}
+		} catch {
+			setIsError( true );
+		}
+	};
+
+	const dialogProps = { ...props, isPending, handleEnable, isError, onClose };
+
+	return canManageOptions ? <AdminDialog { ...dialogProps } /> : <NonAdminDialog { ...dialogProps } />;
+};
+
+const AdminDialog = ( { open, onClose, handleEnable, isPending, isError }: LocalModalProps ) => (
+	<Dialog open={ open } maxWidth={ 'sm' } onClose={ () => onClose( false ) }>
+		<DialogHeader logo={ false }>
+			<DialogTitle>{ ADMIN_TITLE_TEXT }</DialogTitle>
+		</DialogHeader>
+		<Divider />
+		<DialogContent>
+			<DialogContentText>
+				{ isError ? (
+					<>
+						{ ADMIN_FAILED_CONTENT_TEXT_PT1 } <br /> { ADMIN_FAILED_CONTENT_TEXT_PT2 }
+					</>
+				) : (
+					ADMIN_CONTENT_TEXT
+				) }
+			</DialogContentText>
+		</DialogContent>
+		<DialogActions>
+			<Button size={ 'medium' } color="secondary" onClick={ () => onClose( false ) }>
+				{ __( 'Cancel', 'elementor' ) }
+			</Button>
+			<Button
+				size={ 'medium' }
+				onClick={ () => handleEnable() }
+				variant="contained"
+				color="primary"
+				disabled={ isPending }
+			>
+				{ isPending ? <CircularProgress size={ 24 } /> : __( 'Enable', 'elementor' ) }
+			</Button>
+		</DialogActions>
+	</Dialog>
+);
+
+const NonAdminDialog = ( { open, onClose }: LocalModalProps ) => (
+	<Dialog open={ open } maxWidth={ 'sm' } onClose={ () => onClose( false ) }>
+		<DialogHeader logo={ false }>
+			<DialogTitle>{ NON_ADMIN_TITLE_TEXT }</DialogTitle>
+		</DialogHeader>
+		<Divider />
+		<DialogContent>
+			<DialogContentText>{ NON_ADMIN_CONTENT_TEXT }</DialogContentText>
+		</DialogContent>
+		<DialogActions>
+			<Button size={ 'medium' } onClick={ () => onClose( false ) } variant="contained" color="primary">
+				{ __( 'Got it', 'elementor' ) }
+			</Button>
+		</DialogActions>
+	</Dialog>
+);

package/src/components/repeater.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { useRef, useState } from 'react';
+import { useEffect, useState } from 'react';
 import { type PropKey } from '@elementor/editor-props';
 import { CopyIcon, EyeIcon, EyeOffIcon, PlusIcon, XIcon } from '@elementor/icons';
 import {
@@ -33,6 +33,7 @@ type RepeaterProps< T > = {
 	label: string;
 	values?: T[];
 	addToBottom?: boolean;
+	openOnAdd?: boolean;
 	setValues: ( newValue: T[] ) => void;
 	itemSettings: {
 		initialValues: T;
@@ -49,10 +50,13 @@ type RepeaterProps< T > = {
 export const Repeater = < T, >( {
 	label,
 	itemSettings,
+	openOnAdd = false,
 	addToBottom = false,
 	values: repeaterValues = [],
 	setValues: setRepeaterValues,
 }: RepeaterProps< Item< T > > ) => {
+	const [ openItem, setOpenItem ] = useState( -1 );
+
 	const [ items, setItems ] = useSyncExternalState( {
 		external: repeaterValues,
 		// @ts-expect-error - as long as persistWhen => true, value will never be null
@@ -77,6 +81,10 @@ export const Repeater = < T, >( {
 			setItems( [ newItem, ...items ] );
 			setUniqueKeys( [ newKey, ...uniqueKeys ] );
 		}
+
+		if ( openOnAdd ) {
+			setOpenItem( newKey );
+		}
 	};
 
 	const duplicateRepeaterItem = ( index: number ) => {
@@ -158,6 +166,7 @@ export const Repeater = < T, >( {
 									removeItem={ () => removeRepeaterItem( index ) }
 									duplicateItem={ () => duplicateRepeaterItem( index ) }
 									toggleDisableItem={ () => toggleDisableRepeaterItem( index ) }
+									openOnMount={ openOnAdd && openItem === key }
 								>
 									{ ( props ) => (
 										<itemSettings.Content { ...props } value={ value } bind={ String( index ) } />
@@ -181,25 +190,21 @@ type RepeaterItemProps = {
 	duplicateItem: () => void;
 	toggleDisableItem: () => void;
 	children: ( { anchorEl }: { anchorEl: AnchorEl } ) => React.ReactNode;
+	openOnMount: boolean;
 };
 
 const RepeaterItem = ( {
 	label,
-	bind,
 	disabled,
 	startIcon,
 	children,
 	removeItem,
 	duplicateItem,
 	toggleDisableItem,
+	openOnMount,
 }: RepeaterItemProps ) => {
-	const popupId = `repeater-popup-${ bind }`;
-	const controlRef = useRef< HTMLElement >( null );
 	const [ anchorEl, setAnchorEl ] = useState< AnchorEl >( null );
-
-	const popoverState = usePopupState( { popupId, variant: 'popover' } );
-
-	const popoverProps = bindPopover( popoverState );
+	const { popoverState, popoverProps, ref, setRef } = usePopover( openOnMount );
 
 	const duplicateLabel = __( 'Duplicate', 'elementor' );
 	const toggleLabel = disabled ? __( 'Show', 'elementor' ) : __( 'Hide', 'elementor' );
@@ -211,7 +216,7 @@ const RepeaterItem = ( {
 				label={ label }
 				showActionsOnHover
 				fullWidth
-				ref={ controlRef }
+				ref={ setRef }
 				variant="outlined"
 				aria-label={ __( 'Open item', 'elementor' ) }
 				{ ...bindTrigger( popoverState ) }
@@ -242,14 +247,38 @@ const RepeaterItem = ( {
 				slotProps={ {
 					paper: {
 						ref: setAnchorEl,
-						sx: { mt: 0.5, width: controlRef.current?.getBoundingClientRect().width },
+						sx: { mt: 0.5, width: ref?.getBoundingClientRect().width },
 					},
 				} }
 				anchorOrigin={ { vertical: 'bottom', horizontal: 'left' } }
 				{ ...popoverProps }
+				anchorEl={ ref }
 			>
 				<Box>{ children( { anchorEl } ) }</Box>
 			</Popover>
 		</>
 	);
 };
+
+const usePopover = ( openOnMount: boolean ) => {
+	const [ ref, setRef ] = useState< HTMLElement | null >( null );
+
+	const popoverState = usePopupState( { variant: 'popover' } );
+
+	const popoverProps = bindPopover( popoverState );
+
+	useEffect( () => {
+		if ( openOnMount && ref ) {
+			popoverState.open( ref );
+		}
+		// eslint-disable-next-line react-compiler/react-compiler
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [ ref ] );
+
+	return {
+		popoverState,
+		ref,
+		setRef,
+		popoverProps,
+	};
+};

package/src/components/sortable.tsx

@@ -14,13 +14,8 @@ import {
 
 export const SortableProvider = < T extends number >( props: UnstableSortableProviderProps< T > ) => {
 	return (
-		<List sx={ { p: 0, m: 0 } }>
-			<UnstableSortableProvider
-				restrictAxis={ true }
-				disableDragOverlay={ false }
-				variant={ 'static' }
-				{ ...props }
-			/>
+		<List sx={ { p: 0, my: -0.5, mx: 0 } }>
+			<UnstableSortableProvider restrictAxis disableDragOverlay={ false } variant={ 'static' } { ...props } />
 		</List>
 	);
 };

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: colorPropTypeUtil.create( 'rgb(0,0,0)' ),
+				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

@@ -4,6 +4,7 @@ import {
 	backgroundImageOverlayPropTypeUtil,
 	type BackgroundOverlayItemPropValue,
 	backgroundOverlayPropTypeUtil,
+	colorPropTypeUtil,
 	type PropKey,
 } from '@elementor/editor-props';
 import { Box, CardMedia, Grid, Tab, TabPanel, Tabs, UnstableColorIndicator } from '@elementor/ui';
@@ -17,6 +18,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';
@@ -24,10 +30,13 @@ import { BackgroundImageOverlaySize } from './background-image-overlay/backgroun
 import { type BackgroundImageOverlay } from './types';
 import { useBackgroundTabsHistory } from './use-background-tabs-history';
 
-export const initialBackgroundColorOverlay: BackgroundOverlayItemPropValue = {
-	$$type: 'background-color-overlay',
-	value: '#00000033',
-};
+const DEFAULT_BACKGROUND_COLOR_OVERLAY_COLOR = '#00000033';
+
+export const initialBackgroundColorOverlay: BackgroundOverlayItemPropValue = backgroundColorOverlayPropTypeUtil.create(
+	{
+		color: colorPropTypeUtil.create( DEFAULT_BACKGROUND_COLOR_OVERLAY_COLOR ),
+	}
+);
 
 export const getInitialBackgroundOverlay = (): BackgroundOverlayItemPropValue => ( {
 	$$type: 'background-image-overlay',
@@ -67,6 +76,7 @@ export const BackgroundOverlayRepeaterControl = createControl( () => {
 	return (
 		<PropProvider propType={ propType } value={ overlayValues } setValue={ setValue }>
 			<Repeater
+				openOnAdd
 				values={ overlayValues ?? [] }
 				setValues={ setValue }
 				label={ __( 'Overlay', 'elementor' ) }
@@ -93,6 +103,7 @@ const Content = () => {
 	const { getTabsProps, getTabProps, getTabPanelProps } = useBackgroundTabsHistory( {
 		image: getInitialBackgroundOverlay().value,
 		color: initialBackgroundColorOverlay.value,
+		gradient: initialBackgroundGradientOverlay.value,
 	} );
 
 	return (
@@ -100,6 +111,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 +120,13 @@ const Content = () => {
 					<ImageOverlayContent />
 				</PopoverContent>
 			</TabPanel>
-			<TabPanel { ...getTabPanelProps( 'color' ) } sx={ { p: 1.5 } }>
-				<Grid container spacing={ 1 } alignItems="center">
-					<Grid item xs={ 12 }>
-						<ColorControl propTypeUtil={ backgroundColorOverlayPropTypeUtil } />
-					</Grid>
-				</Grid>
+			<TabPanel sx={ { p: 1.5 } } { ...getTabPanelProps( 'gradient' ) }>
+				<BackgroundGradientColorControl />
+			</TabPanel>
+			<TabPanel sx={ { p: 1.5 } } { ...getTabPanelProps( 'color' ) }>
+				<PopoverContent>
+					<ColorOverlayContent />
+				</PopoverContent>
 			</TabPanel>
 		</Box>
 	);
@@ -125,13 +138,24 @@ 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;
 	}
 };
 
-const ItemIconColor = ( { value }: { value: BackgroundOverlayItemPropValue } ) => {
-	return <UnstableColorIndicator size="inherit" component="span" value={ value.value } />;
+const extractColorFrom = ( prop: BackgroundOverlayItemPropValue ) => {
+	if ( prop?.value?.color?.value ) {
+		return prop.value.color.value;
+	}
+
+	return '';
+};
+
+const ItemIconColor = ( { value: prop }: { value: BackgroundOverlayItemPropValue } ) => {
+	const color = extractColorFrom( prop );
+	return <UnstableColorIndicator size="inherit" component="span" value={ color } />;
 };
 
 const ItemIconImage = ( { value }: { value: BackgroundImageOverlay } ) => {
@@ -140,19 +164,28 @@ 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;
 	}
 };
 
-const ItemLabelColor = ( { value }: { value: BackgroundOverlayItemPropValue } ) => {
-	return <span>{ value.value }</span>;
+const ItemLabelColor = ( { value: prop }: { value: BackgroundOverlayItemPropValue } ) => {
+	const color = extractColorFrom( prop );
+	return <span>{ color }</span>;
 };
 
 const ItemLabelImage = ( { value }: { value: BackgroundImageOverlay } ) => {
@@ -161,6 +194,25 @@ 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 ColorOverlayContent = () => {
+	const propContext = useBoundProp( backgroundColorOverlayPropTypeUtil );
+	return (
+		<PropProvider { ...propContext }>
+			<PropKeyProvider bind={ 'color' }>
+				<ColorControl />
+			</PropKeyProvider>
+		</PropProvider>
+	);
+};
+
 const ImageOverlayContent = () => {
 	const propContext = useBoundProp( backgroundImageOverlayPropTypeUtil );
 
@@ -210,3 +262,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 );