@elementor/editor-editing-panel 0.19.0 → 1.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elementor/editor-editing-panel",
-  "version": "0.19.0",
+  "version": "1.0.0",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -10,9 +10,9 @@
   "types": "dist/index.d.ts",
   "exports": {
     ".": {
+      "types": "./dist/index.d.ts",
       "import": "./dist/index.mjs",
-      "require": "./dist/index.js",
-      "types": "./dist/index.d.ts"
+      "require": "./dist/index.js"
     },
     "./package.json": "./package.json"
   },
@@ -39,17 +39,18 @@
     "dev": "tsup --config=../../tsup.dev.ts"
   },
   "dependencies": {
-    "@elementor/editor": "^0.15.0",
-    "@elementor/editor-panels": "^0.8.0",
-    "@elementor/editor-responsive": "^0.12.1",
-    "@elementor/editor-style": "^0.4.1",
-    "@elementor/editor-v1-adapters": "^0.8.2",
-    "@elementor/icons": "^1.17.0",
-    "@elementor/menus": "^0.1.0",
-    "@elementor/schema": "^0.1.0",
-    "@elementor/ui": "^1.21.1",
-    "@elementor/utils": "^0.2.1",
-    "@elementor/wp-media": "^0.2.0",
+    "@elementor/editor": "^0.16.0",
+    "@elementor/editor-elements": "^0.2.0",
+    "@elementor/editor-props": "^0.2.0",
+    "@elementor/editor-panels": "^0.9.0",
+    "@elementor/editor-responsive": "^0.12.2",
+    "@elementor/editor-styles": "^0.2.0",
+    "@elementor/editor-v1-adapters": "^0.8.3",
+    "@elementor/icons": "^1.18.1",
+    "@elementor/menus": "^0.1.1",
+    "@elementor/ui": "^1.21.7",
+    "@elementor/utils": "^0.2.2",
+    "@elementor/wp-media": "^0.2.1",
     "@wordpress/i18n": "^4.45.0"
   },
   "peerDependencies": {

package/src/components/accordion-section.tsx

@@ -4,16 +4,17 @@ import { Accordion, AccordionSummary, AccordionDetails, AccordionSummaryText, St
 
 export type AccordionSectionProps = React.PropsWithChildren< {
 	title: React.ReactNode;
+	defaultExpanded?: boolean;
 } >;
 
-export const AccordionSection = ( { title, children }: AccordionSectionProps ) => {
+export const AccordionSection = ( { title, children, defaultExpanded = false }: AccordionSectionProps ) => {
 	const uid = useId();
 	const labelId = `label-${ uid }`;
 	const contentId = `content-${ uid }`;
 
 	// TODO: Change to collapsible list item
 	return (
-		<Accordion disableGutters defaultExpanded>
+		<Accordion disableGutters defaultExpanded={ defaultExpanded }>
 			<AccordionSummary aria-controls={ contentId } id={ labelId }>
 				<AccordionSummaryText primaryTypographyProps={ { variant: 'caption' } }>{ title }</AccordionSummaryText>
 			</AccordionSummary>

package/src/components/add-or-remove-content.tsx

@@ -0,0 +1,42 @@
+import * as React from 'react';
+import { PropsWithChildren } from 'react';
+import { MinusIcon, PlusIcon } from '@elementor/icons';
+import { Collapse, IconButton, Stack } from '@elementor/ui';
+import { ControlLabel } from './control-label';
+
+const SIZE = 'tiny';
+
+type Props = {
+	label: string;
+	isAdded: boolean;
+	onAdd: () => void;
+	onRemove: () => void;
+};
+
+export const AddOrRemoveContent = ( { isAdded, label, onAdd, onRemove, children }: PropsWithChildren< Props > ) => {
+	return (
+		<Stack gap={ 1.5 }>
+			<Stack
+				direction="row"
+				sx={ {
+					justifyContent: 'space-between',
+					alignItems: 'center',
+				} }
+			>
+				<ControlLabel>{ label }</ControlLabel>
+				{ isAdded ? (
+					<IconButton size={ SIZE } onClick={ onRemove }>
+						<MinusIcon fontSize={ SIZE } />
+					</IconButton>
+				) : (
+					<IconButton size={ SIZE } onClick={ onAdd }>
+						<PlusIcon fontSize={ SIZE } />
+					</IconButton>
+				) }
+			</Stack>
+			<Collapse in={ isAdded }>
+				<Stack gap={ 1.5 }>{ children }</Stack>
+			</Collapse>
+		</Stack>
+	);
+};

package/src/components/collapsible-field.tsx

@@ -0,0 +1,34 @@
+import * as React from 'react';
+import { useState } from 'react';
+import { __ } from '@wordpress/i18n';
+import { Collapse, IconButton, Stack } from '@elementor/ui';
+import { MinusIcon, PlusIcon } from '@elementor/icons';
+
+type CollapsibleFieldProps = React.PropsWithChildren< {
+	label: React.ReactNode;
+	defaultOpen?: boolean;
+} >;
+
+export const CollapsibleField = ( { label, children, defaultOpen = false }: CollapsibleFieldProps ) => {
+	const [ open, setOpen ] = useState( defaultOpen );
+
+	const handleToggle = () => {
+		setOpen( ( prevOpen ) => ! prevOpen );
+	};
+
+	return (
+		<Stack gap={ 1.5 }>
+			<Stack direction="row" justifyContent="space-between" alignItems="center" sx={ { py: 0.5 } }>
+				{ label }
+				<IconButton
+					onClick={ handleToggle }
+					size="tiny"
+					aria-label={ open ? __( 'Close', 'elementor' ) : __( 'Expand', 'elementor' ) }
+				>
+					{ open ? <MinusIcon fontSize="tiny" /> : <PlusIcon fontSize="tiny" /> }
+				</IconButton>
+			</Stack>
+			<Collapse in={ open }>{ children }</Collapse>
+		</Stack>
+	);
+};

package/src/components/editing-panel.tsx

@@ -1,29 +1,24 @@
 import * as React from 'react';
 import { __ } from '@wordpress/i18n';
-import useSelectedElements from '../hooks/use-selected-elements';
+import { useSelectedElement } from '@elementor/editor-elements';
 import { Panel, PanelBody, PanelHeader, PanelHeaderTitle } from '@elementor/editor-panels';
-import { ElementProvider } from '../controls/providers/element-provider';
-import useElementType from '../hooks/use-element-type';
 import { EditingPanelTabs } from './editing-panel-tabs';
-import { ControlReplacementProvider } from '../controls/create-control-replacement';
+import { ControlActionsProvider, ControlReplacementProvider } from '../controls';
 import { getControlReplacement } from '../control-replacement';
 import { ErrorBoundary } from '@elementor/ui';
 import { EditorPanelErrorFallback } from './editing-panel-error-fallback';
+import { ElementProvider } from '../contexts/element-context';
+import { useMenuItems } from '../controls-actions';
 
 export const EditingPanel = () => {
-	const elements = useSelectedElements();
-
-	const [ selectedElement ] = elements;
-
-	// TODO: Move this into the provider.
-	const elementType = useElementType( selectedElement?.type );
+	const { element, elementType } = useSelectedElement();
+	const controlReplacement = getControlReplacement();
+	const menuItems = useMenuItems().default;
 
-	if ( elements.length !== 1 || ! elementType ) {
+	if ( ! element || ! elementType ) {
 		return null;
 	}
 
-	const controlReplacement = getControlReplacement();
-
 	/* translators: %s: Element type title. */
 	const panelTitle = __( 'Edit %s', 'elementor' ).replace( '%s', elementType.title );
 
@@ -34,11 +29,13 @@ export const EditingPanel = () => {
 					<PanelHeaderTitle>{ panelTitle }</PanelHeaderTitle>
 				</PanelHeader>
 				<PanelBody>
-					<ControlReplacementProvider { ...controlReplacement }>
-						<ElementProvider element={ selectedElement } elementType={ elementType }>
-							<EditingPanelTabs />
-						</ElementProvider>
-					</ControlReplacementProvider>
+					<ControlActionsProvider items={ menuItems }>
+						<ControlReplacementProvider { ...controlReplacement }>
+							<ElementProvider element={ element } elementType={ elementType }>
+								<EditingPanelTabs />
+							</ElementProvider>
+						</ControlReplacementProvider>
+					</ControlActionsProvider>
 				</PanelBody>
 			</Panel>
 		</ErrorBoundary>

package/src/components/settings-tab.tsx

@@ -1,12 +1,13 @@
 import * as React from 'react';
 import { Stack } from '@elementor/ui';
-import { SettingsControl } from '../controls/settings-control';
-import { useElement } from '../controls/providers/element-provider';
+import { type Control } from '@elementor/editor-elements';
+import { SettingsField } from '../controls-registry/settings-field';
 import { AccordionSection } from './accordion-section';
-import type { Control } from '../controls/types';
-import { Control as BaseControl } from '../controls/control';
-import { ControlType, getControlByType } from '../controls/controls-registry';
-import { ControlTypeContainer } from '../controls/components/control-type-container';
+import { Control as BaseControl } from '../controls-registry/control';
+import { ControlType, getControlByType } from '../controls-registry/controls-registry';
+import { ControlTypeContainer } from '../controls-registry/control-type-container';
+import { ControlLabel } from './control-label';
+import { useElement } from '../contexts/element-context';
 
 export const SettingsTab = () => {
 	const { elementType } = useElement();
@@ -20,7 +21,7 @@ export const SettingsTab = () => {
 
 				if ( type === 'section' ) {
 					return (
-						<AccordionSection key={ type + '.' + index } title={ value.label }>
+						<AccordionSection key={ type + '.' + index } title={ value.label } defaultExpanded>
 							{ value.items?.map( ( item ) => {
 								if ( item.type === 'control' ) {
 									return <Control key={ item.value.bind } control={ item.value } />;
@@ -46,11 +47,11 @@ const Control = ( { control }: { control: Control[ 'value' ] } ) => {
 	}
 
 	return (
-		<SettingsControl bind={ control.bind }>
+		<SettingsField bind={ control.bind }>
 			<ControlTypeContainer controlType={ control.type as ControlType }>
-				{ control.label ? <SettingsControl.Label>{ control.label }</SettingsControl.Label> : null }
+				{ control.label ? <ControlLabel>{ control.label }</ControlLabel> : null }
 				<BaseControl type={ control.type as ControlType } props={ control.props } />
 			</ControlTypeContainer>
-		</SettingsControl>
+		</SettingsField>
 	);
 };

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

@@ -0,0 +1,21 @@
+import * as React from 'react';
+import { __ } from '@wordpress/i18n';
+import { Grid } from '@elementor/ui';
+import { StylesField } from '../../../controls-registry/styles-field';
+import { ControlLabel } from '../../control-label';
+import { ColorControl } from '../../../controls';
+
+export const BackgroundColorField = () => {
+	return (
+		<StylesField bind="background-color">
+			<Grid container spacing={ 1 } alignItems="center">
+				<Grid item xs={ 6 }>
+					<ControlLabel>{ __( 'Color', 'elementor' ) }</ControlLabel>
+				</Grid>
+				<Grid item xs={ 6 }>
+					<ColorControl />
+				</Grid>
+			</Grid>
+		</StylesField>
+	);
+};

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

@@ -2,13 +2,13 @@ import * as React from 'react';
 import { __ } from '@wordpress/i18n';
 import { Stack } from '@elementor/ui';
 import { AccordionSection } from '../../accordion-section';
-import { BackgroundColorControl } from './background-color-control';
+import { BackgroundColorField } from './background-color-field';
 
 export const BackgroundSection = () => {
 	return (
 		<AccordionSection title={ __( 'Background', 'elementor' ) }>
 			<Stack gap={ 1.5 }>
-				<BackgroundColorControl />
+				<BackgroundColorField />
 			</Stack>
 		</AccordionSection>
 	);

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

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

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

@@ -0,0 +1,47 @@
+import * as React from 'react';
+import { __ } from '@wordpress/i18n';
+import { BorderWidthField } from './border-width-field';
+import { BorderColorField } from './border-color-field';
+import { BorderStyleField } from './border-style-field';
+import { AddOrRemoveContent } from '../../add-or-remove-content';
+import { useStylesField } from '../../../hooks/use-styles-field';
+
+const initialSize = { $$type: 'size', value: { size: 1, unit: 'px' } };
+const initialBorderWidth = {
+	$$type: 'border-width',
+	value: { top: initialSize, right: initialSize, bottom: initialSize, left: initialSize },
+};
+const initialBorderColor = { $$type: 'color', value: '#000000' };
+const initialBorderStyle = 'solid';
+
+export const BorderField = () => {
+	const [ borderWidth, setBorderWidth ] = useStylesField( 'border-width' );
+	const [ borderColor, setBorderColor ] = useStylesField( 'border-color' );
+	const [ borderStyle, setBorderStyle ] = useStylesField( 'border-style' );
+
+	const addBorder = () => {
+		setBorderWidth( initialBorderWidth );
+		setBorderColor( initialBorderColor );
+		setBorderStyle( initialBorderStyle );
+	};
+	const removeBorder = () => {
+		setBorderWidth( null );
+		setBorderColor( null );
+		setBorderStyle( null );
+	};
+
+	const hasBorder = Boolean( borderWidth || borderColor || borderStyle );
+
+	return (
+		<AddOrRemoveContent
+			label={ __( 'Border', 'elementor' ) }
+			isAdded={ hasBorder }
+			onAdd={ addBorder }
+			onRemove={ removeBorder }
+		>
+			<BorderWidthField />
+			<BorderColorField />
+			<BorderStyleField />
+		</AddOrRemoveContent>
+	);
+};

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

@@ -0,0 +1,48 @@
+import * as React from 'react';
+import { __ } from '@wordpress/i18n';
+import {
+	BorderCornersIcon,
+	RadiusBottomLeftIcon,
+	RadiusBottomRightIcon,
+	RadiusTopLeftIcon,
+	RadiusTopRightIcon,
+} from '@elementor/icons';
+import type { BorderRadiusPropValue } from '@elementor/editor-props';
+import { EqualUnequalItems, EqualUnequalSizesControl } from '../../../controls/controls/equal-unequal-sizes-control';
+import { StylesField } from '../../../controls-registry/styles-field';
+
+const corners: EqualUnequalItems< BorderRadiusPropValue[ '$$type' ], BorderRadiusPropValue > = [
+	{
+		label: __( 'Top Left', 'elementor' ),
+		icon: <RadiusTopLeftIcon fontSize={ 'tiny' } />,
+		bind: 'top-left',
+	},
+	{
+		label: __( 'Top Right', 'elementor' ),
+		icon: <RadiusTopRightIcon fontSize={ 'tiny' } />,
+		bind: 'top-right',
+	},
+	{
+		label: __( 'Bottom Right', 'elementor' ),
+		icon: <RadiusBottomRightIcon fontSize={ 'tiny' } />,
+		bind: 'bottom-right',
+	},
+	{
+		label: __( 'Bottom Left', 'elementor' ),
+		icon: <RadiusBottomLeftIcon fontSize={ 'tiny' } />,
+		bind: 'bottom-left',
+	},
+];
+
+export const BorderRadiusField = () => {
+	return (
+		<StylesField bind={ 'border-radius' }>
+			<EqualUnequalSizesControl
+				label={ __( 'Border Radius', 'elementor' ) }
+				icon={ <BorderCornersIcon fontSize={ 'tiny' } /> }
+				items={ corners }
+				multiSizeType={ 'border-radius' }
+			/>
+		</StylesField>
+	);
+};

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

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

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

@@ -0,0 +1,32 @@
+import * as React from 'react';
+import { __ } from '@wordpress/i18n';
+import { SelectControl } from '../../../controls';
+import { Grid } from '@elementor/ui';
+import { StylesField } from '../../../controls-registry/styles-field';
+import { ControlLabel } from '../../control-label';
+
+const borderStyles = [
+	{ value: 'none', label: __( 'None', 'elementor' ) },
+	{ value: 'solid', label: __( 'Solid', 'elementor' ) },
+	{ value: 'dashed', label: __( 'Dashed', 'elementor' ) },
+	{ value: 'dotted', label: __( 'Dotted', 'elementor' ) },
+	{ value: 'double', label: __( 'Double', 'elementor' ) },
+	{ value: 'groove', label: __( 'Groove', 'elementor' ) },
+	{ value: 'ridge', label: __( 'Ridge', 'elementor' ) },
+	{ value: 'inset', label: __( 'Inset', 'elementor' ) },
+	{ value: 'outset', label: __( 'Outset', 'elementor' ) },
+];
+export const BorderStyleField = () => {
+	return (
+		<StylesField bind={ 'border-style' }>
+			<Grid container spacing={ 1 } alignItems="center">
+				<Grid item xs={ 6 }>
+					<ControlLabel>{ __( 'Border Type', 'elementor' ) }</ControlLabel>
+				</Grid>
+				<Grid item xs={ 6 }>
+					<SelectControl options={ borderStyles } />
+				</Grid>
+			</Grid>
+		</StylesField>
+	);
+};

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

@@ -0,0 +1,42 @@
+import * as React from 'react';
+import { SideBottomIcon, SideLeftIcon, SideRightIcon, SideTopIcon, SideAllIcon } from '@elementor/icons';
+import { __ } from '@wordpress/i18n';
+import { BorderWidthPropValue } from '@elementor/editor-props';
+import { EqualUnequalItems, EqualUnequalSizesControl } from '../../../controls/controls/equal-unequal-sizes-control';
+import { StylesField } from '../../../controls-registry/styles-field';
+
+const edges: EqualUnequalItems< BorderWidthPropValue[ '$$type' ], BorderWidthPropValue > = [
+	{
+		label: __( 'Top', 'elementor' ),
+		icon: <SideTopIcon fontSize={ 'tiny' } />,
+		bind: 'top',
+	},
+	{
+		label: __( 'Right', 'elementor' ),
+		icon: <SideRightIcon fontSize={ 'tiny' } />,
+		bind: 'right',
+	},
+	{
+		label: __( 'Bottom', 'elementor' ),
+		icon: <SideBottomIcon fontSize={ 'tiny' } />,
+		bind: 'bottom',
+	},
+	{
+		label: __( 'Left', 'elementor' ),
+		icon: <SideLeftIcon fontSize={ 'tiny' } />,
+		bind: 'left',
+	},
+];
+
+export const BorderWidthField = () => {
+	return (
+		<StylesField bind={ 'border-width' }>
+			<EqualUnequalSizesControl
+				label={ __( 'Border Width', 'elementor' ) }
+				icon={ <SideAllIcon fontSize={ 'tiny' } /> }
+				items={ edges }
+				multiSizeType={ 'border-width' }
+			/>
+		</StylesField>
+	);
+};

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

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

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

@@ -0,0 +1,46 @@
+import * as React from 'react';
+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';
+
+const sideIcons = {
+	left: <SideLeftIcon fontSize={ 'tiny' } />,
+	right: <SideRightIcon fontSize={ 'tiny' } />,
+	top: <SideTopIcon fontSize={ 'tiny' } />,
+	bottom: <SideBottomIcon fontSize={ 'tiny' } />,
+};
+
+export const DimensionsField = () => {
+	return (
+		<>
+			<Stack direction="row" gap={ 2 }>
+				<DimensionField side="top" label={ __( 'Top', 'elementor' ) } />
+				<DimensionField side="right" label={ __( 'Right', 'elementor' ) } />
+			</Stack>
+			<Stack direction="row" gap={ 2 }>
+				<DimensionField side="bottom" label={ __( 'Bottom', 'elementor' ) } />
+				<DimensionField side="left" label={ __( 'Left', 'elementor' ) } />
+			</Stack>
+		</>
+	);
+};
+
+const DimensionField = ( { side, label }: { side: Side; label: string } ) => {
+	return (
+		<Grid container spacing={ 1 } alignItems="center">
+			<Grid item xs={ 12 }>
+				<ControlLabel>{ label }</ControlLabel>
+			</Grid>
+			<Grid item xs={ 12 }>
+				<StylesField bind={ side }>
+					<SizeControl startIcon={ sideIcons[ side ] } />
+				</StylesField>
+			</Grid>
+		</Grid>
+	);
+};

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

@@ -0,0 +1,28 @@
+import * as React from 'react';
+import { __ } from '@wordpress/i18n';
+import { Grid } from '@elementor/ui';
+import { SelectControl } from '../../../controls';
+import { StylesField } from '../../../controls-registry/styles-field';
+import { ControlLabel } from '../../control-label';
+
+const positionOptions = [
+	{ label: __( 'Static', 'elementor' ), value: 'static' },
+	{ label: __( 'Relative', 'elementor' ), value: 'relative' },
+	{ label: __( 'Absolute', 'elementor' ), value: 'absolute' },
+	{ label: __( 'Fixed', 'elementor' ), value: 'fixed' },
+];
+
+export const PositionField = () => {
+	return (
+		<StylesField bind="position">
+			<Grid container spacing={ 1 } alignItems="center">
+				<Grid item xs={ 6 }>
+					<ControlLabel>{ __( 'Position', 'elementor' ) }</ControlLabel>
+				</Grid>
+				<Grid item xs={ 6 }>
+					<SelectControl options={ positionOptions } />
+				</Grid>
+			</Grid>
+		</StylesField>
+	);
+};

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

@@ -1,14 +1,27 @@
 import * as React from 'react';
 import { AccordionSection } from '../../accordion-section';
 import { Stack } from '@elementor/ui';
-import { ZIndexControl } from './z-index-control';
+import { ZIndexField } from './z-index-field';
+import { PositionField } from './position-field';
 import { __ } from '@wordpress/i18n';
+import { useStylesField } from '../../../hooks/use-styles-field';
+import { DimensionsField } from './dimensions-field';
 
 export const PositionSection = () => {
+	const [ positionValue ] = useStylesField( 'position' );
+
+	const isNotStatic = positionValue && positionValue !== 'static';
+
 	return (
 		<AccordionSection title={ __( 'Position', 'elementor' ) }>
 			<Stack gap={ 1.5 }>
-				<ZIndexControl />
+				<PositionField />
+				{ isNotStatic ? (
+					<>
+						<DimensionsField />
+						<ZIndexField />
+					</>
+				) : null }
 			</Stack>
 		</AccordionSection>
 	);

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

@@ -0,0 +1,21 @@
+import * as React from 'react';
+import { __ } from '@wordpress/i18n';
+import { Grid } from '@elementor/ui';
+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 item xs={ 6 }>
+					<ControlLabel>{ __( 'Z-Index', 'elementor' ) }</ControlLabel>
+				</Grid>
+				<Grid item xs={ 6 }>
+					<NumberControl />
+				</Grid>
+			</Grid>
+		</StylesField>
+	);
+};