@elementor/editor-editing-panel 4.1.0-manual → 4.2.0-839

package/src/components/style-sections/layout-section/grid-auto-flow-field.tsx

@@ -0,0 +1,102 @@
+import * as React from 'react';
+import { ControlToggleButtonGroup, type ToggleButtonGroupItem } from '@elementor/editor-controls';
+import { type StringPropValue } from '@elementor/editor-props';
+import { ArrowDownSmallIcon, ArrowRightIcon, LayoutDashboardIcon } from '@elementor/icons';
+import { Grid, ToggleButton, Tooltip, withDirection } from '@elementor/ui';
+import { __ } from '@wordpress/i18n';
+
+import { StylesField } from '../../../controls-registry/styles-field';
+import { useStylesField } from '../../../hooks/use-styles-field';
+import { UiProviders } from '../../../styles-inheritance/components/ui-providers';
+import { StylesFieldLayout } from '../../styles-field-layout';
+
+type AutoFlowDirection = 'row' | 'column';
+
+const AUTO_FLOW_LABEL = __( 'Auto flow', 'elementor' );
+const DENSE_LABEL = __( 'Dense', 'elementor' );
+
+const StartIcon = withDirection( ArrowRightIcon );
+
+const directionOptions: ToggleButtonGroupItem< AutoFlowDirection >[] = [
+	{
+		value: 'row',
+		label: __( 'Row', 'elementor' ),
+		renderContent: ( { size } ) => <StartIcon fontSize={ size } />,
+		showTooltip: true,
+	},
+	{
+		value: 'column',
+		label: __( 'Column', 'elementor' ),
+		renderContent: ( { size } ) => <ArrowDownSmallIcon fontSize={ size } />,
+		showTooltip: true,
+	},
+];
+
+const parseAutoFlow = ( value: string | null ): { direction: AutoFlowDirection; dense: boolean } => {
+	if ( ! value ) {
+		return { direction: 'row', dense: false };
+	}
+	const dense = value.includes( 'dense' );
+	const direction = value.replace( /\s*dense\s*/, '' ).trim() as AutoFlowDirection;
+	return { direction: direction || 'row', dense };
+};
+
+const composeAutoFlow = ( direction: AutoFlowDirection, dense: boolean ): string => {
+	return dense ? `${ direction } dense` : direction;
+};
+
+const GridAutoFlowFieldContent = () => {
+	const { value, setValue } = useStylesField< StringPropValue | null >( 'grid-auto-flow', {
+		history: { propDisplayName: AUTO_FLOW_LABEL },
+	} );
+
+	const { direction, dense } = parseAutoFlow( value?.value ?? null );
+
+	const handleDirectionChange = ( newDirection: AutoFlowDirection | null ) => {
+		if ( ! newDirection ) {
+			return;
+		}
+		setValue( { $$type: 'string', value: composeAutoFlow( newDirection, dense ) } );
+	};
+
+	const handleDenseToggle = () => {
+		setValue( { $$type: 'string', value: composeAutoFlow( direction, ! dense ) } );
+	};
+
+	return (
+		<StylesFieldLayout label={ AUTO_FLOW_LABEL }>
+			<Grid container gap={ 1 } flexWrap="nowrap" alignItems="center" justifyContent="flex-end">
+				<Grid item sx={ { width: 64, maxWidth: '100%' } }>
+					<ControlToggleButtonGroup
+						items={ directionOptions }
+						value={ direction }
+						onChange={ handleDirectionChange }
+						exclusive={ true }
+						fullWidth={ true }
+					/>
+				</Grid>
+				<Grid item>
+					<Tooltip title={ DENSE_LABEL }>
+						<ToggleButton
+							value="dense"
+							selected={ dense }
+							onChange={ handleDenseToggle }
+							size="tiny"
+							aria-label={ DENSE_LABEL }
+						>
+							<LayoutDashboardIcon fontSize="tiny" />
+						</ToggleButton>
+					</Tooltip>
+				</Grid>
+			</Grid>
+		</StylesFieldLayout>
+	);
+};
+
+export const GridAutoFlowField = () => (
+	<StylesField bind="grid-auto-flow" propDisplayName={ AUTO_FLOW_LABEL }>
+		<UiProviders>
+			<GridAutoFlowFieldContent />
+		</UiProviders>
+	</StylesField>
+);

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

