@elementor/editor-controls 0.4.1 → 0.6.0

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

@@ -1,21 +1,21 @@
 import * as React from 'react';
 import {
-	type BackgroundColorOverlayPropValue,
+	backgroundColorOverlayPropTypeUtil,
+	backgroundImageOverlayPropTypeUtil,
 	type BackgroundOverlayItemPropValue,
 	backgroundOverlayPropTypeUtil,
-	type BackgroundOverlayPropValue,
-	type PropValue,
+	type PropKey,
 } from '@elementor/editor-props';
 import { Grid, Stack, UnstableColorIndicator } from '@elementor/ui';
+import { useWpMediaAttachment } from '@elementor/wp-media';
 import { __ } from '@wordpress/i18n';
 
-import { BoundPropProvider, useBoundProp } from '../../../bound-prop-context';
+import { PropKeyProvider, PropProvider, useBoundProp } from '../../../bound-prop-context';
 import { ControlLabel } from '../../../components/control-label';
 import { Repeater } from '../../../components/repeater';
 import { createControl } from '../../../create-control';
 import { ColorControl } from '../../color-control';
-
-type SetContextValue = ( v: PropValue ) => void;
+import { ImageMediaControl } from '../../image-media-control';
 
 const initialBackgroundOverlay: BackgroundOverlayItemPropValue = {
 	$$type: 'background-color-overlay',
@@ -23,24 +23,22 @@ const initialBackgroundOverlay: BackgroundOverlayItemPropValue = {
 };
 
 export const BackgroundOverlayRepeaterControl = createControl( () => {
-	const { value: overlayValues, setValue } = useBoundProp( backgroundOverlayPropTypeUtil );
-
-	const setColorOverlay = ( newValue: BackgroundOverlayPropValue[ 'value' ] ) => {
-		setValue( newValue );
-	};
+	const { propType, value: overlayValues, setValue } = useBoundProp( backgroundOverlayPropTypeUtil );
 
 	return (
-		<Repeater
-			values={ overlayValues ?? [] }
-			setValues={ setColorOverlay }
-			label={ __( 'Overlay', 'elementor' ) }
-			itemSettings={ {
-				Icon: ItemIcon,
-				Label: ItemLabel,
-				Content: ItemContent,
-				initialValues: initialBackgroundOverlay,
-			} }
-		/>
+		<PropProvider propType={ propType } value={ overlayValues } setValue={ setValue }>
+			<Repeater
+				values={ overlayValues ?? [] }
+				setValues={ setValue }
+				label={ __( 'Overlay', 'elementor' ) }
+				itemSettings={ {
+					Icon: ItemIcon,
+					Label: ItemLabel,
+					Content: ItemContent,
+					initialValues: initialBackgroundOverlay,
+				} }
+			/>
+		</PropProvider>
 	);
 } );
 
@@ -48,42 +46,58 @@ const ItemIcon = ( { value }: { value: BackgroundOverlayItemPropValue } ) => (
 	<UnstableColorIndicator size="inherit" component="span" value={ value.value } />
 );
 
-const ItemContent = ( {
-	value,
-	setValue,
-}: {
-	value: BackgroundOverlayItemPropValue;
-	setValue: ( newValue: BackgroundOverlayItemPropValue ) => void;
-} ) => {
-	const setBackgroundColorOverlay = ( newValue: BackgroundColorOverlayPropValue ) => {
-		setValue( {
-			$$type: 'background-color-overlay',
-			value: newValue.value,
-		} );
-	};
+const ItemContent = ( { bind }: { bind: PropKey } ) => {
+	return (
+		<PropKeyProvider bind={ bind }>
+			<Content />
+		</PropKeyProvider>
+	);
+};
+
+const Content = () => {
+	const propContext = useBoundProp( backgroundImageOverlayPropTypeUtil );
 
 	return (
 		<Stack gap={ 1.5 }>
-			<BoundPropProvider
-				bind="background-color-overlay"
-				value={ value }
-				setValue={ setBackgroundColorOverlay as SetContextValue }
-			>
-				<Grid container spacing={ 1 } alignItems="center">
-					<Grid item xs={ 12 }>
-						<ControlLabel>{ __( 'Color', 'elementor' ) }</ControlLabel>
-					</Grid>
-					<Grid item xs={ 12 }>
-						<ColorControl />
-					</Grid>
+			<Grid container spacing={ 1 } alignItems="center">
+				<Grid item xs={ 12 }>
+					<ControlLabel>{ __( 'Color', 'elementor' ) }</ControlLabel>
 				</Grid>
-			</BoundPropProvider>
+				<Grid item xs={ 12 }>
+					<ColorControl propTypeUtil={ backgroundColorOverlayPropTypeUtil } />
+				</Grid>
+			</Grid>
+			<PropProvider { ...propContext }>
+				<PropKeyProvider bind={ 'image-src' }>
+					<Grid container spacing={ 1 } alignItems="center">
+						<Grid item xs={ 12 }>
+							<ImageMediaControl />
+						</Grid>
+					</Grid>
+				</PropKeyProvider>
+			</PropProvider>
 		</Stack>
 	);
 };
 
 const ItemLabel = ( { value }: { value: BackgroundOverlayItemPropValue } ) => {
-	const color = value.value;
+	const type = value.$$type;
+
+	if ( type === 'background-color-overlay' ) {
+		return <ItemLabelColor value={ value } />;
+	}
+	if ( type === 'background-image-overlay' ) {
+		return <ItemLabelImage value={ value } />;
+	}
+};
+
+const ItemLabelColor = ( { value }: { value: BackgroundOverlayItemPropValue } ) => {
+	return <span>{ value.value }</span>;
+};
+
+const ItemLabelImage = ( { value }: { value: BackgroundOverlayItemPropValue } ) => {
+	const { data: attachment } = useWpMediaAttachment( value?.value[ 'image-src' ]?.value.id.value || null );
+	const imageTitle = attachment?.title || null;
 
-	return <span>{ color }</span>;
+	return <span>{ imageTitle }</span>;
 };

package/src/controls/box-shadow-repeater-control.tsx

@@ -1,41 +1,32 @@
 import * as React from 'react';
-import {
-	boxShadowPropTypeUtil,
-	type BoxShadowPropValue,
-	type PropValue,
-	type ShadowPropValue,
-} from '@elementor/editor-props';
+import { boxShadowPropTypeUtil, type PropKey, shadowPropTypeUtil, type ShadowPropValue } from '@elementor/editor-props';
 import { Grid, Stack, Typography, UnstableColorIndicator } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
-import { BoundPropProvider, useBoundProp } from '../bound-prop-context';
+import { PropKeyProvider, PropProvider, useBoundProp } from '../bound-prop-context';
 import { Repeater } from '../components/repeater';
 import { createControl } from '../create-control';
 import { ColorControl } from './color-control';
 import { SelectControl } from './select-control';
 import { SizeControl } from './size-control';
 
-type SetContextValue = ( v: PropValue ) => void;
-
 export const BoxShadowRepeaterControl = createControl( () => {
-	const { value: boxShadowValues, setValue } = useBoundProp( boxShadowPropTypeUtil );
-
-	const setBoxShadow = ( newValue: BoxShadowPropValue[ 'value' ] ) => {
-		setValue( newValue );
-	};
+	const { propType, value, setValue } = useBoundProp( boxShadowPropTypeUtil );
 
 	return (
-		<Repeater
-			values={ boxShadowValues ?? [] }
-			setValues={ setBoxShadow }
-			label={ __( 'Box shadow', 'elementor' ) }
-			itemSettings={ {
-				Icon: ItemIcon,
-				Label: ItemLabel,
-				Content: ItemContent,
-				initialValues: initialShadow,
-			} }
-		/>
+		<PropProvider propType={ propType } value={ value } setValue={ setValue }>
+			<Repeater
+				values={ value ?? [] }
+				setValues={ setValue }
+				label={ __( 'Box shadow', 'elementor' ) }
+				itemSettings={ {
+					Icon: ItemIcon,
+					Label: ItemLabel,
+					Content: ItemContent,
+					initialValues: initialShadow,
+				} }
+			/>
+		</PropProvider>
 	);
 } );
 
@@ -43,125 +34,70 @@ const ItemIcon = ( { value }: { value: ShadowPropValue } ) => (
 	<UnstableColorIndicator size="inherit" component="span" value={ value.value.color.value } />
 );
 
-const ItemContent = ( {
-	value,
-	setValue,
-	anchorEl,
-}: {
-	value: ShadowPropValue;
-	setValue: ( newValue: ShadowPropValue ) => void;
-	anchorEl: HTMLElement | null;
-} ) => {
-	const setShadow = ( newValue: ShadowPropValue[ 'value' ] ) => {
-		setValue( {
-			$$type: 'shadow',
-			value: newValue,
-		} );
-	};
+const ItemContent = ( { anchorEl, bind }: { anchorEl: HTMLElement | null; bind: PropKey } ) => {
+	return (
+		<PropKeyProvider bind={ bind }>
+			<Content anchorEl={ anchorEl } />
+		</PropKeyProvider>
+	);
+};
+
+const Content = ( { anchorEl }: { anchorEl: HTMLElement | null } ) => {
+	const { propType, value, setValue } = useBoundProp( shadowPropTypeUtil );
 
 	return (
-		<Stack gap={ 1.5 }>
-			<Grid container gap={ 2 } flexWrap="nowrap">
-				<Control
-					bind="color"
-					value={ value.value.color }
-					label={ __( 'Color', 'elementor' ) }
-					setValue={ ( v: ShadowPropValue[ 'value' ][ 'color' ] ) =>
-						setShadow( { ...value.value, color: v } )
-					}
-				>
-					<ColorControl
-						slotProps={ {
-							colorPicker: {
-								anchorEl,
-								anchorOrigin: {
-									vertical: 'top',
-									horizontal: 'right',
-								},
-								transformOrigin: {
-									vertical: 'top',
-									horizontal: -10,
+		<PropProvider propType={ propType } value={ value } setValue={ setValue }>
+			<Stack gap={ 1.5 }>
+				<Grid container gap={ 2 } flexWrap="nowrap">
+					<Control bind="color" label={ __( 'Color', 'elementor' ) }>
+						<ColorControl
+							slotProps={ {
+								colorPicker: {
+									anchorEl,
+									anchorOrigin: {
+										vertical: 'top',
+										horizontal: 'right',
+									},
+									transformOrigin: {
+										vertical: 'top',
+										horizontal: -10,
+									},
 								},
-							},
-						} }
-					/>
-				</Control>
-				<Control
-					bind="position"
-					value={ value.value.position }
-					label={ __( 'Position', 'elementor' ) }
-					setValue={ ( v: ShadowPropValue[ 'value' ][ 'position' ] ) =>
-						setShadow( { ...value.value, position: v || null } )
-					}
-				>
-					<SelectControl
-						options={ [
-							{ label: __( 'Inset', 'elementor' ), value: 'inset' },
-							{ label: __( 'Outset', 'elementor' ), value: '' },
-						] }
-					/>
-				</Control>
-			</Grid>
-			<Grid container gap={ 2 } flexWrap="nowrap">
-				<Control
-					bind="hOffset"
-					label={ __( 'Horizontal', 'elementor' ) }
-					value={ value.value.hOffset }
-					setValue={ ( v: ShadowPropValue[ 'value' ][ 'hOffset' ] ) =>
-						setShadow( { ...value.value, hOffset: v } )
-					}
-				>
-					<SizeControl />
-				</Control>
-				<Control
-					bind="vOffset"
-					label={ __( 'Vertical', 'elementor' ) }
-					value={ value.value.vOffset }
-					setValue={ ( v: ShadowPropValue[ 'value' ][ 'vOffset' ] ) =>
-						setShadow( { ...value.value, vOffset: v } )
-					}
-				>
-					<SizeControl />
-				</Control>
-			</Grid>
-			<Grid container gap={ 2 } flexWrap="nowrap">
-				<Control
-					bind="blur"
-					value={ value.value.blur }
-					label={ __( 'Blur', 'elementor' ) }
-					setValue={ ( v: ShadowPropValue[ 'value' ][ 'blur' ] ) => setShadow( { ...value.value, blur: v } ) }
-				>
-					<SizeControl />
-				</Control>
-				<Control
-					bind="spread"
-					label={ __( 'Spread', 'elementor' ) }
-					value={ value.value.spread }
-					setValue={ ( v: ShadowPropValue[ 'value' ][ 'spread' ] ) =>
-						setShadow( { ...value.value, spread: v } )
-					}
-				>
-					<SizeControl />
-				</Control>
-			</Grid>
-		</Stack>
+							} }
+						/>
+					</Control>
+					<Control bind="position" label={ __( 'Position', 'elementor' ) }>
+						<SelectControl
+							options={ [
+								{ label: __( 'Inset', 'elementor' ), value: 'inset' },
+								{ label: __( 'Outset', 'elementor' ), value: '' },
+							] }
+						/>
+					</Control>
+				</Grid>
+				<Grid container gap={ 2 } flexWrap="nowrap">
+					<Control bind="hOffset" label={ __( 'Horizontal', 'elementor' ) }>
+						<SizeControl />
+					</Control>
+					<Control bind="vOffset" label={ __( 'Vertical', 'elementor' ) }>
+						<SizeControl />
+					</Control>
+				</Grid>
+				<Grid container gap={ 2 } flexWrap="nowrap">
+					<Control bind="blur" label={ __( 'Blur', 'elementor' ) }>
+						<SizeControl />
+					</Control>
+					<Control bind="spread" label={ __( 'Spread', 'elementor' ) }>
+						<SizeControl />
+					</Control>
+				</Grid>
+			</Stack>
+		</PropProvider>
 	);
 };
 
-const Control = < T extends PropValue >( {
-	value,
-	setValue,
-	label,
-	bind,
-	children,
-}: {
-	value: T;
-	bind: string;
-	label: string;
-	children: React.ReactNode;
-	setValue: ( v: T ) => void;
-} ) => (
-	<BoundPropProvider value={ value } setValue={ setValue as SetContextValue } bind={ bind }>
+const Control = ( { label, bind, children }: { bind: string; label: string; children: React.ReactNode } ) => (
+	<PropKeyProvider bind={ bind }>
 		<Grid item xs={ 6 }>
 			<Grid container gap={ 1 } alignItems="center">
 				<Grid item xs={ 12 }>
@@ -174,7 +110,7 @@ const Control = < T extends PropValue >( {
 				</Grid>
 			</Grid>
 		</Grid>
-	</BoundPropProvider>
+	</PropKeyProvider>
 );
 
 const ItemLabel = ( { value }: { value: ShadowPropValue } ) => {

package/src/controls/color-control.tsx

@@ -1,29 +1,25 @@
 import * as React from 'react';
-import { colorPropTypeUtil } from '@elementor/editor-props';
+import { colorPropTypeUtil, type PropTypeUtil } from '@elementor/editor-props';
 import { UnstableColorField, type UnstableColorFieldProps } from '@elementor/ui';
 
 import { useBoundProp } from '../bound-prop-context';
 import ControlActions from '../control-actions/control-actions';
 import { createControl } from '../create-control';
 
-export const ColorControl = createControl(
-	( props: Partial< Omit< UnstableColorFieldProps, 'value' | 'onChange' > > ) => {
-		const { value, setValue } = useBoundProp( colorPropTypeUtil );
+type Props = Partial< Omit< UnstableColorFieldProps, 'value' | 'onChange' > > & {
+	propTypeUtil?: PropTypeUtil< string, string >;
+};
 
-		const handleChange = ( selectedColor: string ) => {
-			setValue( selectedColor );
-		};
+export const ColorControl = createControl( ( { propTypeUtil = colorPropTypeUtil, ...props }: Props ) => {
+	const { value, setValue } = useBoundProp( propTypeUtil );
 
-		return (
-			<ControlActions>
-				<UnstableColorField
-					size="tiny"
-					{ ...props }
-					value={ value ?? '' }
-					onChange={ handleChange }
-					fullWidth
-				/>
-			</ControlActions>
-		);
-	}
-);
+	const handleChange = ( selectedColor: string ) => {
+		setValue( selectedColor );
+	};
+
+	return (
+		<ControlActions>
+			<UnstableColorField size="tiny" { ...props } value={ value ?? '' } onChange={ handleChange } fullWidth />
+		</ControlActions>
+	);
+} );