@elementor/editor-editing-panel 1.44.0 → 1.46.0

package/src/components/style-sections/layout-section/flex-size-field.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { useMemo, useState } from 'react';
+import { type MutableRefObject, useMemo, useRef, useState } from 'react';
 import {
 	ControlToggleButtonGroup,
 	NumberControl,
@@ -8,13 +8,12 @@ import {
 } from '@elementor/editor-controls';
 import { numberPropTypeUtil, type NumberPropValue, type SizePropValue } from '@elementor/editor-props';
 import { ExpandIcon, PencilIcon, ShrinkIcon } from '@elementor/icons';
-import { DirectionProvider, Grid, ThemeProvider } from '@elementor/ui';
+import { Grid } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
-import { useStyle } from '../../../contexts/style-context';
 import { StylesField } from '../../../controls-registry/styles-field';
-import { useDirection } from '../../../hooks/use-direction';
 import { useStylesFields } from '../../../hooks/use-styles-fields';
+import { UiProviders } from '../../../styles-inheritance/components/ui-providers';
 import { ControlLabel } from '../../control-label';
 import { SectionContent } from '../../section-content';
 
@@ -44,18 +43,15 @@ const items: ToggleButtonGroupItem< GroupItem >[] = [
 ];
 
 export const FlexSizeField = () => {
-	const { isSiteRtl } = useDirection();
-	const { canEdit } = useStyle();
-
-	const [ fields, setFields ] = useStylesFields< {
+	const { values, setValues, canEdit } = useStylesFields< {
 		'flex-grow': NumberPropValue | null;
 		'flex-shrink': NumberPropValue | null;
 		'flex-basis': SizePropValue | null;
 	} >( [ 'flex-grow', 'flex-shrink', 'flex-basis' ] );
 
-	const grow = fields?.[ 'flex-grow' ]?.value || null;
-	const shrink = fields?.[ 'flex-shrink' ]?.value || null;
-	const basis = fields?.[ 'flex-basis' ]?.value || null;
+	const grow = values?.[ 'flex-grow' ]?.value || null;
+	const shrink = values?.[ 'flex-shrink' ]?.value || null;
+	const basis = values?.[ 'flex-basis' ]?.value || null;
 
 	const currentGroup = useMemo( () => getActiveGroup( { grow, shrink, basis } ), [ grow, shrink, basis ] ),
 		[ activeGroup, setActiveGroup ] = useState( currentGroup );
@@ -64,7 +60,7 @@ export const FlexSizeField = () => {
 		setActiveGroup( group );
 
 		if ( ! group || group === 'custom' ) {
-			setFields( {
+			setValues( {
 				'flex-basis': null,
 				'flex-grow': null,
 				'flex-shrink': null,
@@ -74,7 +70,7 @@ export const FlexSizeField = () => {
 		}
 
 		if ( group === 'flex-grow' ) {
-			setFields( {
+			setValues( {
 				'flex-basis': null,
 				'flex-grow': numberPropTypeUtil.create( DEFAULT ),
 				'flex-shrink': null,
@@ -83,7 +79,7 @@ export const FlexSizeField = () => {
 			return;
 		}
 
-		setFields( {
+		setValues( {
 			'flex-basis': null,
 			'flex-grow': null,
 			'flex-shrink': numberPropTypeUtil.create( DEFAULT ),
@@ -91,67 +87,69 @@ export const FlexSizeField = () => {
 	};
 
 	return (
-		<DirectionProvider rtl={ isSiteRtl }>
-			<ThemeProvider>
-				<SectionContent>
-					<Grid container gap={ 2 } alignItems="center" flexWrap="nowrap">
-						<StylesField bind={ activeGroup ?? '' }>
-							<Grid item xs={ 6 }>
-								<ControlLabel>{ __( 'Size', 'elementor' ) }</ControlLabel>
-							</Grid>
-
-							<Grid item xs={ 6 } sx={ { display: 'flex', justifyContent: 'end' } }>
-								<ControlToggleButtonGroup
-									value={ activeGroup }
-									onChange={ onChangeGroup }
-									disabled={ ! canEdit }
-									items={ items }
-									exclusive={ true }
-								/>
-							</Grid>
-						</StylesField>
-					</Grid>
-					{ 'custom' === activeGroup && <FlexCustomField /> }
-				</SectionContent>
-			</ThemeProvider>
-		</DirectionProvider>
+		<UiProviders>
+			<SectionContent>
+				<Grid container gap={ 2 } alignItems="center" flexWrap="nowrap">
+					<StylesField bind={ activeGroup ?? '' }>
+						<Grid item xs={ 6 }>
+							<ControlLabel>{ __( 'Size', 'elementor' ) }</ControlLabel>
+						</Grid>
+
+						<Grid item xs={ 6 } sx={ { display: 'flex', justifyContent: 'end' } }>
+							<ControlToggleButtonGroup
+								value={ activeGroup }
+								onChange={ onChangeGroup }
+								disabled={ ! canEdit }
+								items={ items }
+								exclusive={ true }
+							/>
+						</Grid>
+					</StylesField>
+				</Grid>
+				{ 'custom' === activeGroup && <FlexCustomField /> }
+			</SectionContent>
+		</UiProviders>
 	);
 };
 
-const FlexCustomField = () => (
-	<>
-		<StylesField bind={ 'flex-grow' }>
-			<Grid container gap={ 2 } alignItems="center" flexWrap="nowrap">
-				<Grid item xs={ 6 }>
-					<ControlLabel>{ __( 'Grow', 'elementor' ) }</ControlLabel>
-				</Grid>
-				<Grid item xs={ 6 } sx={ { display: 'flex', justifyContent: 'end' } }>
-					<NumberControl min={ 0 } shouldForceInt={ true } />
-				</Grid>
-			</Grid>
-		</StylesField>
-		<StylesField bind={ 'flex-shrink' }>
-			<Grid container gap={ 2 } alignItems="center" flexWrap="nowrap">
-				<Grid item xs={ 6 }>
-					<ControlLabel>{ __( 'Shrink', 'elementor' ) }</ControlLabel>
-				</Grid>
-				<Grid item xs={ 6 } sx={ { display: 'flex', justifyContent: 'end' } }>
-					<NumberControl min={ 0 } shouldForceInt={ true } />
+const FlexCustomField = () => {
+	const flexBasisRowRef: MutableRefObject< HTMLElement | undefined > = useRef();
+
+	return (
+		<>
+			<StylesField bind={ 'flex-grow' }>
+				<Grid container gap={ 2 } alignItems="center" flexWrap="nowrap">
+					<Grid item xs={ 6 }>
+						<ControlLabel>{ __( 'Grow', 'elementor' ) }</ControlLabel>
+					</Grid>
+					<Grid item xs={ 6 } sx={ { display: 'flex', justifyContent: 'end' } }>
+						<NumberControl min={ 0 } shouldForceInt={ true } />
+					</Grid>
 				</Grid>
-			</Grid>
-		</StylesField>
-		<StylesField bind={ 'flex-basis' }>
-			<Grid container gap={ 2 } alignItems="center" flexWrap="nowrap">
-				<Grid item xs={ 6 }>
-					<ControlLabel>{ __( 'Basis', 'elementor' ) }</ControlLabel>
+			</StylesField>
+			<StylesField bind={ 'flex-shrink' }>
+				<Grid container gap={ 2 } alignItems="center" flexWrap="nowrap">
+					<Grid item xs={ 6 }>
+						<ControlLabel>{ __( 'Shrink', 'elementor' ) }</ControlLabel>
+					</Grid>
+					<Grid item xs={ 6 } sx={ { display: 'flex', justifyContent: 'end' } }>
+						<NumberControl min={ 0 } shouldForceInt={ true } />
+					</Grid>
 				</Grid>
-				<Grid item xs={ 6 } sx={ { display: 'flex', justifyContent: 'end' } }>
-					<SizeControl extendedValues={ [ 'auto' ] } />
+			</StylesField>
+			<StylesField bind={ 'flex-basis' }>
+				<Grid container gap={ 2 } alignItems="center" flexWrap="nowrap" ref={ flexBasisRowRef }>
+					<Grid item xs={ 6 }>
+						<ControlLabel>{ __( 'Basis', 'elementor' ) }</ControlLabel>
+					</Grid>
+					<Grid item xs={ 6 } sx={ { display: 'flex', justifyContent: 'end' } }>
+						<SizeControl extendedOptions={ [ 'auto' ] } anchorRef={ flexBasisRowRef } />
+					</Grid>
 				</Grid>
-			</Grid>
-		</StylesField>
-	</>
-);
+			</StylesField>
+		</>
+	);
+};
 
 const getActiveGroup = ( {
 	grow,

package/src/components/style-sections/layout-section/justify-content-field.tsx

@@ -8,11 +8,11 @@ import {
 	JustifySpaceBetweenVerticalIcon as BetweenIcon,
 	JustifyTopIcon,
 } from '@elementor/icons';
-import { DirectionProvider, Stack, ThemeProvider, withDirection } from '@elementor/ui';
+import { Stack, withDirection } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
 import { StylesField } from '../../../controls-registry/styles-field';
-import { useDirection } from '../../../hooks/use-direction';
+import { UiProviders } from '../../../styles-inheritance/components/ui-providers';
 import { ControlLabel } from '../../control-label';
 import { RotatedIcon } from './utils/rotated-icon';
 
@@ -66,18 +66,14 @@ const options: ToggleButtonGroupItem< JustifyContent >[] = [
 ];
 
 export const JustifyContentField = () => {
-	const { isSiteRtl } = useDirection();
-
 	return (
-		<DirectionProvider rtl={ isSiteRtl }>
-			<ThemeProvider>
-				<StylesField bind="justify-content">
-					<Stack gap={ 0.75 }>
-						<ControlLabel>{ __( 'Justify content', 'elementor' ) }</ControlLabel>
-						<ToggleControl options={ options } fullWidth={ true } />
-					</Stack>
-				</StylesField>
-			</ThemeProvider>
-		</DirectionProvider>
+		<UiProviders>
+			<StylesField bind="justify-content">
+				<Stack gap={ 0.75 }>
+					<ControlLabel>{ __( 'Justify content', 'elementor' ) }</ControlLabel>
+					<ToggleControl options={ options } fullWidth={ true } />
+				</Stack>
+			</StylesField>
+		</UiProviders>
 	);
 };

package/src/components/style-sections/layout-section/layout-section.tsx

@@ -21,7 +21,7 @@ import { JustifyContentField } from './justify-content-field';
 import { WrapField } from './wrap-field';
 
 export const LayoutSection = () => {
-	const [ display ] = useStylesField< StringPropValue >( 'display' );
+	const { value: display } = useStylesField< StringPropValue >( 'display' );
 	const displayPlaceholder = useDisplayPlaceholderValue();
 	const isDisplayFlex = shouldDisplayFlexFields( display, displayPlaceholder as StringPropValue );
 	const { element } = useElement();
@@ -39,7 +39,7 @@ export const LayoutSection = () => {
 };
 
 const FlexFields = () => {
-	const [ flexWrap ] = useStylesField< StringPropValue >( 'flex-wrap' );
+	const { value: flexWrap } = useStylesField< StringPropValue >( 'flex-wrap' );
 
 	return (
 		<>

package/src/components/style-sections/layout-section/opacity-control-field.tsx

@@ -0,0 +1,25 @@
+import * as React from 'react';
+import { type MutableRefObject, useRef } from 'react';
+import { SizeControl } from '@elementor/editor-controls';
+import { Grid } from '@elementor/ui';
+import { __ } from '@wordpress/i18n';
+
+import { StylesField } from '../../../controls-registry/styles-field';
+import { ControlLabel } from '../../control-label';
+
+export const OpacityControlField = () => {
+	const rowRef: MutableRefObject< HTMLElement | undefined > = useRef();
+
+	return (
+		<StylesField bind={ 'opacity' }>
+			<Grid container gap={ 2 } alignItems="center" flexWrap="nowrap" ref={ rowRef }>
+				<Grid item xs={ 6 }>
+					<ControlLabel>{ __( 'Opacity', 'elementor' ) }</ControlLabel>
+				</Grid>
+				<Grid item xs={ 6 }>
+					<SizeControl units={ [ '%' ] } anchorRef={ rowRef } defaultUnit="%" />
+				</Grid>
+			</Grid>
+		</StylesField>
+	);
+};

package/src/components/style-sections/layout-section/utils/rotated-icon.tsx

@@ -48,7 +48,7 @@ const useGetTargetAngle = (
 	disableRotationForReversed: boolean,
 	existingRef?: React.MutableRefObject< number >
 ) => {
-	const [ direction ] = useStylesField< StringPropValue >( 'flex-direction' );
+	const { value: direction } = useStylesField< StringPropValue >( 'flex-direction' );
 	const isRtl = 'rtl' === useTheme().direction;
 	const rotationMultiplier = isRtl ? -1 : 1;
 	const angleMap = isClockwise ? CLOCKWISE_ANGLES : COUNTER_CLOCKWISE_ANGLES;

package/src/components/style-sections/layout-section/wrap-field.tsx

@@ -1,11 +1,11 @@
 import * as React from 'react';
 import { type ToggleButtonGroupItem, ToggleControl } from '@elementor/editor-controls';
 import { ArrowBackIcon, ArrowForwardIcon, ArrowRightIcon } from '@elementor/icons';
-import { DirectionProvider, Grid, ThemeProvider } from '@elementor/ui';
+import { Grid } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
 import { StylesField } from '../../../controls-registry/styles-field';
-import { useDirection } from '../../../hooks/use-direction';
+import { UiProviders } from '../../../styles-inheritance/components/ui-providers';
 import { ControlLabel } from '../../control-label';
 
 type FlexWrap = 'nowrap' | 'wrap' | 'wrap-reverse';
@@ -32,22 +32,18 @@ const options: ToggleButtonGroupItem< FlexWrap >[] = [
 ];
 
 export const WrapField = () => {
-	const { isSiteRtl } = useDirection();
-
 	return (
-		<DirectionProvider rtl={ isSiteRtl }>
-			<ThemeProvider>
-				<StylesField bind={ 'flex-wrap' }>
-					<Grid container gap={ 2 } alignItems="center" flexWrap="nowrap">
-						<Grid item xs={ 6 }>
-							<ControlLabel>{ __( 'Wrap', 'elementor' ) }</ControlLabel>
-						</Grid>
-						<Grid item xs={ 6 } sx={ { display: 'flex', justifyContent: 'flex-end' } }>
-							<ToggleControl options={ options } />
-						</Grid>
+		<UiProviders>
+			<StylesField bind={ 'flex-wrap' }>
+				<Grid container gap={ 2 } alignItems="center" flexWrap="nowrap">
+					<Grid item xs={ 6 }>
+						<ControlLabel>{ __( 'Wrap', 'elementor' ) }</ControlLabel>
+					</Grid>
+					<Grid item xs={ 6 } sx={ { display: 'flex', justifyContent: 'flex-end' } }>
+						<ToggleControl options={ options } />
 					</Grid>
-				</StylesField>
-			</ThemeProvider>
-		</DirectionProvider>
+				</Grid>
+			</StylesField>
+		</UiProviders>
 	);
 };

package/src/components/style-sections/position-section/dimensions-field.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { type MutableRefObject, useRef } from 'react';
 import { SizeControl } from '@elementor/editor-controls';
 import { SideBottomIcon, SideLeftIcon, SideRightIcon, SideTopIcon } from '@elementor/icons';
 import { Grid, Stack, withDirection } from '@elementor/ui';
@@ -6,6 +7,7 @@ import { __ } from '@wordpress/i18n';
 
 import { StylesField } from '../../../controls-registry/styles-field';
 import { useDirection } from '../../../hooks/use-direction';
+import { UiProviders } from '../../../styles-inheritance/components/ui-providers';
 import { ControlLabel } from '../../control-label';
 import { RotatedIcon } from '../layout-section/utils/rotated-icon';
 
@@ -29,31 +31,47 @@ const getInlineEndLabel = ( isSiteRtl: boolean ) =>
 
 export const DimensionsField = () => {
 	const { isSiteRtl } = useDirection();
+	const rowRefs: MutableRefObject< HTMLElement | undefined >[] = [ useRef(), useRef() ];
 
 	return (
-		<>
-			<Stack direction="row" gap={ 2 } flexWrap="nowrap">
-				<DimensionField side="inset-block-start" label={ __( 'Top', 'elementor' ) } />
-				<DimensionField side="inset-inline-end" label={ getInlineEndLabel( isSiteRtl ) } />
+		<UiProviders>
+			<Stack direction="row" gap={ 2 } flexWrap="nowrap" ref={ rowRefs[ 0 ] }>
+				<DimensionField side="inset-block-start" label={ __( 'Top', 'elementor' ) } rowRef={ rowRefs[ 0 ] } />
+				<DimensionField
+					side="inset-inline-end"
+					label={ getInlineEndLabel( isSiteRtl ) }
+					rowRef={ rowRefs[ 0 ] }
+				/>
 			</Stack>
-			<Stack direction="row" gap={ 2 } flexWrap="nowrap">
-				<DimensionField side="inset-block-end" label={ __( 'Bottom', 'elementor' ) } />
-				<DimensionField side="inset-inline-start" label={ getInlineStartLabel( isSiteRtl ) } />
+			<Stack direction="row" gap={ 2 } flexWrap="nowrap" ref={ rowRefs[ 1 ] }>
+				<DimensionField side="inset-block-end" label={ __( 'Bottom', 'elementor' ) } rowRef={ rowRefs[ 1 ] } />
+				<DimensionField
+					side="inset-inline-start"
+					label={ getInlineStartLabel( isSiteRtl ) }
+					rowRef={ rowRefs[ 1 ] }
+				/>
 			</Stack>
-		</>
+		</UiProviders>
 	);
 };
-const DimensionField = ( { side, label }: { side: Side; label: string } ) => {
-	return (
-		<StylesField bind={ side }>
-			<Grid container gap={ 0.75 } alignItems="center">
-				<Grid item xs={ 12 }>
-					<ControlLabel>{ label }</ControlLabel>
-				</Grid>
-				<Grid item xs={ 12 }>
-					<SizeControl startIcon={ sideIcons[ side ] } extendedValues={ [ 'auto' ] } />
-				</Grid>
+
+const DimensionField = ( {
+	side,
+	label,
+	rowRef,
+}: {
+	side: Side;
+	label: string;
+	rowRef: MutableRefObject< HTMLElement | undefined >;
+} ) => (
+	<StylesField bind={ side }>
+		<Grid container gap={ 0.75 } alignItems="center">
+			<Grid item xs={ 12 }>
+				<ControlLabel>{ label }</ControlLabel>
 			</Grid>
-		</StylesField>
-	);
-};
+			<Grid item xs={ 12 }>
+				<SizeControl startIcon={ sideIcons[ side ] } extendedOptions={ [ 'auto' ] } anchorRef={ rowRef } />
+			</Grid>
+		</Grid>
+	</StylesField>
+);

package/src/components/style-sections/position-section/offset-field.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { type MutableRefObject, useRef } from 'react';
 import { SizeControl } from '@elementor/editor-controls';
 import { Grid } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
@@ -7,14 +8,16 @@ import { StylesField } from '../../../controls-registry/styles-field';
 import { ControlLabel } from '../../control-label';
 
 export const OffsetField = () => {
+	const rowRef: MutableRefObject< HTMLElement | undefined > = useRef();
+
 	return (
 		<StylesField bind="scroll-margin-top">
-			<Grid container gap={ 2 } alignItems="center" flexWrap="nowrap">
+			<Grid container gap={ 2 } alignItems="center" flexWrap="nowrap" ref={ rowRef }>
 				<Grid item xs={ 6 }>
 					<ControlLabel>{ __( 'Anchor offset', 'elementor' ) }</ControlLabel>
 				</Grid>
 				<Grid item xs={ 6 }>
-					<SizeControl units={ [ 'px', 'em', 'rem', 'vw', 'vh' ] } />
+					<SizeControl units={ [ 'px', 'em', 'rem', 'vw', 'vh' ] } anchorRef={ rowRef } />
 				</Grid>
 			</Grid>
 		</StylesField>

package/src/components/style-sections/position-section/position-section.tsx

@@ -29,8 +29,8 @@ type DimensionsValues = {
 };
 
 export const PositionSection = () => {
-	const [ positionValue ] = useStylesField< StringPropValue >( 'position' );
-	const [ dimensionsValues, setDimensionsValues ] = useStylesFields< DimensionsValues >( [
+	const { value: positionValue } = useStylesField< StringPropValue >( 'position' );
+	const { values: dimensions, setValues: setDimensions } = useStylesFields< DimensionsValues >( [
 		'inset-block-start',
 		'inset-block-end',
 		'inset-inline-start',
@@ -42,9 +42,9 @@ export const PositionSection = () => {
 
 	const onPositionChange = ( newPosition: string | null, previousPosition: string | null | undefined ) => {
 		if ( newPosition === 'static' ) {
-			if ( dimensionsValues ) {
-				updateDimensionsHistory( dimensionsValues );
-				setDimensionsValues( {
+			if ( dimensions ) {
+				updateDimensionsHistory( dimensions );
+				setDimensions( {
 					'inset-block-start': undefined,
 					'inset-block-end': undefined,
 					'inset-inline-start': undefined,
@@ -53,7 +53,7 @@ export const PositionSection = () => {
 			}
 		} else if ( previousPosition === 'static' ) {
 			if ( dimensionsValuesFromHistory ) {
-				setDimensionsValues( dimensionsValuesFromHistory );
+				setDimensions( dimensionsValuesFromHistory );
 				clearDimensionsHistory();
 			}
 		}

package/src/components/style-sections/size-section/object-position-field.tsx

@@ -1,34 +1,12 @@
 import * as React from 'react';
-import { SelectControl } from '@elementor/editor-controls';
-import { Grid } from '@elementor/ui';
-import { __ } from '@wordpress/i18n';
+import { PositionControl } from '@elementor/editor-controls';
 
 import { StylesField } from '../../../controls-registry/styles-field';
-import { ControlLabel } from '../../control-label';
-
-const positionOptions = [
-	{ label: __( 'Center center', 'elementor' ), value: 'center center' },
-	{ label: __( 'Center left', 'elementor' ), value: 'center left' },
-	{ label: __( 'Center right', 'elementor' ), value: 'center right' },
-	{ label: __( 'Top center', 'elementor' ), value: 'top center' },
-	{ label: __( 'Top left', 'elementor' ), value: 'top left' },
-	{ label: __( 'Top right', 'elementor' ), value: 'top right' },
-	{ label: __( 'Bottom center', 'elementor' ), value: 'bottom center' },
-	{ label: __( 'Bottom left', 'elementor' ), value: 'bottom left' },
-	{ label: __( 'Bottom right', 'elementor' ), value: 'bottom right' },
-];
 
 export const ObjectPositionField = () => {
 	return (
 		<StylesField bind="object-position">
-			<Grid container gap={ 2 } alignItems="center" flexWrap="nowrap">
-				<Grid item xs={ 6 }>
-					<ControlLabel>{ __( 'Object position', 'elementor' ) }</ControlLabel>
-				</Grid>
-				<Grid item xs={ 6 } sx={ { overflow: 'hidden' } }>
-					<SelectControl options={ positionOptions } />
-				</Grid>
-			</Grid>
+			<PositionControl />
 		</StylesField>
 	);
 };

package/src/components/style-sections/size-section/size-section.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
-import { AspectRatioControl, type ExtendedValue, SizeControl } from '@elementor/editor-controls';
+import { type MutableRefObject, useRef } from 'react';
+import { AspectRatioControl, type ExtendedOption, SizeControl } from '@elementor/editor-controls';
 import type { StringPropValue } from '@elementor/editor-props';
 import { isExperimentActive } from '@elementor/editor-v1-adapters';
 import { Grid, Stack } from '@elementor/ui';
@@ -15,47 +16,60 @@ import { ObjectFitField } from './object-fit-field';
 import { ObjectPositionField } from './object-position-field';
 import { OverflowField } from './overflow-field';
 
+const EXPERIMENT_ID = 'e_v_3_30';
+
+const CssSizeProps = [
+	[
+		{
+			bind: 'width',
+			label: __( 'Width', 'elementor' ),
+		},
+		{
+			bind: 'height',
+			label: __( 'Height', 'elementor' ),
+		},
+	],
+	[
+		{
+			bind: 'min-width',
+			label: __( 'Min width', 'elementor' ),
+		},
+		{
+			bind: 'min-height',
+			label: __( 'Min height', 'elementor' ),
+		},
+	],
+	[
+		{
+			bind: 'max-width',
+			label: __( 'Max width', 'elementor' ),
+		},
+		{
+			bind: 'max-height',
+			label: __( 'Max height', 'elementor' ),
+		},
+	],
+];
+
 export const SizeSection = () => {
-	const [ fitValue ] = useStylesField< StringPropValue >( 'object-fit' );
+	const { value: fitValue } = useStylesField< StringPropValue >( 'object-fit' );
 
 	const isNotFill = fitValue && fitValue?.value !== 'fill';
 
-	const isVersion330Active = isExperimentActive( 'e_v_3_30' );
+	const gridRowRefs: MutableRefObject< HTMLElement | undefined >[] = [ useRef(), useRef(), useRef() ];
+	const isVersion330Active = isExperimentActive( EXPERIMENT_ID );
 
 	return (
 		<SectionContent>
-			<Grid container gap={ 2 } flexWrap="nowrap">
-				<Grid item xs={ 6 }>
-					<SizeField bind="width" label={ __( 'Width', 'elementor' ) } extendedValues={ [ 'auto' ] } />
-				</Grid>
-				<Grid item xs={ 6 }>
-					<SizeField bind="height" label={ __( 'Height', 'elementor' ) } extendedValues={ [ 'auto' ] } />
-				</Grid>
-			</Grid>
-			<Grid container gap={ 2 } flexWrap="nowrap">
-				<Grid item xs={ 6 }>
-					<SizeField
-						bind="min-width"
-						label={ __( 'Min width', 'elementor' ) }
-						extendedValues={ [ 'auto' ] }
-					/>
+			{ CssSizeProps.map( ( row, rowIndex ) => (
+				<Grid key={ rowIndex } container gap={ 2 } flexWrap="nowrap" ref={ gridRowRefs[ rowIndex ] }>
+					{ row.map( ( props ) => (
+						<Grid item xs={ 6 } key={ props.bind }>
+							<SizeField { ...props } rowRef={ gridRowRefs[ rowIndex ] } extendedOptions={ [ 'auto' ] } />
+						</Grid>
+					) ) }
 				</Grid>
-				<Grid item xs={ 6 }>
-					<SizeField
-						bind="min-height"
-						label={ __( 'Min height', 'elementor' ) }
-						extendedValues={ [ 'auto' ] }
-					/>
-				</Grid>
-			</Grid>
-			<Grid container gap={ 2 } flexWrap="nowrap">
-				<Grid item xs={ 6 }>
-					<SizeField bind="max-width" label={ __( 'Max width', 'elementor' ) } />
-				</Grid>
-				<Grid item xs={ 6 }>
-					<SizeField bind="max-height" label={ __( 'Max height', 'elementor' ) } />
-				</Grid>
-			</Grid>
+			) ) }
 			<PanelDivider />
 			<Stack>
 				<OverflowField />
@@ -83,10 +97,11 @@ export const SizeSection = () => {
 type ControlProps = {
 	bind: StylesFieldProps[ 'bind' ];
 	label: string;
-	extendedValues?: ExtendedValue[];
+	rowRef: MutableRefObject< HTMLElement | undefined >;
+	extendedOptions?: ExtendedOption[];
 };
 
-const SizeField = ( { label, bind, extendedValues }: ControlProps ) => {
+const SizeField = ( { label, bind, rowRef, extendedOptions }: ControlProps ) => {
 	return (
 		<StylesField bind={ bind }>
 			<Grid container gap={ 0.75 } alignItems="center">
@@ -94,7 +109,7 @@ const SizeField = ( { label, bind, extendedValues }: ControlProps ) => {
 					<ControlLabel>{ label }</ControlLabel>
 				</Grid>
 				<Grid item xs={ 12 }>
-					<SizeControl extendedValues={ extendedValues } />
+					<SizeControl extendedOptions={ extendedOptions } anchorRef={ rowRef } />
 				</Grid>
 			</Grid>
 		</StylesField>