@elementor/editor-editing-panel 0.17.0 → 0.18.0

package/src/controls/control-types/color-control.tsx

@@ -1,24 +1,27 @@
 import * as React from 'react';
-import { UnstableColorPicker } from '@elementor/ui';
+import { UnstableColorPicker, UnstableColorPickerProps } from '@elementor/ui';
 import { useControl } from '../control-context';
+import ControlActions from '../control-actions/control-actions';
+import { createControl } from '../create-control';
+import { TransformablePropValue } from '../../types';
 
-export const ColorControl = () => {
-	const { value, setValue } = useControl< string >();
+export type ColorPropValue = TransformablePropValue< 'color', string >;
 
-	const handleChange = debounce( ( selectedColor: string ) => {
-		setValue( selectedColor );
-	} );
+export const ColorControl = createControl(
+	( props: Partial< Omit< UnstableColorPickerProps, 'value' | 'onChange' > > ) => {
+		const { value, setValue } = useControl< ColorPropValue >();
 
-	return <UnstableColorPicker value={ value } onChange={ handleChange }></UnstableColorPicker>;
-};
+		const handleChange = ( selectedColor: string ) => {
+			setValue( {
+				$$type: 'color',
+				value: selectedColor,
+			} );
+		};
 
-// TODO: Remove this when the color picker component sends one event per color change [DES-422].
-const debounce = < TArgs extends unknown[], TReturn >( func: ( ...args: TArgs ) => TReturn, wait = 300 ) => {
-	let timer: ReturnType< typeof setTimeout >;
-
-	return ( ...args: TArgs ) => {
-		clearTimeout( timer );
-
-		timer = setTimeout( () => func( ...args ), wait );
-	};
-};
+		return (
+			<ControlActions>
+				<UnstableColorPicker size="tiny" { ...props } value={ value?.value } onChange={ handleChange } />
+			</ControlActions>
+		);
+	}
+);

package/src/controls/control-types/image-control.tsx

@@ -1,69 +1,66 @@
 import * as React from 'react';
-import { Button, Card, CardMedia, CardOverlay } from '@elementor/ui';
-import { useControl } from '../control-context';
-import { UploadIcon } from '@elementor/icons';
+import { Grid, Stack } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
-import { useWpMediaAttachment, useWpMediaFrame } from '@elementor/wp-media';
+import { ControlContext, useControl } from '../control-context';
+import { type ImageSrc, ImageMediaControl } from './image-media-control';
+import { SettingsControl } from '../settings-control';
+import { PropValue, TransformablePropValue } from '../../types';
+import { SelectControl } from './select-control';
+import { createControl } from '../create-control';
 
