@elementor/editor-controls 0.6.0 → 0.6.1

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.6.0",
+  "version": "0.6.1",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -40,12 +40,12 @@
     "dev": "tsup --config=../../tsup.dev.ts"
   },
   "dependencies": {
-    "@elementor/editor-props": "0.7.0",
+    "@elementor/editor-props": "0.7.1",
     "@elementor/icons": "^1.20.0",
     "@elementor/session": "0.1.0",
     "@elementor/ui": "^1.22.0",
     "@elementor/utils": "0.3.0",
-    "@elementor/wp-media": "0.2.3",
+    "@elementor/wp-media": "0.3.0",
     "@wordpress/i18n": "^5.13.0"
   },
   "peerDependencies": {

package/src/controls/equal-unequal-sizes-control.tsx

@@ -99,7 +99,7 @@ export function EqualUnequalSizesControl< TMultiPropType extends string, TPropVa
 				</Grid>
 				<Grid item xs={ 6 }>
 					<Stack direction="row" alignItems="center" gap={ 1 }>
-						<SizeControl placeholder={ __( 'MIXED', 'elementor' ) } />
+						<SizeControl placeholder={ __( 'Mixed', 'elementor' ) } />
 						<ToggleButton
 							size={ 'tiny' }
 							value={ 'check' }

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

@@ -17,7 +17,7 @@ export const ImageMediaControl = createControl( () => {
 	const src = attachment?.url ?? url?.value ?? null;
 
 	const { open } = useWpMediaFrame( {
-		types: [ 'image' ],
+		types: [ 'image', 'image/svg+xml' ],
 		multiple: false,
 		selected: id?.value || null,
 		onSelect: ( selectedAttachment ) => {

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,5 +1,10 @@
 import * as React from 'react';
-import { linkedDimensionsPropTypeUtil, type LinkedDimensionsPropValue, type PropKey } from '@elementor/editor-props';
+import {
+	dimensionsPropTypeUtil,
+	type DimensionsPropValue,
+	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';
@@ -10,41 +15,40 @@ 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 setValue: SetValue< DimensionsPropValue[ 'value' ] > = ( newValue ) => {
 		if ( ! isLinked ) {
-			return setValue( newValue );
+			setDimensionsValue( newValue );
+			return;
 		}
 
-		const newDimension = newValue[ meta?.bind as keyof LinkedDimensionsPropValue[ 'value' ] ];
-
-		setValue( {
-			isLinked,
-			top: newDimension,
-			right: newDimension,
-			bottom: newDimension,
-			left: newDimension,
-		} );
+		setSizeValue( newValue.top );
 	};
 
-	const toggleLinked = () => {
-		const updatedValue = {
-			isLinked: ! isLinked,
-			top,
-			right: ! isLinked ? top : right,
-			bottom: ! isLinked ? top : bottom,
-			left: ! isLinked ? top : left,
-		};
+	const onLinkToggle = () => {
+		if ( ! isLinked ) {
+			setSizeValue( dimensionsValue?.top.value );
+			return;
+		}
+
+		const value = sizeValue ? sizePropTypeUtil.create( sizeValue ) : null;
 
-		setValue( updatedValue );
+		setDimensionsValue( {
+			top: value,
+			right: value,
+			bottom: value,
+			left: value,
+		} );
 	};
 
 	const LinkedIcon = isLinked ? LinkIcon : DetachIcon;
 
 	return (
-		<PropProvider propType={ propType } value={ value } setValue={ setLinkedValue }>
+		<PropProvider propType={ propType } value={ dimensionsValue } setValue={ setValue }>
 			<Stack direction="row" gap={ 2 } flexWrap="nowrap">
 				<ControlLabel>{ label }</ControlLabel>
 				<ToggleButton
@@ -53,7 +57,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 +68,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 +80,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 +94,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 +106,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 +118,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>
+	);
+};