@elementor/editor-editing-panel 0.19.0 → 1.1.0

package/src/components/settings-tab.tsx

@@ -1,18 +1,20 @@
 import * as React from 'react';
-import { Stack } from '@elementor/ui';
-import { SettingsControl } from '../controls/settings-control';
-import { useElement } from '../controls/providers/element-provider';
-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 { ControlLabel } from '@elementor/editor-controls';
+import { type Control } from '@elementor/editor-elements';
+
+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, getControlByType } from '../controls-registry/controls-registry';
+import { SettingsField } from '../controls-registry/settings-field';
+import { Section } from './section';
+import { SectionsList } from './sections-list';
 
 export const SettingsTab = () => {
 	const { elementType } = useElement();
 
 	return (
-		<Stack>
+		<SectionsList>
 			{ elementType.controls.map( ( { type, value }, index ) => {
 				if ( type === 'control' ) {
 					return <Control key={ value.bind } control={ value } />;
@@ -20,7 +22,7 @@ export const SettingsTab = () => {
 
 				if ( type === 'section' ) {
 					return (
-						<AccordionSection key={ type + '.' + index } title={ value.label }>
+						<Section title={ value.label } key={ type + '.' + index } defaultExpanded={ true }>
 							{ value.items?.map( ( item ) => {
 								if ( item.type === 'control' ) {
 									return <Control key={ item.value.bind } control={ item.value } />;
@@ -29,28 +31,27 @@ export const SettingsTab = () => {
 								// TODO: Handle 2nd level sections
 								return null;
 							} ) }
-						</AccordionSection>
+						</Section>
 					);
 				}
 
 				return null;
 			} ) }
-		</Stack>
+		</SectionsList>
 	);
 };
 
-// TODO: Create control wrapper by type for different layouts.
 const Control = ( { control }: { control: Control[ 'value' ] } ) => {
 	if ( ! getControlByType( control.type as ControlType ) ) {
 		return null;
 	}
 
 	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 { ColorControl, ControlLabel } from '@elementor/editor-controls';
+import { Grid } from '@elementor/ui';
+import { __ } from '@wordpress/i18n';
+
+import { StylesField } from '../../../controls-registry/styles-field';
+
+export const BackgroundColorField = () => {
+	return (
+		<StylesField bind="background-color">
+			<Grid container gap={ 2 } alignItems="center" flexWrap="nowrap">
+				<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

@@ -1,15 +1,17 @@
 import * as React from 'react';
-import { __ } from '@wordpress/i18n';
+import { BackgroundOverlayRepeaterControl } from '@elementor/editor-controls';
 import { Stack } from '@elementor/ui';
-import { AccordionSection } from '../../accordion-section';
-import { BackgroundColorControl } from './background-color-control';
+
+import { StylesField } from '../../../controls-registry/styles-field';
+import { BackgroundColorField } from './background-color-field';
 
 export const BackgroundSection = () => {
 	return (
-		<AccordionSection title={ __( 'Background', 'elementor' ) }>
-			<Stack gap={ 1.5 }>
-				<BackgroundColorControl />
-			</Stack>
-		</AccordionSection>
+		<Stack gap={ 1.5 }>
+			<StylesField bind="background-image">
+				<BackgroundOverlayRepeaterControl />
+			</StylesField>
+			<BackgroundColorField />
+		</Stack>
 	);
 };

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

@@ -0,0 +1,21 @@
+import * as React from 'react';
+import { ColorControl, ControlLabel } from '@elementor/editor-controls';
+import { Grid } from '@elementor/ui';
+import { __ } from '@wordpress/i18n';
+
+import { StylesField } from '../../../controls-registry/styles-field';
+
+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>
+	);
+};

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

@@ -0,0 +1,48 @@
+import * as React from 'react';
+import { __ } from '@wordpress/i18n';
+
+import { useStylesField } from '../../../hooks/use-styles-field';
+import { AddOrRemoveContent } from '../../add-or-remove-content';
+import { BorderColorField } from './border-color-field';
+import { BorderStyleField } from './border-style-field';
+import { BorderWidthField } from './border-width-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,49 @@
+import * as React from 'react';
+import { type EqualUnequalItems, EqualUnequalSizesControl } from '@elementor/editor-controls';
+import type { BorderRadiusPropValue } from '@elementor/editor-props';
+import {
+	BorderCornersIcon,
+	RadiusBottomLeftIcon,
+	RadiusBottomRightIcon,
+	RadiusTopLeftIcon,
+	RadiusTopRightIcon,
+} from '@elementor/icons';
+import { __ } from '@wordpress/i18n';
+
+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,13 @@
+import * as React from 'react';
+import { Divider, Stack } from '@elementor/ui';
+
+import { BorderField } from './border-field';
+import { BorderRadiusField } from './border-radius-field';
+
+export const BorderSection = () => (
+	<Stack gap={ 1.5 }>
+		<BorderRadiusField />
+		<Divider />
+		<BorderField />
+	</Stack>
+);

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

@@ -0,0 +1,32 @@
+import * as React from 'react';
+import { ControlLabel, SelectControl } from '@elementor/editor-controls';
+import { Grid } from '@elementor/ui';
+import { __ } from '@wordpress/i18n';
+
+import { StylesField } from '../../../controls-registry/styles-field';
+
+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 gap={ 2 } alignItems="center" flexWrap="nowrap">
+				<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,43 @@
+import * as React from 'react';
+import { type EqualUnequalItems, EqualUnequalSizesControl } from '@elementor/editor-controls';
+import { type BorderWidthPropValue } from '@elementor/editor-props';
+import { SideAllIcon, SideBottomIcon, SideLeftIcon, SideRightIcon, SideTopIcon } from '@elementor/icons';
+import { __ } from '@wordpress/i18n';
+
+import { StylesField } from '../../../controls-registry/styles-field';
+
+const edges: EqualUnequalItems< BorderWidthPropValue[ '$$type' ], BorderWidthPropValue > = [
+	{
+		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

@@ -1,18 +1,15 @@
 import * as React from 'react';
-import { __ } from '@wordpress/i18n';
+import { BoxShadowRepeaterControl } from '@elementor/editor-controls';
 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';
 
 export const EffectsSection = () => {
 	return (
-		<AccordionSection title={ __( 'Effects', 'elementor' ) }>
-			<Stack gap={ 1.5 }>
-				<StyleControl bind="box-shadow">
-					<BoxShadowRepeater />
-				</StyleControl>
-			</Stack>
-		</AccordionSection>
+		<Stack gap={ 1.5 }>
+			<StylesField bind="box-shadow">
+				<BoxShadowRepeaterControl />
+			</StylesField>
+		</Stack>
 	);
 };

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

@@ -0,0 +1,32 @@
+import * as React from 'react';
+import { ControlLabel, type ToggleButtonGroupItem, ToggleControl } from '@elementor/editor-controls';
+import { Stack } from '@elementor/ui';
+import { __ } from '@wordpress/i18n';
+
+import { StylesField } from '../../../controls-registry/styles-field';
+
+type Displays = 'block' | 'flex';
+
+export const DisplayField = () => {
+	const options: ToggleButtonGroupItem< Displays >[] = [
+		{
+			value: 'block',
+			renderContent: () => __( 'Block', 'elementor' ),
+			label: __( 'Block', 'elementor' ),
+		},
+		{
+			value: 'flex',
+			renderContent: () => __( 'Flex', 'elementor' ),
+			label: __( 'Flex', 'elementor' ),
+		},
+	];
+
+	return (
+		<StylesField bind="display">
+			<Stack gap={ 1 }>
+				<ControlLabel>{ __( 'Display', 'elementor' ) }</ControlLabel>
+				<ToggleControl options={ options } fullWidth={ true } />
+			</Stack>
+		</StylesField>
+	);
+};

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

@@ -0,0 +1,82 @@
+import * as React from 'react';
+import { ControlLabel, type ToggleButtonGroupItem, ToggleControl } from '@elementor/editor-controls';
+import {
+	JustifyBottomIcon,
+	JustifyCenterIcon,
+	JustifyDistributeVerticalIcon,
+	JustifySpaceAroundVerticalIcon,
+	JustifySpaceBetweenVerticalIcon,
+	JustifyTopIcon,
+} from '@elementor/icons';
+import { Stack } from '@elementor/ui';
+import { __ } from '@wordpress/i18n';
+
+import { StylesField } from '../../../controls-registry/styles-field';
+import { useDirection } from '../../../hooks/use-direction';
+import { useStylesField } from '../../../hooks/use-styles-field';
+import { rotateFlexIcon } from './utils/rotate-flex-icon';
+
+type JustifyContent = 'start' | 'center' | 'end' | 'space-between' | 'space-around' | 'space-evenly';
+
+export const JustifyContentField = () => {
+	const [ direction ] = useStylesField( 'flex-direction' );
+
+	const { isUiRtl, isSiteRtl } = useDirection(),
+		sx = { transform: rotateFlexIcon( direction as string, -1 ) } as const,
+		shouldReverseOrder = isSiteRtl !== isUiRtl;
+
+	const StartIcon = isSiteRtl ? JustifyBottomIcon : JustifyTopIcon,
+		EndIcon = isSiteRtl ? JustifyTopIcon : JustifyBottomIcon;
+
+	const options: ToggleButtonGroupItem< JustifyContent >[] = [
+		{
+			value: 'start',
+			label: __( 'Start', 'elementor' ),
+			renderContent: ( { size } ) => <StartIcon fontSize={ size } sx={ sx } />,
+			showTooltip: true,
+		},
+		{
+			value: 'center',
+			label: __( 'Center', 'elementor' ),
+			renderContent: ( { size } ) => <JustifyCenterIcon fontSize={ size } sx={ sx } />,
+			showTooltip: true,
+		},
+		{
+			value: 'end',
+			label: __( 'End', 'elementor' ),
+			renderContent: ( { size } ) => <EndIcon fontSize={ size } sx={ sx } />,
+			showTooltip: true,
+		},
+		{
+			value: 'space-between',
+			label: __( 'Space Between', 'elementor' ),
+			renderContent: ( { size } ) => <JustifySpaceBetweenVerticalIcon fontSize={ size } sx={ sx } />,
+			showTooltip: true,
+		},
+		{
+			value: 'space-around',
+			label: __( 'Space Around', 'elementor' ),
+			renderContent: ( { size } ) => <JustifySpaceAroundVerticalIcon fontSize={ size } sx={ sx } />,
+			showTooltip: true,
+		},
+		{
+			value: 'space-evenly',
+			label: __( 'Space Evenly', 'elementor' ),
+			renderContent: ( { size } ) => <JustifyDistributeVerticalIcon fontSize={ size } sx={ sx } />,
+			showTooltip: true,
+		},
+	];
+
+	if ( shouldReverseOrder ) {
+		options.reverse();
+	}
+
+	return (
+		<StylesField bind="justify-content">
+			<Stack gap={ 1 }>
+				<ControlLabel>{ __( 'Justify Content', 'elementor' ) }</ControlLabel>
+				<ToggleControl options={ options } fullWidth={ true } />
+			</Stack>
+		</StylesField>
+	);
+};

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

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import { Stack } from '@elementor/ui';
+
+import { useStylesField } from '../../../hooks/use-styles-field';
+import { DisplayField } from './display-field';
+import { JustifyContentField } from './justify-content-field';
+
+export const LayoutSection = () => {
+	const [ display ] = useStylesField( 'display' );
+
+	return (
+		<Stack gap={ 2 }>
+			<DisplayField />
+			{ 'flex' === display && <JustifyContentField /> }
+		</Stack>
+	);
+};

package/src/components/style-sections/layout-section/utils/rotate-flex-icon.ts

@@ -0,0 +1,12 @@
+export function rotateFlexIcon( direction: string | null = 'row', initValue: number ) {
+	const rotationIndexMap: Record< string, number > = {
+		row: 0,
+		column: 1,
+		'row-reverse': 2,
+		'column-reverse': 3,
+	};
+
+	const rotationIndex = initValue + ( rotationIndexMap[ direction || 'row' ] ?? 0 );
+
+	return `rotate(calc(90deg * ${ rotationIndex }))`;
+}

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

@@ -0,0 +1,46 @@
+import * as React from 'react';
+import { ControlLabel, SizeControl } from '@elementor/editor-controls';
+import { SideBottomIcon, SideLeftIcon, SideRightIcon, SideTopIcon } from '@elementor/icons';
+import { Grid, Stack } from '@elementor/ui';
+import { __ } from '@wordpress/i18n';
+
+import { StylesField } from '../../../controls-registry/styles-field';
+
+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 } flexWrap="nowrap">
+				<DimensionField side="top" label={ __( 'Top', 'elementor' ) } />
+				<DimensionField side="right" label={ __( 'Right', 'elementor' ) } />
+			</Stack>
+			<Stack direction="row" gap={ 2 } flexWrap="nowrap">
+				<DimensionField side="bottom" label={ __( 'Bottom', 'elementor' ) } />
+				<DimensionField side="left" label={ __( 'Left', 'elementor' ) } />
+			</Stack>
+		</>
+	);
+};
+
+const DimensionField = ( { side, label }: { side: Side; label: string } ) => {
+	return (
+		<Grid container gap={ 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 { ControlLabel, SelectControl } from '@elementor/editor-controls';
+import { Grid } from '@elementor/ui';
+import { __ } from '@wordpress/i18n';
+
+import { StylesField } from '../../../controls-registry/styles-field';
+
+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 gap={ 2 } alignItems="center" flexWrap="nowrap">
+				<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,15 +1,58 @@
 import * as React from 'react';
-import { AccordionSection } from '../../accordion-section';
+import { useCallback } from 'react';
+import type { PropValue } from '@elementor/editor-props';
 import { Stack } from '@elementor/ui';
-import { ZIndexControl } from './z-index-control';
-import { __ } from '@wordpress/i18n';
+
+import { useStylePropsHistory } from '../../../hooks/use-style-prop-history';
+import { useStylesField } from '../../../hooks/use-styles-field';
+import { DimensionsField } from './dimensions-field';
+import { PositionField } from './position-field';
+import { ZIndexField } from './z-index-field';
+
+const dimensionsPropKeys = [ 'top', 'bottom', 'left', 'right' ];
 
 export const PositionSection = () => {
+	const [ positionValue ] = useStylesField( 'position' );
+	usePositionChangeHandler();
+
+	const isNotStatic = positionValue && positionValue !== 'static';
+
 	return (
-		<AccordionSection title={ __( 'Position', 'elementor' ) }>
-			<Stack gap={ 1.5 }>
-				<ZIndexControl />
-			</Stack>
-		</AccordionSection>
+		<Stack gap={ 1.5 }>
+			<PositionField />
+			{ isNotStatic ? (
+				<>
+					<DimensionsField />
+					<ZIndexField />
+				</>
+			) : null }
+		</Stack>
+	);
+};
+
+const usePositionChangeHandler = () => {
+	const dimensionsHistory = useStylePropsHistory( dimensionsPropKeys );
+
+	const onPositionChange = useCallback(
+		( newPositionValue: PropValue, previousPosition: PropValue ) => {
+			if ( ! dimensionsHistory ) {
+				return;
+			}
+
+			const { saveStylePropsHistory, updateStylePropsFromHistory, clearCurrentStyleProps } = dimensionsHistory;
+
+			if ( newPositionValue === 'static' ) {
+				saveStylePropsHistory();
+				clearCurrentStyleProps();
+			} else if ( previousPosition === 'static' ) {
+				updateStylePropsFromHistory();
+			}
+
+			previousPosition = newPositionValue;
+		},
+		[ dimensionsHistory ]
 	);
+
+	const [ , , registerChangeListener ] = useStylesField< PropValue >( 'position' );
+	registerChangeListener?.( onPositionChange );
 };