@elementor/editor-controls 0.6.0 → 0.7.0

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

@@ -3,13 +3,18 @@ import { imageSrcPropTypeUtil } from '@elementor/editor-props';
 import { UploadIcon } from '@elementor/icons';
 import { Button, Card, CardMedia, CardOverlay, CircularProgress, Stack } from '@elementor/ui';
 import { useWpMediaAttachment, useWpMediaFrame } from '@elementor/wp-media';
+import { type ImageExtension } from '@elementor/wp-media';
 import { __ } from '@wordpress/i18n';
 
 import { useBoundProp } from '../bound-prop-context';
 import ControlActions from '../control-actions/control-actions';
 import { createControl } from '../create-control';
 
-export const ImageMediaControl = createControl( () => {
+export type ImageMediaControlProps = {
+	allowedExtensions?: ImageExtension[];
+};
+
+export const ImageMediaControl = createControl( ( props: ImageMediaControlProps ) => {
 	const { value, setValue } = useBoundProp( imageSrcPropTypeUtil );
 	const { id, url } = value ?? {};
 
@@ -17,7 +22,8 @@ export const ImageMediaControl = createControl( () => {
 	const src = attachment?.url ?? url?.value ?? null;
 
 	const { open } = useWpMediaFrame( {
-		types: [ 'image' ],
+		types: [ 'image', 'image/svg+xml' ],
+		allowedExtensions: props.allowedExtensions,
 		multiple: false,
 		selected: id?.value || null,
 		onSelect: ( selectedAttachment ) => {
@@ -32,16 +38,18 @@ export const ImageMediaControl = createControl( () => {
 	} );
 
 	return (
-		<Card variant="outlined">
-			<CardMedia image={ src } sx={ { height: 150 } }>
-				{ isFetching ? (
-					<Stack justifyContent="center" alignItems="center" width="100%" height="100%">
-						<CircularProgress />
-					</Stack>
-				) : null }
-			</CardMedia>
-			<CardOverlay>
-				<ControlActions>
+		<ControlActions>
+			<Card variant="outlined">
+				<CardMedia image={ src } sx={ { height: 150 } }>
+					{ isFetching ? (
+						<Stack justifyContent="center" alignItems="center" width="100%" height="100%">
+							<CircularProgress />
+						</Stack>
+					) : (
+						<></>
+					) }
+				</CardMedia>
+				<CardOverlay>
 					<Stack gap={ 1 }>
 						<Button
 							size="tiny"
@@ -61,8 +69,8 @@ export const ImageMediaControl = createControl( () => {
 							{ __( 'Upload Image', 'elementor' ) }
 						</Button>
 					</Stack>
-				</ControlActions>
-			</CardOverlay>
-		</Card>
+				</CardOverlay>
+			</Card>
+		</ControlActions>
 	);
 } );

package/src/controls/link-control.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { booleanPropTypeUtil, linkPropTypeUtil, type LinkPropValue, stringPropTypeUtil } from '@elementor/editor-props';
+import { booleanPropTypeUtil, linkPropTypeUtil, type LinkPropValue, urlPropTypeUtil } from '@elementor/editor-props';
 import { MinusIcon, PlusIcon } from '@elementor/icons';
 import { useSessionStorage } from '@elementor/session';
 import { Collapse, Divider, Grid, IconButton, Stack, Switch } from '@elementor/ui';
@@ -69,7 +69,7 @@ export const LinkControl = createControl( ( props?: Props ) => {
 							<AutocompleteControl
 								allowCustomValues={ Object.keys( options ).length ? allowCustomValues : true }
 								options={ options }
-								propType={ stringPropTypeUtil }
+								propType={ urlPropTypeUtil }
 								placeholder={ placeholder }
 							/>
 						</PropKeyProvider>

package/src/controls/linked-dimensions-control.tsx

@@ -1,50 +1,40 @@
 import * as React from 'react';
-import { linkedDimensionsPropTypeUtil, type LinkedDimensionsPropValue, type PropKey } from '@elementor/editor-props';
+import { dimensionsPropTypeUtil, type PropKey, sizePropTypeUtil } from '@elementor/editor-props';
 import { DetachIcon, LinkIcon, SideBottomIcon, SideLeftIcon, SideRightIcon, SideTopIcon } from '@elementor/icons';
 import { Grid, Stack, ToggleButton } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
-import { PropKeyProvider, PropProvider, type SetValue, useBoundProp } from '../bound-prop-context';
+import { PropKeyProvider, PropProvider, useBoundProp } from '../bound-prop-context';
 import { ControlLabel } from '../components/control-label';
 import { createControl } from '../create-control';
 import { SizeControl } from './size-control';
 
 export const LinkedDimensionsControl = createControl( ( { label }: { label: string } ) => {
-	const { value, setValue, propType } = useBoundProp( linkedDimensionsPropTypeUtil );
-	const { top, right, bottom, left, isLinked = true } = value || {};
+	const { value: dimensionsValue, setValue: setDimensionsValue, propType } = useBoundProp( dimensionsPropTypeUtil );
+	const { value: sizeValue, setValue: setSizeValue } = useBoundProp( sizePropTypeUtil );
 
-	const setLinkedValue: SetValue< LinkedDimensionsPropValue[ 'value' ] > = ( newValue, _, meta ) => {
+	const isLinked = ! dimensionsValue && ! sizeValue ? true : !! sizeValue;
+
+	const onLinkToggle = () => {
 		if ( ! isLinked ) {
-			return setValue( newValue );
+			setSizeValue( dimensionsValue?.top?.value );
+			return;
 		}
 
-		const newDimension = newValue[ meta?.bind as keyof LinkedDimensionsPropValue[ 'value' ] ];
+		const value = sizeValue ? sizePropTypeUtil.create( sizeValue ) : null;
 
-		setValue( {
-			isLinked,
-			top: newDimension,
-			right: newDimension,
-			bottom: newDimension,
-			left: newDimension,
+		setDimensionsValue( {
+			top: value,
+			right: value,
+			bottom: value,
+			left: value,
 		} );
 	};
 
-	const toggleLinked = () => {
-		const updatedValue = {
-			isLinked: ! isLinked,
-			top,
-			right: ! isLinked ? top : right,
-			bottom: ! isLinked ? top : bottom,
-			left: ! isLinked ? top : left,
-		};
-
-		setValue( updatedValue );
-	};
-
 	const LinkedIcon = isLinked ? LinkIcon : DetachIcon;
 
 	return (
-		<PropProvider propType={ propType } value={ value } setValue={ setLinkedValue }>
+		<PropProvider propType={ propType } value={ dimensionsValue } setValue={ setDimensionsValue }>
 			<Stack direction="row" gap={ 2 } flexWrap="nowrap">
 				<ControlLabel>{ label }</ControlLabel>
 				<ToggleButton
@@ -53,7 +43,7 @@ export const LinkedDimensionsControl = createControl( ( { label }: { label: stri
 					value={ 'check' }
 					selected={ isLinked }
 					sx={ { marginLeft: 'auto' } }
-					onChange={ toggleLinked }
+					onChange={ onLinkToggle }
 				>
 					<LinkedIcon fontSize={ 'tiny' } />
 				</ToggleButton>
@@ -64,7 +54,11 @@ export const LinkedDimensionsControl = createControl( ( { label }: { label: stri
 						<ControlLabel>{ __( 'Top', 'elementor' ) }</ControlLabel>
 					</Grid>
 					<Grid item xs={ 12 }>
-						<Control bind={ 'top' } startIcon={ <SideTopIcon fontSize={ 'tiny' } /> } />
+						<Control
+							bind={ 'top' }
+							startIcon={ <SideTopIcon fontSize={ 'tiny' } /> }
+							isLinked={ isLinked }
+						/>
 					</Grid>
 				</Grid>
 				<Grid container gap={ 1 } alignItems="center">
@@ -72,7 +66,11 @@ export const LinkedDimensionsControl = createControl( ( { label }: { label: stri
 						<ControlLabel>{ __( 'Right', 'elementor' ) }</ControlLabel>
 					</Grid>
 					<Grid item xs={ 12 }>
-						<Control bind={ 'right' } startIcon={ <SideRightIcon fontSize={ 'tiny' } /> } />
+						<Control
+							bind={ 'right' }
+							startIcon={ <SideRightIcon fontSize={ 'tiny' } /> }
+							isLinked={ isLinked }
+						/>
 					</Grid>
 				</Grid>
 			</Stack>
@@ -82,7 +80,11 @@ export const LinkedDimensionsControl = createControl( ( { label }: { label: stri
 						<ControlLabel>{ __( 'Bottom', 'elementor' ) }</ControlLabel>
 					</Grid>
 					<Grid item xs={ 12 }>
-						<Control bind={ 'bottom' } startIcon={ <SideBottomIcon fontSize={ 'tiny' } /> } />
+						<Control
+							bind={ 'bottom' }
+							startIcon={ <SideBottomIcon fontSize={ 'tiny' } /> }
+							isLinked={ isLinked }
+						/>
 					</Grid>
 				</Grid>
 				<Grid container gap={ 1 } alignItems="center">
@@ -90,7 +92,11 @@ export const LinkedDimensionsControl = createControl( ( { label }: { label: stri
 						<ControlLabel>{ __( 'Left', 'elementor' ) }</ControlLabel>
 					</Grid>
 					<Grid item xs={ 12 }>
-						<Control bind={ 'left' } startIcon={ <SideLeftIcon fontSize={ 'tiny' } /> } />
+						<Control
+							bind={ 'left' }
+							startIcon={ <SideLeftIcon fontSize={ 'tiny' } /> }
+							isLinked={ isLinked }
+						/>
 					</Grid>
 				</Grid>
 			</Stack>
@@ -98,8 +104,14 @@ export const LinkedDimensionsControl = createControl( ( { label }: { label: stri
 	);
 } );
 
-const Control = ( { bind, startIcon }: { bind: PropKey; startIcon: React.ReactNode } ) => (
-	<PropKeyProvider bind={ bind }>
-		<SizeControl startIcon={ startIcon } />
-	</PropKeyProvider>
-);
+const Control = ( { bind, startIcon, isLinked }: { bind: PropKey; startIcon: React.ReactNode; isLinked: boolean } ) => {
+	if ( isLinked ) {
+		return <SizeControl startIcon={ startIcon } />;
+	}
+
+	return (
+		<PropKeyProvider bind={ bind }>
+			<SizeControl startIcon={ startIcon } />
+		</PropKeyProvider>
+	);
+};

package/src/controls/select-control.tsx

@@ -15,15 +15,17 @@ export const SelectControl = createControl( ( { options, onChange }: Props ) =>
 	const { value, setValue } = useBoundProp( stringPropTypeUtil );
 
 	const handleChange = ( event: SelectChangeEvent< StringPropValue[ 'value' ] > ) => {
-		onChange?.( event.target.value, value );
-		setValue( event.target.value );
+		const newValue = event.target.value || null;
+
+		onChange?.( newValue, value );
+		setValue( newValue );
 	};
 
 	return (
 		<ControlActions>
 			<Select displayEmpty size="tiny" value={ value ?? '' } onChange={ handleChange } fullWidth>
 				{ options.map( ( { label, ...props } ) => (
-					<MenuItem key={ props.value } { ...props }>
+					<MenuItem key={ props.value } { ...props } value={ props.value ?? '' }>
 						{ label }
 					</MenuItem>
 				) ) }