@@ -0,0 +1,58 @@
+import * as React from 'react';
+import { type ToggleButtonGroupItem, ToggleControl } from '@elementor/editor-controls';
+import {
+	LayoutAlignCenterIcon as CenterIcon,
+	LayoutAlignLeftIcon,
+	LayoutAlignRightIcon,
+	LayoutDistributeVerticalIcon as StretchIcon,
+} from '@elementor/icons';
+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 { StylesFieldLayout } from '../../styles-field-layout';
+
+type JustifyItems = 'start' | 'center' | 'end' | 'stretch';
+
+const JUSTIFY_ITEMS_LABEL = __( 'Justify items', 'elementor' );
+
+const StartIcon = withDirection( LayoutAlignLeftIcon );
+const EndIcon = withDirection( LayoutAlignRightIcon );
+
+const options: ToggleButtonGroupItem< JustifyItems >[] = [
+	{
+		value: 'start',
+		label: __( 'Start', 'elementor' ),
+		renderContent: ( { size } ) => <StartIcon fontSize={ size } />,
+		showTooltip: true,
+	},
+	{
+		value: 'center',
+		label: __( 'Center', 'elementor' ),
+		renderContent: ( { size } ) => <CenterIcon fontSize={ size } />,
+		showTooltip: true,
+	},
+	{
+		value: 'end',
+		label: __( 'End', 'elementor' ),
+		renderContent: ( { size } ) => <EndIcon fontSize={ size } />,
+		showTooltip: true,
+	},
+	{
+		value: 'stretch',
+		label: __( 'Stretch', 'elementor' ),
+		renderContent: ( { size } ) => <StretchIcon fontSize={ size } />,
+		showTooltip: true,
+	},
+];
+
+export const GridJustifyItemsField = () => (
+	<StylesField bind="justify-items" propDisplayName={ JUSTIFY_ITEMS_LABEL }>
+		<UiProviders>
+			<StylesFieldLayout label={ JUSTIFY_ITEMS_LABEL }>
+				<ToggleControl options={ options } />
+			</StylesFieldLayout>
+		</UiProviders>
+	</StylesField>
+);

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

