@elementor/editor-controls 4.5.0-1154 → 4.5.0-1156

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@elementor/editor-controls",
   "description": "This package contains the controls model and utils for the Elementor editor",
-  "version": "4.5.0-1154",
+  "version": "4.5.0-1156",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -40,23 +40,23 @@
     "dev": "tsup --config=../../tsup.dev.ts"
   },
   "dependencies": {
-    "@elementor/editor-current-user": "4.5.0-1154",
-    "@elementor/editor-elements": "4.5.0-1154",
-    "@elementor/editor-props": "4.5.0-1154",
-    "@elementor/editor-responsive": "4.5.0-1154",
-    "@elementor/editor-ui": "4.5.0-1154",
-    "@elementor/editor-v1-adapters": "4.5.0-1154",
-    "@elementor/env": "4.5.0-1154",
-    "@elementor/events": "4.5.0-1154",
-    "@elementor/http-client": "4.5.0-1154",
+    "@elementor/editor-current-user": "4.5.0-1156",
+    "@elementor/editor-elements": "4.5.0-1156",
+    "@elementor/editor-props": "4.5.0-1156",
+    "@elementor/editor-responsive": "4.5.0-1156",
+    "@elementor/editor-ui": "4.5.0-1156",
+    "@elementor/editor-v1-adapters": "4.5.0-1156",
+    "@elementor/env": "4.5.0-1156",
+    "@elementor/events": "4.5.0-1156",
+    "@elementor/http-client": "4.5.0-1156",
     "@elementor/icons": "~1.78.1",
-    "@elementor/locations": "4.5.0-1154",
-    "@elementor/query": "4.5.0-1154",
-    "@elementor/schema": "4.5.0-1154",
-    "@elementor/session": "4.5.0-1154",
+    "@elementor/locations": "4.5.0-1156",
+    "@elementor/query": "4.5.0-1156",
+    "@elementor/schema": "4.5.0-1156",
+    "@elementor/session": "4.5.0-1156",
     "@elementor/ui": "1.41.4",
-    "@elementor/utils": "4.5.0-1154",
-    "@elementor/wp-media": "4.5.0-1154",
+    "@elementor/utils": "4.5.0-1156",
+    "@elementor/wp-media": "4.5.0-1156",
     "@monaco-editor/react": "^4.7.0",
     "@tanstack/react-virtual": "^3.13.3",
     "@tiptap/extension-bold": "^3.11.1",

package/src/controls/size-control/hooks/use-size-value.ts

@@ -4,7 +4,7 @@ import { type SizePropValue } from '@elementor/editor-props';
 import { useSyncExternalState } from '../../../hooks/use-sync-external-state';
 import { type SetSizeValue } from '../types';
 import { isExtendedUnit } from '../utils/is-extended-unit';
-import { createDefaultSizeValue, resolveSizeOnUnitChange, resolveSizeValue } from '../utils/resolve-size-value';
+import { createEmptySizeValue, resolveSizeOnUnitChange, resolveSizeValue } from '../utils/resolve-size-value';
 import { useUnitSync } from './use-unit-sync';
 
 type SizeValue = SizePropValue[ 'value' ];
@@ -36,7 +36,7 @@ export const useSizeValue = < T extends SizeValue, U extends SizeValue[ 'unit' ]
 			}
 		},
 		persistWhen: ( next ) => hasChanged( next, resolvedValue ),
