@elementor/editor-editing-panel 1.45.0 → 1.47.0

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

@@ -1,10 +1,11 @@
 import * as React from 'react';
 import { SelectControl } 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';
+import { StylesFieldLayout } from '../../styles-field-layout';
+
+const POSITION_LABEL = __( 'Position', 'elementor' );
 
 const positionOptions = [
 	{ label: __( 'Static', 'elementor' ), value: 'static' },
@@ -20,15 +21,10 @@ type Props = {
 
 export const PositionField = ( { onChange }: Props ) => {
 	return (
-		<StylesField bind="position">
-			<Grid container gap={ 2 } alignItems="center" flexWrap="nowrap">
-				<Grid item xs={ 6 }>
-					<ControlLabel>{ __( 'Position', 'elementor' ) }</ControlLabel>
-				</Grid>
-				<Grid item xs={ 6 } sx={ { overflow: 'hidden' } }>
-					<SelectControl options={ positionOptions } onChange={ onChange } />
-				</Grid>
-			</Grid>
+		<StylesField bind="position" propDisplayName={ POSITION_LABEL }>
+			<StylesFieldLayout label={ POSITION_LABEL }>
+				<SelectControl options={ positionOptions } onChange={ onChange } />
+			</StylesFieldLayout>
 		</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/position-section/z-index-field.tsx

@@ -1,22 +1,18 @@
 import * as React from 'react';
 import { NumberControl } 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';
+import { StylesFieldLayout } from '../../styles-field-layout';
+
+const Z_INDEX_LABEL = __( 'Z-index', 'elementor' );
 
 export const ZIndexField = () => {
 	return (
-		<StylesField bind="z-index">
-			<Grid container gap={ 2 } alignItems="center" flexWrap="nowrap">
-				<Grid item xs={ 6 }>
-					<ControlLabel>{ __( 'Z-index', 'elementor' ) }</ControlLabel>
-				</Grid>
-				<Grid item xs={ 6 }>
-					<NumberControl />
-				</Grid>
-			</Grid>
+		<StylesField bind="z-index" propDisplayName={ Z_INDEX_LABEL }>
+			<StylesFieldLayout label={ Z_INDEX_LABEL }>
+				<NumberControl />
+			</StylesFieldLayout>
 		</StylesField>
 	);
 };

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

@@ -1,10 +1,11 @@
 import * as React from 'react';
 import { SelectControl } 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';
+import { StylesFieldLayout } from '../../styles-field-layout';
+
+const OBJECT_FIT_LABEL = __( 'Object fit', 'elementor' );
 
 const positionOptions = [
 	{ label: __( 'Fill', 'elementor' ), value: 'fill' },
@@ -16,15 +17,10 @@ const positionOptions = [
 
 export const ObjectFitField = () => {
 	return (
-		<StylesField bind="object-fit">
-			<Grid container gap={ 2 } alignItems="center" flexWrap="nowrap">
-				<Grid item xs={ 6 }>
-					<ControlLabel>{ __( 'Object fit', 'elementor' ) }</ControlLabel>
-				</Grid>
-				<Grid item xs={ 6 } sx={ { overflow: 'hidden' } }>
-					<SelectControl options={ positionOptions } />
-				</Grid>
-			</Grid>
+		<StylesField bind="object-fit" propDisplayName={ OBJECT_FIT_LABEL }>
+			<StylesFieldLayout label={ OBJECT_FIT_LABEL }>
+				<SelectControl options={ positionOptions } />
+			</StylesFieldLayout>
 		</StylesField>
 	);
 };

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

@@ -1,34 +1,15 @@
 import * as React from 'react';
-import { SelectControl } from '@elementor/editor-controls';
-import { Grid } from '@elementor/ui';
+import { PositionControl } from '@elementor/editor-controls';
 import { __ } from '@wordpress/i18n';
 
 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' },
-];
+const OBJECT_POSITION_LABEL = __( 'Object position', 'elementor' );
 
 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>
+		<StylesField bind="object-position" propDisplayName={ OBJECT_POSITION_LABEL }>
+			<PositionControl />
 		</StylesField>
 	);
 };

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

@@ -1,14 +1,15 @@
 import * as React from 'react';
 import { type ToggleButtonGroupItem, ToggleControl } from '@elementor/editor-controls';
 import { EyeIcon, EyeOffIcon, LetterAIcon } from '@elementor/icons';
-import { Grid } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
 import { StylesField } from '../../../controls-registry/styles-field';
-import { ControlLabel } from '../../control-label';
+import { StylesFieldLayout } from '../../styles-field-layout';
 
 type Overflows = 'visible' | 'hidden' | 'auto';
 
+const OVERFLOW_LABEL = __( 'Overflow', 'elementor' );
+
 const options: ToggleButtonGroupItem< Overflows >[] = [
 	{
 		value: 'visible',
@@ -32,15 +33,10 @@ const options: ToggleButtonGroupItem< Overflows >[] = [
 
 export const OverflowField = () => {
 	return (
-		<StylesField bind={ 'overflow' }>
-			<Grid container gap={ 2 } alignItems="center" flexWrap="nowrap">
-				<Grid item xs={ 6 }>
-					<ControlLabel>{ __( 'Overflow', 'elementor' ) }</ControlLabel>
-				</Grid>
-				<Grid item xs={ 6 } sx={ { display: 'flex', justifyContent: 'flex-end' } }>
-					<ToggleControl options={ options } />
-				</Grid>
-			</Grid>
+		<StylesField bind="overflow" propDisplayName={ OVERFLOW_LABEL }>
+			<StylesFieldLayout label={ OVERFLOW_LABEL }>
+				<ToggleControl options={ options } />
+			</StylesFieldLayout>
 		</StylesField>
 	);
 };

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { type MutableRefObject, useRef } from 'react';
+import { type RefObject, 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';
@@ -51,12 +51,14 @@ const CssSizeProps = [
 	],
 ];
 
+const ASPECT_RATIO_LABEL = __( 'Aspect Ratio', 'elementor' );
+
 export const SizeSection = () => {
-	const [ fitValue ] = useStylesField< StringPropValue >( 'object-fit' );
+	const { value: fitValue } = useStylesField< StringPropValue >( 'object-fit' );
 
 	const isNotFill = fitValue && fitValue?.value !== 'fill';
 
-	const gridRowRefs: MutableRefObject< HTMLElement | undefined >[] = [ useRef(), useRef(), useRef() ];
+	const gridRowRefs: RefObject< HTMLDivElement >[] = [ useRef( null ), useRef( null ), useRef( null ) ];
 	const isVersion330Active = isExperimentActive( EXPERIMENT_ID );
 
 	return (
@@ -76,9 +78,9 @@ export const SizeSection = () => {
 			</Stack>
 			{ isVersion330Active && (
 				<StyleTabCollapsibleContent fields={ [ 'aspect-ratio', 'object-fit' ] }>
-					<Stack gap={ 2 }>
-						<StylesField bind={ 'aspect-ratio' }>
-							<AspectRatioControl label={ __( 'Aspect Ratio', 'elementor' ) } />
+					<Stack gap={ 2 } pt={ 2 }>
+						<StylesField bind="aspect-ratio" propDisplayName={ ASPECT_RATIO_LABEL }>
+							<AspectRatioControl label={ ASPECT_RATIO_LABEL } />
 						</StylesField>
 						<PanelDivider />
 						<ObjectFitField />
@@ -97,13 +99,13 @@ export const SizeSection = () => {
 type ControlProps = {
 	bind: StylesFieldProps[ 'bind' ];
 	label: string;
-	rowRef: MutableRefObject< HTMLElement | undefined >;
+	rowRef: React.RefObject< HTMLDivElement >;
 	extendedOptions?: ExtendedOption[];
 };
 
 const SizeField = ( { label, bind, rowRef, extendedOptions }: ControlProps ) => {
 	return (
-		<StylesField bind={ bind }>
+		<StylesField bind={ bind } propDisplayName={ label }>
 			<Grid container gap={ 0.75 } alignItems="center">
 				<Grid item xs={ 12 }>
 					<ControlLabel>{ label }</ControlLabel>

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

@@ -7,21 +7,24 @@ import { useDirection } from '../../../hooks/use-direction';
 import { PanelDivider } from '../../panel-divider';
 import { SectionContent } from '../../section-content';
 
+const MARGIN_LABEL = __( 'Margin', 'elementor' );
+const PADDING_LABEL = __( 'Padding', 'elementor' );
+
 export const SpacingSection = () => {
 	const { isSiteRtl } = useDirection();
 
 	return (
 		<SectionContent>
-			<StylesField bind={ 'margin' }>
+			<StylesField bind={ 'margin' } propDisplayName={ MARGIN_LABEL }>
 				<LinkedDimensionsControl
-					label={ __( 'Margin', 'elementor' ) }
+					label={ MARGIN_LABEL }
 					isSiteRtl={ isSiteRtl }
 					extendedOptions={ [ 'auto' ] }
 				/>
 			</StylesField>
 			<PanelDivider />
-			<StylesField bind={ 'padding' }>
-				<LinkedDimensionsControl label={ __( 'Padding', 'elementor' ) } isSiteRtl={ isSiteRtl } />
+			<StylesField bind={ 'padding' } propDisplayName={ PADDING_LABEL }>
+				<LinkedDimensionsControl label={ PADDING_LABEL } isSiteRtl={ isSiteRtl } />
 			</StylesField>
 		</SectionContent>
 	);

package/src/components/style-sections/typography-section/column-count-field.tsx

@@ -1,22 +1,18 @@
 import * as React from 'react';
 import { NumberControl } 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';
+import { StylesFieldLayout } from '../../styles-field-layout';
+
+const COLUMN_COUNT_LABEL = __( 'Columns', 'elementor' );
 
 export const ColumnCountField = () => {
 	return (
-		<StylesField bind="column-count">
-			<Grid container gap={ 2 } alignItems="center" flexWrap="nowrap">
-				<Grid item xs={ 6 }>
-					<ControlLabel>{ __( 'Columns', 'elementor' ) }</ControlLabel>
-				</Grid>
-				<Grid item xs={ 6 }>
-					<NumberControl shouldForceInt min={ 0 } step={ 1 } />
-				</Grid>
-			</Grid>
+		<StylesField bind="column-count" propDisplayName={ COLUMN_COUNT_LABEL }>
+			<StylesFieldLayout label={ COLUMN_COUNT_LABEL }>
+				<NumberControl shouldForceInt min={ 0 } step={ 1 } />
+			</StylesFieldLayout>
 		</StylesField>
 	);
 };

package/src/components/style-sections/typography-section/column-gap-field.tsx

@@ -1,25 +1,21 @@
 import * as React from 'react';
-import { type MutableRefObject, useRef } from 'react';
+import { 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';
+import { StylesFieldLayout } from '../../styles-field-layout';
+
+const COLUMN_GAP_LABEL = __( 'Column gap', 'elementor' );
 
 export const ColumnGapField = () => {
-	const rowRef: MutableRefObject< HTMLElement | undefined > = useRef();
+	const rowRef = useRef< HTMLDivElement >( null );
 
 	return (
-		<StylesField bind="column-gap">
-			<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 anchorRef={ rowRef } />
-				</Grid>
-			</Grid>
+		<StylesField bind="column-gap" propDisplayName={ COLUMN_GAP_LABEL }>
+			<StylesFieldLayout label={ COLUMN_GAP_LABEL } ref={ rowRef }>
+				<SizeControl anchorRef={ rowRef } />
+			</StylesFieldLayout>
 		</StylesField>
 	);
 };

package/src/components/style-sections/typography-section/font-family-field.tsx

@@ -1,29 +1,27 @@
 import * as React from 'react';
 import { FontFamilyControl } from '@elementor/editor-controls';
-import { Grid } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
+import { useSectionWidth } from '../../../contexts/section-context';
 import { StylesField } from '../../../controls-registry/styles-field';
-import { ControlLabel } from '../../control-label';
+import { StylesFieldLayout } from '../../styles-field-layout';
 import { useFontFamilies } from './hooks/use-font-families';
 
+const FONT_FAMILY_LABEL = __( 'Font family', 'elementor' );
+
 export const FontFamilyField = () => {
 	const fontFamilies = useFontFamilies();
+	const sectionWidth = useSectionWidth();
 
 	if ( fontFamilies.length === 0 ) {
 		return null;
 	}
 
 	return (
-		<StylesField bind="font-family">
-			<Grid container gap={ 2 } alignItems="center" flexWrap="nowrap">
-				<Grid item xs={ 6 }>
-					<ControlLabel>{ __( 'Font family', 'elementor' ) }</ControlLabel>
-				</Grid>
-				<Grid item xs={ 6 } sx={ { minWidth: 0 } }>
-					<FontFamilyControl fontFamilies={ fontFamilies } />
-				</Grid>
-			</Grid>
+		<StylesField bind="font-family" propDisplayName={ FONT_FAMILY_LABEL }>
+			<StylesFieldLayout label={ FONT_FAMILY_LABEL }>
+				<FontFamilyControl fontFamilies={ fontFamilies } sectionWidth={ sectionWidth } />
+			</StylesFieldLayout>
 		</StylesField>
 	);
 };

package/src/components/style-sections/typography-section/font-size-field.tsx

@@ -1,25 +1,21 @@
 import * as React from 'react';
-import { type MutableRefObject, useRef } from 'react';
+import { 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';
+import { StylesFieldLayout } from '../../styles-field-layout';
+
+const FONT_SIZE_LABEL = __( 'Font size', 'elementor' );
 
 export const FontSizeField = () => {
-	const rowRef: MutableRefObject< HTMLElement | undefined > = useRef();
+	const rowRef = useRef< HTMLDivElement >( null );
 
 	return (
-		<StylesField bind="font-size">
-			<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 anchorRef={ rowRef } />
-				</Grid>
-			</Grid>
+		<StylesField bind="font-size" propDisplayName={ FONT_SIZE_LABEL }>
+			<StylesFieldLayout label={ FONT_SIZE_LABEL } ref={ rowRef }>
+				<SizeControl anchorRef={ rowRef } />
+			</StylesFieldLayout>
 		</StylesField>
 	);
 };

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

@@ -1,12 +1,15 @@
 import * as React from 'react';
-import { ControlFormLabel, type ToggleButtonGroupItem, ToggleControl } from '@elementor/editor-controls';
+import { type ToggleButtonGroupItem, ToggleControl } from '@elementor/editor-controls';
 import { ItalicIcon, MinusIcon } from '@elementor/icons';
-import { Grid } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
 import { StylesField } from '../../../controls-registry/styles-field';
+import { StylesFieldLayout } from '../../styles-field-layout';
 
 type FontStyle = 'normal' | 'italic';
+
+const FONT_STYLE_LABEL = __( 'Font style', 'elementor' );
+
 const options: ToggleButtonGroupItem< FontStyle >[] = [
 	{
 		value: 'normal',
@@ -22,15 +25,12 @@ const options: ToggleButtonGroupItem< FontStyle >[] = [
 	},
 ];
 
-export const FontStyleField = () => (
-	<StylesField bind="font-style">
-		<Grid container gap={ 2 } alignItems="center" flexWrap="nowrap">
-			<Grid item xs={ 6 }>
-				<ControlFormLabel>{ __( 'Font style', 'elementor' ) }</ControlFormLabel>
-			</Grid>
-			<Grid item xs={ 6 } display="flex" justifyContent="end">
+export const FontStyleField = () => {
+	return (
+		<StylesField bind="font-style" propDisplayName={ FONT_STYLE_LABEL }>
+			<StylesFieldLayout label={ FONT_STYLE_LABEL }>
 				<ToggleControl options={ options } />
-			</Grid>
-		</Grid>
-	</StylesField>
-);
+			</StylesFieldLayout>
+		</StylesField>
+	);
+};

package/src/components/style-sections/typography-section/font-weight-field.tsx

@@ -1,10 +1,11 @@
 import * as React from 'react';
 import { SelectControl } 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';
+import { StylesFieldLayout } from '../../styles-field-layout';
+
+const FONT_WEIGHT_LABEL = __( 'Font weight', 'elementor' );
 
 const fontWeightOptions = [
 	{ value: '100', label: __( '100 - Thin', 'elementor' ) },
@@ -20,15 +21,10 @@ const fontWeightOptions = [
 
 export const FontWeightField = () => {
 	return (
-		<StylesField bind="font-weight">
-			<Grid container gap={ 2 } alignItems="center" flexWrap="nowrap">
-				<Grid item xs={ 6 }>
-					<ControlLabel>{ __( 'Font weight', 'elementor' ) }</ControlLabel>
-				</Grid>
-				<Grid item xs={ 6 } sx={ { overflow: 'hidden' } }>
-					<SelectControl options={ fontWeightOptions } />
-				</Grid>
-			</Grid>
+		<StylesField bind="font-weight" propDisplayName={ FONT_WEIGHT_LABEL }>
+			<StylesFieldLayout label={ FONT_WEIGHT_LABEL }>
+				<SelectControl options={ fontWeightOptions } />
+			</StylesFieldLayout>
 		</StylesField>
 	);
 };

package/src/components/style-sections/typography-section/letter-spacing-field.tsx

@@ -1,25 +1,21 @@
 import * as React from 'react';
-import { type MutableRefObject, useRef } from 'react';
+import { 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';
+import { StylesFieldLayout } from '../../styles-field-layout';
+
+const LETTER_SPACING_LABEL = __( 'Letter spacing', 'elementor' );
 
 export const LetterSpacingField = () => {
-	const rowRef: MutableRefObject< HTMLElement | undefined > = useRef();
+	const rowRef = useRef< HTMLDivElement >( null );
 
 	return (
-		<StylesField bind="letter-spacing">
-			<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 anchorRef={ rowRef } />
-				</Grid>
-			</Grid>
+		<StylesField bind="letter-spacing" propDisplayName={ LETTER_SPACING_LABEL }>
+			<StylesFieldLayout label={ LETTER_SPACING_LABEL } ref={ rowRef }>
+				<SizeControl anchorRef={ rowRef } />
+			</StylesFieldLayout>
 		</StylesField>
 	);
 };

package/src/components/style-sections/typography-section/line-height-field.tsx

@@ -1,25 +1,21 @@
 import * as React from 'react';
-import { type MutableRefObject, useRef } from 'react';
+import { 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';
+import { StylesFieldLayout } from '../../styles-field-layout';
+
+const LINE_HEIGHT_LABEL = __( 'Line height', 'elementor' );
 
 export const LineHeightField = () => {
-	const rowRef: MutableRefObject< HTMLElement | undefined > = useRef();
+	const rowRef = useRef< HTMLDivElement >( null );
 
 	return (
-		<StylesField bind="line-height">
-			<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 anchorRef={ rowRef } />
-				</Grid>
-			</Grid>
+		<StylesField bind="line-height" propDisplayName={ LINE_HEIGHT_LABEL }>
+			<StylesFieldLayout label={ LINE_HEIGHT_LABEL } ref={ rowRef }>
+				<SizeControl anchorRef={ rowRef } />
+			</StylesFieldLayout>
 		</StylesField>
 	);
 };

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

@@ -1,15 +1,17 @@
 import * as React from 'react';
 import { type ToggleButtonGroupItem, ToggleControl } from '@elementor/editor-controls';
 import { AlignCenterIcon, AlignJustifiedIcon, AlignLeftIcon, AlignRightIcon } from '@elementor/icons';
-import { Grid, withDirection } from '@elementor/ui';
+import { 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';
+import { StylesFieldLayout } from '../../styles-field-layout';
 
 type Alignments = 'start' | 'center' | 'end' | 'justify';
 
+const TEXT_ALIGNMENT_LABEL = __( 'Text align', 'elementor' );
+
 const AlignStartIcon = withDirection( AlignLeftIcon );
 const AlignEndIcon = withDirection( AlignRightIcon );
 
@@ -42,17 +44,12 @@ const options: ToggleButtonGroupItem< Alignments >[] = [
 
 export const TextAlignmentField = () => {
 	return (
-		<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>
-			</StylesField>
-		</UiProviders>
+		<StylesField bind="text-align" propDisplayName={ TEXT_ALIGNMENT_LABEL }>
+			<UiProviders>
+				<StylesFieldLayout label={ TEXT_ALIGNMENT_LABEL }>
+					<ToggleControl options={ options } />
+				</StylesFieldLayout>
+			</UiProviders>
+		</StylesField>
 	);
 };