@elementor/editor-controls 0.36.0 → 1.1.0

package/src/controls/background-control/background-overlay/background-image-overlay/background-image-overlay-position.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { type MutableRefObject, useRef } from 'react';
 import { backgroundImagePositionOffsetPropTypeUtil, stringPropTypeUtil } from '@elementor/editor-props';
 import { MenuListItem } from '@elementor/editor-ui';
 import { LetterXIcon, LetterYIcon } from '@elementor/icons';
@@ -40,6 +41,7 @@ export const BackgroundImageOverlayPosition = () => {
 	const stringPropContext = useBoundProp( stringPropTypeUtil );
 
 	const isCustom = !! backgroundImageOffsetContext.value;
+	const rowRef: MutableRefObject< HTMLElement | undefined > = useRef();
 
 	const handlePositionChange = ( event: SelectChangeEvent< Positions > ) => {
 		const value = event.target.value || null;
@@ -78,15 +80,21 @@ export const BackgroundImageOverlayPosition = () => {
 			{ isCustom ? (
 				<PropProvider { ...backgroundImageOffsetContext }>
 					<Grid item xs={ 12 }>
-						<Grid container spacing={ 1.5 }>
+						<Grid container spacing={ 1.5 } ref={ rowRef }>
 							<Grid item xs={ 6 }>
 								<PropKeyProvider bind={ 'x' }>
-									<SizeControl startIcon={ <LetterXIcon fontSize={ 'tiny' } /> } />
+									<SizeControl
+										startIcon={ <LetterXIcon fontSize={ 'tiny' } /> }
+										anchorRef={ rowRef }
+									/>
 								</PropKeyProvider>
 							</Grid>
 							<Grid item xs={ 6 }>
 								<PropKeyProvider bind={ 'y' }>
-									<SizeControl startIcon={ <LetterYIcon fontSize={ 'tiny' } /> } />
+									<SizeControl
+										startIcon={ <LetterYIcon fontSize={ 'tiny' } /> }
+										anchorRef={ rowRef }
+									/>
 								</PropKeyProvider>
 							</Grid>
 						</Grid>

package/src/controls/background-control/background-overlay/background-image-overlay/background-image-overlay-size.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { type MutableRefObject, useRef } from 'react';
 import { backgroundImageSizeScalePropTypeUtil, stringPropTypeUtil } from '@elementor/editor-props';
 import {
 	ArrowBarBothIcon,
@@ -54,6 +55,7 @@ export const BackgroundImageOverlaySize = () => {
 	const stringPropContext = useBoundProp( stringPropTypeUtil );
 
 	const isCustom = !! backgroundImageScaleContext.value;
+	const rowRef: MutableRefObject< HTMLElement | undefined > = useRef();
 
 	const handleSizeChange = ( size: Sizes | null ) => {
 		if ( size === 'custom' ) {
@@ -85,13 +87,14 @@ export const BackgroundImageOverlaySize = () => {
 			</Grid>
 			{ isCustom ? (
 				<PropProvider { ...backgroundImageScaleContext }>
-					<Grid item xs={ 12 }>
+					<Grid item xs={ 12 } ref={ rowRef }>
 						<PopoverGridContainer>
 							<Grid item xs={ 6 }>
 								<PropKeyProvider bind={ 'width' }>
 									<SizeControl
 										startIcon={ <ArrowsMoveHorizontalIcon fontSize={ 'tiny' } /> }
-										extendedValues={ [ 'auto' ] }
+										extendedOptions={ [ 'auto' ] }
+										anchorRef={ rowRef }
 									/>
 								</PropKeyProvider>
 							</Grid>
@@ -99,7 +102,8 @@ export const BackgroundImageOverlaySize = () => {
 								<PropKeyProvider bind={ 'height' }>
 									<SizeControl
 										startIcon={ <ArrowsMoveVerticalIcon fontSize={ 'tiny' } /> }
-										extendedValues={ [ 'auto' ] }
+										extendedOptions={ [ 'auto' ] }
+										anchorRef={ rowRef }
 									/>
 								</PropKeyProvider>
 							</Grid>

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

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { type MutableRefObject, useRef } from 'react';
 import { boxShadowPropTypeUtil, type PropKey, shadowPropTypeUtil, type ShadowPropValue } from '@elementor/editor-props';
 import { FormLabel, Grid, type SxProps, type Theme, UnstableColorIndicator } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
@@ -48,6 +49,7 @@ const ItemContent = ( { anchorEl, bind }: { anchorEl: HTMLElement | null; bind:
 
 const Content = ( { anchorEl }: { anchorEl: HTMLElement | null } ) => {
 	const context = useBoundProp( shadowPropTypeUtil );
+	const rowRef: MutableRefObject< HTMLElement | undefined >[] = [ useRef(), useRef() ];
 
 	return (
 		<PropProvider { ...context }>
@@ -65,20 +67,20 @@ const Content = ( { anchorEl }: { anchorEl: HTMLElement | null } ) => {
 						/>
 					</Control>
 				</PopoverGridContainer>
-				<PopoverGridContainer>
+				<PopoverGridContainer ref={ rowRef[ 0 ] }>
 					<Control bind="hOffset" label={ __( 'Horizontal', 'elementor' ) }>
-						<SizeControl />
+						<SizeControl anchorRef={ rowRef[ 0 ] } />
 					</Control>
 					<Control bind="vOffset" label={ __( 'Vertical', 'elementor' ) }>
-						<SizeControl />
+						<SizeControl anchorRef={ rowRef[ 0 ] } />
 					</Control>
 				</PopoverGridContainer>
-				<PopoverGridContainer>
+				<PopoverGridContainer ref={ rowRef[ 1 ] }>
 					<Control bind="blur" label={ __( 'Blur', 'elementor' ) }>
-						<SizeControl />
+						<SizeControl anchorRef={ rowRef[ 1 ] } />
 					</Control>
 					<Control bind="spread" label={ __( 'Spread', 'elementor' ) }>
-						<SizeControl />
+						<SizeControl anchorRef={ rowRef[ 1 ] } />
 					</Control>
 				</PopoverGridContainer>
 			</PopoverContent>

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { type ReactNode, useId, useRef } from 'react';
+import { type MutableRefObject, type ReactNode, useId, useRef } from 'react';
 import { type PropKey, type PropTypeUtil, sizePropTypeUtil, type SizePropValue } from '@elementor/editor-props';
 import { isExperimentActive } from '@elementor/editor-v1-adapters';
 import { bindPopover, bindToggle, Grid, Popover, Stack, ToggleButton, Tooltip, usePopupState } from '@elementor/ui';
@@ -52,7 +52,6 @@ export function EqualUnequalSizesControl< TMultiPropType extends string, TPropVa
 	multiSizePropTypeUtil,
 }: Props< TMultiPropType, TPropValue > ) {
 	const popupId = useId();
-	const controlRef = useRef< HTMLElement >( null );
 	const popupState = usePopupState( { variant: 'popover', popupId } );
 
 	const {
@@ -64,6 +63,8 @@ export function EqualUnequalSizesControl< TMultiPropType extends string, TPropVa
 
 	const { value: sizeValue, setValue: setSizeValue } = useBoundProp( sizePropTypeUtil );
 
+	const rowRefs: MutableRefObject< HTMLElement | undefined >[] = [ useRef(), useRef() ];
+
 	const splitEqualValue = () => {
 		if ( ! sizeValue ) {
 			return null;
@@ -104,7 +105,7 @@ export function EqualUnequalSizesControl< TMultiPropType extends string, TPropVa
 
 	return (
 		<>
-			<Grid container gap={ 2 } alignItems="center" flexWrap="nowrap" ref={ controlRef }>
+			<Grid container gap={ 2 } alignItems="center" flexWrap="nowrap" ref={ rowRefs[ 0 ] }>
 				<Grid item xs={ 6 }>
 					{ ! isShowingGeneralIndicator ? (
 						<ControlFormLabel>{ label }</ControlFormLabel>
@@ -114,7 +115,10 @@ export function EqualUnequalSizesControl< TMultiPropType extends string, TPropVa
 				</Grid>
 				<Grid item xs={ 6 }>
 					<Stack direction="row" alignItems="center" gap={ 1 }>
-						<SizeControl placeholder={ isMixed ? __( 'Mixed', 'elementor' ) : undefined } />
+						<SizeControl
+							placeholder={ isMixed ? __( 'Mixed', 'elementor' ) : undefined }
+							anchorRef={ rowRefs[ 0 ] }
+						/>
 						<Tooltip title={ tooltipLabel } placement="top">
 							<ToggleButton
 								size={ 'tiny' }
@@ -143,7 +147,7 @@ export function EqualUnequalSizesControl< TMultiPropType extends string, TPropVa
 				} }
 				{ ...bindPopover( popupState ) }
 				slotProps={ {
-					paper: { sx: { mt: 0.5, width: controlRef.current?.getBoundingClientRect().width } },
+					paper: { sx: { mt: 0.5, width: rowRefs[ 0 ].current?.getBoundingClientRect().width } },
 				} }
 			>
 				<PropProvider
@@ -152,14 +156,14 @@ export function EqualUnequalSizesControl< TMultiPropType extends string, TPropVa
 					setValue={ setNestedProp }
 					disabled={ multiSizeDisabled }
 				>
-					<PopoverContent p={ 1.5 } pt={ 2.5 } pb={ 3 }>
-						<PopoverGridContainer>
-							<MultiSizeValueControl item={ items[ 0 ] } />
-							<MultiSizeValueControl item={ items[ 1 ] } />
+					<PopoverContent p={ 1.5 }>
+						<PopoverGridContainer ref={ rowRefs[ 1 ] }>
+							<MultiSizeValueControl item={ items[ 0 ] } rowRef={ rowRefs[ 1 ] } />
+							<MultiSizeValueControl item={ items[ 1 ] } rowRef={ rowRefs[ 1 ] } />
 						</PopoverGridContainer>
-						<PopoverGridContainer>
-							<MultiSizeValueControl item={ items[ 2 ] } />
-							<MultiSizeValueControl item={ items[ 3 ] } />
+						<PopoverGridContainer ref={ rowRefs[ 2 ] }>
+							<MultiSizeValueControl item={ items[ 2 ] } rowRef={ rowRefs[ 2 ] } />
+							<MultiSizeValueControl item={ items[ 3 ] } rowRef={ rowRefs[ 2 ] } />
 						</PopoverGridContainer>
 					</PopoverContent>
 				</PropProvider>
@@ -168,7 +172,13 @@ export function EqualUnequalSizesControl< TMultiPropType extends string, TPropVa
 	);
 }
 
-const MultiSizeValueControl = ( { item }: { item: Item } ) => {
+const MultiSizeValueControl = ( {
+	item,
+	rowRef,
+}: {
+	item: Item;
+	rowRef: MutableRefObject< HTMLElement | undefined >;
+} ) => {
 	const isUsingNestedProps = isExperimentActive( 'e_v_3_30' );
 
 	return (
@@ -183,7 +193,7 @@ const MultiSizeValueControl = ( { item }: { item: Item } ) => {
 						) }
 					</Grid>
 					<Grid item xs={ 12 }>
-						<SizeControl startIcon={ item.icon } />
+						<SizeControl startIcon={ item.icon } anchorRef={ rowRef } />
 					</Grid>
 				</Grid>
 			</Grid>

package/src/controls/gap-control.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { type MutableRefObject, useRef } from 'react';
 import { layoutDirectionPropTypeUtil, type PropKey, sizePropTypeUtil } from '@elementor/editor-props';
 import { DetachIcon, LinkIcon } from '@elementor/icons';
 import { Grid, Stack, ToggleButton, Tooltip } from '@elementor/ui';
@@ -18,6 +19,8 @@ export const GapControl = createControl( ( { label }: { label: string } ) => {
 		disabled: directionDisabled,
 	} = useBoundProp( layoutDirectionPropTypeUtil );
 
+	const stackRef: MutableRefObject< HTMLElement | undefined > = useRef();
+
 	const { value: sizeValue, setValue: setSizeValue, disabled: sizeDisabled } = useBoundProp( sizePropTypeUtil );
 
 	const isLinked = ! directionValue && ! sizeValue ? true : !! sizeValue;
@@ -64,13 +67,13 @@ export const GapControl = createControl( ( { label }: { label: string } ) => {
 					</ToggleButton>
 				</Tooltip>
 			</Stack>
-			<Stack direction="row" gap={ 2 } flexWrap="nowrap">
+			<Stack direction="row" gap={ 2 } flexWrap="nowrap" ref={ stackRef }>
 				<Grid container gap={ 0.75 } alignItems="center">
 					<Grid item xs={ 12 }>
 						<ControlFormLabel>{ __( 'Column', 'elementor' ) }</ControlFormLabel>
 					</Grid>
 					<Grid item xs={ 12 }>
-						<Control bind={ 'column' } isLinked={ isLinked } />
+						<Control bind={ 'column' } isLinked={ isLinked } anchorRef={ stackRef } />
 					</Grid>
 				</Grid>
 				<Grid container gap={ 0.75 } alignItems="center">
@@ -78,7 +81,7 @@ export const GapControl = createControl( ( { label }: { label: string } ) => {
 						<ControlFormLabel>{ __( 'Row', 'elementor' ) }</ControlFormLabel>
 					</Grid>
 					<Grid item xs={ 12 }>
-						<Control bind={ 'row' } isLinked={ isLinked } />
+						<Control bind={ 'row' } isLinked={ isLinked } anchorRef={ stackRef } />
 					</Grid>
 				</Grid>
 			</Stack>
@@ -86,14 +89,22 @@ export const GapControl = createControl( ( { label }: { label: string } ) => {
 	);
 } );
 
-const Control = ( { bind, isLinked }: { bind: PropKey; isLinked: boolean } ) => {
+const Control = ( {
+	bind,
+	isLinked,
+	anchorRef,
+}: {
+	bind: PropKey;
+	isLinked: boolean;
+	anchorRef: MutableRefObject< HTMLElement | undefined >;
+} ) => {
 	if ( isLinked ) {
-		return <SizeControl />;
+		return <SizeControl anchorRef={ anchorRef } />;
 	}
 
 	return (
 		<PropKeyProvider bind={ bind }>
-			<SizeControl />
+			<SizeControl anchorRef={ anchorRef } />
 		</PropKeyProvider>
 	);
 };

package/src/controls/key-value-control.tsx

@@ -0,0 +1,99 @@
+import * as React from 'react';
+import { type ChangeEvent, useMemo, useState } from 'react';
+import { keyValuePropTypeUtil } from '@elementor/editor-props';
+import { FormHelperText, FormLabel, Grid, type SxProps, TextField, type Theme } from '@elementor/ui';
+import { __ } from '@wordpress/i18n';
+
+import { useBoundProp } from '../bound-prop-context';
+import ControlActions from '../control-actions/control-actions';
+import { createControl } from '../create-control';
+
+type FieldType = 'key' | 'value';
+
+type KeyValueControlProps = {
+	keyName?: string;
+	valueName?: string;
+	sx?: SxProps< Theme >;
+	regexKey?: string;
+	regexValue?: string;
+	validationErrorMessage?: string;
+};
+
+export const KeyValueControl = createControl( ( props: KeyValueControlProps = {} ) => {
+	const { value, setValue } = useBoundProp( keyValuePropTypeUtil );
+	const [ keyError, setKeyError ] = useState< string | null >( null );
+	const [ valueError, setValueError ] = useState< string | null >( null );
+	const keyLabel = props.keyName || __( 'Key', 'elementor' );
+	const valueLabel = props.valueName || __( 'Value', 'elementor' );
+
+	const keyValue = value?.key?.value || '';
+	const valueValue = value?.value?.value || '';
+
+	const [ keyRegex, valueRegex, errMsg ] = useMemo< [ RegExp | undefined, RegExp | undefined, string ] >(
+		() => [
+			props.regexKey ? new RegExp( props.regexKey ) : undefined,
+			props.regexValue ? new RegExp( props.regexValue ) : undefined,
+			props.validationErrorMessage || __( 'Invalid Format', 'elementor' ),
+		],
+		[ props.regexKey, props.regexValue, props.validationErrorMessage ]
+	);
+
+	const validate = ( newValue: string, FieldType: string ): void => {
+		if ( FieldType === 'key' && keyRegex ) {
+			const isValid = keyRegex.test( newValue );
+			setKeyError( isValid ? null : errMsg );
+		} else if ( FieldType === 'value' && valueRegex ) {
+			const isValid = valueRegex.test( newValue );
+			setValueError( isValid ? null : errMsg );
+		}
+	};
+
+	const handleChange = ( event: ChangeEvent< HTMLInputElement >, fieldType: FieldType ) => {
+		const newValue = event.target.value;
+
+		validate( newValue, fieldType );
+
+		setValue( {
+			...value,
+			[ fieldType ]: {
+				value: newValue,
+				$$type: 'string',
+			},
+		} );
+	};
+
+	const isKeyInvalid = keyError !== null;
+	const isValueInvalid = valueError !== null;
+
+	return (
+		<ControlActions>
+			<Grid container gap={ 1.5 } p={ 1.5 } sx={ props.sx }>
+				<Grid item xs={ 12 }>
+					<FormLabel size="tiny">{ keyLabel }</FormLabel>
+					<TextField
+						sx={ { pt: 1 } }
+						size="tiny"
+						fullWidth
+						value={ keyValue }
+						onChange={ ( e: ChangeEvent< HTMLInputElement > ) => handleChange( e, 'key' ) }
+						error={ isKeyInvalid }
+					/>
+					{ isKeyInvalid && <FormHelperText error>{ keyError }</FormHelperText> }
+				</Grid>
+				<Grid item xs={ 12 }>
+					<FormLabel size="tiny">{ valueLabel }</FormLabel>
+					<TextField
+						sx={ { pt: 1 } }
+						size="tiny"
+						fullWidth
+						value={ valueValue }
+						onChange={ ( e: ChangeEvent< HTMLInputElement > ) => handleChange( e, 'value' ) }
+						disabled={ isKeyInvalid }
+						error={ isValueInvalid }
+					/>
+					{ isValueInvalid && <FormHelperText error>{ valueError }</FormHelperText> }
+				</Grid>
+			</Grid>
+		</ControlActions>
+	);
+} );

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

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { type MutableRefObject, useRef } 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';
@@ -9,19 +10,21 @@ import { PropKeyProvider, PropProvider, useBoundProp } from '../bound-prop-conte
 import { ControlFormLabel } from '../components/control-form-label';
 import { ControlLabel } from '../components/control-label';
 import { createControl } from '../create-control';
-import { type ExtendedValue, SizeControl } from './size-control';
+import { type ExtendedOption } from '../utils/size-control';
+import { SizeControl } from './size-control';
 
 export const LinkedDimensionsControl = createControl(
 	( {
 		label,
 		isSiteRtl = false,
-		extendedValues,
+		extendedOptions,
 	}: {
 		label: string;
 		isSiteRtl?: boolean;
-		extendedValues?: ExtendedValue[];
+		extendedOptions?: ExtendedOption[];
 	} ) => {
 		const { value: sizeValue, setValue: setSizeValue, disabled: sizeDisabled } = useBoundProp( sizePropTypeUtil );
+		const gridRowRefs: MutableRefObject< HTMLElement | undefined >[] = [ useRef(), useRef() ];
 
 		const {
 			value: dimensionsValue,
@@ -87,80 +90,27 @@ export const LinkedDimensionsControl = createControl(
 						</ToggleButton>
 					</Tooltip>
 				</Stack>
-				<Stack direction="row" gap={ 2 } flexWrap="nowrap">
-					<Grid container gap={ 0.75 } alignItems="center">
-						<Grid item xs={ 12 }>
-							<Label bind="block-start" label={ __( 'Top', 'elementor' ) } />
-						</Grid>
-						<Grid item xs={ 12 }>
-							<Control
-								bind={ 'block-start' }
-								startIcon={ <SideTopIcon fontSize={ 'tiny' } /> }
-								isLinked={ isLinked }
-								extendedValues={ extendedValues }
-							/>
-						</Grid>
-					</Grid>
-					<Grid container gap={ 0.75 } alignItems="center">
-						<Grid item xs={ 12 }>
-							<Label
-								bind="inline-end"
-								label={ isSiteRtl ? __( 'Left', 'elementor' ) : __( 'Right', 'elementor' ) }
-							/>
-						</Grid>
-						<Grid item xs={ 12 }>
-							<Control
-								bind={ 'inline-end' }
-								startIcon={
-									isSiteRtl ? (
-										<SideLeftIcon fontSize={ 'tiny' } />
-									) : (
-										<SideRightIcon fontSize={ 'tiny' } />
-									)
-								}
-								isLinked={ isLinked }
-								extendedValues={ extendedValues }
-							/>
-						</Grid>
-					</Grid>
-				</Stack>
-				<Stack direction="row" gap={ 2 } flexWrap="nowrap">
-					<Grid container gap={ 0.75 } alignItems="center">
-						<Grid item xs={ 12 }>
-							<Label bind="block-end" label={ __( 'Bottom', 'elementor' ) } />
-						</Grid>
-						<Grid item xs={ 12 }>
-							<Control
-								bind={ 'block-end' }
-								startIcon={ <SideBottomIcon fontSize={ 'tiny' } /> }
-								isLinked={ isLinked }
-								extendedValues={ extendedValues }
-							/>
-						</Grid>
-					</Grid>
-					<Grid container gap={ 0.75 } alignItems="center">
-						<Grid item xs={ 12 }>
-							<Label
-								bind="inline-start"
-								label={ isSiteRtl ? __( 'Right', 'elementor' ) : __( 'Left', 'elementor' ) }
-							/>
-						</Grid>
-						<Grid item xs={ 12 }>
-							<Control
-								bind={ 'inline-start' }
-								isLinked={ isLinked }
-								extendedValues={ extendedValues }
-								startIcon={
-									isSiteRtl ? (
-										<SideRightIcon fontSize={ 'tiny' } />
-									) : (
-										<SideLeftIcon fontSize={ 'tiny' } />
-									)
-								}
-							/>
-						</Grid>
-					</Grid>
-				</Stack>
+
+				{ getCssMarginProps( isSiteRtl ).map( ( row, index ) => (
+					<Stack direction="row" gap={ 2 } flexWrap="nowrap" key={ index } ref={ gridRowRefs[ index ] }>
+						{ row.map( ( { icon, ...props } ) => (
+							<Grid container gap={ 0.75 } alignItems="center" key={ props.bind }>
+								<Grid item xs={ 12 }>
+									<Label { ...props } />
+								</Grid>
+								<Grid item xs={ 12 }>
+									<Control
+										bind={ props.bind }
+										startIcon={ icon }
+										isLinked={ isLinked }
+										extendedOptions={ extendedOptions }
+										anchorRef={ gridRowRefs[ index ] }
+									/>
+								</Grid>
+							</Grid>
+						) ) }
+					</Stack>
+				) ) }
 			</PropProvider>
 		);
 	}
@@ -170,20 +120,22 @@ const Control = ( {
 	bind,
 	startIcon,
 	isLinked,
-	extendedValues,
+	extendedOptions,
+	anchorRef,
 }: {
 	bind: PropKey;
 	startIcon: React.ReactNode;
 	isLinked: boolean;
-	extendedValues?: ExtendedValue[];
+	extendedOptions?: ExtendedOption[];
+	anchorRef: MutableRefObject< HTMLElement | undefined >;
 } ) => {
 	if ( isLinked ) {
-		return <SizeControl startIcon={ startIcon } extendedValues={ extendedValues } />;
+		return <SizeControl startIcon={ startIcon } extendedOptions={ extendedOptions } anchorRef={ anchorRef } />;
 	}
 
 	return (
 		<PropKeyProvider bind={ bind }>
-			<SizeControl startIcon={ startIcon } extendedValues={ extendedValues } />
+			<SizeControl startIcon={ startIcon } extendedOptions={ extendedOptions } anchorRef={ anchorRef } />
 		</PropKeyProvider>
 	);
 };
@@ -201,3 +153,32 @@ const Label = ( { label, bind }: { label: string; bind: PropKey } ) => {
 		</PropKeyProvider>
 	);
 };
+
+function getCssMarginProps( isSiteRtl: boolean ) {
+	return [
+		[
+			{
+				bind: 'block-start',
+				label: __( 'Top', 'elementor' ),
+				icon: <SideTopIcon fontSize={ 'tiny' } />,
+			},
+			{
+				bind: 'inline-end',
+				label: isSiteRtl ? __( 'Left', 'elementor' ) : __( 'Right', 'elementor' ),
+				icon: isSiteRtl ? <SideLeftIcon fontSize={ 'tiny' } /> : <SideRightIcon fontSize={ 'tiny' } />,
+			},
+		],
+		[
+			{
+				bind: 'block-end',
+				label: __( 'Bottom', 'elementor' ),
+				icon: <SideBottomIcon fontSize={ 'tiny' } />,
+			},
+			{
+				bind: 'inline-start',
+				label: isSiteRtl ? __( 'Right', 'elementor' ) : __( 'Left', 'elementor' ),
+				icon: isSiteRtl ? <SideRightIcon fontSize={ 'tiny' } /> : <SideLeftIcon fontSize={ 'tiny' } />,
+			},
+		],
+	];
+}