@elementor/editor-editing-panel 1.0.0 → 1.2.0

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

@@ -0,0 +1,36 @@
+import * as React from 'react';
+import { ControlLabel } from '@elementor/editor-controls';
+import { Divider, Stack } from '@elementor/ui';
+import { __ } from '@wordpress/i18n';
+
+import { useStylesField } from '../../../hooks/use-styles-field';
+import { AlignItemsField } from './align-items-field';
+import { DisplayField } from './display-field';
+import { FlexDirectionField } from './flex-direction-field';
+import { FlexOrderField } from './flex-order-field';
+import { JustifyContentField } from './justify-content-field';
+import { WrapField } from './wrap-field';
+
+export const LayoutSection = () => {
+	const [ display ] = useStylesField( 'display' );
+
+	return (
+		<Stack gap={ 2 }>
+			<DisplayField />
+			{ 'flex' === display && <FlexFields /> }
+		</Stack>
+	);
+};
+
+const FlexFields = () => (
+	<>
+		<FlexDirectionField />
+		<JustifyContentField />
+		<AlignItemsField />
+		<Divider />
+		<WrapField />
+		<Divider />
+		<ControlLabel>{ __( 'Flex child', 'elementor' ) }</ControlLabel>
+		<FlexOrderField />
+	</>
+);

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

@@ -0,0 +1,52 @@
+import * as React from 'react';
+import { ControlLabel, type ToggleButtonGroupItem, ToggleControl } from '@elementor/editor-controls';
+import { ArrowBackIcon, ArrowForwardIcon, ArrowRightIcon } from '@elementor/icons';
+import { DirectionProvider, Grid, ThemeProvider } from '@elementor/ui';
+import { __ } from '@wordpress/i18n';
+
+import { StylesField } from '../../../controls-registry/styles-field';
+import { useDirection } from '../../../hooks/use-direction';
+
+type FlexWrap = 'nowrap' | 'wrap' | 'wrap-reverse';
+
+const options: ToggleButtonGroupItem< FlexWrap >[] = [
+	{
+		value: 'nowrap',
+		label: __( 'No wrap', 'elementor' ),
+		renderContent: ( { size } ) => <ArrowRightIcon fontSize={ size } />,
+		showTooltip: true,
+	},
+	{
+		value: 'wrap',
+		label: __( 'Wrap', 'elementor' ),
+		renderContent: ( { size } ) => <ArrowBackIcon fontSize={ size } />,
+		showTooltip: true,
+	},
+	{
+		value: 'wrap-reverse',
+		label: __( 'Wrap reverse', 'elementor' ),
+		renderContent: ( { size } ) => <ArrowForwardIcon fontSize={ size } />,
+		showTooltip: true,
+	},
+];
+
+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>
+					</Grid>
+				</StylesField>
+			</ThemeProvider>
+		</DirectionProvider>
+	);
+};

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>
 	);
 };

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

@@ -0,0 +1,40 @@
+import * as React from 'react';
+import { ControlLabel, FontFamilyControl } from '@elementor/editor-controls';
+import { Grid } from '@elementor/ui';
+import { __ } from '@wordpress/i18n';
+
+import { StylesField } from '../../../controls-registry/styles-field';
+import { getElementorConfig } from '../../../sync/get-elementor-config';
+
+export const FontFamilyField = () => {
+	const fontFamilies = getFontFamilies();
+
+	if ( ! fontFamilies ) {
+		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 }>
+					<FontFamilyControl fontFamilies={ fontFamilies } />
+				</Grid>
+			</Grid>
+		</StylesField>
+	);
+};
+
+const getFontFamilies = () => {
+	const { controls } = getElementorConfig();
+
+	const options = controls?.font?.options;
+
+	if ( ! options ) {
+		return null;
+	}
+
+	return options;
+};

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

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

package/src/components/style-sections/typography-section/font-weight-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 { __ } from '@wordpress/i18n';
+
 import { StylesField } from '../../../controls-registry/styles-field';
