@elementor/editor-editing-panel 1.45.0 → 1.47.0

package/src/components/style-sections/layout-section/align-self-child-field.tsx

@@ -6,15 +6,17 @@ import {
 	LayoutAlignRightIcon,
 	LayoutDistributeVerticalIcon as JustifyIcon,
 } from '@elementor/icons';
-import { Grid, type ToggleButtonProps, withDirection } from '@elementor/ui';
+import { type ToggleButtonProps, 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';
 import { type FlexDirection } from './flex-direction-field';
 import { RotatedIcon } from './utils/rotated-icon';
 
+const ALIGN_SELF_LABEL = __( 'Align self', 'elementor' );
+
 const ALIGN_SELF_CHILD_OFFSET_MAP: Record< FlexDirection, number > = {
 	row: 90,
 	'row-reverse': 90,
@@ -84,19 +86,12 @@ const getOptions = ( parentStyleDirection: FlexDirection ) => [
 	},
 ];
 
-export const AlignSelfChild = ( { parentStyleDirection }: { parentStyleDirection: FlexDirection } ) => {
-	return (
+export const AlignSelfChild = ( { parentStyleDirection }: { parentStyleDirection: FlexDirection } ) => (
+	<StylesField bind="align-self" propDisplayName={ ALIGN_SELF_LABEL }>
 		<UiProviders>
-			<StylesField bind={ 'align-self' }>
-				<Grid container gap={ 2 } alignItems="center" flexWrap="nowrap">
-					<Grid item xs={ 6 }>
-						<ControlLabel>{ __( 'Align self', 'elementor' ) }</ControlLabel>
-					</Grid>
-					<Grid item xs={ 6 } sx={ { display: 'flex', justifyContent: 'flex-end' } }>
-						<ToggleControl options={ getOptions( parentStyleDirection as FlexDirection ) } />
-					</Grid>
-				</Grid>
-			</StylesField>
+			<StylesFieldLayout label={ ALIGN_SELF_LABEL }>
+				<ToggleControl options={ getOptions( parentStyleDirection ) } />
+			</StylesFieldLayout>
 		</UiProviders>
-	);
-};
+	</StylesField>
+);

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

@@ -1,16 +1,17 @@
 import * as React from 'react';
 import { type ToggleButtonGroupItem, ToggleControl } from '@elementor/editor-controls';
 import { isExperimentActive } from '@elementor/editor-v1-adapters';
-import { Stack } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
 import { useStylesInheritanceChain } from '../../../contexts/styles-inheritance-context';
 import { StylesField } from '../../../controls-registry/styles-field';
 import { EXPERIMENTAL_FEATURES } from '../../../sync/experiments-flags';
-import { ControlLabel } from '../../control-label';
+import { StylesFieldLayout } from '../../styles-field-layout';
 
 type Displays = 'block' | 'flex' | 'inline-block' | 'inline-flex' | 'none';
 
+const DISPLAY_LABEL = __( 'Display', 'elementor' );
+
 const displayFieldItems: ToggleButtonGroupItem< Displays >[] = [
 	{
 		value: 'block',
@@ -55,11 +56,10 @@ export const DisplayField = () => {
 	const placeholder = useDisplayPlaceholderValue();
 
 	return (
-		<StylesField bind="display" placeholder={ placeholder }>
-			<Stack gap={ 0.75 }>
-				<ControlLabel>{ __( 'Display', 'elementor' ) }</ControlLabel>
+		<StylesField bind="display" propDisplayName={ DISPLAY_LABEL } placeholder={ placeholder }>
+			<StylesFieldLayout label={ DISPLAY_LABEL } direction="column">
 				<ToggleControl options={ items } maxItems={ 4 } fullWidth={ true } />
-			</Stack>
+			</StylesFieldLayout>
 		</StylesField>
 	);
 };

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

@@ -1,15 +1,17 @@
 import * as React from 'react';
 import { type ToggleButtonGroupItem, ToggleControl } from '@elementor/editor-controls';
 import { ArrowDownSmallIcon, ArrowLeftIcon, ArrowRightIcon, ArrowUpSmallIcon } 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';
 
 export type FlexDirection = 'row' | 'row-reverse' | 'column' | 'column-reverse';
 
+const FLEX_DIRECTION_LABEL = __( 'Direction', 'elementor' );
+
 const options: ToggleButtonGroupItem< FlexDirection >[] = [
 	{
 		value: 'row',
@@ -45,17 +47,12 @@ const options: ToggleButtonGroupItem< FlexDirection >[] = [
 
 export const FlexDirectionField = () => {
 	return (
-		<UiProviders>
-			<StylesField bind="flex-direction">
-				<Grid container gap={ 2 } alignItems="center" flexWrap="nowrap">
-					<Grid item xs={ 6 }>
-						<ControlLabel>{ __( 'Direction', 'elementor' ) }</ControlLabel>
-					</Grid>
-					<Grid item xs={ 6 } sx={ { display: 'flex', justifyContent: 'end' } }>
-						<ToggleControl options={ options } />
-					</Grid>
-				</Grid>
-			</StylesField>
-		</UiProviders>
+		<StylesField bind="flex-direction" propDisplayName={ FLEX_DIRECTION_LABEL }>
+			<UiProviders>
+				<StylesFieldLayout label={ FLEX_DIRECTION_LABEL }>
+					<ToggleControl options={ options } />
+				</StylesFieldLayout>
+			</UiProviders>
+		</StylesField>
 	);
 };

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

@@ -6,15 +6,17 @@ import { ArrowDownSmallIcon, ArrowUpSmallIcon, PencilIcon } from '@elementor/ico
 import { Grid } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
-import { useStyle } from '../../../contexts/style-context';
 import { StylesField } from '../../../controls-registry/styles-field';
 import { useStylesField } from '../../../hooks/use-styles-field';
 import { UiProviders } from '../../../styles-inheritance/components/ui-providers';
 import { ControlLabel } from '../../control-label';
 import { SectionContent } from '../../section-content';
+import { StylesFieldLayout } from '../../styles-field-layout';
 
 type GroupControlItemOption = 'first' | 'last' | 'custom';
 
+const ORDER_LABEL = __( 'Order', 'elementor' );
+
 export const FIRST_DEFAULT_VALUE = -99999;
 export const LAST_DEFAULT_VALUE = 99999;
 const FIRST = 'first';
@@ -48,8 +50,7 @@ const items: ToggleButtonGroupItem< GroupControlItemOption >[] = [
 ];
 
 export const FlexOrderField = () => {
-	const [ order, setOrder ] = useStylesField< NumberPropValue | null >( 'order' );
-	const { canEdit } = useStyle();
+	const { value: order, setValue: setOrder, canEdit } = useStylesField< NumberPropValue | null >( 'order' );
 
 	const [ groupControlValue, setGroupControlValue ] = useState( getGroupControlValue( order?.value || null ) );
 
@@ -66,41 +67,35 @@ export const FlexOrderField = () => {
 	};
 
 	return (
-		<UiProviders>
-			<StylesField bind={ 'order' }>
-				<SectionContent>
-					<Grid container gap={ 2 } alignItems="center" flexWrap="nowrap">
-						<Grid item xs={ 6 }>
-							<ControlLabel>{ __( 'Order', 'elementor' ) }</ControlLabel>
-						</Grid>
-						<Grid item xs={ 6 } sx={ { display: 'flex', justifyContent: 'end' } }>
-							<ControlToggleButtonGroup
-								items={ items }
-								value={ groupControlValue }
-								onChange={ handleToggleButtonChange }
-								exclusive={ true }
-								disabled={ ! canEdit }
-							/>
-						</Grid>
-					</Grid>
-
-					{ CUSTOM === groupControlValue && (
-						<Grid container gap={ 2 } alignItems="center" flexWrap="nowrap">
-							<Grid item xs={ 6 }>
-								<ControlLabel>{ __( 'Custom order', 'elementor' ) }</ControlLabel>
-							</Grid>
-							<Grid item xs={ 6 } sx={ { display: 'flex', justifyContent: 'end' } }>
-								<NumberControl
-									min={ FIRST_DEFAULT_VALUE + 1 }
-									max={ LAST_DEFAULT_VALUE - 1 }
-									shouldForceInt={ true }
-								/>
+		<StylesField bind="order" propDisplayName={ ORDER_LABEL }>
+			<UiProviders>
+				<StylesFieldLayout label={ ORDER_LABEL }>
+					<SectionContent>
+						<ControlToggleButtonGroup
+							items={ items }
+							value={ groupControlValue }
+							onChange={ handleToggleButtonChange }
+							exclusive={ true }
+							disabled={ ! canEdit }
+						/>
+						{ CUSTOM === groupControlValue && (
+							<Grid container gap={ 2 } alignItems="center" flexWrap="nowrap">
+								<Grid item xs={ 6 }>
+									<ControlLabel>{ __( 'Custom order', 'elementor' ) }</ControlLabel>
+								</Grid>
+								<Grid item xs={ 6 } sx={ { display: 'flex', justifyContent: 'end' } }>
+									<NumberControl
+										min={ FIRST_DEFAULT_VALUE + 1 }
+										max={ LAST_DEFAULT_VALUE - 1 }
+										shouldForceInt={ true }
+									/>
+								</Grid>
 							</Grid>
-						</Grid>
-					) }
-				</SectionContent>
-			</StylesField>
-		</UiProviders>
+						) }
+					</SectionContent>
+				</StylesFieldLayout>
+			</UiProviders>
+		</StylesField>
 	);
 };
 

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { type MutableRefObject, useMemo, useRef, useState } from 'react';
+import { useMemo, useRef, useState } from 'react';
 import {
 	ControlToggleButtonGroup,
 	NumberControl,
@@ -8,18 +8,18 @@ import {
 } from '@elementor/editor-controls';
 import { numberPropTypeUtil, type NumberPropValue, type SizePropValue } from '@elementor/editor-props';
 import { ExpandIcon, PencilIcon, ShrinkIcon } from '@elementor/icons';
-import { Grid } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
-import { useStyle } from '../../../contexts/style-context';
 import { StylesField } from '../../../controls-registry/styles-field';
 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';
+import { StylesFieldLayout } from '../../styles-field-layout';
 
 type GroupItem = 'flex-grow' | 'flex-shrink' | 'custom';
 
+const FLEX_SIZE_LABEL = __( 'Flex Size', 'elementor' );
+
 const DEFAULT = 1;
 
 const items: ToggleButtonGroupItem< GroupItem >[] = [
@@ -44,17 +44,15 @@ const items: ToggleButtonGroupItem< GroupItem >[] = [
 ];
 
 export const FlexSizeField = () => {
-	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 );
@@ -63,7 +61,7 @@ export const FlexSizeField = () => {
 		setActiveGroup( group );
 
 		if ( ! group || group === 'custom' ) {
-			setFields( {
+			setValues( {
 				'flex-basis': null,
 				'flex-grow': null,
 				'flex-shrink': null,
@@ -73,7 +71,7 @@ export const FlexSizeField = () => {
 		}
 
 		if ( group === 'flex-grow' ) {
-			setFields( {
+			setValues( {
 				'flex-basis': null,
 				'flex-grow': numberPropTypeUtil.create( DEFAULT ),
 				'flex-shrink': null,
@@ -82,7 +80,7 @@ export const FlexSizeField = () => {
 			return;
 		}
 
-		setFields( {
+		setValues( {
 			'flex-basis': null,
 			'flex-grow': null,
 			'flex-shrink': numberPropTypeUtil.create( DEFAULT ),
@@ -92,23 +90,17 @@ export const FlexSizeField = () => {
 	return (
 		<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>
+				<StylesField bind={ activeGroup ?? '' } propDisplayName={ FLEX_SIZE_LABEL }>
+					<StylesFieldLayout label={ FLEX_SIZE_LABEL }>
+						<ControlToggleButtonGroup
+							value={ activeGroup }
+							onChange={ onChangeGroup }
+							disabled={ ! canEdit }
+							items={ items }
+							exclusive={ true }
+						/>
+					</StylesFieldLayout>
+				</StylesField>
 				{ 'custom' === activeGroup && <FlexCustomField /> }
 			</SectionContent>
 		</UiProviders>
@@ -116,39 +108,24 @@ export const FlexSizeField = () => {
 };
 
 const FlexCustomField = () => {
-	const flexBasisRowRef: MutableRefObject< HTMLElement | undefined > = useRef();
+	const flexBasisRowRef = useRef< HTMLDivElement >( null );
 
 	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>
+			<StylesField bind="flex-grow" propDisplayName={ FLEX_SIZE_LABEL }>
+				<StylesFieldLayout label={ __( 'Grow', 'elementor' ) }>
+					<NumberControl min={ 0 } shouldForceInt={ true } />
+				</StylesFieldLayout>
 			</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>
+			<StylesField bind="flex-shrink" propDisplayName={ FLEX_SIZE_LABEL }>
+				<StylesFieldLayout label={ __( 'Shrink', 'elementor' ) }>
+					<NumberControl min={ 0 } shouldForceInt={ true } />
+				</StylesFieldLayout>
 			</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>
+			<StylesField bind="flex-basis" propDisplayName={ FLEX_SIZE_LABEL }>
+				<StylesFieldLayout label={ __( 'Basis', 'elementor' ) } ref={ flexBasisRowRef }>
+					<SizeControl extendedOptions={ [ 'auto' ] } anchorRef={ flexBasisRowRef } />
+				</StylesFieldLayout>
 			</StylesField>
 		</>
 	);

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

@@ -1,16 +1,15 @@
 import * as React from 'react';
 import { GapControl } from '@elementor/editor-controls';
-import { Stack } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
 import { StylesField } from '../../../controls-registry/styles-field';
 
+const GAPS_LABEL = __( 'Gaps', 'elementor' );
+
 export const GapControlField = () => {
 	return (
-		<Stack gap={ 1 }>
-			<StylesField bind={ 'gap' }>
-				<GapControl label={ __( 'Gaps', 'elementor' ) } />
-			</StylesField>
-		</Stack>
+		<StylesField bind={ 'gap' } propDisplayName={ GAPS_LABEL }>
+			<GapControl label={ GAPS_LABEL } />
+		</StylesField>
 	);
 };

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

@@ -8,16 +8,18 @@ import {
 	JustifySpaceBetweenVerticalIcon as BetweenIcon,
 	JustifyTopIcon,
 } from '@elementor/icons';
-import { Stack, 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';
 import { RotatedIcon } from './utils/rotated-icon';
 
 type JustifyContent = 'flex-start' | 'center' | 'flex-end' | 'space-between' | 'space-around' | 'space-evenly';
 
+const JUSTIFY_CONTENT_LABEL = __( 'Justify content', 'elementor' );
+
 const StartIcon = withDirection( JustifyTopIcon );
 const EndIcon = withDirection( JustifyBottomIcon );
 
@@ -65,15 +67,12 @@ const options: ToggleButtonGroupItem< JustifyContent >[] = [
 	},
 ];
 
-export const JustifyContentField = () => {
-	return (
+export const JustifyContentField = () => (
+	<StylesField bind="justify-content" propDisplayName={ JUSTIFY_CONTENT_LABEL }>
 		<UiProviders>
-			<StylesField bind="justify-content">
-				<Stack gap={ 0.75 }>
-					<ControlLabel>{ __( 'Justify content', 'elementor' ) }</ControlLabel>
-					<ToggleControl options={ options } fullWidth={ true } />
-				</Stack>
-			</StylesField>
+			<StylesFieldLayout label={ JUSTIFY_CONTENT_LABEL } direction="column">
+				<ToggleControl options={ options } fullWidth={ true } />
+			</StylesFieldLayout>
 		</UiProviders>
-	);
-};
+	</StylesField>
+);

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,21 @@
+import * as React from 'react';
+import { useRef } from 'react';
+import { SizeControl } from '@elementor/editor-controls';
+import { __ } from '@wordpress/i18n';
+
+import { StylesField } from '../../../controls-registry/styles-field';
+import { StylesFieldLayout } from '../../styles-field-layout';
+
+const OPACITY_LABEL = __( 'Opacity', 'elementor' );
+
+export const OpacityControlField = () => {
+	const rowRef = useRef< HTMLDivElement | null >( null );
+
+	return (
+		<StylesField bind={ 'opacity' } propDisplayName={ OPACITY_LABEL }>
+			<StylesFieldLayout ref={ rowRef } label={ OPACITY_LABEL }>
+				<SizeControl units={ [ '%' ] } anchorRef={ rowRef } defaultUnit="%" />
+			</StylesFieldLayout>
+		</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,15 +1,16 @@
 import * as React from 'react';
 import { type ToggleButtonGroupItem, ToggleControl } from '@elementor/editor-controls';
 import { ArrowBackIcon, ArrowForwardIcon, ArrowRightIcon } from '@elementor/icons';
-import { Grid } 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 FlexWrap = 'nowrap' | 'wrap' | 'wrap-reverse';
 
+const FLEX_WRAP_LABEL = __( 'Wrap', 'elementor' );
+
 const options: ToggleButtonGroupItem< FlexWrap >[] = [
 	{
 		value: 'nowrap',
@@ -33,17 +34,12 @@ const options: ToggleButtonGroupItem< FlexWrap >[] = [
 
 export const WrapField = () => {
 	return (
-		<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>
-				</Grid>
-			</StylesField>
-		</UiProviders>
+		<StylesField bind="flex-wrap" propDisplayName={ FLEX_WRAP_LABEL }>
+			<UiProviders>
+				<StylesFieldLayout label={ FLEX_WRAP_LABEL }>
+					<ToggleControl options={ options } />
+				</StylesFieldLayout>
+			</UiProviders>
+		</StylesField>
 	);
 };

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { type MutableRefObject, useRef } from 'react';
+import { useRef } from 'react';
 import { SizeControl } from '@elementor/editor-controls';
 import { SideBottomIcon, SideLeftIcon, SideRightIcon, SideTopIcon } from '@elementor/icons';
 import { Grid, Stack, withDirection } from '@elementor/ui';
@@ -31,7 +31,7 @@ const getInlineEndLabel = ( isSiteRtl: boolean ) =>
 
 export const DimensionsField = () => {
 	const { isSiteRtl } = useDirection();
-	const rowRefs: MutableRefObject< HTMLElement | undefined >[] = [ useRef(), useRef() ];
+	const rowRefs = [ useRef< HTMLDivElement >( null ), useRef< HTMLDivElement >( null ) ];
 
 	return (
 		<UiProviders>
@@ -62,9 +62,9 @@ const DimensionField = ( {
 }: {
 	side: Side;
 	label: string;
-	rowRef: MutableRefObject< HTMLElement | undefined >;
+	rowRef: React.RefObject< HTMLDivElement >;
 } ) => (
-	<StylesField bind={ side }>
+	<StylesField bind={ side } propDisplayName={ label }>
 		<Grid container gap={ 0.75 } alignItems="center">
 			<Grid item xs={ 12 }>
 				<ControlLabel>{ label }</ControlLabel>

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

@@ -1,25 +1,23 @@
 import * as React from 'react';
-import { type MutableRefObject, useRef } from 'react';
-import { SizeControl } from '@elementor/editor-controls';
-import { Grid } from '@elementor/ui';
+import { useRef } from 'react';
+import { SizeControl, type Unit } from '@elementor/editor-controls';
 import { __ } from '@wordpress/i18n';
 
 import { StylesField } from '../../../controls-registry/styles-field';
-import { ControlLabel } from '../../control-label';
+import { StylesFieldLayout } from '../../styles-field-layout';
+
+const OFFSET_LABEL = __( 'Anchor offset', 'elementor' );
+
+const UNITS: Unit[] = [ 'px', 'em', 'rem', 'vw', 'vh' ];
 
 export const OffsetField = () => {
-	const rowRef: MutableRefObject< HTMLElement | undefined > = useRef();
+	const rowRef = useRef< HTMLDivElement >( null );
 
 	return (
-		<StylesField bind="scroll-margin-top">
-			<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' ] } anchorRef={ rowRef } />
-				</Grid>
-			</Grid>
+		<StylesField bind="scroll-margin-top" propDisplayName={ OFFSET_LABEL }>
+			<StylesFieldLayout label={ OFFSET_LABEL } ref={ rowRef }>
+				<SizeControl units={ UNITS } anchorRef={ rowRef } />
+			</StylesFieldLayout>
 		</StylesField>
 	);
 };