@elementor/editor-editing-panel 1.43.1 → 1.45.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,13 @@ 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,7 +44,6 @@ const items: ToggleButtonGroupItem< GroupItem >[] = [
 ];
 
 export const FlexSizeField = () => {
-	const { isSiteRtl } = useDirection();
 	const { canEdit } = useStyle();
 
 	const [ fields, setFields ] = useStylesFields< {
@@ -91,67 +90,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/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 (
+
+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>
 			<Grid item xs={ 12 }>
-				<StylesField bind={ side }>
-					<SizeControl startIcon={ sideIcons[ side ] } extendedValues={ [ 'auto' ] } />
-				</StylesField>
+				<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/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';
@@ -7,61 +8,74 @@ import { __ } from '@wordpress/i18n';
 
 import { StylesField, type StylesFieldProps } from '../../../controls-registry/styles-field';
 import { useStylesField } from '../../../hooks/use-styles-field';
-import { CollapsibleContent } from '../../collapsible-content';
 import { ControlLabel } from '../../control-label';
 import { PanelDivider } from '../../panel-divider';
 import { SectionContent } from '../../section-content';
+import { StyleTabCollapsibleContent } from '../../style-tab-collapsible-content';
 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 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 />
 			</Stack>
 			{ isVersion330Active && (
-				<CollapsibleContent>
+				<StyleTabCollapsibleContent fields={ [ 'aspect-ratio', 'object-fit' ] }>
 					<Stack gap={ 2 }>
 						<StylesField bind={ 'aspect-ratio' }>
 							<AspectRatioControl label={ __( 'Aspect Ratio', 'elementor' ) } />
@@ -74,7 +88,7 @@ export const SizeSection = () => {
 							</Grid>
 						) }
 					</Stack>
-				</CollapsibleContent>
+				</StyleTabCollapsibleContent>
 			) }
 		</SectionContent>
 	);
@@ -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>

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

@@ -16,7 +16,7 @@ export const SpacingSection = () => {
 				<LinkedDimensionsControl
 					label={ __( 'Margin', 'elementor' ) }
 					isSiteRtl={ isSiteRtl }
-					extendedValues={ [ 'auto' ] }
+					extendedOptions={ [ 'auto' ] }
 				/>
 			</StylesField>
 			<PanelDivider />

package/src/components/style-sections/typography-section/column-gap-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 ColumnGapField = () => {
+	const rowRef: MutableRefObject< HTMLElement | undefined > = useRef();
+
 	return (
 		<StylesField bind="column-gap">
-			<Grid container gap={ 2 } alignItems="center" flexWrap="nowrap">
+			<Grid container gap={ 2 } alignItems="center" flexWrap="nowrap" ref={ rowRef }>
 				<Grid item xs={ 6 }>
 					<ControlLabel>{ __( 'Column gap', 'elementor' ) }</ControlLabel>
 				</Grid>
 				<Grid item xs={ 6 }>
-					<SizeControl />
+					<SizeControl anchorRef={ rowRef } />
 				</Grid>
 			</Grid>
 		</StylesField>

package/src/components/style-sections/typography-section/font-size-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 FontSizeField = () => {
+	const rowRef: MutableRefObject< HTMLElement | undefined > = useRef();
+
 	return (
 		<StylesField bind="font-size">
-			<Grid container gap={ 2 } alignItems="center" flexWrap="nowrap">
+			<Grid container gap={ 2 } alignItems="center" flexWrap="nowrap" ref={ rowRef }>
 				<Grid item xs={ 6 }>
 					<ControlLabel>{ __( 'Font size', 'elementor' ) }</ControlLabel>
 				</Grid>
 				<Grid item xs={ 6 }>
-					<SizeControl />
+					<SizeControl anchorRef={ rowRef } />
 				</Grid>
 			</Grid>
 		</StylesField>

package/src/components/style-sections/typography-section/letter-spacing-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 LetterSpacingField = () => {
+	const rowRef: MutableRefObject< HTMLElement | undefined > = useRef();
+
 	return (
 		<StylesField bind="letter-spacing">
-			<Grid container gap={ 2 } alignItems="center" flexWrap="nowrap">
+			<Grid container gap={ 2 } alignItems="center" flexWrap="nowrap" ref={ rowRef }>
 				<Grid item xs={ 6 }>
 					<ControlLabel>{ __( 'Letter spacing', 'elementor' ) }</ControlLabel>
 				</Grid>
 				<Grid item xs={ 6 }>
-					<SizeControl />
+					<SizeControl anchorRef={ rowRef } />
 				</Grid>
 			</Grid>
 		</StylesField>

package/src/components/style-sections/typography-section/line-height-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 LineHeightField = () => {
+	const rowRef: MutableRefObject< HTMLElement | undefined > = useRef();
+
 	return (
 		<StylesField bind="line-height">
-			<Grid container gap={ 2 } alignItems="center" flexWrap="nowrap">
+			<Grid container gap={ 2 } alignItems="center" flexWrap="nowrap" ref={ rowRef }>
 				<Grid item xs={ 6 }>
 					<ControlLabel>{ __( 'Line height', 'elementor' ) }</ControlLabel>
 				</Grid>
 				<Grid item xs={ 6 }>
-					<SizeControl />
+					<SizeControl anchorRef={ rowRef } />
 				</Grid>
 			</Grid>
 		</StylesField>

package/src/components/style-sections/typography-section/text-alignment-field.tsx

@@ -5,6 +5,7 @@ import { Grid, withDirection } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
 import { StylesField } from '../../../controls-registry/styles-field';
+import { UiProviders } from '../../../styles-inheritance/components/ui-providers';
 import { ControlLabel } from '../../control-label';
 
 type Alignments = 'start' | 'center' | 'end' | 'justify';
@@ -41,15 +42,17 @@ const options: ToggleButtonGroupItem< Alignments >[] = [
 
 export const TextAlignmentField = () => {
 	return (
-		<StylesField bind={ 'text-align' }>
-			<Grid container gap={ 2 } alignItems="center" flexWrap="nowrap">
-				<Grid item xs={ 6 }>
-					<ControlLabel>{ __( 'Text align', 'elementor' ) }</ControlLabel>
+		<UiProviders>
+			<StylesField bind={ 'text-align' }>
+				<Grid container gap={ 2 } alignItems="center" flexWrap="nowrap">
+					<Grid item xs={ 6 }>
+						<ControlLabel>{ __( 'Text align', 'elementor' ) }</ControlLabel>
+					</Grid>
+					<Grid item xs={ 6 } display="flex" justifyContent="end">
+						<ToggleControl options={ options } />
+					</Grid>
 				</Grid>
-				<Grid item xs={ 6 } display="flex" justifyContent="end">
-					<ToggleControl options={ options } />
-				</Grid>
-			</Grid>
-		</StylesField>
+			</StylesField>
+		</UiProviders>
 	);
 };