-		fallback: () => createDefaultSizeValue( units, defaultUnit ),
+		fallback: ( previousValue ) => createEmptySizeValue( previousValue, units, defaultUnit ),
 	} );
 
 	const [ unit, setUnit ] = useUnitSync( {

package/src/controls/size-control/unstable-size-control.tsx

@@ -33,13 +33,16 @@ export const UnstableSizeControl = createControl(
 			restoreValue,
 		} = useBoundProp( sizePropTypeUtil );
 		const lastNonAutoValue = useRef< SizePropValue[ 'value' ] | null >( null );
+		const clearedUnit = useRef< SizePropValue[ 'value' ][ 'unit' ] | null >( null );
 
-		const { sizeValue, placeholder } = resolveBoundPropValue(
+		const { sizeValue: resolvedSizeValue, placeholder } = resolveBoundPropValue(
 			value ?? lastNonAutoValue.current,
 			boundPropPlaceholder,
 			propPlaceholder
 		);
 
+		const sizeValue = applyClearedUnit( resolvedSizeValue, value, clearedUnit.current );
+
 		const units = getSizeUnits( propType, variant );
 		const defaultUnit = getDefaultUnit( propType );
 
@@ -47,6 +50,7 @@ export const UnstableSizeControl = createControl(
 			const isRequired = propType.settings.required;
 
 			if ( shouldNullifyValue( value ) && ! isRequired ) {
+				clearedUnit.current = value?.unit ?? null;
 				setValue( null );
 			}
 
@@ -56,6 +60,8 @@ export const UnstableSizeControl = createControl(
 		};
 
 		const handleChange = ( newValue: SizePropValue[ 'value' ], options?: CreateOptions, meta?: SetValueMeta ) => {
+			clearedUnit.current = null;
+
 			if ( isTransitioningFromExtendedUnit( newValue, value ) ) {
 				lastNonAutoValue.current = newValue;
 
@@ -93,6 +99,18 @@ export const UnstableSizeControl = createControl(
 	}
 );
 
+const applyClearedUnit = (
+	resolvedValue: SizePropValue[ 'value' ] | null,
+	boundValue: SizePropValue[ 'value' ] | null,
+	clearedUnit: SizePropValue[ 'value' ][ 'unit' ] | null
+): SizePropValue[ 'value' ] | null => {
+	if ( boundValue || ! resolvedValue || ! clearedUnit ) {
+		return resolvedValue;
+	}
+
+	return { ...resolvedValue, unit: clearedUnit } as SizePropValue[ 'value' ];
+};
+
 const isTransitioningFromExtendedUnit = (
 	nextValue: SizePropValue[ 'value' ],
 	previousValue: SizePropValue[ 'value' ]

package/src/controls/size-control/utils/resolve-size-value.ts

@@ -60,6 +60,20 @@ export const createDefaultSizeValue = < T extends SizeValue >( units: SizeUnit[]
 	return { size: DEFAULT_SIZE, unit } as T;
 };
 
+export const createEmptySizeValue = < T extends SizeValue >(
+	previousValue: T | null,
+	units: SizeUnit[],
+	defaultUnit?: SizeUnit
+): T => {
+	const previousUnit = previousValue?.unit;
+
+	if ( ! previousUnit || isExtendedUnit( previousUnit ) || ! units.includes( previousUnit ) ) {
+		return createDefaultSizeValue< T >( units, defaultUnit );
+	}
+
+	return { size: DEFAULT_SIZE, unit: previousUnit } as T;
+};
+
 const resolveFallbackUnit = < TUnit extends SizeUnit >(
 	unit: TUnit,
 	units: readonly TUnit[],

package/src/controls/size-control.tsx

@@ -116,7 +116,7 @@ export const SizeControl = createControl(
 		const popupState = usePopupState( { variant: 'popover' } );
 
 		const memorizedExternalState = useMemo(
-			() => createStateFromSizeProp( sizeValue, actualDefaultUnit ),
+			() => ( sizeValue ? createStateFromSizeProp( sizeValue, actualDefaultUnit ) : null ),
 			[ sizeValue, actualDefaultUnit ]
 		);
 
@@ -125,10 +125,10 @@ export const SizeControl = createControl(
 			setExternal: ( newState: State | null, options, meta ) =>
 				setSizeValue( extractValueFromState( newState ), options, meta ),
 			persistWhen: ( newState ) => !! extractValueFromState( newState ),
-			fallback: ( newState ) => ( {
-				unit: newState?.unit ?? actualDefaultUnit,
-				numeric: newState?.numeric ?? DEFAULT_SIZE,
-				custom: newState?.custom ?? '',
+			fallback: ( prevState ) => ( {
+				unit: prevState?.unit && ! isUnitExtendedOption( prevState.unit ) ? prevState.unit : actualDefaultUnit,
+				numeric: DEFAULT_SIZE,
+				custom: '',
 			} ),
 		} );