@@ -0,0 +1,96 @@
+import * as React from 'react';
+import { useRef } from 'react';
+import { SizeComponent } from '@elementor/editor-controls';
+import { type StringPropValue } from '@elementor/editor-props';
+import { Grid } from '@elementor/ui';
+import { __ } from '@wordpress/i18n';
+
+import { StylesField } from '../../../controls-registry/styles-field';
+import { useStylesField } from '../../../hooks/use-styles-field';
+import { StylesFieldLayout } from '../../styles-field-layout';
+
+type GridTrackUnit = 'fr' | 'custom';
+type GridTrackValue = { size: number | string; unit: GridTrackUnit };
+
+const FR = 'fr' as const;
+const CUSTOM = 'custom' as const;
+const UNITS: GridTrackUnit[] = [ FR, CUSTOM ];
+
+const REPEAT_FR_PATTERN = /^repeat\(\s*(\d+)\s*,\s*1fr\s*\)$/;
+
+const cssToTrackValue = ( css: string | null ): GridTrackValue | null => {
+	if ( ! css ) {
+		return null;
+	}
+	const match = css.match( REPEAT_FR_PATTERN );
+	if ( match ) {
+		return { size: parseInt( match[ 1 ], 10 ), unit: FR };
+	}
+	return { size: css, unit: CUSTOM };
+};
+
+const trackValueToCss = ( trackValue: GridTrackValue | null ): string | null => {
+	if ( ! trackValue || trackValue.size === '' || trackValue.size === null ) {
+		return null;
+	}
+	if ( trackValue.unit === FR ) {
+		return `repeat(${ trackValue.size }, 1fr)`;
+	}
+	return String( trackValue.size );
+};
+
+type GridTrackCssProp = 'grid-template-rows' | 'grid-template-columns';
+
+type GridTrackFieldProps = {
+	cssProp: GridTrackCssProp;
+	label: string;
+};
+
+const GridTrackField = ( { cssProp, label }: GridTrackFieldProps ) => (
+	<StylesField bind={ cssProp } propDisplayName={ label }>
+		<GridTrackFieldContent cssProp={ cssProp } label={ label } />
+	</StylesField>
+);
+
+const GridTrackFieldContent = ( { cssProp, label }: GridTrackFieldProps ) => {
+	const { value, setValue } = useStylesField< StringPropValue | null >( cssProp, {
+		history: { propDisplayName: label },
+	} );
+
+	const anchorRef = useRef< HTMLDivElement >( null );
+	const trackValue = cssToTrackValue( value?.value ?? null );
+
+	const handleChange = ( newValue: GridTrackValue ) => {
+		const css = trackValueToCss( newValue );
+		setValue( css ? { $$type: 'string', value: css } : null );
+	};
+
+	return (
+		<StylesFieldLayout label={ label } direction="column">
+			<div ref={ anchorRef }>
+				<SizeComponent
+					units={ UNITS as unknown as Parameters< typeof SizeComponent >[ 0 ][ 'units' ] }
+					value={
+						( trackValue ?? { size: NaN, unit: FR } ) as Parameters< typeof SizeComponent >[ 0 ][ 'value' ]
+					}
+					defaultUnit={ FR as Parameters< typeof SizeComponent >[ 0 ][ 'defaultUnit' ] }
+					setValue={ handleChange as Parameters< typeof SizeComponent >[ 0 ][ 'setValue' ] }
+					onBlur={ () => {} }
+					min={ 1 }
+					anchorRef={ anchorRef }
+				/>
+			</div>
+		</StylesFieldLayout>
+	);
+};
+
+export const GridSizeFields = () => (
+	<Grid container gap={ 2 } flexWrap="nowrap">
+		<Grid item xs={ 6 }>
+			<GridTrackField cssProp="grid-template-columns" label={ __( 'Columns', 'elementor' ) } />
+		</Grid>
+		<Grid item xs={ 6 }>
+			<GridTrackField cssProp="grid-template-rows" label={ __( 'Rows', 'elementor' ) } />
+		</Grid>
+	</Grid>
+);

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

