@elementor/editor-editing-panel 1.44.0 → 1.46.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elementor/editor-editing-panel",
-  "version": "1.44.0",
+  "version": "1.46.0",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -39,31 +39,32 @@
     "dev": "tsup --config=../../tsup.dev.ts"
   },
   "dependencies": {
-    "@elementor/editor": "0.19.4",
-    "@elementor/editor-canvas": "0.22.3",
-    "@elementor/editor-controls": "0.36.0",
+    "@elementor/editor": "0.20.0",
+    "@elementor/editor-canvas": "0.24.0",
+    "@elementor/editor-controls": "1.1.0",
     "@elementor/editor-current-user": "0.5.0",
-    "@elementor/editor-documents": "0.13.6",
-    "@elementor/editor-elements": "0.8.4",
-    "@elementor/editor-panels": "0.15.4",
-    "@elementor/editor-props": "0.12.1",
+    "@elementor/editor-documents": "0.13.7",
+    "@elementor/editor-elements": "0.8.6",
+    "@elementor/editor-panels": "0.16.0",
+    "@elementor/editor-props": "0.14.0",
     "@elementor/editor-responsive": "0.13.5",
-    "@elementor/editor-styles": "0.6.8",
-    "@elementor/editor-styles-repository": "0.10.1",
-    "@elementor/editor-ui": "0.11.0",
+    "@elementor/editor-styles": "0.6.10",
+    "@elementor/editor-styles-repository": "0.10.3",
+    "@elementor/editor-ui": "0.12.0",
     "@elementor/editor-v1-adapters": "0.12.0",
     "@elementor/icons": "1.44.0",
     "@elementor/locations": "0.8.0",
     "@elementor/menus": "0.1.5",
     "@elementor/schema": "0.1.2",
     "@elementor/session": "0.1.0",
-    "@elementor/ui": "1.34.5",
+    "@elementor/ui": "1.35.5",
     "@elementor/utils": "0.4.0",
     "@elementor/wp-media": "0.6.0",
     "@wordpress/i18n": "^5.13.0"
   },
   "peerDependencies": {
-    "react": "^18.3.1"
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
   },
   "devDependencies": {
     "tsup": "^8.3.5"

package/src/components/css-classes/css-class-menu.tsx

@@ -1,16 +1,13 @@
 import * as React from 'react';
 import { type StyleDefinitionState } from '@elementor/editor-styles';
-import {
-	isElementsStylesProvider,
-	stylesRepository,
-	useUserStylesCapability,
-} from '@elementor/editor-styles-repository';
+import { stylesRepository, useUserStylesCapability } from '@elementor/editor-styles-repository';
 import { MenuItemInfotip, MenuListItem } from '@elementor/editor-ui';
 import { bindMenu, Divider, Menu, MenuSubheader, type PopupState, Stack } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
 import { useStyle } from '../../contexts/style-context';
 import { type StyleDefinitionStateWithNormal } from '../../styles-inheritance/types';
+import { getStylesProviderThemeColor } from '../../utils/get-styles-provider-color';
 import { StyleIndicator } from '../style-indicator';
 import { useCssClass } from './css-class-context';
 import { useUnapplyClass } from './use-apply-and-unapply-class';
@@ -135,8 +132,6 @@ function StateMenuItem( { state, closeMenu, ...props }: StateMenuItemProps ) {
 
 	const isUpdateAllowed = ! state || userCan( provider ?? '' ).updateProps;
 
-	const indicatorVariant = ! provider || isElementsStylesProvider( provider ) ? 'local' : 'global';
-
 	const isStyled = modifiedStates[ state ?? 'normal' ] ?? false;
 	const disabled = ! isUpdateAllowed && ! isStyled;
 	const isActive = styleId === activeId;
@@ -164,7 +159,10 @@ function StateMenuItem( { state, closeMenu, ...props }: StateMenuItemProps ) {
 			>
 				<Stack gap={ 0.75 } direction="row" alignItems="center">
 					{ isStyled && (
-						<StyleIndicator aria-label={ __( 'Has style', 'elementor' ) } variant={ indicatorVariant } />
+						<StyleIndicator
+							aria-label={ __( 'Has style', 'elementor' ) }
+							getColor={ getStylesProviderThemeColor( provider ?? '' ) }
+						/>
 					) }
 					{ state ?? 'normal' }
 				</Stack>

package/src/components/css-classes/css-class-selector.tsx

@@ -14,12 +14,22 @@ import {
 import { InfoAlert, WarningInfotip } from '@elementor/editor-ui';
 import { ColorSwatchIcon, MapPinIcon } from '@elementor/icons';
 import { createLocation } from '@elementor/locations';
-import { type AutocompleteChangeReason, Box, Chip, FormLabel, Link, Stack, Typography } from '@elementor/ui';
+import {
+	type AutocompleteChangeReason,
+	Box,
+	Chip,
+	type ChipOwnProps,
+	FormLabel,
+	Link,
+	Stack,
+	Typography,
+} from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
 import { useClassesProp } from '../../contexts/classes-prop-context';
 import { useElement } from '../../contexts/element-context';
 import { useStyle } from '../../contexts/style-context';
+import { getStylesProviderColorName } from '../../utils/get-styles-provider-color';
 import {
 	CreatableAutocomplete,
 	type CreatableAutocompleteProps,
@@ -34,7 +44,7 @@ const ID = 'elementor-css-class-selector';
 const TAGS_LIMIT = 50;
 
 type StyleDefOption = Option & {
-	color: 'accent' | 'global';
+	color: ChipOwnProps[ 'color' ];
 	icon: ReactElement | null;
 	provider: string | null;
 };
@@ -141,13 +151,9 @@ export function CssClassSelector() {
 				/>
 			</WarningInfotip>
 			{ ! canEdit && (
-				<InfoAlert
-					content={ __(
-						'With your current role, you can use existing classes but can’t modify them.',
-						'elementor'
-					) }
-					sx={ { mt: 1 } }
-				/>
+				<InfoAlert sx={ { mt: 1 } }>
+					{ __( 'With your current role, you can use existing classes but can’t modify them.', 'elementor' ) }
+				</InfoAlert>
 			) }
 		</Stack>
 	);
@@ -205,7 +211,7 @@ function useOptions() {
 			const isElements = isElementsStylesProvider( provider.getKey() );
 			const styleDefs = provider.actions.all( { elementId: element.id } );
 
-			// Add empty local option for elements, as fallback.
+			// Add an empty local option for elements, as fallback.
 			if ( isElements && styleDefs.length === 0 ) {
 				return [ EMPTY_OPTION ];
 			}
@@ -215,7 +221,7 @@ function useOptions() {
 					label: styleDef.label,
 					value: styleDef.id,
 					fixed: isElements,
-					color: isElements ? 'accent' : 'global',
+					color: getStylesProviderColorName( provider.getKey() ),
 					icon: isElements ? <MapPinIcon /> : null,
 					provider: provider.getKey(),
 				};

package/src/components/settings-tab.tsx

@@ -8,7 +8,12 @@ import { Divider } from '@elementor/ui';
 import { useElement } from '../contexts/element-context';
 import { Control as BaseControl } from '../controls-registry/control';
 import { ControlTypeContainer } from '../controls-registry/control-type-container';
-import { type ControlType, getControl, getDefaultLayout } from '../controls-registry/controls-registry';
+import {
+	type ControlType,
+	getControl,
+	getDefaultLayout,
+	getPropTypeUtil,
+} from '../controls-registry/controls-registry';
 import { SettingsField } from '../controls-registry/settings-field';
 import { useDefaultPanelSettings } from '../hooks/use-default-panel-settings';
 import { EXPERIMENTAL_FEATURES } from '../sync/experiments-flags';
@@ -64,14 +69,32 @@ const Control = ( { control }: { control: Control[ 'value' ] } ) => {
 	}
 
 	const layout = control.meta?.layout || getDefaultLayout( control.type as ControlType );
+	const controlProps = populateChildControlProps( control.props );
 
 	return (
 		<SettingsField bind={ control.bind }>
 			{ control.meta?.topDivider && <Divider /> }
 			<ControlTypeContainer layout={ layout }>
 				{ control.label ? <ControlFormLabel>{ control.label }</ControlFormLabel> : null }
-				<BaseControl type={ control.type as ControlType } props={ control.props } />
+				<BaseControl type={ control.type as ControlType } props={ controlProps } />
 			</ControlTypeContainer>
 		</SettingsField>
 	);
 };
+
+function populateChildControlProps( props: Record< string, unknown > ) {
+	if ( props.childControlType ) {
+		const childComponent = getControl( props.childControlType as ControlType );
+		const childPropType = getPropTypeUtil( props.childControlType as ControlType );
+		props = {
+			...props,
+			childControlConfig: {
+				component: childComponent,
+				props: props.childControlProps || {},
+				propTypeUtil: childPropType,
+			},
+		};
+	}
+
+	return props;
+}

package/src/components/style-indicator.tsx

@@ -1,23 +1,27 @@
-import { styled } from '@elementor/ui';
-
-type StyleIndicatorVariant = 'overridden' | 'local' | 'global';
+import { styled, type Theme } from '@elementor/ui';
 
 export const StyleIndicator = styled( 'div', {
-	shouldForwardProp: ( prop ) => prop !== 'variant',
-} )< { variant?: StyleIndicatorVariant } >`
+	shouldForwardProp: ( prop: string ) => ! [ 'isOverridden', 'getColor' ].includes( prop ),
+} )<
+	| {
+			isOverridden?: boolean;
+			getColor?: never;
+	  }
+	| {
+			isOverridden?: boolean;
+			getColor?: ( ( theme: Theme ) => string ) | null;
+	  }
+>`
 	width: 5px;
 	height: 5px;
 	border-radius: 50%;
-	background-color: ${ ( { theme, variant } ) => {
-		switch ( variant ) {
-			case 'overridden':
-				return theme.palette.warning.light;
-			case 'global':
-				return theme.palette.global.dark;
-			case 'local':
-				return theme.palette.accent.main;
-			default:
-				return theme.palette.text.disabled;
+	background-color: ${ ( { theme, isOverridden, getColor } ) => {
+		if ( isOverridden ) {
+			return theme.palette.warning.light;
 		}
+
+		const providerColor = getColor?.( theme );
+
+		return providerColor ?? theme.palette.text.disabled;
 	} };
 `;

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

@@ -2,7 +2,6 @@ import * as React from 'react';
 import { ControlFormLabel } from '@elementor/editor-controls';
 import { __ } from '@wordpress/i18n';
 
-import { useStyle } from '../../../contexts/style-context';
 import { useStylesFields } from '../../../hooks/use-styles-fields';
 import { AddOrRemoveContent } from '../../add-or-remove-content';
 import { BorderColorField } from './border-color-field';
@@ -16,22 +15,21 @@ const initialBorder = {
 };
 
 export const BorderField = () => {
-	const { canEdit } = useStyle();
-	const [ border, setBorder ] = useStylesFields( Object.keys( initialBorder ) );
+	const { values, setValues, canEdit } = useStylesFields( Object.keys( initialBorder ) );
 
 	const addBorder = () => {
-		setBorder( initialBorder );
+		setValues( initialBorder );
 	};
 
 	const removeBorder = () => {
-		setBorder( {
+		setValues( {
 			'border-width': null,
 			'border-color': null,
 			'border-style': null,
 		} );
 	};
 
-	const hasBorder = Object.values( border ?? {} ).some( Boolean );
+	const hasBorder = Object.values( values ?? {} ).some( Boolean );
 
 	return (
 		<AddOrRemoveContent

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

@@ -13,6 +13,7 @@ import { __ } from '@wordpress/i18n';
 
 import { StylesField } from '../../../controls-registry/styles-field';
 import { useDirection } from '../../../hooks/use-direction';
+import { UiProviders } from '../../../styles-inheritance/components/ui-providers';
 
 const StartStartIcon = withDirection( RadiusTopLeftIcon );
 const StartEndIcon = withDirection( RadiusTopRightIcon );
@@ -55,14 +56,16 @@ export const BorderRadiusField = () => {
 	const { isSiteRtl } = useDirection();
 
 	return (
-		<StylesField bind={ 'border-radius' }>
-			<EqualUnequalSizesControl
-				items={ getCorners( isSiteRtl ) }
-				label={ __( 'Border radius', 'elementor' ) }
-				icon={ <BorderCornersIcon fontSize={ 'tiny' } /> }
-				tooltipLabel={ __( 'Adjust corners', 'elementor' ) }
-				multiSizePropTypeUtil={ borderRadiusPropTypeUtil }
-			/>
-		</StylesField>
+		<UiProviders>
+			<StylesField bind={ 'border-radius' }>
+				<EqualUnequalSizesControl
+					items={ getCorners( isSiteRtl ) }
+					label={ __( 'Border radius', 'elementor' ) }
+					icon={ <BorderCornersIcon fontSize={ 'tiny' } /> }
+					tooltipLabel={ __( 'Adjust corners', 'elementor' ) }
+					multiSizePropTypeUtil={ borderRadiusPropTypeUtil }
+				/>
+			</StylesField>
+		</UiProviders>
 	);
 };

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

@@ -2,11 +2,17 @@ import * as React from 'react';
 import { BoxShadowRepeaterControl } from '@elementor/editor-controls';
 
 import { StylesField } from '../../../controls-registry/styles-field';
+import { PanelDivider } from '../../panel-divider';
 import { SectionContent } from '../../section-content';
+import { OpacityControlField } from '../layout-section/opacity-control-field';
 
 export const EffectsSection = () => {
 	return (
 		<SectionContent>
+			<StylesField bind="opacity">
+				<OpacityControlField />
+			</StylesField>
+			<PanelDivider />
 			<StylesField bind="box-shadow">
 				<BoxShadowRepeaterControl />
 			</StylesField>

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

@@ -8,11 +8,11 @@ import {
 	JustifySpaceBetweenVerticalIcon as BetweenIcon,
 	JustifyTopIcon,
 } from '@elementor/icons';
-import { DirectionProvider, Stack, ThemeProvider, withDirection } from '@elementor/ui';
+import { Stack, withDirection } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
 import { StylesField } from '../../../controls-registry/styles-field';
-import { useDirection } from '../../../hooks/use-direction';
+import { UiProviders } from '../../../styles-inheritance/components/ui-providers';
 import { ControlLabel } from '../../control-label';
 import { RotatedIcon } from './utils/rotated-icon';
 
@@ -67,18 +67,14 @@ const options: ToggleButtonGroupItem< AlignContent >[] = [
 ];
 
 export const AlignContentField = () => {
-	const { isSiteRtl } = useDirection();
-
 	return (
-		<DirectionProvider rtl={ isSiteRtl }>
-			<ThemeProvider>
-				<StylesField bind="align-content">
-					<Stack gap={ 1 }>
-						<ControlLabel>{ __( 'Align content', 'elementor' ) }</ControlLabel>
-						<ToggleControl options={ options } fullWidth={ true } />
-					</Stack>
-				</StylesField>
-			</ThemeProvider>
-		</DirectionProvider>
+		<UiProviders>
+			<StylesField bind="align-content">
+				<Stack gap={ 1 }>
+					<ControlLabel>{ __( 'Align content', 'elementor' ) }</ControlLabel>
+					<ToggleControl options={ options } fullWidth={ true } />
+				</Stack>
+			</StylesField>
+		</UiProviders>
 	);
 };

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

@@ -6,11 +6,11 @@ import {
 	LayoutAlignRightIcon,
 	LayoutDistributeVerticalIcon as JustifyIcon,
 } from '@elementor/icons';
-import { DirectionProvider, Grid, ThemeProvider, withDirection } from '@elementor/ui';
+import { Grid, withDirection } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
 import { StylesField } from '../../../controls-registry/styles-field';
-import { useDirection } from '../../../hooks/use-direction';
+import { UiProviders } from '../../../styles-inheritance/components/ui-providers';
 import { ControlLabel } from '../../control-label';
 import { RotatedIcon } from './utils/rotated-icon';
 
@@ -52,22 +52,18 @@ const options: ToggleButtonGroupItem< AlignItems >[] = [
 ];
 
 export const AlignItemsField = () => {
-	const { isSiteRtl } = useDirection();
-
 	return (
-		<DirectionProvider rtl={ isSiteRtl }>
-			<ThemeProvider>
-				<StylesField bind="align-items">
-					<Grid container gap={ 2 } alignItems="center" flexWrap="nowrap">
-						<Grid item xs={ 6 }>
-							<ControlLabel>{ __( 'Align items', 'elementor' ) }</ControlLabel>
-						</Grid>
-						<Grid item xs={ 6 } sx={ { display: 'flex', justifyContent: 'end' } }>
-							<ToggleControl options={ options } />
-						</Grid>
+		<UiProviders>
+			<StylesField bind="align-items">
+				<Grid container gap={ 2 } alignItems="center" flexWrap="nowrap">
+					<Grid item xs={ 6 }>
+						<ControlLabel>{ __( 'Align items', 'elementor' ) }</ControlLabel>
+					</Grid>
+					<Grid item xs={ 6 } sx={ { display: 'flex', justifyContent: 'end' } }>
+						<ToggleControl options={ options } />
 					</Grid>
-				</StylesField>
-			</ThemeProvider>
-		</DirectionProvider>
+				</Grid>
+			</StylesField>
+		</UiProviders>
 	);
 };

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

@@ -6,11 +6,11 @@ import {
 	LayoutAlignRightIcon,
 	LayoutDistributeVerticalIcon as JustifyIcon,
 } from '@elementor/icons';
-import { DirectionProvider, Grid, ThemeProvider, type ToggleButtonProps, withDirection } from '@elementor/ui';
+import { Grid, type ToggleButtonProps, withDirection } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
 import { StylesField } from '../../../controls-registry/styles-field';
-import { useDirection } from '../../../hooks/use-direction';
+import { UiProviders } from '../../../styles-inheritance/components/ui-providers';
 import { ControlLabel } from '../../control-label';
 import { type FlexDirection } from './flex-direction-field';
 import { RotatedIcon } from './utils/rotated-icon';
@@ -85,22 +85,18 @@ const getOptions = ( parentStyleDirection: FlexDirection ) => [
 ];
 
 export const AlignSelfChild = ( { parentStyleDirection }: { parentStyleDirection: FlexDirection } ) => {
-	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={ getOptions( parentStyleDirection as FlexDirection ) } />
-						</Grid>
+		<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>
-				</StylesField>
-			</ThemeProvider>
-		</DirectionProvider>
+				</Grid>
+			</StylesField>
+		</UiProviders>
 	);
 };

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

@@ -1,11 +1,11 @@
 import * as React from 'react';
 import { type ToggleButtonGroupItem, ToggleControl } from '@elementor/editor-controls';
 import { ArrowDownSmallIcon, ArrowLeftIcon, ArrowRightIcon, ArrowUpSmallIcon } from '@elementor/icons';
-import { DirectionProvider, Grid, ThemeProvider, withDirection } from '@elementor/ui';
+import { Grid, withDirection } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
 import { StylesField } from '../../../controls-registry/styles-field';
-import { useDirection } from '../../../hooks/use-direction';
+import { UiProviders } from '../../../styles-inheritance/components/ui-providers';
 import { ControlLabel } from '../../control-label';
 
 export type FlexDirection = 'row' | 'row-reverse' | 'column' | 'column-reverse';
@@ -44,22 +44,18 @@ const options: ToggleButtonGroupItem< FlexDirection >[] = [
 ];
 
 export const FlexDirectionField = () => {
-	const { isSiteRtl } = useDirection();
-
 	return (
-		<DirectionProvider rtl={ isSiteRtl }>
-			<ThemeProvider>
-				<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>
+		<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>
-				</StylesField>
-			</ThemeProvider>
-		</DirectionProvider>
+				</Grid>
+			</StylesField>
+		</UiProviders>
 	);
 };

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

@@ -3,13 +3,12 @@ import { useState } from 'react';
 import { ControlToggleButtonGroup, NumberControl, type ToggleButtonGroupItem } from '@elementor/editor-controls';
 import { type NumberPropValue } from '@elementor/editor-props';
 import { ArrowDownSmallIcon, ArrowUpSmallIcon, PencilIcon } from '@elementor/icons';
-import { DirectionProvider, Grid, ThemeProvider } from '@elementor/ui';
+import { Grid } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
-import { useStyle } from '../../../contexts/style-context';
 import { StylesField } from '../../../controls-registry/styles-field';
-import { useDirection } from '../../../hooks/use-direction';
 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';
 
@@ -48,9 +47,7 @@ const items: ToggleButtonGroupItem< GroupControlItemOption >[] = [
 ];
 
 export const FlexOrderField = () => {
-	const { isSiteRtl } = useDirection();
-	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 ) );
 
@@ -67,43 +64,41 @@ export const FlexOrderField = () => {
 	};
 
 	return (
-		<DirectionProvider rtl={ isSiteRtl }>
-			<ThemeProvider>
-				<StylesField bind={ 'order' }>
-					<SectionContent>
+		<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>{ __( 'Order', 'elementor' ) }</ControlLabel>
+								<ControlLabel>{ __( 'Custom order', 'elementor' ) }</ControlLabel>
 							</Grid>
 							<Grid item xs={ 6 } sx={ { display: 'flex', justifyContent: 'end' } }>
-								<ControlToggleButtonGroup
-									items={ items }
-									value={ groupControlValue }
-									onChange={ handleToggleButtonChange }
-									exclusive={ true }
-									disabled={ ! canEdit }
+								<NumberControl
+									min={ FIRST_DEFAULT_VALUE + 1 }
+									max={ LAST_DEFAULT_VALUE - 1 }
+									shouldForceInt={ true }
 								/>
 							</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 }
-									/>
-								</Grid>
-							</Grid>
-						) }
-					</SectionContent>
-				</StylesField>
-			</ThemeProvider>
-		</DirectionProvider>
+					) }
+				</SectionContent>
+			</StylesField>
+		</UiProviders>
 	);
 };