@elementor/editor-editing-panel 1.2.0 → 1.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elementor/editor-editing-panel",
-  "version": "1.2.0",
+  "version": "1.3.0",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -39,18 +39,19 @@
     "dev": "tsup --config=../../tsup.dev.ts"
   },
   "dependencies": {
-    "@elementor/editor": "^0.17.1",
-    "@elementor/editor-controls": "^0.1.1",
-    "@elementor/editor-elements": "^0.3.1",
-    "@elementor/menus": "^0.1.1",
-    "@elementor/editor-props": "^0.3.0",
-    "@elementor/editor-panels": "^0.10.1",
-    "@elementor/editor-responsive": "^0.12.3",
-    "@elementor/editor-styles": "^0.3.0",
-    "@elementor/editor-v1-adapters": "^0.8.4",
+    "@elementor/editor": "0.17.2",
+    "@elementor/editor-controls": "0.2.0",
+    "@elementor/editor-elements": "0.3.2",
+    "@elementor/menus": "0.1.2",
+    "@elementor/editor-props": "0.4.0",
+    "@elementor/editor-panels": "0.10.2",
+    "@elementor/editor-responsive": "0.12.4",
+    "@elementor/editor-styles": "0.3.1",
+    "@elementor/editor-v1-adapters": "0.8.5",
     "@elementor/icons": "^1.20.0",
+    "@elementor/schema": "0.1.2",
     "@elementor/ui": "^1.22.0",
-    "@elementor/utils": "^0.3.0",
+    "@elementor/utils": "0.3.0",
     "@wordpress/i18n": "^5.13.0"
   },
   "peerDependencies": {

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

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { type EqualUnequalItems, EqualUnequalSizesControl } from '@elementor/editor-controls';
-import type { BorderRadiusPropValue } from '@elementor/editor-props';
+import { borderRadiusPropTypeUtil } from '@elementor/editor-props';
 import {
 	BorderCornersIcon,
 	RadiusBottomLeftIcon,
@@ -12,7 +12,7 @@ import { __ } from '@wordpress/i18n';
 
 import { StylesField } from '../../../controls-registry/styles-field';
 
-const corners: EqualUnequalItems< BorderRadiusPropValue[ '$$type' ], BorderRadiusPropValue > = [
+const corners: EqualUnequalItems = [
 	{
 		label: __( 'Top Left', 'elementor' ),
 		icon: <RadiusTopLeftIcon fontSize={ 'tiny' } />,
@@ -39,10 +39,10 @@ export const BorderRadiusField = () => {
 	return (
 		<StylesField bind={ 'border-radius' }>
 			<EqualUnequalSizesControl
+				items={ corners }
 				label={ __( 'Border Radius', 'elementor' ) }
 				icon={ <BorderCornersIcon fontSize={ 'tiny' } /> }
-				items={ corners }
-				multiSizeType={ 'border-radius' }
+				multiSizePropTypeUtil={ borderRadiusPropTypeUtil }
 			/>
 		</StylesField>
 	);

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

@@ -1,12 +1,12 @@
 import * as React from 'react';
 import { type EqualUnequalItems, EqualUnequalSizesControl } from '@elementor/editor-controls';
-import { type BorderWidthPropValue } from '@elementor/editor-props';
+import { borderWidthPropTypeUtil } from '@elementor/editor-props';
 import { SideAllIcon, SideBottomIcon, SideLeftIcon, SideRightIcon, SideTopIcon } from '@elementor/icons';
 import { __ } from '@wordpress/i18n';
 
 import { StylesField } from '../../../controls-registry/styles-field';
 
-const edges: EqualUnequalItems< BorderWidthPropValue[ '$$type' ], BorderWidthPropValue > = [
+const edges: EqualUnequalItems = [
 	{
 		label: __( 'Top', 'elementor' ),
 		icon: <SideTopIcon fontSize={ 'tiny' } />,
@@ -33,10 +33,10 @@ export const BorderWidthField = () => {
 	return (
 		<StylesField bind={ 'border-width' }>
 			<EqualUnequalSizesControl
+				items={ edges }
 				label={ __( 'Border Width', 'elementor' ) }
 				icon={ <SideAllIcon fontSize={ 'tiny' } /> }
-				items={ edges }
-				multiSizeType={ 'border-width' }
+				multiSizePropTypeUtil={ borderWidthPropTypeUtil }
 			/>
 		</StylesField>
 	);

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

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import type { JSX } from 'react';
 import { ControlLabel, type ToggleButtonGroupItem, ToggleControl } from '@elementor/editor-controls';
 import {
 	LayoutAlignCenterIcon as CenterIcon,
@@ -7,19 +6,52 @@ import {
 	LayoutAlignRightIcon,
 	LayoutDistributeVerticalIcon as JustifyIcon,
 } from '@elementor/icons';
-import { DirectionProvider, Grid, ThemeProvider, type ToggleButtonProps, useTheme, withDirection } from '@elementor/ui';
+import { DirectionProvider, Grid, ThemeProvider, withDirection } 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 { type FlexDirection } from './flex-direction-field';
+import { RotatedIcon } from './utils/rotated-icon';
 
-type AlignItems = 'start' | 'center' | 'end' | 'justify';
+type AlignItems = 'start' | 'center' | 'end' | 'stretch';
+
+const StartIcon = withDirection( LayoutAlignLeftIcon );
+const EndIcon = withDirection( LayoutAlignRightIcon );
+
+const iconProps = {
+	isClockwise: false,
+	offset: 90,
+};
+
+const options: ToggleButtonGroupItem< AlignItems >[] = [
+	{
+		value: 'start',
+		label: __( 'Start', 'elementor' ),
+		renderContent: ( { size } ) => <RotatedIcon icon={ StartIcon } size={ size } { ...iconProps } />,
+		showTooltip: true,
+	},
+	{
+		value: 'center',
+		label: __( 'Center', 'elementor' ),
+		renderContent: ( { size } ) => <RotatedIcon icon={ CenterIcon } size={ size } { ...iconProps } />,
+		showTooltip: true,
+	},
+	{
+		value: 'end',
+		label: __( 'End', 'elementor' ),
+		renderContent: ( { size } ) => <RotatedIcon icon={ EndIcon } size={ size } { ...iconProps } />,
+		showTooltip: true,
+	},
+	{
+		value: 'stretch',
+		label: __( 'Stretch', 'elementor' ),
+		renderContent: ( { size } ) => <RotatedIcon icon={ JustifyIcon } size={ size } { ...iconProps } />,
+		showTooltip: true,
+	},
+];
 
 export const AlignItemsField = () => {
-	const options = useOptions(),
-		{ isSiteRtl } = useDirection();
+	const { isSiteRtl } = useDirection();
 
 	return (
 		<DirectionProvider rtl={ isSiteRtl }>
@@ -27,7 +59,7 @@ export const AlignItemsField = () => {
 				<StylesField bind="align-items">
 					<Grid container gap={ 2 } alignItems="center" flexWrap="nowrap">
 						<Grid item xs={ 6 }>
-							<ControlLabel>{ __( 'Align Items', 'elementor' ) }</ControlLabel>
+							<ControlLabel>{ __( 'Align items', 'elementor' ) }</ControlLabel>
 						</Grid>
 						<Grid item xs={ 6 } sx={ { display: 'flex', justifyContent: 'end' } }>
 							<ToggleControl options={ options } />
@@ -38,55 +70,3 @@ export const AlignItemsField = () => {
 		</DirectionProvider>
 	);
 };
-
-const useOptions = (): ToggleButtonGroupItem< AlignItems >[] => {
-	const StartIcon = withDirection( LayoutAlignLeftIcon ),
-		EndIcon = withDirection( LayoutAlignRightIcon );
-
-	return [
-		{
-			value: 'start',
-			label: __( 'Start', 'elementor' ),
-			renderContent: ( { size } ) => <RotatedIcon icon={ StartIcon } size={ size } />,
-			showTooltip: true,
-		},
-		{
-			value: 'center',
-			label: __( 'Center', 'elementor' ),
-			renderContent: ( { size } ) => <RotatedIcon icon={ CenterIcon } size={ size } />,
-			showTooltip: true,
-		},
-		{
-			value: 'end',
-			label: __( 'End', 'elementor' ),
-			renderContent: ( { size } ) => <RotatedIcon icon={ EndIcon } size={ size } />,
-			showTooltip: true,
-		},
-		{
-			value: 'justify',
-			label: __( 'Justify', 'elementor' ),
-			renderContent: ( { size } ) => <RotatedIcon icon={ JustifyIcon } size={ size } />,
-			showTooltip: true,
-		},
-	];
-};
-
-const RotatedIcon = ( { icon: Icon, size }: { icon: JSX.ElementType; size: ToggleButtonProps[ 'size' ] } ) => {
-	const [ direction ] = useStylesField< FlexDirection >( 'flex-direction' ),
-		isRtl = 'rtl' === useTheme().direction,
-		rotationMultiplier = isRtl ? -1 : 1;
-
-	const rotationAngelMap: Record< FlexDirection, number > = {
-		row: 90,
-		column: 0,
-		'row-reverse': -90,
-		'column-reverse': -180,
-	};
-
-	return (
-		<Icon
-			fontSize={ size }
-			sx={ { transition: '.3s', rotate: `${ rotationAngelMap[ direction || 'row' ] * rotationMultiplier }deg` } }
-		/>
-	);
-};

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

@@ -0,0 +1,72 @@
+import * as React from 'react';
+import { ControlLabel, type ToggleButtonGroupItem, ToggleControl } from '@elementor/editor-controls';
+import {
+	LayoutAlignCenterIcon as CenterIcon,
+	LayoutAlignLeftIcon,
+	LayoutAlignRightIcon,
+	LayoutDistributeVerticalIcon as JustifyIcon,
+} from '@elementor/icons';
+import { DirectionProvider, Grid, ThemeProvider, withDirection } from '@elementor/ui';
+import { __ } from '@wordpress/i18n';
+
+import { StylesField } from '../../../controls-registry/styles-field';
+import { useDirection } from '../../../hooks/use-direction';
+import { RotatedIcon } from './utils/rotated-icon';
+
+type AlignItems = 'start' | 'center' | 'end' | 'stretch';
+
+const StartIcon = withDirection( LayoutAlignLeftIcon );
+const EndIcon = withDirection( LayoutAlignRightIcon );
+
+const iconProps = {
+	isClockwise: false,
+	offset: 90,
+};
+
+const options: ToggleButtonGroupItem< AlignItems >[] = [
+	{
+		value: 'start',
+		label: __( 'Start', 'elementor' ),
+		renderContent: ( { size } ) => <RotatedIcon icon={ StartIcon } size={ size } { ...iconProps } />,
+		showTooltip: true,
+	},
+	{
+		value: 'center',
+		label: __( 'Center', 'elementor' ),
+		renderContent: ( { size } ) => <RotatedIcon icon={ CenterIcon } size={ size } { ...iconProps } />,
+		showTooltip: true,
+	},
+	{
+		value: 'end',
+		label: __( 'End', 'elementor' ),
+		renderContent: ( { size } ) => <RotatedIcon icon={ EndIcon } size={ size } { ...iconProps } />,
+		showTooltip: true,
+	},
+	{
+		value: 'stretch',
+		label: __( 'Stretch', 'elementor' ),
+		renderContent: ( { size } ) => <RotatedIcon icon={ JustifyIcon } size={ size } { ...iconProps } />,
+		showTooltip: true,
+	},
+];
+
+export const AlignSelfChild = () => {
+	const { isSiteRtl } = useDirection();
+
+	return (
+		<DirectionProvider rtl={ isSiteRtl }>
+			<ThemeProvider>
+				<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={ options } />
+						</Grid>
+					</Grid>
+				</StylesField>
+			</ThemeProvider>
+		</DirectionProvider>
+	);
+};

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

@@ -27,7 +27,7 @@ const options: ToggleButtonGroupItem< FlexDirection >[] = [
 	},
 	{
 		value: 'row-reverse',
-		label: __( 'Row reverse', 'elementor' ),
+		label: __( 'Reversed row', 'elementor' ),
 		renderContent: ( { size } ) => {
 			const EndIcon = withDirection( ArrowLeftIcon );
 			return <EndIcon fontSize={ size } />;
@@ -36,7 +36,7 @@ const options: ToggleButtonGroupItem< FlexDirection >[] = [
 	},
 	{
 		value: 'column-reverse',
-		label: __( 'Column reverse', 'elementor' ),
+		label: __( 'Reversed column', 'elementor' ),
 		renderContent: ( { size } ) => <ArrowUpSmallIcon fontSize={ size } />,
 		showTooltip: true,
 	},

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

@@ -6,6 +6,7 @@ import {
 	NumberControl,
 	type ToggleButtonGroupItem,
 } from '@elementor/editor-controls';
+import { type NumberPropValue } from '@elementor/editor-props';
 import { ArrowDownSmallIcon, ArrowUpSmallIcon, PencilIcon } from '@elementor/icons';
 import { DirectionProvider, Grid, Stack, ThemeProvider } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
@@ -22,6 +23,11 @@ export const FIRST_DEFAULT_VALUE = -99999,
 	LAST = 'last',
 	CUSTOM = 'custom';
 
+const orderValueMap = {
+	[ FIRST ]: FIRST_DEFAULT_VALUE,
+	[ LAST ]: LAST_DEFAULT_VALUE,
+};
+
 const items: ToggleButtonGroupItem< GroupControlItemOption >[] = [
 	{
 		value: FIRST,
@@ -45,20 +51,20 @@ const items: ToggleButtonGroupItem< GroupControlItemOption >[] = [
 
 export const FlexOrderField = () => {
 	const { isSiteRtl } = useDirection(),
-		[ order, setOrder ] = useStylesField< number | null >( 'order' );
+		[ order, setOrder ] = useStylesField< NumberPropValue | null >( 'order' );
 
-	const [ groupControlValue, setGroupControlValue ] = useState( getGroupControlValue( order ) );
+	const [ groupControlValue, setGroupControlValue ] = useState( getGroupControlValue( order?.value || null ) );
 
 	const handleToggleButtonChange = ( group: GroupControlItemOption | null ) => {
 		setGroupControlValue( group );
 
-		const orderValueMap = {
-			[ FIRST ]: FIRST_DEFAULT_VALUE,
-			[ LAST ]: LAST_DEFAULT_VALUE,
-			[ CUSTOM ]: null,
-		};
+		if ( ! group || group === CUSTOM ) {
+			setOrder( null );
+
+			return;
+		}
 
-		setOrder( group ? orderValueMap[ group ] : null );
+		setOrder( { $$type: 'number', value: orderValueMap[ group ] } );
 	};
 
 	return (

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

@@ -0,0 +1,164 @@
+import * as React from 'react';
+import {
+	ControlLabel,
+	ControlToggleButtonGroup,
+	NumberControl,
+	SizeControl,
+	type ToggleButtonGroupItem,
+} from '@elementor/editor-controls';
+import type { NumberPropValue, SizePropValue } from '@elementor/editor-props';
+import { ExpandIcon, PencilIcon, ShrinkIcon } from '@elementor/icons';
+import { DirectionProvider, Grid, Stack, ThemeProvider } 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';
+
+type GroupItem = 'flex-grow' | 'flex-shrink' | 'custom';
+
+export const DEFAULT = 1;
+
+const items: ToggleButtonGroupItem< GroupItem >[] = [
+	{
+		value: 'flex-grow',
+		label: __( 'Grow', 'elementor' ),
+		renderContent: ( { size } ) => <ExpandIcon fontSize={ size } />,
+		showTooltip: true,
+	},
+	{
+		value: 'flex-shrink',
+		label: __( 'Shrink', 'elementor' ),
+		renderContent: ( { size } ) => <ShrinkIcon fontSize={ size } />,
+		showTooltip: true,
+	},
+	{
+		value: 'custom',
+		label: __( 'Custom', 'elementor' ),
+		renderContent: ( { size } ) => <PencilIcon fontSize={ size } />,
+		showTooltip: true,
+	},
+];
+
+export const FlexSizeField = () => {
+	const { isSiteRtl } = useDirection(),
+		[ growField, setGrowField ] = useStylesField< NumberPropValue | null >( 'flex-grow' ),
+		[ shrinkField, setShrinkField ] = useStylesField< NumberPropValue | null >( 'flex-shrink' ),
+		[ basisField, setBasisField ] = useStylesField< SizePropValue | null >( 'flex-basis' );
+
+	const grow = growField?.value || null,
+		shrink = shrinkField?.value || null,
+		basis = basisField?.value || null;
+
+	const currentGroup = React.useMemo( () => getActiveGroup( { grow, shrink, basis } ), [ grow, shrink, basis ] ),
+		[ activeGroup, setActiveGroup ] = React.useState( currentGroup );
+
+	const onChangeGroup = ( group: GroupItem | null = null ) => {
+		setActiveGroup( group );
+		setBasisField( null );
+
+		if ( ! group || group === 'custom' ) {
+			setGrowField( null );
+			setShrinkField( null );
+
+			return;
+		}
+
+		if ( group === 'flex-grow' ) {
+			setGrowField( { $$type: 'number', value: DEFAULT } );
+			setShrinkField( null );
+
+			return;
+		}
+
+		setGrowField( null );
+		setShrinkField( { $$type: 'number', value: DEFAULT } );
+	};
+
+	return (
+		<DirectionProvider rtl={ isSiteRtl }>
+			<ThemeProvider>
+				<Stack gap={ 2 }>
+					<Grid container gap={ 2 } alignItems="center" flexWrap="nowrap">
+						<Grid item xs={ 6 }>
+							<ControlLabel>{ __( 'Size', 'elementor' ) }</ControlLabel>
+						</Grid>
+						<Grid item xs={ 6 } sx={ { display: 'flex', justifyContent: 'end' } }>
+							<ControlToggleButtonGroup
+								value={ activeGroup }
+								onChange={ onChangeGroup }
+								items={ items }
+								exclusive={ true }
+							/>
+						</Grid>
+					</Grid>
+
+					{ 'custom' === activeGroup && <FlexCustomField /> }
+				</Stack>
+			</ThemeProvider>
+		</DirectionProvider>
+	);
+};
+
+const FlexCustomField = () => (
+	<>
+		<StylesField bind={ 'flex-grow' }>
+			<Grid container gap={ 2 } alignItems="center" flexWrap="nowrap">
+				<Grid item xs={ 6 }>
+					<ControlLabel>{ __( 'Grow', 'elementor' ) }</ControlLabel>
+				</Grid>
+				<Grid item xs={ 6 } sx={ { display: 'flex', justifyContent: 'end' } }>
+					<NumberControl min={ 0 } shouldForceInt={ true } />
+				</Grid>
+			</Grid>
+		</StylesField>
+		<StylesField bind={ 'flex-shrink' }>
+			<Grid container gap={ 2 } alignItems="center" flexWrap="nowrap">
+				<Grid item xs={ 6 }>
+					<ControlLabel>{ __( 'Shrink', 'elementor' ) }</ControlLabel>
+				</Grid>
+				<Grid item xs={ 6 } sx={ { display: 'flex', justifyContent: 'end' } }>
+					<NumberControl min={ 0 } shouldForceInt={ true } />
+				</Grid>
+			</Grid>
+		</StylesField>
+		<StylesField bind={ 'flex-basis' }>
+			<Grid container gap={ 2 } alignItems="center" flexWrap="nowrap">
+				<Grid item xs={ 6 }>
+					<ControlLabel>{ __( 'Basis', 'elementor' ) }</ControlLabel>
+				</Grid>
+				<Grid item xs={ 6 } sx={ { display: 'flex', justifyContent: 'end' } }>
+					<SizeControl />
+				</Grid>
+			</Grid>
+		</StylesField>
+	</>
+);
+
+const getActiveGroup = ( {
+	grow,
+	shrink,
+	basis,
+}: {
+	grow: NumberPropValue[ 'value' ] | null;
+	shrink: NumberPropValue[ 'value' ] | null;
+	basis: SizePropValue[ 'value' ] | null;
+} ): GroupItem | null => {
+	if ( null === grow && null === shrink && ! basis ) {
+		return null;
+	}
+
+	if ( ( shrink && grow ) || basis ) {
+		return 'custom';
+	}
+
+	if ( grow === DEFAULT ) {
+		return 'flex-grow';
+	}
+
+	if ( shrink === DEFAULT ) {
+		return 'flex-shrink';
+	}
+
+	return 'custom';
+};

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

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { type JSX } from 'react';
 import { ControlLabel, type ToggleButtonGroupItem, ToggleControl } from '@elementor/editor-controls';
 import {
 	JustifyBottomIcon,
@@ -9,33 +8,71 @@ import {
 	JustifySpaceBetweenVerticalIcon as BetweenIcon,
 	JustifyTopIcon,
 } from '@elementor/icons';
-import {
-	DirectionProvider,
-	Stack,
-	ThemeProvider,
-	type ToggleButtonProps,
-	useTheme,
-	withDirection,
-} from '@elementor/ui';
+import { DirectionProvider, Stack, ThemeProvider, withDirection } 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 { type FlexDirection } from './flex-direction-field';
+import { RotatedIcon } from './utils/rotated-icon';
 
 type JustifyContent = 'start' | 'center' | 'end' | 'space-between' | 'space-around' | 'space-evenly';
 
+const StartIcon = withDirection( JustifyTopIcon );
+const EndIcon = withDirection( JustifyBottomIcon );
+
+const iconProps = {
+	isClockwise: true,
+	offset: -90,
+};
+
+const options: ToggleButtonGroupItem< JustifyContent >[] = [
+	{
+		value: 'start',
+		label: __( 'Start', 'elementor' ),
+		renderContent: ( { size } ) => <RotatedIcon icon={ StartIcon } size={ size } { ...iconProps } />,
+		showTooltip: true,
+	},
+	{
+		value: 'center',
+		label: __( 'Center', 'elementor' ),
+		renderContent: ( { size } ) => <RotatedIcon icon={ CenterIcon } size={ size } { ...iconProps } />,
+		showTooltip: true,
+	},
+	{
+		value: 'end',
+		label: __( 'End', 'elementor' ),
+		renderContent: ( { size } ) => <RotatedIcon icon={ EndIcon } size={ size } { ...iconProps } />,
+		showTooltip: true,
+	},
+	{
+		value: 'space-between',
+		label: __( 'Space between', 'elementor' ),
+		renderContent: ( { size } ) => <RotatedIcon icon={ BetweenIcon } size={ size } { ...iconProps } />,
+		showTooltip: true,
+	},
+	{
+		value: 'space-around',
+		label: __( 'Space around', 'elementor' ),
+		renderContent: ( { size } ) => <RotatedIcon icon={ AroundIcon } size={ size } { ...iconProps } />,
+		showTooltip: true,
+	},
+	{
+		value: 'space-evenly',
+		label: __( 'Space evenly', 'elementor' ),
+		renderContent: ( { size } ) => <RotatedIcon icon={ EvenlyIcon } size={ size } { ...iconProps } />,
+		showTooltip: true,
+	},
+];
+
 export const JustifyContentField = () => {
-	const options = useOptions(),
-		{ isSiteRtl } = useDirection();
+	const { isSiteRtl } = useDirection();
 
 	return (
 		<DirectionProvider rtl={ isSiteRtl }>
 			<ThemeProvider>
 				<StylesField bind="justify-content">
 					<Stack gap={ 1 }>
-						<ControlLabel>{ __( 'Justify Content', 'elementor' ) }</ControlLabel>
+						<ControlLabel>{ __( 'Justify content', 'elementor' ) }</ControlLabel>
 						<ToggleControl options={ options } fullWidth={ true } />
 					</Stack>
 				</StylesField>
@@ -43,67 +80,3 @@ export const JustifyContentField = () => {
 		</DirectionProvider>
 	);
 };
-
-const useOptions = (): ToggleButtonGroupItem< JustifyContent >[] => {
-	const StartIcon = withDirection( JustifyTopIcon ),
-		EndIcon = withDirection( JustifyBottomIcon );
-
-	return [
-		{
-			value: 'start',
-			label: __( 'Start', 'elementor' ),
-			renderContent: ( { size } ) => <RotatedIcon icon={ StartIcon } size={ size } />,
-			showTooltip: true,
-		},
-		{
-			value: 'center',
-			label: __( 'Center', 'elementor' ),
-			renderContent: ( { size } ) => <RotatedIcon icon={ CenterIcon } size={ size } />,
-			showTooltip: true,
-		},
-		{
-			value: 'end',
-			label: __( 'End', 'elementor' ),
-			renderContent: ( { size } ) => <RotatedIcon icon={ EndIcon } size={ size } />,
-			showTooltip: true,
-		},
-		{
-			value: 'space-between',
-			label: __( 'Space between', 'elementor' ),
-			renderContent: ( { size } ) => <RotatedIcon icon={ BetweenIcon } size={ size } />,
-			showTooltip: true,
-		},
-		{
-			value: 'space-around',
-			label: __( 'Space around', 'elementor' ),
-			renderContent: ( { size } ) => <RotatedIcon icon={ AroundIcon } size={ size } />,
-			showTooltip: true,
-		},
-		{
-			value: 'space-evenly',
-			label: __( 'Space evenly', 'elementor' ),
-			renderContent: ( { size } ) => <RotatedIcon icon={ EvenlyIcon } size={ size } />,
-			showTooltip: true,
-		},
-	];
-};
-
-const RotatedIcon = ( { icon: Icon, size }: { icon: JSX.ElementType; size: ToggleButtonProps[ 'size' ] } ) => {
-	const [ direction ] = useStylesField< FlexDirection >( 'flex-direction' ),
-		isRtl = 'rtl' === useTheme().direction,
-		rotationMultiplier = isRtl ? -1 : 1;
-
-	const rotationAngelMap: Record< FlexDirection, number > = {
-		row: -90,
-		column: 0,
-		'row-reverse': 90,
-		'column-reverse': 180,
-	};
-
-	return (
-		<Icon
-			fontSize={ size }
-			sx={ { transition: '.3s', rotate: `${ rotationAngelMap[ direction || 'row' ] * rotationMultiplier }deg` } }
-		/>
-	);
-};