@elementor/editor-editing-panel 1.0.0 → 1.1.0

package/src/components/style-sections/border-section/border-color-field.tsx

@@ -1,14 +1,14 @@
 import * as React from 'react';
-import { __ } from '@wordpress/i18n';
+import { ColorControl, ControlLabel } from '@elementor/editor-controls';
 import { Grid } from '@elementor/ui';
-import { ColorControl } from '../../../controls';
+import { __ } from '@wordpress/i18n';
+
 import { StylesField } from '../../../controls-registry/styles-field';
-import { ControlLabel } from '../../control-label';
 
 export const BorderColorField = () => {
 	return (
 		<StylesField bind={ 'border-color' }>
-			<Grid container spacing={ 1 } alignItems="center">
+			<Grid container gap={ 2 } alignItems="center" flexWrap="nowrap">
 				<Grid item xs={ 6 }>
 					<ControlLabel>{ __( 'Border Color', 'elementor' ) }</ControlLabel>
 				</Grid>

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

@@ -1,10 +1,11 @@
 import * as React from 'react';
 import { __ } from '@wordpress/i18n';
-import { BorderWidthField } from './border-width-field';
+
+import { useStylesField } from '../../../hooks/use-styles-field';
+import { AddOrRemoveContent } from '../../add-or-remove-content';
 import { BorderColorField } from './border-color-field';
 import { BorderStyleField } from './border-style-field';
-import { AddOrRemoveContent } from '../../add-or-remove-content';
-import { useStylesField } from '../../../hooks/use-styles-field';
+import { BorderWidthField } from './border-width-field';
 
 const initialSize = { $$type: 'size', value: { size: 1, unit: 'px' } };
 const initialBorderWidth = {

package/src/components/style-sections/border-section/border-radius-field.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
-import { __ } from '@wordpress/i18n';
+import { type EqualUnequalItems, EqualUnequalSizesControl } from '@elementor/editor-controls';
+import type { BorderRadiusPropValue } from '@elementor/editor-props';
 import {
 	BorderCornersIcon,
 	RadiusBottomLeftIcon,
@@ -7,8 +8,8 @@ import {
 	RadiusTopLeftIcon,
 	RadiusTopRightIcon,
 } from '@elementor/icons';
-import type { BorderRadiusPropValue } from '@elementor/editor-props';
-import { EqualUnequalItems, EqualUnequalSizesControl } from '../../../controls/controls/equal-unequal-sizes-control';
+import { __ } from '@wordpress/i18n';
+
 import { StylesField } from '../../../controls-registry/styles-field';
 
 const corners: EqualUnequalItems< BorderRadiusPropValue[ '$$type' ], BorderRadiusPropValue > = [

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

@@ -1,16 +1,13 @@
 import * as React from 'react';
-import { AccordionSection } from '../../accordion-section';
 import { Divider, Stack } from '@elementor/ui';
-import { __ } from '@wordpress/i18n';
-import { BorderRadiusField } from './border-radius-field';
+
 import { BorderField } from './border-field';
+import { BorderRadiusField } from './border-radius-field';
 
 export const BorderSection = () => (
-	<AccordionSection title={ __( 'Border', 'elementor' ) }>
-		<Stack gap={ 1.5 }>
-			<BorderRadiusField />
-			<Divider />
-			<BorderField />
-		</Stack>
-	</AccordionSection>
+	<Stack gap={ 1.5 }>
+		<BorderRadiusField />
+		<Divider />
+		<BorderField />
+	</Stack>
 );

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

@@ -1,9 +1,9 @@
 import * as React from 'react';
-import { __ } from '@wordpress/i18n';
-import { SelectControl } from '../../../controls';
+import { ControlLabel, 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';
 
 const borderStyles = [
 	{ value: 'none', label: __( 'None', 'elementor' ) },
@@ -19,7 +19,7 @@ const borderStyles = [
 export const BorderStyleField = () => {
 	return (
 		<StylesField bind={ 'border-style' }>
-			<Grid container spacing={ 1 } alignItems="center">
+			<Grid container gap={ 2 } alignItems="center" flexWrap="nowrap">
 				<Grid item xs={ 6 }>
 					<ControlLabel>{ __( 'Border Type', 'elementor' ) }</ControlLabel>
 				</Grid>

package/src/components/style-sections/border-section/border-width-field.tsx

@@ -1,8 +1,9 @@
 import * as React from 'react';
-import { SideBottomIcon, SideLeftIcon, SideRightIcon, SideTopIcon, SideAllIcon } from '@elementor/icons';
+import { type EqualUnequalItems, EqualUnequalSizesControl } from '@elementor/editor-controls';
+import { type BorderWidthPropValue } from '@elementor/editor-props';
+import { SideAllIcon, SideBottomIcon, SideLeftIcon, SideRightIcon, SideTopIcon } from '@elementor/icons';
 import { __ } from '@wordpress/i18n';
-import { BorderWidthPropValue } from '@elementor/editor-props';
-import { EqualUnequalItems, EqualUnequalSizesControl } from '../../../controls/controls/equal-unequal-sizes-control';
+
 import { StylesField } from '../../../controls-registry/styles-field';
 
 const edges: EqualUnequalItems< BorderWidthPropValue[ '$$type' ], BorderWidthPropValue > = [

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

@@ -1,18 +1,15 @@
 import * as React from 'react';
-import { __ } from '@wordpress/i18n';
+import { BoxShadowRepeaterControl } from '@elementor/editor-controls';
 import { Stack } from '@elementor/ui';
-import { AccordionSection } from '../../accordion-section';
+
 import { StylesField } from '../../../controls-registry/styles-field';
-import { BoxShadowRepeaterControl } from '../../../controls';
 
 export const EffectsSection = () => {
 	return (
-		<AccordionSection title={ __( 'Effects', 'elementor' ) }>
-			<Stack gap={ 1.5 }>
-				<StylesField bind="box-shadow">
-					<BoxShadowRepeaterControl />
-				</StylesField>
-			</Stack>
-		</AccordionSection>
+		<Stack gap={ 1.5 }>
+			<StylesField bind="box-shadow">
+				<BoxShadowRepeaterControl />
+			</StylesField>
+		</Stack>
 	);
 };

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

@@ -0,0 +1,32 @@
+import * as React from 'react';
+import { ControlLabel, type ToggleButtonGroupItem, ToggleControl } from '@elementor/editor-controls';
+import { Stack } from '@elementor/ui';
+import { __ } from '@wordpress/i18n';
+
+import { StylesField } from '../../../controls-registry/styles-field';
+
+type Displays = 'block' | 'flex';
+
+export const DisplayField = () => {
+	const options: ToggleButtonGroupItem< Displays >[] = [
+		{
+			value: 'block',
+			renderContent: () => __( 'Block', 'elementor' ),
+			label: __( 'Block', 'elementor' ),
+		},
+		{
+			value: 'flex',
+			renderContent: () => __( 'Flex', 'elementor' ),
+			label: __( 'Flex', 'elementor' ),
+		},
+	];
+
+	return (
+		<StylesField bind="display">
+			<Stack gap={ 1 }>
+				<ControlLabel>{ __( 'Display', 'elementor' ) }</ControlLabel>
+				<ToggleControl options={ options } fullWidth={ true } />
+			</Stack>
+		</StylesField>
+	);
+};

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

@@ -0,0 +1,82 @@
+import * as React from 'react';
+import { ControlLabel, type ToggleButtonGroupItem, ToggleControl } from '@elementor/editor-controls';
+import {
+	JustifyBottomIcon,
+	JustifyCenterIcon,
+	JustifyDistributeVerticalIcon,
+	JustifySpaceAroundVerticalIcon,
+	JustifySpaceBetweenVerticalIcon,
+	JustifyTopIcon,
+} from '@elementor/icons';
+import { Stack } from '@elementor/ui';
+import { __ } from '@wordpress/i18n';
+
+import { StylesField } from '../../../controls-registry/styles-field';
+import { useDirection } from '../../../hooks/use-direction';
+import { useStylesField } from '../../../hooks/use-styles-field';
+import { rotateFlexIcon } from './utils/rotate-flex-icon';
+
+type JustifyContent = 'start' | 'center' | 'end' | 'space-between' | 'space-around' | 'space-evenly';
+
+export const JustifyContentField = () => {
+	const [ direction ] = useStylesField( 'flex-direction' );
+
+	const { isUiRtl, isSiteRtl } = useDirection(),
+		sx = { transform: rotateFlexIcon( direction as string, -1 ) } as const,
+		shouldReverseOrder = isSiteRtl !== isUiRtl;
+
+	const StartIcon = isSiteRtl ? JustifyBottomIcon : JustifyTopIcon,
+		EndIcon = isSiteRtl ? JustifyTopIcon : JustifyBottomIcon;
+
+	const options: ToggleButtonGroupItem< JustifyContent >[] = [
+		{
+			value: 'start',
+			label: __( 'Start', 'elementor' ),
+			renderContent: ( { size } ) => <StartIcon fontSize={ size } sx={ sx } />,
+			showTooltip: true,
+		},
+		{
+			value: 'center',
+			label: __( 'Center', 'elementor' ),
+			renderContent: ( { size } ) => <JustifyCenterIcon fontSize={ size } sx={ sx } />,
+			showTooltip: true,
+		},
+		{
+			value: 'end',
+			label: __( 'End', 'elementor' ),
+			renderContent: ( { size } ) => <EndIcon fontSize={ size } sx={ sx } />,
+			showTooltip: true,
+		},
+		{
+			value: 'space-between',
+			label: __( 'Space Between', 'elementor' ),
+			renderContent: ( { size } ) => <JustifySpaceBetweenVerticalIcon fontSize={ size } sx={ sx } />,
+			showTooltip: true,
+		},
+		{
+			value: 'space-around',
+			label: __( 'Space Around', 'elementor' ),
+			renderContent: ( { size } ) => <JustifySpaceAroundVerticalIcon fontSize={ size } sx={ sx } />,
+			showTooltip: true,
+		},
+		{
+			value: 'space-evenly',
+			label: __( 'Space Evenly', 'elementor' ),
+			renderContent: ( { size } ) => <JustifyDistributeVerticalIcon fontSize={ size } sx={ sx } />,
+			showTooltip: true,
+		},
+	];
+
+	if ( shouldReverseOrder ) {
+		options.reverse();
+	}
+
+	return (
+		<StylesField bind="justify-content">
+			<Stack gap={ 1 }>
+				<ControlLabel>{ __( 'Justify Content', 'elementor' ) }</ControlLabel>
+				<ToggleControl options={ options } fullWidth={ true } />
+			</Stack>
+		</StylesField>
+	);
+};

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

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import { Stack } from '@elementor/ui';
+
+import { useStylesField } from '../../../hooks/use-styles-field';
+import { DisplayField } from './display-field';
+import { JustifyContentField } from './justify-content-field';
+
+export const LayoutSection = () => {
+	const [ display ] = useStylesField( 'display' );
+
+	return (
+		<Stack gap={ 2 }>
+			<DisplayField />
+			{ 'flex' === display && <JustifyContentField /> }
+		</Stack>
+	);
+};

package/src/components/style-sections/layout-section/utils/rotate-flex-icon.ts

@@ -0,0 +1,12 @@
+export function rotateFlexIcon( direction: string | null = 'row', initValue: number ) {
+	const rotationIndexMap: Record< string, number > = {
+		row: 0,
+		column: 1,
+		'row-reverse': 2,
+		'column-reverse': 3,
+	};
+
+	const rotationIndex = initValue + ( rotationIndexMap[ direction || 'row' ] ?? 0 );
+
+	return `rotate(calc(90deg * ${ rotationIndex }))`;
+}

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

@@ -1,10 +1,10 @@
 import * as React from 'react';
+import { ControlLabel, SizeControl } from '@elementor/editor-controls';
+import { SideBottomIcon, SideLeftIcon, SideRightIcon, SideTopIcon } from '@elementor/icons';
 import { Grid, Stack } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
-import { SideBottomIcon, SideLeftIcon, SideRightIcon, SideTopIcon } from '@elementor/icons';
-import { ControlLabel } from '../../control-label';
+
 import { StylesField } from '../../../controls-registry/styles-field';
-import { SizeControl } from '../../../controls';
 
 export type Side = 'left' | 'right' | 'top' | 'bottom';
 
@@ -18,11 +18,11 @@ const sideIcons = {
 export const DimensionsField = () => {
 	return (
 		<>
-			<Stack direction="row" gap={ 2 }>
+			<Stack direction="row" gap={ 2 } flexWrap="nowrap">
 				<DimensionField side="top" label={ __( 'Top', 'elementor' ) } />
 				<DimensionField side="right" label={ __( 'Right', 'elementor' ) } />
 			</Stack>
-			<Stack direction="row" gap={ 2 }>
+			<Stack direction="row" gap={ 2 } flexWrap="nowrap">
 				<DimensionField side="bottom" label={ __( 'Bottom', 'elementor' ) } />
 				<DimensionField side="left" label={ __( 'Left', 'elementor' ) } />
 			</Stack>
@@ -32,7 +32,7 @@ export const DimensionsField = () => {
 
 const DimensionField = ( { side, label }: { side: Side; label: string } ) => {
 	return (
-		<Grid container spacing={ 1 } alignItems="center">
+		<Grid container gap={ 1 } alignItems="center">
 			<Grid item xs={ 12 }>
 				<ControlLabel>{ label }</ControlLabel>
 			</Grid>

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

@@ -1,9 +1,9 @@
 import * as React from 'react';
-import { __ } from '@wordpress/i18n';
+import { ControlLabel, SelectControl } from '@elementor/editor-controls';
 import { Grid } from '@elementor/ui';
-import { SelectControl } from '../../../controls';
+import { __ } from '@wordpress/i18n';
+
 import { StylesField } from '../../../controls-registry/styles-field';
-import { ControlLabel } from '../../control-label';
 
 const positionOptions = [
 	{ label: __( 'Static', 'elementor' ), value: 'static' },
@@ -15,7 +15,7 @@ const positionOptions = [
 export const PositionField = () => {
 	return (
 		<StylesField bind="position">
-			<Grid container spacing={ 1 } alignItems="center">
+			<Grid container gap={ 2 } alignItems="center" flexWrap="nowrap">
 				<Grid item xs={ 6 }>
 					<ControlLabel>{ __( 'Position', 'elementor' ) }</ControlLabel>
 				</Grid>

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

@@ -1,28 +1,58 @@
 import * as React from 'react';
-import { AccordionSection } from '../../accordion-section';
+import { useCallback } from 'react';
+import type { PropValue } from '@elementor/editor-props';
 import { Stack } from '@elementor/ui';
-import { ZIndexField } from './z-index-field';
-import { PositionField } from './position-field';
-import { __ } from '@wordpress/i18n';
+
+import { useStylePropsHistory } from '../../../hooks/use-style-prop-history';
 import { useStylesField } from '../../../hooks/use-styles-field';
 import { DimensionsField } from './dimensions-field';
+import { PositionField } from './position-field';
+import { ZIndexField } from './z-index-field';
+
+const dimensionsPropKeys = [ 'top', 'bottom', 'left', 'right' ];
 
 export const PositionSection = () => {
 	const [ positionValue ] = useStylesField( 'position' );
+	usePositionChangeHandler();
 
 	const isNotStatic = positionValue && positionValue !== 'static';
 
 	return (
-		<AccordionSection title={ __( 'Position', 'elementor' ) }>
-			<Stack gap={ 1.5 }>
-				<PositionField />
-				{ isNotStatic ? (
-					<>
-						<DimensionsField />
-						<ZIndexField />
-					</>
-				) : null }
-			</Stack>
-		</AccordionSection>
+		<Stack gap={ 1.5 }>
+			<PositionField />
+			{ isNotStatic ? (
+				<>
+					<DimensionsField />
+					<ZIndexField />
+				</>
+			) : null }
+		</Stack>
+	);
+};
+
+const usePositionChangeHandler = () => {
+	const dimensionsHistory = useStylePropsHistory( dimensionsPropKeys );
+
+	const onPositionChange = useCallback(
+		( newPositionValue: PropValue, previousPosition: PropValue ) => {
+			if ( ! dimensionsHistory ) {
+				return;
+			}
+
+			const { saveStylePropsHistory, updateStylePropsFromHistory, clearCurrentStyleProps } = dimensionsHistory;
+
+			if ( newPositionValue === 'static' ) {
+				saveStylePropsHistory();
+				clearCurrentStyleProps();
+			} else if ( previousPosition === 'static' ) {
+				updateStylePropsFromHistory();
+			}
+
+			previousPosition = newPositionValue;
+		},
+		[ dimensionsHistory ]
 	);
+
+	const [ , , registerChangeListener ] = useStylesField< PropValue >( 'position' );
+	registerChangeListener?.( onPositionChange );
 };

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

@@ -1,14 +1,14 @@
 import * as React from 'react';
-import { __ } from '@wordpress/i18n';
+import { ControlLabel, NumberControl } from '@elementor/editor-controls';
 import { Grid } from '@elementor/ui';
+import { __ } from '@wordpress/i18n';
+
 import { StylesField } from '../../../controls-registry/styles-field';
-import { NumberControl } from '../../../controls';
-import { ControlLabel } from '../../control-label';
 
 export const ZIndexField = () => {
 	return (
 		<StylesField bind="z-index">
-			<Grid container spacing={ 1 } alignItems="center">
+			<Grid container gap={ 2 } alignItems="center" flexWrap="nowrap">
 				<Grid item xs={ 6 }>
 					<ControlLabel>{ __( 'Z-Index', 'elementor' ) }</ControlLabel>
 				</Grid>

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

@@ -1,10 +1,10 @@
 import * as React from 'react';
-import { __ } from '@wordpress/i18n';
+import { ControlLabel, type ToggleButtonGroupItem, ToggleControl } from '@elementor/editor-controls';
+import { ExpandBottomIcon, EyeIcon, EyeOffIcon } from '@elementor/icons';
 import { Grid } from '@elementor/ui';
-import { EyeIcon, EyeOffIcon, ExpandBottomIcon } from '@elementor/icons';
-import { ToggleButtonGroupItem, ToggleControl } from '../../../controls';
+import { __ } from '@wordpress/i18n';
+
 import { StylesField } from '../../../controls-registry/styles-field';
-import { ControlLabel } from '../../control-label';
 
 type Overflows = 'visible' | 'hidden' | 'auto';
 
@@ -12,19 +12,19 @@ const options: ToggleButtonGroupItem< Overflows >[] = [
 	{
 		value: 'visible',
 		label: __( 'Visible', 'elementor' ),
-		icon: EyeIcon,
+		renderContent: ( { size } ) => <EyeIcon fontSize={ size } />,
 		showTooltip: true,
 	},
 	{
 		value: 'hidden',
 		label: __( 'Hidden', 'elementor' ),
-		icon: EyeOffIcon,
+		renderContent: ( { size } ) => <EyeOffIcon fontSize={ size } />,
 		showTooltip: true,
 	},
 	{
 		value: 'auto',
 		label: __( 'Auto', 'elementor' ),
-		icon: ExpandBottomIcon,
+		renderContent: ( { size } ) => <ExpandBottomIcon fontSize={ size } />,
 		showTooltip: true,
 	},
 ];
@@ -32,7 +32,7 @@ const options: ToggleButtonGroupItem< Overflows >[] = [
 export const OverflowField = () => {
 	return (
 		<StylesField bind={ 'overflow' }>
-			<Grid container spacing={ 1 } alignItems="center">
+			<Grid container gap={ 2 } alignItems="center" flexWrap="nowrap">
 				<Grid item xs={ 6 }>
 					<ControlLabel>{ __( 'Overflow', 'elementor' ) }</ControlLabel>
 				</Grid>

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

@@ -1,34 +1,43 @@
 import * as React from 'react';
+import { ControlLabel, SizeControl } from '@elementor/editor-controls';
 import { Divider, Grid, Stack } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
+
+import { StylesField, type StylesFieldProps } from '../../../controls-registry/styles-field';
 import { OverflowField } from './overflow-field';
-import { AccordionSection } from '../../accordion-section';
-import { StylesField, StylesFieldProps } from '../../../controls-registry/styles-field';
-import { ControlLabel } from '../../control-label';
-import { SizeControl } from '../../../controls';
 
 export const SizeSection = () => {
 	return (
-		<AccordionSection title={ __( 'Size', 'elementor' ) }>
-			<Stack gap={ 1.5 }>
-				<Grid container spacing={ 2 }>
+		<Stack gap={ 1.5 }>
+			<Grid container gap={ 2 } flexWrap="nowrap">
+				<Grid item xs={ 6 }>
 					<SizeField bind="width" label={ __( 'Width', 'elementor' ) } />
+				</Grid>
+				<Grid item xs={ 6 }>
 					<SizeField bind="height" label={ __( 'Height', 'elementor' ) } />
 				</Grid>
-				<Grid container spacing={ 2 }>
+			</Grid>
+			<Grid container gap={ 2 } flexWrap="nowrap">
+				<Grid item xs={ 6 }>
 					<SizeField bind="min-width" label={ __( 'Min. Width', 'elementor' ) } />
+				</Grid>
+				<Grid item xs={ 6 }>
 					<SizeField bind="min-height" label={ __( 'Min. Height', 'elementor' ) } />
 				</Grid>
-				<Grid container spacing={ 2 }>
+			</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>
-				<Divider />
-				<Stack>
-					<OverflowField />
-				</Stack>
+			</Grid>
+			<Divider />
+			<Stack>
+				<OverflowField />
 			</Stack>
-		</AccordionSection>
+		</Stack>
 	);
 };
 
@@ -39,17 +48,15 @@ type ControlProps = {
 
 const SizeField = ( { label, bind }: ControlProps ) => {
 	return (
-		<Grid item xs={ 6 }>
-			<StylesField bind={ bind }>
-				<Grid container spacing={ 1 } alignItems="center">
-					<Grid item xs={ 12 }>
-						<ControlLabel>{ label }</ControlLabel>
-					</Grid>
-					<Grid item xs={ 12 }>
-						<SizeControl />
-					</Grid>
-				</Grid>
-			</StylesField>
-		</Grid>
+		<StylesField bind={ bind }>
+			<Grid container gap={ 1 } alignItems="center">
+				<Grid item xs={ 12 }>
+					<ControlLabel>{ label }</ControlLabel>
+				</Grid>
+				<Grid item xs={ 12 }>
+					<SizeControl />
+				</Grid>
+			</Grid>
+		</StylesField>
 	);
 };

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

@@ -1,22 +1,20 @@
 import * as React from 'react';
-import { AccordionSection } from '../../accordion-section';
+import { LinkedDimensionsControl } from '@elementor/editor-controls';
 import { Divider, Stack } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
+
 import { StylesField } from '../../../controls-registry/styles-field';
-import { LinkedDimensionsControl } from '../../../controls/controls/linked-dimensions-control';
 
 export const SpacingSection = () => {
 	return (
-		<AccordionSection title={ __( 'Spacing', 'elementor' ) }>
-			<Stack gap={ 1.5 }>
-				<StylesField bind={ 'padding' }>
-					<LinkedDimensionsControl label={ __( 'Padding', 'elementor' ) } />
-				</StylesField>
-				<Divider />
-				<StylesField bind={ 'margin' }>
-					<LinkedDimensionsControl label={ __( 'Margin', 'elementor' ) } />
-				</StylesField>
-			</Stack>
-		</AccordionSection>
+		<Stack gap={ 1.5 }>
+			<StylesField bind={ 'padding' }>
+				<LinkedDimensionsControl label={ __( 'Padding', 'elementor' ) } />
+			</StylesField>
+			<Divider />
+			<StylesField bind={ 'margin' }>
+				<LinkedDimensionsControl label={ __( 'Margin', 'elementor' ) } />
+			</StylesField>
+		</Stack>
 	);
 };