-type Image = {
-	$$type: 'image';
-	value:
-		| {
-				attachmentId: number;
-				url?: never;
-		  }
-		| {
-				attachmentId?: never;
-				url: string;
-		  };
+type Image = TransformablePropValue<
+	'image',
+	{
+		src?: ImageSrc;
+		size?: string;
+	}
+>;
+
+type SetContextValue = ( v: PropValue ) => void;
+
+export type ImageControlProps = {
+	sizes: { label: string; value: string }[];
 };
 
-export const ImageControl = () => {
+export const ImageControl = createControl( ( props: ImageControlProps ) => {
 	const { value, setValue } = useControl< Image >();
-	const { data: attachment } = useWpMediaAttachment( value?.value?.attachmentId );
-	const src = attachment?.url ?? value?.value?.url;
+	const { src, size } = value?.value || {};
 
-	const { open } = useWpMediaFrame( {
-		types: [ 'image' ],
-		multiple: false,
-		selected: value?.value?.attachmentId,
-		onSelect: ( selectedAttachment ) => {
-			setValue( {
-				$$type: 'image',
-				value: {
-					attachmentId: selectedAttachment.id,
-				},
-			} );
-		},
-	} );
+	const setImageSrc = ( newValue: ImageSrc ) => {
+		setValue( {
+			$$type: 'image',
+			value: {
+				src: newValue,
+				size,
+			},
+		} );
+	};
 
-	return (
-		<Card variant="outlined">
-			<CardMedia image={ src } sx={ { height: 150 } } />
-			<CardOverlay>
-				<Button
-					color="inherit"
-					size="small"
-					variant="outlined"
-					onClick={ () => {
-						open( { mode: 'browse' } );
-					} }
-				>
-					{ __( 'Select Image', 'elementor' ) }
-				</Button>
+	const setImageSize = ( newValue: string ) => {
+		setValue( {
+			$$type: 'image',
+			value: {
+				src,
+				size: newValue,
+			},
+		} );
+	};
 
-				<Button
-					color="inherit"
-					size="small"
-					variant="text"
-					startIcon={ <UploadIcon /> }
-					onClick={ () => {
-						open( { mode: 'upload' } );
-					} }
-				>
-					{ __( 'Upload Image', 'elementor' ) }
-				</Button>
-			</CardOverlay>
-		</Card>
+	return (
+		<Stack gap={ 2 }>
+			<ControlContext.Provider value={ { setValue: setImageSrc as SetContextValue, value: src, bind: 'src' } }>
+				<ImageMediaControl />
+			</ControlContext.Provider>
+			<ControlContext.Provider value={ { setValue: setImageSize as SetContextValue, value: size, bind: 'size' } }>
+				<Grid container spacing={ 1 } alignItems="center">
+					<Grid item xs={ 6 }>
+						<SettingsControl.Label> { __( 'Image Resolution', 'elementor' ) }</SettingsControl.Label>
+					</Grid>
+					<Grid item xs={ 6 }>
+						<SelectControl options={ props.sizes } />
+					</Grid>
+				</Grid>
+			</ControlContext.Provider>
+		</Stack>
 	);
-};
+} );

package/src/controls/control-types/image-media-control.tsx

@@ -0,0 +1,73 @@
+import * as React from 'react';
+import { Button, Card, CardMedia, CardOverlay, Stack } from '@elementor/ui';
+import { UploadIcon } from '@elementor/icons';
+import { useWpMediaAttachment, useWpMediaFrame } from '@elementor/wp-media';
+import { useControl } from '../control-context';
+import { TransformablePropValue } from '../../types';
+import { __ } from '@wordpress/i18n';
+import ControlActions from '../control-actions/control-actions';
+import { createControl } from '../create-control';
+
+type ImageAttachmentID = TransformablePropValue< 'image-attachment-id', number >;
+
+type Url = TransformablePropValue< 'url', string >;
+
+export type ImageSrc = TransformablePropValue<
+	'image-src',
+	{ id: ImageAttachmentID; url: null } | { url: Url; id: null }
+>;
+
+export const ImageMediaControl = createControl( () => {
+	const { value, setValue } = useControl< ImageSrc >();
+	const { id, url } = value?.value ?? {};
+
+	const { data: attachment } = useWpMediaAttachment( id?.value || null );
+	const src = attachment?.url ?? url;
+
+	const { open } = useWpMediaFrame( {
+		types: [ 'image' ],
+		multiple: false,
+		selected: id?.value || null,
+		onSelect: ( selectedAttachment ) => {
+			setValue( {
+				$$type: 'image-src',
+				value: {
+					id: {
+						$$type: 'image-attachment-id',
+						value: selectedAttachment.id,
+					},
+					url: null,
+				},
+			} );
+		},
+	} );
+
+	return (
+		<Card variant="outlined">
+			<CardMedia image={ src } sx={ { height: 150 } } />
+			<CardOverlay>
+				<ControlActions>
+					<Stack gap={ 0.5 }>
+						<Button
+							size="tiny"
+							color="inherit"
+							variant="outlined"
+							onClick={ () => open( { mode: 'browse' } ) }
+						>
+							{ __( 'Select Image', 'elementor' ) }
+						</Button>
+						<Button
+							size="tiny"
+							variant="text"
+							color="inherit"
+							startIcon={ <UploadIcon /> }
+							onClick={ () => open( { mode: 'upload' } ) }
+						>
+							{ __( 'Upload Image', 'elementor' ) }
+						</Button>
+					</Stack>
+				</ControlActions>
+			</CardOverlay>
+		</Card>
+	);
+} );

package/src/controls/control-types/number-control.tsx

@@ -1,11 +1,13 @@
 import * as React from 'react';
 import { TextField } from '@elementor/ui';
 import { useControl } from '../control-context';
+import ControlActions from '../control-actions/control-actions';
+import { createControl } from '../create-control';
 
 const isEmptyOrNaN = ( value?: string | number ) =>
 	value === undefined || value === '' || Number.isNaN( Number( value ) );
 
-export const NumberControl = ( { placeholder }: { placeholder?: string } ) => {
+export const NumberControl = createControl( ( { placeholder }: { placeholder?: string } ) => {
 	const { value, setValue } = useControl< number | undefined >();
 
 	const handleChange = ( event: React.ChangeEvent< HTMLInputElement > ) => {
@@ -14,12 +16,14 @@ export const NumberControl = ( { placeholder }: { placeholder?: string } ) => {
 	};
 
 	return (
-		<TextField
-			size="tiny"
-			type="number"
-			value={ isEmptyOrNaN( value ) ? '' : value }
-			onChange={ handleChange }
-			placeholder={ placeholder }
-		/>
+		<ControlActions>
+			<TextField
+				size="tiny"
+				type="number"
+				value={ isEmptyOrNaN( value ) ? '' : value }
+				onChange={ handleChange }
+				placeholder={ placeholder }
+			/>
+		</ControlActions>
 	);
-};
+} );

package/src/controls/control-types/select-control.tsx

@@ -2,12 +2,14 @@ import * as React from 'react';
 import { MenuItem, Select, SelectChangeEvent } from '@elementor/ui';
 import { useControl } from '../control-context';
 import { PropValue } from '../../types';
+import ControlActions from '../control-actions/control-actions';
+import { createControl } from '../create-control';
 
 type Props< T > = {
 	options: Array< { label: string; value: T; disabled?: boolean } >;
 };
 
-export const SelectControl = < T extends PropValue >( { options }: Props< T > ) => {
+export const SelectControl = createControl( < T extends PropValue >( { options }: Props< T > ) => {
 	const { value, setValue } = useControl< T >();
 
 	const handleChange = ( event: SelectChangeEvent< T > ) => {
@@ -15,12 +17,14 @@ export const SelectControl = < T extends PropValue >( { options }: Props< T > )
 	};
 
 	return (
-		<Select size="tiny" value={ value ?? '' } onChange={ handleChange }>
-			{ options.map( ( { label, ...props } ) => (
-				<MenuItem key={ props.value } { ...props }>
-					{ label }
-				</MenuItem>
-			) ) }
-		</Select>
+		<ControlActions>
+			<Select size="tiny" value={ value ?? '' } onChange={ handleChange }>
+				{ options.map( ( { label, ...props } ) => (
+					<MenuItem key={ props.value } { ...props }>
+						{ label }
+					</MenuItem>
+				) ) }
+			</Select>
+		</ControlActions>
 	);
-};
+} );

package/src/controls/control-types/size-control.tsx

@@ -4,12 +4,14 @@ import { TransformablePropValue } from '../../types';
 import { useControl } from '../control-context';
 import { useSyncExternalState } from '../hooks/use-sync-external-state';
 import { SelectionEndAdornment, TextFieldInnerSelection } from '../components/text-field-inner-selection';
+import ControlActions from '../control-actions/control-actions';
+import { createControl } from '../create-control';
 
 export type Unit = 'px' | '%' | 'em' | 'rem' | 'vw';
 
 const defaultUnits: Unit[] = [ 'px', '%', 'em', 'rem', 'vw' ];
 
-export type SizeControlValue = TransformablePropValue< { unit: Unit; size: number } >;
+export type SizeControlValue = TransformablePropValue< 'size', { unit: Unit; size: number } >;
 
 export type SizeControlProps = {
 	placeholder?: string;
@@ -17,7 +19,7 @@ export type SizeControlProps = {
 	units?: Unit[];
 };
 
-export const SizeControl = ( { units = defaultUnits, placeholder, startIcon }: SizeControlProps ) => {
+export const SizeControl = createControl( ( { units = defaultUnits, placeholder, startIcon }: SizeControlProps ) => {
 	const { value, setValue } = useControl< SizeControlValue >();
 
 	const [ state, setState ] = useSyncExternalState< SizeControlValue >( {
@@ -53,15 +55,17 @@ export const SizeControl = ( { units = defaultUnits, placeholder, startIcon }: S
 	};
 
 	return (
-		<TextFieldInnerSelection
-			endAdornment={
-				<SelectionEndAdornment options={ units } onClick={ handleUnitChange } value={ state.value.unit } />
-			}
-			placeholder={ placeholder }
-			startAdornment={ startIcon ?? <InputAdornment position="start">{ startIcon }</InputAdornment> }
-			type="number"
-			value={ Number.isNaN( state.value.size ) ? '' : state.value.size }
-			onChange={ handleSizeChange }
-		/>
+		<ControlActions>
+			<TextFieldInnerSelection
+				endAdornment={
+					<SelectionEndAdornment options={ units } onClick={ handleUnitChange } value={ state.value.unit } />
+				}
+				placeholder={ placeholder }
+				startAdornment={ startIcon ?? <InputAdornment position="start">{ startIcon }</InputAdornment> }
+				type="number"
+				value={ Number.isNaN( state.value.size ) ? '' : state.value.size }
+				onChange={ handleSizeChange }
+			/>
+		</ControlActions>
 	);
-};
+} );

package/src/controls/control-types/text-area-control.tsx

@@ -1,12 +1,14 @@
 import * as React from 'react';
 import { TextField } from '@elementor/ui';
 import { useControl } from '../control-context';
+import ControlActions from '../control-actions/control-actions';
+import { createControl } from '../create-control';
 
 type Props = {
 	placeholder?: string;
 };
 
-export const TextAreaControl = ( { placeholder }: Props ) => {
+export const TextAreaControl = createControl( ( { placeholder }: Props ) => {
 	const { value, setValue } = useControl< string >();
 
 	const handleChange = ( event: React.ChangeEvent< HTMLInputElement > ) => {
@@ -14,14 +16,16 @@ export const TextAreaControl = ( { placeholder }: Props ) => {
 	};
 
 	return (
-		<TextField
-			size="tiny"
-			multiline
-			fullWidth
-			rows={ 5 }
-			value={ value }
-			onChange={ handleChange }
-			placeholder={ placeholder }
-		/>
+		<ControlActions fullWidth>
+			<TextField
+				size="tiny"
+				multiline
+				fullWidth
+				rows={ 5 }
+				value={ value }
+				onChange={ handleChange }
+				placeholder={ placeholder }
+			/>
+		</ControlActions>
 	);
-};
+} );

package/src/controls/control-types/text-control.tsx

@@ -1,11 +1,17 @@
 import * as React from 'react';
 import { TextField } from '@elementor/ui';
 import { useControl } from '../control-context';
+import ControlActions from '../control-actions/control-actions';
+import { createControl } from '../create-control';
 
-export const TextControl = ( { placeholder }: { placeholder?: string } ) => {
+export const TextControl = createControl( ( { placeholder }: { placeholder?: string } ) => {
 	const { value, setValue } = useControl< string >( '' );
 
 	const handleChange = ( event: React.ChangeEvent< HTMLInputElement > ) => setValue( event.target.value );
 
-	return <TextField type="text" size="tiny" value={ value } onChange={ handleChange } placeholder={ placeholder } />;
-};
+	return (
+		<ControlActions fullWidth>
+			<TextField type="text" size="tiny" value={ value } onChange={ handleChange } placeholder={ placeholder } />
+		</ControlActions>
+	);
+} );

package/src/controls/control-types/toggle-control.tsx

@@ -2,12 +2,13 @@ import * as React from 'react';
 import { useControl } from '../control-context';
 import { ControlToggleButtonGroup, ToggleButtonGroupItem } from '../components/control-toggle-button-group';
 import { PropValue } from '../../types';
+import { createControl } from '../create-control';
 
 type ToggleControlProps< T extends PropValue > = {
 	options: ToggleButtonGroupItem< T >[];
 };
 
-export const ToggleControl = < T extends PropValue >( { options }: ToggleControlProps< T > ) => {
+export const ToggleControl = createControl( < T extends PropValue >( { options }: ToggleControlProps< T > ) => {
 	const { value, setValue } = useControl< T >();
 
 	const handleToggle = ( option: T | null ) => {
@@ -22,4 +23,4 @@ export const ToggleControl = < T extends PropValue >( { options }: ToggleControl
 			exclusive={ true }
 		/>
 	);
-};
+} );

package/src/controls/control.tsx

@@ -1,7 +1,5 @@
 import * as React from 'react';
 import type { ComponentProps } from 'react';
-import { getControlReplacement } from './control-replacement';
-import { useControl } from './control-context';
 import { createError } from '@elementor/utils';
 import { ControlType, ControlTypes, getControlByType } from './controls-registry';
 
@@ -33,8 +31,6 @@ type ControlProps< T extends ControlType > = AnyPropertyRequired< ComponentProps
 	  };
 
 export const Control = < T extends ControlType >( { props, type }: ControlProps< T > ) => {
-	const { value } = useControl();
-
 	const ControlByType = getControlByType( type );
 
 	if ( ! ControlByType ) {
@@ -43,8 +39,6 @@ export const Control = < T extends ControlType >( { props, type }: ControlProps<
 		} );
 	}
 
-	const ControlComponent = getControlReplacement( { value } ) || ControlByType;
-
 	// @ts-expect-error ControlComponent props are inferred from the type (T).
-	return <ControlComponent { ...props } />;
+	return <ControlByType { ...props } />;
 };

package/src/controls/controls-registry.tsx

@@ -3,17 +3,26 @@ import { TextControl } from './control-types/text-control';
 import { TextAreaControl } from './control-types/text-area-control';
 import { SizeControl } from './control-types/size-control';
 import { SelectControl } from './control-types/select-control';
+import { ControlComponent } from './create-control';
 
-export const controlTypes = {
-	image: ImageControl,
-	text: TextControl,
-	textarea: TextAreaControl,
-	size: SizeControl,
-	select: SelectControl,
-} as const;
+export type ControlLayout = 'full' | 'two-columns';
 
-export type ControlTypes = typeof controlTypes;
+type ControlRegistry = Record< string, { component: ControlComponent; layout: ControlLayout } >;
 
-export type ControlType = keyof ControlTypes;
+const controlTypes = {
+	image: { component: ImageControl, layout: 'full' },
+	text: { component: TextControl, layout: 'two-columns' },
+	textarea: { component: TextAreaControl, layout: 'full' },
+	size: { component: SizeControl, layout: 'two-columns' },
+	select: { component: SelectControl, layout: 'two-columns' },
+} as const satisfies ControlRegistry;
 
-export const getControlByType = ( type: ControlType ) => controlTypes[ type ];
+export type ControlType = keyof typeof controlTypes;
+
+export type ControlTypes = {
+	[ key in ControlType ]: ( typeof controlTypes )[ key ][ 'component' ];
+};
+
+export const getControlByType = ( type: ControlType ) => controlTypes[ type ]?.component;
+
+export const getLayoutByType = ( type: ControlType ) => controlTypes[ type ].layout;

package/src/controls/create-control.tsx

@@ -0,0 +1,31 @@
+import * as React from 'react';
+import { ComponentProps, ComponentType } from 'react';
+import { useControlReplacement } from './control-replacement';
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+type AnyComponentType = ComponentType< any >;
+
+type Options = {
+	supportsReplacements?: boolean;
+};
+
+const brandSymbol = Symbol( 'control' );
+
+export type ControlComponent< TComponent extends AnyComponentType = AnyComponentType > = TComponent & {
+	[ brandSymbol ]: true;
+};
+
+export function createControl< T extends AnyComponentType >(
+	Component: T,
+	{ supportsReplacements = true }: Options = {}
+) {
+	return ( ( props: ComponentProps< T > ) => {
+		const ControlReplacement = useControlReplacement();
+
+		if ( ControlReplacement && supportsReplacements ) {
+			return <ControlReplacement { ...props } />;
+		}
+
+		return <Component { ...props } />;
+	} ) as ControlComponent< T >;
+}

package/src/controls/settings-control.tsx

@@ -5,17 +5,16 @@ import { useElementContext } from '../contexts/element-context';
 import { useWidgetSettings } from '../hooks/use-widget-settings';
 import { updateSettings } from '../sync/update-settings';
 import { ControlLabel } from '../components/control-label';
-import { ControlContainer } from './components/control-container';
 
 type Props = {
 	bind: PropKey;
 	children: React.ReactNode;
 };
 
-export const SettingsControlProvider = ( { bind, children }: Props ) => {
+const SettingsControl = ( { bind, children }: Props ) => {
 	const { element, elementType } = useElementContext();
 
-	const defaultValue = elementType.propsSchema[ bind ]?.type.default;
+	const defaultValue = elementType.propsSchema[ bind ]?.default;
 	const settingsValue = useWidgetSettings( { id: element.id, bind } );
 	const value = settingsValue ?? defaultValue ?? null;
 
@@ -31,12 +30,6 @@ export const SettingsControlProvider = ( { bind, children }: Props ) => {
 	return <ControlContext.Provider value={ { setValue, value, bind } }>{ children }</ControlContext.Provider>;
 };
 
-const SettingsControl = ( { children, bind }: Props ) => (
-	<SettingsControlProvider bind={ bind }>
-		<ControlContainer flexWrap="wrap">{ children }</ControlContainer>
-	</SettingsControlProvider>
-);
-
 // TODO: When we start using useControl inside the label component, we should create a new component for it,
 // and keep ControlLabel as a simple label component without context.
 SettingsControl.Label = ControlLabel;

package/src/dynamics/components/dynamic-selection-control.tsx

@@ -51,7 +51,7 @@ export const DynamicSelectionControl = () => {
 	}
 
 	return (
-		<Box sx={ { width: '100%' } }>
+		<Box>
 			<Tag
 				fullWidth
 				showActionsOnHover

package/src/dynamics/components/dynamic-selection.tsx

@@ -54,7 +54,7 @@ export const DynamicSelection = ( { onSelect }: DynamicSelectionProps ) => {
 			updatePropValueHistory( currentValue );
 		}
 
-		setValue( { $$type: 'dynamic', value: { name: value } } );
+		setValue( { $$type: 'dynamic', value: { name: value, settings: {} } } );
 
 		onSelect?.();
 	};

package/src/dynamics/dynamic-control.tsx

@@ -18,7 +18,7 @@ export const DynamicControl = ( { bind, children }: DynamicControlProps ) => {
 		throw new Error( `Dynamic tag ${ name } not found` );
 	}
 
-	const defaultValue = dynamicTag.props_schema[ bind ]?.type.default;
+	const defaultValue = dynamicTag.props_schema[ bind ]?.default;
 	const dynamicValue = settings?.[ bind ] ?? defaultValue;
 
 	const setDynamicValue = ( newValue: PropValue ) => {

package/src/dynamics/hooks/use-prop-dynamic-action.tsx

@@ -0,0 +1,23 @@
+import * as React from 'react';
+import { useElementContext } from '../../contexts/element-context';
+import { supportsDynamic } from '../utils';
+import { DynamicSelection } from '../components/dynamic-selection';
+import { DatabaseIcon } from '@elementor/icons';
+import { __ } from '@wordpress/i18n';
+import { useControl } from '../../controls/control-context';
+import { PopoverActionProps } from '../../controls/control-actions/actions/popover-action';
+
+export const usePropDynamicAction = (): PopoverActionProps => {
+	const { bind } = useControl();
+	const { elementType } = useElementContext();
+
+	const propType = elementType.propsSchema[ bind ];
+	const visible = !! propType && supportsDynamic( propType );
+
+	return {
+		visible,
+		icon: DatabaseIcon,
+		title: __( 'Dynamic Tags', 'elementor' ),
+		popoverContent: ( { closePopover } ) => <DynamicSelection onSelect={ closePopover } />,
+	};
+};