@elementor/editor-controls 0.32.0 → 0.34.0

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

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { dimensionsPropTypeUtil, type PropKey, sizePropTypeUtil } from '@elementor/editor-props';
+import { isExperimentActive } from '@elementor/editor-v1-adapters';
 import { DetachIcon, LinkIcon, SideBottomIcon, SideLeftIcon, SideRightIcon, SideTopIcon } from '@elementor/icons';
 import { Grid, Stack, ToggleButton, Tooltip } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
@@ -20,15 +21,19 @@ export const LinkedDimensionsControl = createControl(
 		isSiteRtl?: boolean;
 		extendedValues?: ExtendedValue[];
 	} ) => {
+		const { value: sizeValue, setValue: setSizeValue, disabled: sizeDisabled } = useBoundProp( sizePropTypeUtil );
+
 		const {
 			value: dimensionsValue,
 			setValue: setDimensionsValue,
 			propType,
+			disabled: dimensionsDisabled,
 		} = useBoundProp( dimensionsPropTypeUtil );
-		const { value: sizeValue, setValue: setSizeValue } = useBoundProp( sizePropTypeUtil );
 
 		const isLinked = ! dimensionsValue && ! sizeValue ? true : !! sizeValue;
 
+		const isUsingNestedProps = isExperimentActive( 'e_v_3_30' );
+
 		const onLinkToggle = () => {
 			if ( ! isLinked ) {
 				setSizeValue( dimensionsValue[ 'block-start' ]?.value ?? null );
@@ -56,7 +61,11 @@ export const LinkedDimensionsControl = createControl(
 		return (
 			<PropProvider propType={ propType } value={ dimensionsValue } setValue={ setDimensionsValue }>
 				<Stack direction="row" gap={ 2 } flexWrap="nowrap">
-					<ControlLabel>{ label }</ControlLabel>
+					{ isUsingNestedProps ? (
+						<ControlFormLabel>{ label }</ControlFormLabel>
+					) : (
+						<ControlLabel>{ label }</ControlLabel>
+					) }
 					<Tooltip title={ isLinked ? unlinkedLabel : linkedLabel } placement="top">
 						<ToggleButton
 							aria-label={ isLinked ? unlinkedLabel : linkedLabel }
@@ -65,6 +74,7 @@ export const LinkedDimensionsControl = createControl(
 							selected={ isLinked }
 							sx={ { marginLeft: 'auto' } }
 							onChange={ onLinkToggle }
+							disabled={ sizeDisabled || dimensionsDisabled }
 						>
 							<LinkedIcon fontSize={ 'tiny' } />
 						</ToggleButton>
@@ -73,7 +83,7 @@ export const LinkedDimensionsControl = createControl(
 				<Stack direction="row" gap={ 2 } flexWrap="nowrap">
 					<Grid container gap={ 0.75 } alignItems="center">
 						<Grid item xs={ 12 }>
-							<ControlFormLabel>{ __( 'Top', 'elementor' ) }</ControlFormLabel>
+							<Label bind="block-start" label={ __( 'Top', 'elementor' ) } />
 						</Grid>
 						<Grid item xs={ 12 }>
 							<Control
@@ -86,9 +96,10 @@ export const LinkedDimensionsControl = createControl(
 					</Grid>
 					<Grid container gap={ 0.75 } alignItems="center">
 						<Grid item xs={ 12 }>
-							<ControlFormLabel>
-								{ isSiteRtl ? __( 'Left', 'elementor' ) : __( 'Right', 'elementor' ) }
-							</ControlFormLabel>
+							<Label
+								bind="inline-end"
+								label={ isSiteRtl ? __( 'Left', 'elementor' ) : __( 'Right', 'elementor' ) }
+							/>
 						</Grid>
 						<Grid item xs={ 12 }>
 							<Control
@@ -109,7 +120,7 @@ export const LinkedDimensionsControl = createControl(
 				<Stack direction="row" gap={ 2 } flexWrap="nowrap">
 					<Grid container gap={ 0.75 } alignItems="center">
 						<Grid item xs={ 12 }>
-							<ControlFormLabel>{ __( 'Bottom', 'elementor' ) }</ControlFormLabel>
+							<Label bind="block-end" label={ __( 'Bottom', 'elementor' ) } />
 						</Grid>
 						<Grid item xs={ 12 }>
 							<Control
@@ -122,9 +133,10 @@ export const LinkedDimensionsControl = createControl(
 					</Grid>
 					<Grid container gap={ 0.75 } alignItems="center">
 						<Grid item xs={ 12 }>
-							<ControlFormLabel>
-								{ isSiteRtl ? __( 'Right', 'elementor' ) : __( 'Left', 'elementor' ) }
-							</ControlFormLabel>
+							<Label
+								bind="inline-start"
+								label={ isSiteRtl ? __( 'Right', 'elementor' ) : __( 'Left', 'elementor' ) }
+							/>
 						</Grid>
 						<Grid item xs={ 12 }>
 							<Control
@@ -168,3 +180,17 @@ const Control = ( {
 		</PropKeyProvider>
 	);
 };
+
+const Label = ( { label, bind }: { label: string; bind: PropKey } ) => {
+	const isUsingNestedProps = isExperimentActive( 'e_v_3_30' );
+
+	if ( ! isUsingNestedProps ) {
+		return <ControlFormLabel>{ label }</ControlFormLabel>;
+	}
+
+	return (
+		<PropKeyProvider bind={ bind }>
+			<ControlLabel>{ label }</ControlLabel>
+		</PropKeyProvider>
+	);
+};

package/src/controls/number-control.tsx

@@ -25,7 +25,7 @@ export const NumberControl = createControl(
 		step?: number;
 		shouldForceInt?: boolean;
 	} ) => {
-		const { value, setValue } = useBoundProp( numberPropTypeUtil );
+		const { value, setValue, disabled } = useBoundProp( numberPropTypeUtil );
 
 		const handleChange = ( event: React.ChangeEvent< HTMLInputElement > ) => {
 			const eventValue: string = event.target.value;
@@ -47,6 +47,7 @@ export const NumberControl = createControl(
 					size="tiny"
 					type="number"
 					fullWidth
+					disabled={ disabled }
 					value={ isEmptyOrNaN( value ) ? '' : value }
 					onChange={ handleChange }
 					placeholder={ placeholder }

package/src/controls/select-control.tsx

@@ -13,7 +13,7 @@ type Props = {
 };
 
 export const SelectControl = createControl( ( { options, onChange }: Props ) => {
-	const { value, setValue } = useBoundProp( stringPropTypeUtil );
+	const { value, setValue, disabled } = useBoundProp( stringPropTypeUtil );
 
 	const handleChange = ( event: SelectChangeEvent< StringPropValue[ 'value' ] > ) => {
 		const newValue = event.target.value || null;
@@ -30,6 +30,7 @@ export const SelectControl = createControl( ( { options, onChange }: Props ) =>
 				size="tiny"
 				value={ value ?? '' }
 				onChange={ handleChange }
+				disabled={ disabled }
 				fullWidth
 			>
 				{ options.map( ( { label, ...props } ) => (

package/src/controls/size-control.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { useRef } from 'react';
 import { sizePropTypeUtil, stringPropTypeUtil } from '@elementor/editor-props';
-import { InputAdornment } from '@elementor/ui';
+import { Box, InputAdornment } from '@elementor/ui';
 
 import { useBoundProp } from '../bound-prop-context';
 import { SelectionEndAdornment, TextFieldInnerSelection } from '../components/text-field-inner-selection';
@@ -26,7 +26,7 @@ type SizeControlProps = {
 
 export const SizeControl = createControl(
 	( { units = defaultUnits, extendedValues = [], placeholder, startIcon }: SizeControlProps ) => {
-		const { value: sizeValue, setValue: setSizeValue, restoreValue } = useBoundProp( sizePropTypeUtil );
+		const { value: sizeValue, setValue: setSizeValue, restoreValue, disabled } = useBoundProp( sizePropTypeUtil );
 
 		const [ state, setState ] = useSyncExternalState( {
 			external: sizeValue,
@@ -55,6 +55,7 @@ export const SizeControl = createControl(
 
 		return (
 			<Input
+				disabled={ disabled }
 				size={ state.size }
 				unit={ state.unit }
 				placeholder={ placeholder }
@@ -103,6 +104,7 @@ type SizeInputProps = {
 	onBlur?: ( event: React.FocusEvent< HTMLInputElement > ) => void;
 	handleUnitChange: ( unit: Unit ) => void;
 	handleSizeChange: ( event: React.ChangeEvent< HTMLInputElement > ) => void;
+	disabled?: boolean;
 };
 
 const RESTRICTED_INPUT_KEYS = [ 'e', 'E', '+', '-' ];
@@ -116,6 +118,7 @@ const SizeInput = ( {
 	onBlur,
 	size,
 	unit,
+	disabled,
 }: SizeInputProps ) => {
 	const unitInputBufferRef = useRef( '' );
 
@@ -144,32 +147,37 @@ const SizeInput = ( {
 
 	return (
 		<ControlActions>
-			<TextFieldInnerSelection
-				endAdornment={
-					<SelectionEndAdornment
-						options={ units }
-						onClick={ handleUnitChange }
-						value={ unit ?? defaultUnit }
-					/>
-				}
-				placeholder={ placeholder }
-				startAdornment={
-					startIcon ? <InputAdornment position="start">{ startIcon }</InputAdornment> : undefined
-				}
-				type="number"
-				value={ Number.isNaN( size ) ? '' : size }
-				onChange={ handleSizeChange }
-				onBlur={ ( event ) => {
-					unitInputBufferRef.current = '';
-					onBlur?.( event );
-				} }
-				onKeyDown={ ( event ) => {
-					if ( RESTRICTED_INPUT_KEYS.includes( event.key ) ) {
-						event.preventDefault();
+			<Box>
+				<TextFieldInnerSelection
+					disabled={ disabled }
+					endAdornment={
+						<SelectionEndAdornment
+							disabled={ disabled }
+							options={ units }
+							onClick={ handleUnitChange }
+							value={ unit ?? defaultUnit }
+						/>
 					}
-				} }
-				onKeyUp={ handleKeyUp }
-			/>
+					placeholder={ placeholder }
+					startAdornment={
+						startIcon ? (
+							<InputAdornment position="start" disabled={ disabled }>
+								{ startIcon }
+							</InputAdornment>
+						) : undefined
+					}
+					type="number"
+					value={ Number.isNaN( size ) ? '' : size }
+					onChange={ handleSizeChange }
+					onBlur={ onBlur }
+					onKeyDown={ ( event ) => {
+						if ( RESTRICTED_INPUT_KEYS.includes( event.key ) ) {
+							event.preventDefault();
+						}
+					} }
+					onKeyUp={ handleKeyUp }
+				/>
+			</Box>
 		</ControlActions>
 	);
 };

package/src/controls/switch-control.tsx

@@ -6,7 +6,7 @@ import { useBoundProp } from '../bound-prop-context/use-bound-prop';
 import { createControl } from '../create-control';
 
 export const SwitchControl = createControl( () => {
-	const { value, setValue } = useBoundProp( booleanPropTypeUtil );
+	const { value, setValue, disabled } = useBoundProp( booleanPropTypeUtil );
 
 	const handleChange = ( event: React.ChangeEvent< HTMLInputElement > ) => {
 		setValue( event.target.checked );
@@ -14,7 +14,7 @@ export const SwitchControl = createControl( () => {
 
 	return (
 		<div style={ { display: 'flex', justifyContent: 'flex-end' } }>
-			<Switch checked={ !! value } onChange={ handleChange } size="small" />
+			<Switch checked={ !! value } onChange={ handleChange } size="small" disabled={ disabled } />
 		</div>
 	);
 } );

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

@@ -11,7 +11,7 @@ type Props = {
 };
 
 export const TextAreaControl = createControl( ( { placeholder }: Props ) => {
-	const { value, setValue } = useBoundProp( stringPropTypeUtil );
+	const { value, setValue, disabled } = useBoundProp( stringPropTypeUtil );
 
 	const handleChange = ( event: React.ChangeEvent< HTMLInputElement > ) => {
 		setValue( event.target.value );
@@ -24,6 +24,7 @@ export const TextAreaControl = createControl( ( { placeholder }: Props ) => {
 				multiline
 				fullWidth
 				minRows={ 5 }
+				disabled={ disabled }
 				value={ value ?? '' }
 				onChange={ handleChange }
 				placeholder={ placeholder }

package/src/controls/text-control.tsx

@@ -7,7 +7,7 @@ import ControlActions from '../control-actions/control-actions';
 import { createControl } from '../create-control';
 
 export const TextControl = createControl( ( { placeholder }: { placeholder?: string } ) => {
-	const { value, setValue } = useBoundProp( stringPropTypeUtil );
+	const { value, setValue, disabled } = useBoundProp( stringPropTypeUtil );
 
 	const handleChange = ( event: React.ChangeEvent< HTMLInputElement > ) => setValue( event.target.value );
 
@@ -16,6 +16,7 @@ export const TextControl = createControl( ( { placeholder }: { placeholder?: str
 			<TextField
 				size="tiny"
 				fullWidth
+				disabled={ disabled }
 				value={ value ?? '' }
 				onChange={ handleChange }
 				placeholder={ placeholder }

package/src/controls/toggle-control.tsx

@@ -22,7 +22,7 @@ export const ToggleControl = createControl(
 		exclusive = true,
 		maxItems,
 	}: ToggleControlProps< StringPropValue[ 'value' ] > ) => {
-		const { value, setValue, placeholder } = useBoundProp( stringPropTypeUtil );
+		const { value, setValue, placeholder, disabled } = useBoundProp( stringPropTypeUtil );
 
 		const exclusiveValues = options.filter( ( option ) => option.exclusive ).map( ( option ) => option.value );
 
@@ -49,6 +49,7 @@ export const ToggleControl = createControl(
 				{ ...toggleButtonGroupProps }
 				value={ value ?? placeholder ?? null }
 				onChange={ setValue }
+				disabled={ disabled }
 				exclusive={ true }
 			/>
 		) : (
@@ -56,6 +57,7 @@ export const ToggleControl = createControl(
 				{ ...toggleButtonGroupProps }
 				value={ ( value ?? placeholder )?.split( ' ' ) ?? [] }
 				onChange={ handleNonExclusiveToggle }
+				disabled={ disabled }
 				exclusive={ false }
 			/>
 		);

package/src/controls/url-control.tsx

@@ -7,7 +7,7 @@ import ControlActions from '../control-actions/control-actions';
 import { createControl } from '../create-control';
 
 export const UrlControl = createControl( ( { placeholder }: { placeholder?: string } ) => {
-	const { value, setValue } = useBoundProp( urlPropTypeUtil );
+	const { value, setValue, disabled } = useBoundProp( urlPropTypeUtil );
 	const handleChange = ( event: React.ChangeEvent< HTMLInputElement > ) => setValue( event.target.value );
 
 	return (
@@ -16,6 +16,7 @@ export const UrlControl = createControl( ( { placeholder }: { placeholder?: stri
 				size="tiny"
 				fullWidth
 				value={ value ?? '' }
+				disabled={ disabled }
 				onChange={ handleChange }
 				placeholder={ placeholder }
 			/>