@@ -0,0 +1,78 @@
+import * as React from 'react';
+import { NumberInput } from '@elementor/editor-controls';
+import { type SpanPropValue } from '@elementor/editor-props';
+import { Grid } from '@elementor/ui';
+import { __ } from '@wordpress/i18n';
+
+import { StylesField } from '../../../controls-registry/styles-field';
+import { useStylesField } from '../../../hooks/use-styles-field';
+import { UiProviders } from '../../../styles-inheritance/components/ui-providers';
+import { StylesFieldLayout } from '../../styles-field-layout';
+
+type GridSpanCssProp = 'grid-column' | 'grid-row';
+
+const MIN_SPAN = 1;
+
+type GridSpanFieldProps = {
+	cssProp: GridSpanCssProp;
+	label: string;
+};
+
+const GridSpanFieldContent = ( { cssProp, label }: GridSpanFieldProps ) => {
+	const { value, setValue, canEdit } = useStylesField< SpanPropValue | null >( cssProp, {
+		history: { propDisplayName: label },
+	} );
+
+	const spanValue = value?.value ?? null;
+
+	const handleChange = ( event: React.ChangeEvent< HTMLInputElement > ) => {
+		const raw = event.target.value;
+
+		if ( raw === '' ) {
+			setValue( null );
+			return;
+		}
+
+		const num = parseInt( raw, 10 );
+
+		if ( Number.isNaN( num ) ) {
+			return;
+		}
+
+		const clamped = Math.max( num, MIN_SPAN );
+		setValue( { $$type: 'span', value: clamped } );
+	};
+
+	return (
+		<StylesFieldLayout label={ label } direction="column">
+			<NumberInput
+				size="tiny"
+				type="number"
+				fullWidth
+				disabled={ ! canEdit }
+				value={ spanValue ?? '' }
+				onInput={ handleChange }
+				inputProps={ { min: MIN_SPAN } }
+			/>
+		</StylesFieldLayout>
+	);
+};
+
+const GridSpanField = ( { cssProp, label }: GridSpanFieldProps ) => (
+	<StylesField bind={ cssProp } propDisplayName={ label }>
+		<UiProviders>
+			<GridSpanFieldContent cssProp={ cssProp } label={ label } />
+		</UiProviders>
+	</StylesField>
+);
+
+export const GridSpanFields = () => (
+	<Grid container gap={ 2 } flexWrap="nowrap">
+		<Grid item xs={ 6 }>
+			<GridSpanField cssProp="grid-column" label={ __( 'Column Span', 'elementor' ) } />
+		</Grid>
+		<Grid item xs={ 6 }>
+			<GridSpanField cssProp="grid-row" label={ __( 'Row Span', 'elementor' ) } />
+		</Grid>
+	</Grid>
+);

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

@@ -2,6 +2,7 @@ import * as React from 'react';
 import { ControlFormLabel } from '@elementor/editor-controls';
 import { useParentElement } from '@elementor/editor-elements';
 import { type StringPropValue } from '@elementor/editor-props';
+import { isExperimentActive } from '@elementor/editor-v1-adapters';
 import { __ } from '@wordpress/i18n';
 
 import { useElement } from '../../../contexts/element-context';
@@ -12,33 +13,58 @@ import { SectionContent } from '../../section-content';
 import { AlignContentField } from './align-content-field';
 import { AlignItemsField } from './align-items-field';
 import { AlignSelfChild } from './align-self-child-field';
+import { AlignSelfGridChild } from './align-self-grid-child-field';
 import { DisplayField, useDisplayPlaceholderValue } from './display-field';
 import { type FlexDirection, FlexDirectionField } from './flex-direction-field';
 import { FlexOrderField } from './flex-order-field';
 import { FlexSizeField } from './flex-size-field';
 import { GapControlField } from './gap-control-field';
+import { GridAutoFlowField } from './grid-auto-flow-field';
+import { GridJustifyItemsField } from './grid-justify-items-field';
+import { GridSizeFields } from './grid-size-field';
+import { GridSpanFields } from './grid-span-field';
 import { JustifyContentField } from './justify-content-field';
 import { WrapField } from './wrap-field';
 
 const DISPLAY_LABEL = __( 'Display', 'elementor' );
 const FLEX_WRAP_LABEL = __( 'Flex wrap', 'elementor' );
