@elementor/editor-editing-panel 1.46.0 → 1.47.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elementor/editor-editing-panel",
-  "version": "1.46.0",
+  "version": "1.47.0",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -39,27 +39,27 @@
     "dev": "tsup --config=../../tsup.dev.ts"
   },
   "dependencies": {
-    "@elementor/editor": "0.20.0",
-    "@elementor/editor-canvas": "0.24.0",
-    "@elementor/editor-controls": "1.1.0",
+    "@elementor/editor": "0.20.1",
+    "@elementor/editor-canvas": "0.25.0",
+    "@elementor/editor-controls": "1.2.0",
     "@elementor/editor-current-user": "0.5.0",
-    "@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.10",
-    "@elementor/editor-styles-repository": "0.10.3",
-    "@elementor/editor-ui": "0.12.0",
-    "@elementor/editor-v1-adapters": "0.12.0",
+    "@elementor/editor-documents": "0.13.8",
+    "@elementor/editor-elements": "0.8.7",
+    "@elementor/editor-panels": "0.16.1",
+    "@elementor/editor-props": "0.15.0",
+    "@elementor/editor-responsive": "0.13.6",
+    "@elementor/editor-styles": "0.6.11",
+    "@elementor/editor-styles-repository": "0.10.4",
+    "@elementor/editor-ui": "0.13.0",
+    "@elementor/editor-v1-adapters": "0.12.1",
     "@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.35.5",
-    "@elementor/utils": "0.4.0",
-    "@elementor/wp-media": "0.6.0",
+    "@elementor/utils": "0.5.0",
+    "@elementor/wp-media": "0.6.1",
     "@wordpress/i18n": "^5.13.0"
   },
   "peerDependencies": {

package/src/components/popover-scrollable-content.tsx

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import { PopoverScrollableContent as BasePopoverScrollableContent } from '@elementor/editor-ui';
+
+import { useSectionWidth } from '../contexts/section-context';
+
+type Props = React.ComponentProps< typeof BasePopoverScrollableContent >;
+
+export const PopoverScrollableContent = ( props: Props ) => {
+	const sectionWidth = useSectionWidth();
+
+	return <BasePopoverScrollableContent { ...props } width={ sectionWidth } />;
+};

package/src/components/section-content.tsx

@@ -1,11 +1,7 @@
-import { createContext, type FC, type PropsWithChildren, useContext, useRef } from 'react';
+import { type FC, type PropsWithChildren } from 'react';
 import * as React from 'react';
 import { Stack } from '@elementor/ui';
 
-const SectionContentRefContext = createContext< React.RefObject< HTMLElement > | null >( null );
-
-export const useSectionContentRef = () => useContext( SectionContentRefContext );
-
 type SectionContentProps = PropsWithChildren< {
 	gap?: number;
 	sx?: {
@@ -13,14 +9,8 @@ type SectionContentProps = PropsWithChildren< {
 	};
 } >;
 
-export const SectionContent: FC< SectionContentProps > = ( { gap = 2, sx, children } ) => {
-	const ref = useRef< HTMLElement >( null );
-
-	return (
-		<SectionContentRefContext.Provider value={ ref }>
-			<Stack gap={ gap } sx={ { ...sx } } ref={ ref }>
-				{ children }
-			</Stack>
-		</SectionContentRefContext.Provider>
-	);
-};
+export const SectionContent: FC< SectionContentProps > = ( { gap = 2, sx, children } ) => (
+	<Stack gap={ gap } sx={ { ...sx } }>
+		{ children }
+	</Stack>
+);

package/src/components/section.tsx

@@ -1,8 +1,9 @@
 import * as React from 'react';
-import { type PropsWithChildren, type ReactNode, useId } from 'react';
+import { type PropsWithChildren, type ReactNode, useId, useRef } from 'react';
 import { isExperimentActive } from '@elementor/editor-v1-adapters';
 import { Collapse, Divider, ListItemButton, ListItemText, Stack } from '@elementor/ui';
 
+import { SectionRefContext } from '../contexts/section-context';
 import { useStateByElement } from '../hooks/use-state-by-element';
 import { EXPERIMENTAL_FEATURES } from '../sync/experiments-flags';
 import { CollapseIcon } from './collapse-icon';
@@ -16,6 +17,7 @@ type Props = PropsWithChildren< {
 
 export function Section( { title, children, defaultExpanded = false, titleEnd }: Props ) {
 	const [ isOpen, setIsOpen ] = useStateByElement( title, !! defaultExpanded );
+	const ref = useRef< HTMLElement >( null );
 
 	const handleClick = () => {
 		setIsOpen( ! isOpen );
@@ -46,9 +48,11 @@ export function Section( { title, children, defaultExpanded = false, titleEnd }:
 				<CollapseIcon open={ isOpen } color="secondary" fontSize="tiny" />
 			</ListItemButton>
 			<Collapse id={ contentId } aria-labelledby={ labelId } in={ isOpen } timeout="auto" unmountOnExit>
-				<Stack gap={ 2.5 } p={ 2 }>
-					{ children }
-				</Stack>
+				<SectionRefContext.Provider value={ ref }>
+					<Stack ref={ ref } gap={ 2.5 } p={ 2 }>
+						{ children }
+					</Stack>
+				</SectionRefContext.Provider>
 			</Collapse>
 			<Divider />
 		</>

package/src/components/settings-tab.tsx

@@ -70,12 +70,15 @@ const Control = ( { control }: { control: Control[ 'value' ] } ) => {
 
 	const layout = control.meta?.layout || getDefaultLayout( control.type as ControlType );
 	const controlProps = populateChildControlProps( control.props );
+	if ( layout === 'custom' ) {
+		controlProps.label = control.label;
+	}
 
 	return (
-		<SettingsField bind={ control.bind }>
+		<SettingsField bind={ control.bind } propDisplayName={ control.label || control.bind }>
 			{ control.meta?.topDivider && <Divider /> }
 			<ControlTypeContainer layout={ layout }>
-				{ control.label ? <ControlFormLabel>{ control.label }</ControlFormLabel> : null }
+				{ control.label && layout !== 'custom' ? <ControlFormLabel>{ control.label }</ControlFormLabel> : null }
 				<BaseControl type={ control.type as ControlType } props={ controlProps } />
 			</ControlTypeContainer>
 		</SettingsField>

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

@@ -1,13 +1,16 @@
 import * as React from 'react';
 import { BackgroundControl } from '@elementor/editor-controls';
+import { __ } from '@wordpress/i18n';
 
 import { StylesField } from '../../../controls-registry/styles-field';
 import { SectionContent } from '../../section-content';
 
+const BACKGROUND_LABEL = __( 'Background', 'elementor' );
+
 export const BackgroundSection = () => {
 	return (
 		<SectionContent>
-			<StylesField bind="background">
+			<StylesField bind="background" propDisplayName={ BACKGROUND_LABEL }>
 				<BackgroundControl />
 			</StylesField>
 		</SectionContent>

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

@@ -1,22 +1,16 @@
 import * as React from 'react';
 import { ColorControl } 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';
+import { StylesFieldLayout } from '../../styles-field-layout';
 
-export const BorderColorField = () => {
-	return (
-		<StylesField bind={ 'border-color' }>
-			<Grid container gap={ 2 } alignItems="center" flexWrap="nowrap">
-				<Grid item xs={ 6 }>
-					<ControlLabel>{ __( 'Border color', 'elementor' ) }</ControlLabel>
-				</Grid>
-				<Grid item xs={ 6 }>
-					<ColorControl />
-				</Grid>
-			</Grid>
-		</StylesField>
-	);
-};
+const BORDER_COLOR_LABEL = __( 'Border color', 'elementor' );
+
+export const BorderColorField = () => (
+	<StylesField bind="border-color" propDisplayName={ BORDER_COLOR_LABEL }>
+		<StylesFieldLayout label={ BORDER_COLOR_LABEL }>
+			<ColorControl />
+		</StylesFieldLayout>
+	</StylesField>
+);

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

@@ -15,6 +15,8 @@ import { StylesField } from '../../../controls-registry/styles-field';
 import { useDirection } from '../../../hooks/use-direction';
 import { UiProviders } from '../../../styles-inheritance/components/ui-providers';
 
+const BORDER_RADIUS_LABEL = __( 'Border radius', 'elementor' );
+
 const StartStartIcon = withDirection( RadiusTopLeftIcon );
 const StartEndIcon = withDirection( RadiusTopRightIcon );
 const EndStartIcon = withDirection( RadiusBottomLeftIcon );
@@ -57,10 +59,10 @@ export const BorderRadiusField = () => {
 
 	return (
 		<UiProviders>
-			<StylesField bind={ 'border-radius' }>
+			<StylesField bind={ 'border-radius' } propDisplayName={ BORDER_RADIUS_LABEL }>
 				<EqualUnequalSizesControl
 					items={ getCorners( isSiteRtl ) }
-					label={ __( 'Border radius', 'elementor' ) }
+					label={ BORDER_RADIUS_LABEL }
 					icon={ <BorderCornersIcon fontSize={ 'tiny' } /> }
 					tooltipLabel={ __( 'Adjust corners', 'elementor' ) }
 					multiSizePropTypeUtil={ borderRadiusPropTypeUtil }

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

@@ -1,10 +1,11 @@
 import * as React from 'react';
 import { 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';
+import { StylesFieldLayout } from '../../styles-field-layout';
+
+const BORDER_TYPE_LABEL = __( 'Border type', 'elementor' );
 
 const borderStyles = [
 	{ value: 'none', label: __( 'None', 'elementor' ) },
@@ -17,17 +18,11 @@ const borderStyles = [
 	{ value: 'inset', label: __( 'Inset', 'elementor' ) },
 	{ value: 'outset', label: __( 'Outset', 'elementor' ) },
 ];
-export const BorderStyleField = () => {
-	return (
-		<StylesField bind={ 'border-style' }>
-			<Grid container gap={ 2 } alignItems="center" flexWrap="nowrap">
-				<Grid item xs={ 6 }>
-					<ControlLabel>{ __( 'Border type', 'elementor' ) }</ControlLabel>
-				</Grid>
-				<Grid item xs={ 6 } sx={ { overflow: 'hidden' } }>
-					<SelectControl options={ borderStyles } />
-				</Grid>
-			</Grid>
-		</StylesField>
-	);
-};
+
+export const BorderStyleField = () => (
+	<StylesField bind="border-style" propDisplayName={ BORDER_TYPE_LABEL }>
+		<StylesFieldLayout label={ BORDER_TYPE_LABEL }>
+			<SelectControl options={ borderStyles } />
+		</StylesFieldLayout>
+	</StylesField>
+);

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

@@ -8,6 +8,8 @@ import { __ } from '@wordpress/i18n';
 import { StylesField } from '../../../controls-registry/styles-field';
 import { useDirection } from '../../../hooks/use-direction';
 
+const BORDER_WIDTH_LABEL = __( 'Border width', 'elementor' );
+
 const InlineStartIcon = withDirection( SideRightIcon );
 const InlineEndIcon = withDirection( SideLeftIcon );
 
@@ -38,10 +40,10 @@ export const BorderWidthField = () => {
 	const { isSiteRtl } = useDirection();
 
 	return (
-		<StylesField bind={ 'border-width' }>
+		<StylesField bind={ 'border-width' } propDisplayName={ BORDER_WIDTH_LABEL }>
 			<EqualUnequalSizesControl
 				items={ getEdges( isSiteRtl ) }
-				label={ __( 'Border width', 'elementor' ) }
+				label={ BORDER_WIDTH_LABEL }
 				icon={ <SideAllIcon fontSize={ 'tiny' } /> }
 				tooltipLabel={ __( 'Adjust borders', 'elementor' ) }
 				multiSizePropTypeUtil={ borderWidthPropTypeUtil }

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

@@ -1,21 +1,35 @@
 import * as React from 'react';
-import { BoxShadowRepeaterControl } from '@elementor/editor-controls';
+import { BoxShadowRepeaterControl, FilterRepeaterControl } from '@elementor/editor-controls';
+import { isExperimentActive } from '@elementor/editor-v1-adapters';
+import { __ } from '@wordpress/i18n';
 
 import { StylesField } from '../../../controls-registry/styles-field';
+import { EXPERIMENTAL_FEATURES } from '../../../sync/experiments-flags';
 import { PanelDivider } from '../../panel-divider';
 import { SectionContent } from '../../section-content';
 import { OpacityControlField } from '../layout-section/opacity-control-field';
 
+const BOX_SHADOW_LABEL = __( 'Box shadow', 'elementor' );
+const FILTER_LABEL = __( 'Filter', 'elementor' );
+
 export const EffectsSection = () => {
+	const isVersion331Active = isExperimentActive( EXPERIMENTAL_FEATURES.V_3_31 );
+
 	return (
 		<SectionContent>
-			<StylesField bind="opacity">
-				<OpacityControlField />
-			</StylesField>
+			<OpacityControlField />
 			<PanelDivider />
-			<StylesField bind="box-shadow">
+			<StylesField bind="box-shadow" propDisplayName={ BOX_SHADOW_LABEL }>
 				<BoxShadowRepeaterControl />
 			</StylesField>
+			{ isVersion331Active && (
+				<>
+					<PanelDivider />
+					<StylesField bind="filter" propDisplayName={ FILTER_LABEL }>
+						<FilterRepeaterControl />
+					</StylesField>
+				</>
+			) }
 		</SectionContent>
 	);
 };

package/src/components/style-sections/layout-section/align-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 AlignContent = 'start' | 'center' | 'end' | 'space-between' | 'space-around' | 'space-evenly';
 
+const ALIGN_CONTENT_LABEL = __( 'Align content', 'elementor' );
+
 const StartIcon = withDirection( JustifyTopIcon );
 const EndIcon = withDirection( JustifyBottomIcon );
 
@@ -66,15 +68,12 @@ const options: ToggleButtonGroupItem< AlignContent >[] = [
 	},
 ];
 
-export const AlignContentField = () => {
-	return (
+export const AlignContentField = () => (
+	<StylesField bind="align-content" propDisplayName={ ALIGN_CONTENT_LABEL }>
 		<UiProviders>
-			<StylesField bind="align-content">
-				<Stack gap={ 1 }>
-					<ControlLabel>{ __( 'Align content', 'elementor' ) }</ControlLabel>
-					<ToggleControl options={ options } fullWidth={ true } />
-				</Stack>
-			</StylesField>
+			<StylesFieldLayout label={ ALIGN_CONTENT_LABEL } direction="column">
+				<ToggleControl options={ options } fullWidth={ true } />
+			</StylesFieldLayout>
 		</UiProviders>
-	);
-};
+	</StylesField>
+);

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

@@ -6,16 +6,18 @@ import {
 	LayoutAlignRightIcon,
 	LayoutDistributeVerticalIcon as JustifyIcon,
 } 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';
 import { RotatedIcon } from './utils/rotated-icon';
 
 type AlignItems = 'start' | 'center' | 'end' | 'stretch';
 
+const ALIGN_ITEMS_LABEL = __( 'Align items', 'elementor' );
+
 const StartIcon = withDirection( LayoutAlignLeftIcon );
 const EndIcon = withDirection( LayoutAlignRightIcon );
 
@@ -54,15 +56,10 @@ const options: ToggleButtonGroupItem< AlignItems >[] = [
 export const AlignItemsField = () => {
 	return (
 		<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>
-				</Grid>
+			<StylesField bind="align-items" propDisplayName={ ALIGN_ITEMS_LABEL }>
+				<StylesFieldLayout label={ ALIGN_ITEMS_LABEL }>
+					<ToggleControl options={ options } />
+				</StylesFieldLayout>
 			</StylesField>
 		</UiProviders>
 	);

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

@@ -11,9 +11,12 @@ 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';
@@ -64,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>
 	);
 };