@elementor/editor-controls 0.31.0 → 0.32.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.31.0",
+  "version": "0.32.0",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -40,10 +40,10 @@
     "dev": "tsup --config=../../tsup.dev.ts"
   },
   "dependencies": {
-    "@elementor/editor-current-user": "0.4.0",
+    "@elementor/editor-current-user": "0.5.0",
     "@elementor/editor-elements": "0.8.4",
     "@elementor/editor-props": "0.12.1",
-    "@elementor/editor-ui": "0.8.2",
+    "@elementor/editor-ui": "0.9.0",
     "@elementor/editor-v1-adapters": "0.12.0",
     "@elementor/env": "0.3.5",
     "@elementor/http-client": "0.3.0",
@@ -51,7 +51,7 @@
     "@elementor/locations": "0.8.0",
     "@elementor/query": "0.2.4",
     "@elementor/session": "0.1.0",
-    "@elementor/ui": "1.34.2",
+    "@elementor/ui": "1.34.5",
     "@elementor/utils": "0.4.0",
     "@elementor/wp-media": "0.6.0",
     "@tanstack/react-virtual": "3.13.3",

package/src/controls/aspect-ratio-control.tsx

@@ -0,0 +1,121 @@
+import * as React from 'react';
+import { useState } from 'react';
+import { stringPropTypeUtil } from '@elementor/editor-props';
+import { MenuListItem } from '@elementor/editor-ui';
+import { Grid, Select, type SelectChangeEvent, Stack, TextField } from '@elementor/ui';
+import { __ } from '@wordpress/i18n';
+
+import { useBoundProp } from '../bound-prop-context';
+import { ControlLabel } from '../components/control-label';
+import { createControl } from '../create-control';
+
+const RATIO_OPTIONS = [
+	{ label: __( 'Auto', 'elementor' ), value: 'auto' },
+	{ label: '1/1', value: '1/1' },
+	{ label: '4/3', value: '4/3' },
+	{ label: '3/4', value: '3/4' },
+	{ label: '16/9', value: '16/9' },
+	{ label: '9/16', value: '9/16' },
+	{ label: '3/2', value: '3/2' },
+	{ label: '2/3', value: '2/3' },
+];
+
+const CUSTOM_RATIO = 'custom';
+
+export const AspectRatioControl = createControl( ( { label }: { label: string } ) => {
+	const { value: aspectRatioValue, setValue: setAspectRatioValue } = useBoundProp( stringPropTypeUtil );
+
+	const isCustomSelected =
+		aspectRatioValue && ! RATIO_OPTIONS.some( ( option ) => option.value === aspectRatioValue );
+	const [ initialWidth, initialHeight ] = isCustomSelected ? aspectRatioValue.split( '/' ) : [ '', '' ];
+
+	const [ isCustom, setIsCustom ] = useState( isCustomSelected );
+	const [ customWidth, setCustomWidth ] = useState< string >( initialWidth );
+	const [ customHeight, setCustomHeight ] = useState< string >( initialHeight );
+	const [ selectedValue, setSelectedValue ] = useState< string >(
+		isCustomSelected ? CUSTOM_RATIO : aspectRatioValue || ''
+	);
+
+	const handleSelectChange = ( event: SelectChangeEvent< string > ) => {
+		const newValue = event.target.value;
+		const isCustomRatio = newValue === CUSTOM_RATIO;
+
+		setIsCustom( isCustomRatio );
+		setSelectedValue( newValue );
+
+		if ( isCustomRatio ) {
+			return;
+		}
+
+		setAspectRatioValue( newValue );
+	};
+	const handleCustomWidthChange = ( event: React.ChangeEvent< HTMLInputElement > ) => {
+		const newWidth = event.target.value;
+		setCustomWidth( newWidth );
+
+		if ( newWidth && customHeight ) {
+			setAspectRatioValue( `${ newWidth }/${ customHeight }` );
+		}
+	};
+
+	const handleCustomHeightChange = ( event: React.ChangeEvent< HTMLInputElement > ) => {
+		const newHeight = event.target.value;
+		setCustomHeight( newHeight );
+
+		if ( customWidth && newHeight ) {
+			setAspectRatioValue( `${ customWidth }/${ newHeight }` );
+		}
+	};
+
+	return (
+		<Stack direction="column" gap={ 2 }>
+			<Grid container gap={ 2 } alignItems="center" flexWrap="nowrap">
+				<Grid item xs={ 6 }>
+					<ControlLabel>{ label }</ControlLabel>
+				</Grid>
+				<Grid item xs={ 6 }>
+					<Select
+						sx={ { overflow: 'hidden' } }
+						displayEmpty
+						size="tiny"
+						value={ selectedValue }
+						onChange={ handleSelectChange }
+						fullWidth
+					>
+						{ [ ...RATIO_OPTIONS, { label: __( 'Custom', 'elementor' ), value: CUSTOM_RATIO } ].map(
+							( { label: optionLabel, ...props } ) => (
+								<MenuListItem key={ props.value } { ...props } value={ props.value ?? '' }>
+									{ optionLabel }
+								</MenuListItem>
+							)
+						) }
+					</Select>
+				</Grid>
+			</Grid>
+			{ isCustom && (
+				<Grid container gap={ 2 } alignItems="center" flexWrap="nowrap">
+					<Grid item xs={ 6 }>
+						<TextField
+							size="tiny"
+							type="number"
+							fullWidth
+							value={ customWidth }
+							onChange={ handleCustomWidthChange }
+							placeholder={ __( 'Width', 'elementor' ) }
+						/>
+					</Grid>
+					<Grid item xs={ 6 }>
+						<TextField
+							size="tiny"
+							type="number"
+							fullWidth
+							value={ customHeight }
+							onChange={ handleCustomHeightChange }
+							placeholder={ __( 'Height', 'elementor' ) }
+						/>
+					</Grid>
+				</Grid>
+			) }
+		</Stack>
+	);
+} );

package/src/controls/link-control.tsx

@@ -93,7 +93,7 @@ export const LinkControl = createControl( ( props: Props ) => {
 		}
 
 		setLinkSessionValue( {
-			value: newState ? value : linkSessionValue?.value,
+			value: linkSessionValue?.value,
 			meta: { isEnabled: newState },
 		} );
 	};

package/src/controls/switch-control.tsx

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import { booleanPropTypeUtil } from '@elementor/editor-props';
+import { Switch } from '@elementor/ui';
+
+import { useBoundProp } from '../bound-prop-context/use-bound-prop';
+import { createControl } from '../create-control';
+
+export const SwitchControl = createControl( () => {
+	const { value, setValue } = useBoundProp( booleanPropTypeUtil );
+
+	const handleChange = ( event: React.ChangeEvent< HTMLInputElement > ) => {
+		setValue( event.target.checked );
+	};
+
+	return (
+		<div style={ { display: 'flex', justifyContent: 'flex-end' } }>
+			<Switch checked={ !! value } onChange={ handleChange } size="small" />
+		</div>
+	);
+} );

package/src/index.ts

@@ -15,8 +15,10 @@ export { FontFamilyControl } from './controls/font-family-control/font-family-co
 export { UrlControl } from './controls/url-control';
 export { LinkControl } from './controls/link-control';
 export { GapControl } from './controls/gap-control';
+export { AspectRatioControl } from './controls/aspect-ratio-control';
 export { SvgMediaControl } from './controls/svg-media-control';
 export { BackgroundControl } from './controls/background-control/background-control';
+export { SwitchControl } from './controls/switch-control';
 
 // components
 export { ControlFormLabel } from './components/control-form-label';