+const DEFAULT_PARENT_FLOW_DIRECTION = 'row';
 
 export const LayoutSection = () => {
 	const { value: display } = useStylesField< StringPropValue >( 'display', {
 		history: { propDisplayName: DISPLAY_LABEL },
 	} );
 	const displayPlaceholder = useDisplayPlaceholderValue();
+	const isGridExperimentActive = isExperimentActive( 'e_css_grid' );
 	const isDisplayFlex = shouldDisplayFlexFields( display, displayPlaceholder as StringPropValue );
+	const isDisplayGrid = 'grid' === ( display?.value ?? ( displayPlaceholder as StringPropValue )?.value );
 	const { element } = useElement();
 	const parent = useParentElement( element.id );
 	const parentStyle = useComputedStyle( parent?.id || null );
-	const parentStyleDirection = parentStyle?.flexDirection ?? 'row';
+
+	const getParentStyleDirection = () => {
+		if ( 'flex' === parentStyle?.display ) {
+			return parentStyle?.flexDirection ?? DEFAULT_PARENT_FLOW_DIRECTION;
+		}
+
+		if ( 'grid' === parentStyle?.display ) {
+			return parentStyle?.gridAutoFlow ?? DEFAULT_PARENT_FLOW_DIRECTION;
+		}
+
+		return DEFAULT_PARENT_FLOW_DIRECTION;
+	};
 
 	return (
 		<SectionContent>
 			<DisplayField />
 			{ isDisplayFlex && <FlexFields /> }
-			{ 'flex' === parentStyle?.display && <FlexChildFields parentStyleDirection={ parentStyleDirection } /> }
+			{ 'flex' === parentStyle?.display && (
+				<FlexChildFields parentStyleDirection={ getParentStyleDirection() } />
+			) }
+			{ isGridExperimentActive && isDisplayGrid && <GridFields /> }
+			{ isGridExperimentActive && 'grid' === parentStyle?.display && (
+				<GridChildFields parentStyleDirection={ getParentStyleDirection() } />
+			) }
 		</SectionContent>
 	);
 };
@@ -61,6 +87,18 @@ const FlexFields = () => {
 	);
 };
 