-import { SelectControl } from '../../../controls';
-import { ControlLabel } from '../../control-label';
 
 const fontWeightOptions = [
 	{ label: __( 'Light - 400', 'elementor' ), value: '400' },
@@ -16,7 +16,7 @@ const fontWeightOptions = [
 export const FontWeightField = () => {
 	return (
 		<StylesField bind="font-weight">
-			<Grid container spacing={ 1 } alignItems="center">
+			<Grid container gap={ 2 } alignItems="center" flexWrap="nowrap">
 				<Grid item xs={ 6 }>
 					<ControlLabel>{ __( 'Font Weight', 'elementor' ) }</ControlLabel>
 				</Grid>

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

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

package/src/components/style-sections/typography-section/text-alignment-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 { AlignCenterIcon, AlignJustifiedIcon, AlignLeftIcon, AlignRightIcon } from '@elementor/icons';
 import { Grid } from '@elementor/ui';
-import { AlignLeftIcon, AlignCenterIcon, AlignRightIcon, AlignJustifiedIcon } from '@elementor/icons';
+import { __ } from '@wordpress/i18n';
+
 import { StylesField } from '../../../controls-registry/styles-field';
-import { ToggleControl, ToggleButtonGroupItem } from '../../../controls';
-import { ControlLabel } from '../../control-label';
 
 type Alignments = 'left' | 'center' | 'right' | 'justify';
 
@@ -12,29 +12,29 @@ const options: ToggleButtonGroupItem< Alignments >[] = [
 	{
 		value: 'left',
 		label: __( 'Left', 'elementor' ),
-		icon: AlignLeftIcon,
+		renderContent: ( { size } ) => <AlignLeftIcon fontSize={ size } />,
 	},
 	{
 		value: 'center',
 		label: __( 'Center', 'elementor' ),
-		icon: AlignCenterIcon,
+		renderContent: ( { size } ) => <AlignCenterIcon fontSize={ size } />,
 	},
 	{
 		value: 'right',
 		label: __( 'Right', 'elementor' ),
-		icon: AlignRightIcon,
+		renderContent: ( { size } ) => <AlignRightIcon fontSize={ size } />,
 	},
 	{
 		value: 'justify',
 		label: __( 'Justify', 'elementor' ),
-		icon: AlignJustifiedIcon,
+		renderContent: ( { size } ) => <AlignJustifiedIcon fontSize={ size } />,
 	},
 ];
 
 export const TextAlignmentField = () => {
 	return (
 		<StylesField bind={ 'text-align' }>
-			<Grid container spacing={ 1 } alignItems="center">
+			<Grid container gap={ 2 } alignItems="center" flexWrap="nowrap">
 				<Grid item xs={ 6 }>
 					<ControlLabel>{ __( 'Alignment', 'elementor' ) }</ControlLabel>
 				</Grid>

package/src/components/style-sections/typography-section/text-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 { __ } from '@wordpress/i18n';
+
 import { StylesField } from '../../../controls-registry/styles-field';
-import { ColorControl } from '../../../controls';
-import { ControlLabel } from '../../control-label';
 
 export const TextColorField = () => {
 	return (
 		<StylesField bind="color">
-			<Grid container spacing={ 1 } alignItems="center">
+			<Grid container gap={ 2 } alignItems="center" flexWrap="nowrap">
 				<Grid item xs={ 6 }>
 					<ControlLabel>{ __( 'Text Color', 'elementor' ) }</ControlLabel>
 				</Grid>

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

@@ -1,10 +1,10 @@
 import * as React from 'react';
-import { __ } from '@wordpress/i18n';
-import { Grid } from '@elementor/ui';
+import { ControlLabel, type ToggleButtonGroupItem, ToggleControl } from '@elementor/editor-controls';
 import { TextDirectionLtrIcon, TextDirectionRtlIcon } from '@elementor/icons';
+import { Grid } from '@elementor/ui';
+import { __ } from '@wordpress/i18n';
+
 import { StylesField } from '../../../controls-registry/styles-field';
-import { ToggleControl, ToggleButtonGroupItem } from '../../../controls';
-import { ControlLabel } from '../../control-label';
 
 type Direction = 'ltr' | 'rtl';
 
@@ -12,19 +12,19 @@ const options: ToggleButtonGroupItem< Direction >[] = [
 	{
 		value: 'ltr',
 		label: __( 'Left to Right', 'elementor' ),
-		icon: TextDirectionLtrIcon,
+		renderContent: ( { size } ) => <TextDirectionLtrIcon fontSize={ size } />,
 	},
 	{
 		value: 'rtl',
 		label: __( 'Right to Left', 'elementor' ),
-		icon: TextDirectionRtlIcon,
+		renderContent: ( { size } ) => <TextDirectionRtlIcon fontSize={ size } />,
 	},
 ];
 
 export const TextDirectionField = () => {
 	return (
 		<StylesField bind={ 'direction' }>
-			<Grid container spacing={ 1 } alignItems="center">
+			<Grid container gap={ 2 } alignItems="center" flexWrap="nowrap">
 				<Grid item xs={ 6 }>
 					<ControlLabel>{ __( 'Direction', 'elementor' ) }</ControlLabel>
 				</Grid>