+const GridFields = () => (
+	<>
+		<GridSizeFields />
+		<GridAutoFlowField />
+		<PanelDivider />
+		<GapControlField />
+		<PanelDivider />
+		<GridJustifyItemsField />
+		<AlignItemsField />
+	</>
+);
+
 const FlexChildFields = ( { parentStyleDirection }: { parentStyleDirection: string } ) => (
 	<>
 		<PanelDivider />
@@ -71,6 +109,16 @@ const FlexChildFields = ( { parentStyleDirection }: { parentStyleDirection: stri
 	</>
 );
 
+const GridChildFields = ( { parentStyleDirection }: { parentStyleDirection: string } ) => (
+	<>
+		<PanelDivider />
+		<ControlFormLabel>{ __( 'Grid Child', 'elementor' ) }</ControlFormLabel>
+		<GridSpanFields />
+		<AlignSelfGridChild parentStyleDirection={ parentStyleDirection } />
+		<FlexOrderField />
+	</>
+);
+
 const shouldDisplayFlexFields = ( display: StringPropValue | null, local: StringPropValue ) => {
 	const value = display?.value ?? local?.value;
 

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

@@ -15,15 +15,11 @@ const positionOptions = [
 	{ label: __( 'Sticky', 'elementor' ), value: 'sticky' },
 ];
 
-type Props = {
-	onChange?: ( newValue: string | null, previousValue: string | null | undefined ) => void;
-};
-
-export const PositionField = ( { onChange }: Props ) => {
+export const PositionField = () => {
 	return (
 		<StylesField bind="position" propDisplayName={ POSITION_LABEL }>
 			<StylesFieldLayout label={ POSITION_LABEL }>
-				<SelectControl options={ positionOptions } onChange={ onChange } />
+				<SelectControl options={ positionOptions } />
 			</StylesFieldLayout>
 		</StylesField>
 	);

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

@@ -1,7 +1,8 @@
 import * as React from 'react';
-import { useCallback, useEffect, useRef } from 'react';
-import { type StringPropValue } from '@elementor/editor-props';
+import { useEffect, useRef } from 'react';
+import { type NumberPropValue, type SizePropValue, type StringPropValue } from '@elementor/editor-props';
 import { useSessionStorage } from '@elementor/session';
+import { styled } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
 import { useStyle } from '../../../contexts/style-context';
@@ -14,112 +15,62 @@ import { OffsetField } from './offset-field';
 import { PositionField } from './position-field';
 import { ZIndexField } from './z-index-field';
 
-type DimensionValue =
-	| {
-			$$type: 'size';
-			value: number;
-	  }
-	| undefined
-	| null;
-
-type DimensionsValues = {
-	'inset-block-start': DimensionValue;
-	'inset-block-end': DimensionValue;
-	'inset-inline-start': DimensionValue;
-	'inset-inline-end': DimensionValue;
+type DependentValues = {
+	'inset-block-start'?: SizePropValue | null;
+	'inset-block-end'?: SizePropValue | null;
+	'inset-inline-start'?: SizePropValue | null;
+	'inset-inline-end'?: SizePropValue | null;
+	'z-index'?: NumberPropValue | null;
 };
 
-type PositionDependentValues = DimensionsValues & {
-	'z-index': number | undefined | null;
-};
-
-const POSITION_STATIC = 'static' as const;
+const POSITION_STATIC = 'static';
 
 const POSITION_LABEL = __( 'Position', 'elementor' );
 const DIMENSIONS_LABEL = __( 'Dimensions', 'elementor' );
 
-const POSITION_DEPENDENT_PROP_NAMES = [
+const DEPENDENT_PROP_NAMES: Array< keyof DependentValues > = [
 	'inset-block-start',
 	'inset-block-end',
 	'inset-inline-start',
 	'inset-inline-end',
 	'z-index',
-] as const;
-
-const CLEARED_POSITION_DEPENDENT_VALUES: Record< ( typeof POSITION_DEPENDENT_PROP_NAMES )[ number ], null > = {
-	'inset-block-start': null,
-	'inset-block-end': null,
-	'inset-inline-start': null,
-	'inset-inline-end': null,
-	'z-index': null,
-};
+];
 
 export const PositionSection = () => {
-	const { value: positionValue } = useStylesField< StringPropValue >( 'position', {
-		history: { propDisplayName: POSITION_LABEL },
-	} );
-	const { values: positionDependentValues, setValues: setPositionDependentValues } =
-		useStylesFields< PositionDependentValues >( [ ...POSITION_DEPENDENT_PROP_NAMES ] );
-
-	const [ dimensionsValuesFromHistory, updateDimensionsHistory, clearDimensionsHistory ] = usePersistDimensions();
-
-	const clearPositionDependentProps = useCallback( () => {
-		const dimensions: DimensionsValues = {
-			'inset-block-start': positionDependentValues?.[ 'inset-block-start' ],
-			'inset-block-end': positionDependentValues?.[ 'inset-block-end' ],
-			'inset-inline-start': positionDependentValues?.[ 'inset-inline-start' ],
-			'inset-inline-end': positionDependentValues?.[ 'inset-inline-end' ],
-		};
-		const meta = { history: { propDisplayName: DIMENSIONS_LABEL } };
-		const hasValuesToClear =
-			Object.values( dimensions ).some( ( v ) => v !== null ) || positionDependentValues?.[ 'z-index' ] !== null;
+	const { value: position } = useStylesField< StringPropValue >( 'position', withHistoryLabel( POSITION_LABEL ) );
+	const positionPrevRef = useRef( position );
+	const { values: dependentValues, setValues: setDependentValues } =
+		useStylesFields< DependentValues >( DEPENDENT_PROP_NAMES );
+
+	const [ savedDependentValues, saveToHistory, clearHistory ] = usePersistDimensions();
 
-		if ( hasValuesToClear ) {
-			updateDimensionsHistory( dimensions );
-			setPositionDependentValues( CLEARED_POSITION_DEPENDENT_VALUES, meta );
+	useEffect( () => {
+		if ( position && position?.value === POSITION_STATIC && hasDependentValues( dependentValues ) ) {
+			saveToHistory( extractDimensions( dependentValues ) );
 		}
-	}, [ positionDependentValues, updateDimensionsHistory, setPositionDependentValues ] );
 
-	const clearPositionDependentPropsRef = useRef( clearPositionDependentProps );
-	clearPositionDependentPropsRef.current = clearPositionDependentProps;
+		if ( positionPrevRef.current?.value === POSITION_STATIC ) {
+			setDependentValues( { ...savedDependentValues }, withHistoryLabel( DIMENSIONS_LABEL ) );
 
-	useEffect( () => {
-		if ( positionValue?.value === POSITION_STATIC || positionValue === null ) {
-			clearPositionDependentPropsRef.current();
+			clearHistory();
 		}
-	}, [ positionValue ] );
-
-	const onPositionChange = ( newPosition: string | null, previousPosition: string | null | undefined ) => {
-		const meta = { history: { propDisplayName: DIMENSIONS_LABEL } };
-
-		if ( newPosition === POSITION_STATIC ) {
-			clearPositionDependentProps();
-		} else if ( previousPosition === POSITION_STATIC ) {
-			if ( dimensionsValuesFromHistory ) {
-				setPositionDependentValues(
-					{ ...dimensionsValuesFromHistory, 'z-index': undefined } as PositionDependentValues,
-					meta
-				);
-				clearDimensionsHistory();
-			}
+
+		if ( ( ! position || position?.value === POSITION_STATIC ) && dependentValues?.[ 'z-index' ] ) {
+			setDependentValues( { 'z-index': null }, withHistoryLabel( DIMENSIONS_LABEL ) );
 		}
-	};
 
-	const isNotStatic = positionValue && positionValue?.value !== POSITION_STATIC;
+		positionPrevRef.current = position;
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [ position?.value ] );
 
 	return (
-		<SectionContent>
-			<PositionField onChange={ onPositionChange } />
-			{ isNotStatic ? (
-				<>
-					<DimensionsField />
-					<ZIndexField />
-				</>
-			) : null }
-
+		<StyledSectionContent>
+			<PositionField />
+			<DimensionsField />
+			<ZIndexField disabled={ ! position || position?.value === POSITION_STATIC } />
 			<PanelDivider />
 			<OffsetField />
-		</SectionContent>
+		</StyledSectionContent>
 	);
 };
 
@@ -128,5 +79,51 @@ const usePersistDimensions = () => {
 	const styleVariantPath = `styles/${ styleDefID }/${ meta.breakpoint || 'desktop' }/${ meta.state || 'null' }`;
 	const dimensionsPath = `${ styleVariantPath }/dimensions`;
 
-	return useSessionStorage< DimensionsValues >( dimensionsPath );
+	return useSessionStorage< DependentValues >( dimensionsPath );
 };
+
+const withHistoryLabel = ( name: string ) => {
+	return {
+		history: { propDisplayName: name },
+	};
+};
+
+const hasDependentValues = ( values?: DependentValues | null ) => {
+	if ( ! values ) {
+		return false;
+	}
+
+	const dimensions = extractDimensions( values );
+
+	return Object.values( dimensions ).some( ( v ) => v !== null );
+};
+
+const extractDimensions = ( values: DependentValues | null ): DependentValues => {
+	return DEPENDENT_PROP_NAMES.reduce( ( acc, key ) => {
+		return {
+			...acc,
+			[ key ]: values?.[ key ] ?? null,
+		};
+	}, {} );
+};
+
+const StyledSectionContent = styled( SectionContent, {
+	shouldForwardProp: ( prop ) => prop !== 'gap',
+} )< { gap?: number } >( ( { gap = 2, theme } ) => ( {
+	gap: 0,
+	'& > *': {
+		marginBottom: theme.spacing( gap ),
+	},
+	'& > *:last-child': {
+		marginBottom: 0,
+	},
+	'& > .MuiStack-root': {
+		marginBottom: 0,
+	},
+	'& > .MuiStack-root:has(> *)': {
+		marginBottom: theme.spacing( gap ),
+	},
+	'& > .MuiDivider-root': {
+		marginBottom: theme.spacing( gap ),
+	},
+} ) );