@elementor/editor-components 3.35.0-432 → 3.35.0-434

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@elementor/editor-components",
   "description": "Elementor editor components",
-  "version": "3.35.0-432",
+  "version": "3.35.0-434",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -40,30 +40,30 @@
     "dev": "tsup --config=../../tsup.dev.ts"
   },
   "dependencies": {
-    "@elementor/editor": "3.35.0-432",
-    "@elementor/editor-canvas": "3.35.0-432",
-    "@elementor/editor-controls": "3.35.0-432",
-    "@elementor/editor-documents": "3.35.0-432",
-    "@elementor/editor-editing-panel": "3.35.0-432",
-    "@elementor/editor-elements": "3.35.0-432",
-    "@elementor/editor-elements-panel": "3.35.0-432",
-    "@elementor/editor-mcp": "3.35.0-432",
-    "@elementor/editor-panels": "3.35.0-432",
-    "@elementor/editor-props": "3.35.0-432",
-    "@elementor/editor-styles-repository": "3.35.0-432",
-    "@elementor/editor-ui": "3.35.0-432",
-    "@elementor/editor-v1-adapters": "3.35.0-432",
-    "@elementor/http-client": "3.35.0-432",
+    "@elementor/editor": "3.35.0-434",
+    "@elementor/editor-canvas": "3.35.0-434",
+    "@elementor/editor-controls": "3.35.0-434",
+    "@elementor/editor-documents": "3.35.0-434",
+    "@elementor/editor-editing-panel": "3.35.0-434",
+    "@elementor/editor-elements": "3.35.0-434",
+    "@elementor/editor-elements-panel": "3.35.0-434",
+    "@elementor/editor-mcp": "3.35.0-434",
+    "@elementor/editor-panels": "3.35.0-434",
+    "@elementor/editor-props": "3.35.0-434",
+    "@elementor/editor-styles-repository": "3.35.0-434",
+    "@elementor/editor-ui": "3.35.0-434",
+    "@elementor/editor-v1-adapters": "3.35.0-434",
+    "@elementor/http-client": "3.35.0-434",
     "@elementor/icons": "^1.63.0",
-    "@elementor/mixpanel": "3.35.0-432",
-    "@elementor/query": "3.35.0-432",
-    "@elementor/schema": "3.35.0-432",
-    "@elementor/store": "3.35.0-432",
+    "@elementor/mixpanel": "3.35.0-434",
+    "@elementor/query": "3.35.0-434",
+    "@elementor/schema": "3.35.0-434",
+    "@elementor/store": "3.35.0-434",
     "@elementor/ui": "1.36.17",
-    "@elementor/utils": "3.35.0-432",
+    "@elementor/utils": "3.35.0-434",
     "@wordpress/i18n": "^5.13.0",
-    "@elementor/editor-notifications": "3.35.0-432",
-    "@elementor/editor-current-user": "3.35.0-432"
+    "@elementor/editor-notifications": "3.35.0-434",
+    "@elementor/editor-current-user": "3.35.0-434"
   },
   "peerDependencies": {
     "react": "^18.3.1",

package/src/components/consts.ts

@@ -1 +1,2 @@
 export const COMPONENT_DOCUMENT_TYPE = 'elementor_component';
+export const OVERRIDABLE_PROP_REPLACEMENT_ID = 'overridable-prop';

package/src/components/instance-editing-panel/instance-editing-panel.tsx

@@ -4,7 +4,7 @@ import { getFieldIndicators } from '@elementor/editor-editing-panel';
 import { useSelectedElement } from '@elementor/editor-elements';
 import { PanelBody, PanelHeader, PanelHeaderTitle } from '@elementor/editor-panels';
 import { ComponentsIcon, PencilIcon } from '@elementor/icons';
-import { IconButton, Stack, Tooltip } from '@elementor/ui';
+import { Divider, IconButton, Stack, Tooltip } from '@elementor/ui';
 import { __ } from '@wordpress/i18n';
 
 import { useComponentInstanceSettings } from '../../hooks/use-component-instance-settings';
@@ -64,12 +64,14 @@ export function InstanceEditingPanel() {
 					) : (
 						<Stack direction="column" alignItems="stretch">
 							{ groups.map( ( group ) => (
-								<OverridePropsGroup
-									key={ group.id }
-									group={ group }
-									props={ overridableProps.props }
-									overrides={ overrides }
-								/>
+								<React.Fragment key={ group.id }>
+									<OverridePropsGroup
+										group={ group }
+										props={ overridableProps.props }
+										overrides={ overrides }
+									/>
+									<Divider />
+								</React.Fragment>
 							) ) }
 						</Stack>
 					) }

package/src/components/instance-editing-panel/override-prop-control.tsx

@@ -1,13 +1,16 @@
 import * as React from 'react';
-import { PropKeyProvider, PropProvider, useBoundProp } from '@elementor/editor-controls';
+import { ControlReplacementsProvider, PropKeyProvider, PropProvider, useBoundProp } from '@elementor/editor-controls';
 import {
+	BaseControl,
 	controlsRegistry,
 	type ControlType,
 	createTopLevelObjectType,
+	ElementProvider,
+	getControlReplacements,
 	SettingsField,
+	useElement,
 } from '@elementor/editor-editing-panel';
-import { type Control } from '@elementor/editor-elements';
-import { type PropValue, type TransformablePropValue } from '@elementor/editor-props';
+import { type Control, getElementType } from '@elementor/editor-elements';
 import { Stack } from '@elementor/ui';
 
 import { useControlsByWidgetType } from '../../hooks/use-controls-by-widget-type';
@@ -16,18 +19,21 @@ import {
 	componentInstanceOverridePropTypeUtil,
 } from '../../prop-types/component-instance-override-prop-type';
 import {
+	type ComponentInstanceOverride,
 	componentInstanceOverridesPropTypeUtil,
 	type ComponentInstanceOverridesPropValue,
 } from '../../prop-types/component-instance-overrides-prop-type';
 import { componentInstancePropTypeUtil } from '../../prop-types/component-instance-prop-type';
 import {
+	type ComponentOverridableProp,
 	componentOverridablePropTypeUtil,
-	type ComponentOverridablePropValue,
 } from '../../prop-types/component-overridable-prop-type';
+import { OverridablePropProvider } from '../../provider/overridable-prop-context';
 import { updateOverridableProp } from '../../store/actions/update-overridable-prop';
 import { useCurrentComponentId } from '../../store/store';
 import { type OriginPropFields, type OverridableProp } from '../../types';
 import { getPropTypeForComponentOverride } from '../../utils/get-prop-type-for-component-override';
+import { resolveOverridePropValue } from '../../utils/resolve-override-prop-value';
 import { ControlLabel } from '../control-label';
 
 type Props = {
@@ -35,7 +41,7 @@ type Props = {
 	overrides?: ComponentInstanceOverridesPropValue;
 };
 
-type OverridesSchema = Record< string, NonNullable< ComponentInstanceOverridesPropValue >[ number ] >;
+type OverridesSchema = Record< string, ComponentInstanceOverride >;
 
 export function OverridePropControl( { overridableProp, overrides }: Props ) {
 	return (
@@ -46,11 +52,13 @@ export function OverridePropControl( { overridableProp, overrides }: Props ) {
 }
 
 function OverrideControl( { overridableProp, overrides }: Props ) {
+	const componentInstanceElement = useElement();
 	const componentId = useCurrentComponentId();
 	const { value: instanceValue, setValue: setInstanceValue } = useBoundProp( componentInstancePropTypeUtil );
 	const controls = useControlsByWidgetType(
 		overridableProp?.originPropFields?.widgetType ?? overridableProp.widgetType
 	);
+	const controlReplacements = getControlReplacements();
 
 	const propType = getPropTypeForComponentOverride( overridableProp );
 
@@ -72,7 +80,7 @@ function OverrideControl( { overridableProp, overrides }: Props ) {
 
 	const matchingOverride = getMatchingOverride( overrides, overridableProp.overrideKey );
 
-	const propValue = matchingOverride ? getPropValue( matchingOverride ) : overridableProp.originValue;
+	const propValue = matchingOverride ? resolveOverridePropValue( matchingOverride ) : overridableProp.originValue;
 
 	const value = {
 		[ overridableProp.overrideKey ]: propValue,
@@ -81,9 +89,14 @@ function OverrideControl( { overridableProp, overrides }: Props ) {
 	const setValue = ( newValue: OverridesSchema ) => {
 		const newPropValue = newValue[ overridableProp.overrideKey ] as
 			| ComponentInstanceOverrideProp
-			| ComponentOverridablePropValue;
+			| ComponentOverridableProp;
 
-		const newOverrideValue = createOverrideValue( overridableProp.overrideKey, newPropValue, componentInstanceId );
+		const newOverrideValue = createOverrideValue( {
+			matchingOverride,
+			overrideKey: overridableProp.overrideKey,
+			overrideValue: newPropValue,
+			componentId: componentInstanceId,
+		} );
 
 		let newOverrides =
 			overrides?.map( ( override ) => ( override === matchingOverride ? newOverrideValue : override ) ) ?? [];
@@ -105,49 +118,60 @@ function OverrideControl( { overridableProp, overrides }: Props ) {
 				return;
 			}
 
-			const { elType, widgetType, propKey } = overridableProp;
-			updateOverridableProp( componentId, overridableValue, { elType, widgetType, propKey } );
+			const { elType, widgetType, propKey, elementId } = overridableProp;
+			updateOverridableProp( componentId, overridableValue, { elType, widgetType, propKey, elementId } );
 		}
 	};
 
-	return (
-		<PropProvider
-			propType={ propTypeSchema }
-			value={ value }
-			setValue={ setValue }
-			isDisabled={ () => {
-				return false;
-			} }
-		>
-			<PropKeyProvider bind={ overridableProp.overrideKey }>
-				<Stack direction="column" gap={ 1 } mb={ 1.5 }>
-					<ControlLabel>{ overridableProp.label }</ControlLabel>
-					{ getControl( controls, overridableProp?.originPropFields ?? overridableProp ) }
-				</Stack>
-			</PropKeyProvider>
-		</PropProvider>
+	const { control, controlProps, layout } = getControlParams(
+		controls,
+		overridableProp?.originPropFields ?? overridableProp,
+		overridableProp.label
 	);
-}
 
-function getPropValue( value: PropValue ): TransformablePropValue< string, unknown > | null {
-	const overridableValue = componentOverridablePropTypeUtil.extract( value );
+	const { elementId, widgetType, elType, propKey } = overridableProp.originPropFields ?? overridableProp;
 
-	if ( overridableValue ) {
-		// if overridable - return as is and let the control replacement handle the overridable value
-		return value as TransformablePropValue< string, unknown >;
-	}
+	const type = elType === 'widget' ? widgetType : elType;
+	const elementType = getElementType( type );
 
-	if ( componentInstanceOverridePropTypeUtil.isValid( value ) ) {
-		return value.value.override_value as TransformablePropValue< string, unknown >;
+	if ( ! elementType ) {
+		return null;
 	}
 
-	return null;
+	return (
+		<OverridablePropProvider
+			value={ componentOverridablePropTypeUtil.extract( matchingOverride ) ?? undefined }
+			componentInstanceElement={ componentInstanceElement }
+		>
+			<ElementProvider element={ { id: elementId, type } } elementType={ elementType }>
+				<SettingsField bind={ propKey } propDisplayName={ overridableProp.label }>
+					<PropProvider
+						propType={ propTypeSchema }
+						value={ value }
+						setValue={ setValue }
+						isDisabled={ () => {
+							return false;
+						} }
+					>
+						<PropKeyProvider bind={ overridableProp.overrideKey }>
+							<ControlReplacementsProvider replacements={ controlReplacements }>
+								<Stack direction="column" gap={ 1 } mb={ 1.5 }>
+									{ layout !== 'custom' && <ControlLabel>{ overridableProp.label }</ControlLabel> }
+									<OriginalControl control={ control } controlProps={ controlProps } />
+								</Stack>
+							</ControlReplacementsProvider>
+						</PropKeyProvider>
+					</PropProvider>
+				</SettingsField>
+			</ElementProvider>
+		</OverridablePropProvider>
+	);
 }
 
 function getMatchingOverride(
 	overrides: ComponentInstanceOverridesPropValue,
 	overrideKey: string
-): NonNullable< ComponentInstanceOverridesPropValue >[ number ] | null {
+): ComponentInstanceOverride | null {
 	return (
 		overrides?.find( ( override ) => {
 			const overridableValue = componentOverridablePropTypeUtil.extract( override );
@@ -165,17 +189,29 @@ function getMatchingOverride(
 	);
 }
 
-function createOverrideValue(
-	overrideKey: string,
-	overrideValue: ComponentInstanceOverrideProp | ComponentOverridablePropValue,
-	componentId: number
-): NonNullable< ComponentInstanceOverridesPropValue >[ number ] {
-	const overridableValue = componentOverridablePropTypeUtil.extract( overrideValue );
-
-	if ( overridableValue ) {
+function createOverrideValue( {
+	matchingOverride,
+	overrideKey,
+	overrideValue,
+	componentId,
+}: {
+	matchingOverride: ComponentInstanceOverride | null;
+	overrideKey: string;
+	overrideValue: ComponentInstanceOverrideProp | ComponentOverridableProp;
+	componentId: number;
+} ): ComponentInstanceOverride {
+	// this is for an override that's already set as overridable
+	const overridableValue = componentOverridablePropTypeUtil.extract( matchingOverride );
+
+	// this is for changes via the overridable-prop-indicator
+	const newOverridableValue = componentOverridablePropTypeUtil.extract( overrideValue );
+
+	const anyOverridable = newOverridableValue ?? overridableValue;
+
+	if ( anyOverridable ) {
 		const innerOverride = componentInstanceOverridePropTypeUtil.create( {
 			override_key: overrideKey,
-			override_value: overridableValue.origin_value,
+			override_value: resolveOverridePropValue( overrideValue ),
 			schema_source: {
 				type: 'component',
 				id: componentId,
@@ -183,7 +219,7 @@ function createOverrideValue(
 		} );
 
 		return componentOverridablePropTypeUtil.create( {
-			override_key: overridableValue.override_key,
+			override_key: anyOverridable.override_key,
 			origin_value: innerOverride,
 		} );
 	}
@@ -198,10 +234,48 @@ function createOverrideValue(
 	} );
 }
 
-function getControl( controls: Record< string, Control >, originPropFields: OriginPropFields ) {
-	const ControlComponent = controlsRegistry.get( controls[ originPropFields.propKey ].value.type as ControlType );
+function getControlParams( controls: Record< string, Control >, originPropFields: OriginPropFields, label?: string ) {
+	const control = controls[ originPropFields.propKey ];
+	const { value } = control;
+
+	const layout = getControlLayout( control );
+
+	const controlProps = populateChildControlProps( value.props );
+
+	if ( layout === 'custom' ) {
+		controlProps.label = label ?? value.label;
+	}
+
+	return {
+		control,
+		controlProps,
+		layout,
+	};
+}
+
+function OriginalControl( { control, controlProps }: { control: Control; controlProps: Record< string, unknown > } ) {
+	const { value } = control;
 
-	const controlProps = controls[ originPropFields.propKey ].value.props;
+	return <BaseControl type={ value.type as ControlType } props={ controlProps } />;
+}
+
+function getControlLayout( control: Control ) {
+	return control.value.meta?.layout || controlsRegistry.getLayout( control.value.type as ControlType );
+}
+
+function populateChildControlProps( props: Record< string, unknown > ) {
+	if ( props.childControlType ) {
+		const childComponent = controlsRegistry.get( props.childControlType as ControlType );
+		const childPropType = controlsRegistry.getPropTypeUtil( props.childControlType as ControlType );
+		props = {
+			...props,
+			childControlConfig: {
+				component: childComponent,
+				props: props.childControlProps || {},
+				propTypeUtil: childPropType,
+			},
+		};
+	}
 
-	return <ControlComponent { ...controlProps } />;
+	return props;
 }

package/src/components/overridable-props/overridable-prop-control.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { type ComponentType } from 'react';
 import { ControlReplacementsProvider, PropKeyProvider, PropProvider, useBoundProp } from '@elementor/editor-controls';
-import { createTopLevelObjectType, useElement } from '@elementor/editor-editing-panel';
+import { createTopLevelObjectType, getControlReplacements, useElement } from '@elementor/editor-editing-panel';
 import { type PropValue } from '@elementor/editor-props';
 
 import { type ComponentInstanceOverridePropValue } from '../../prop-types/component-instance-override-prop-type';
@@ -13,6 +13,7 @@ import { OverridablePropProvider } from '../../provider/overridable-prop-context
 import { updateOverridableProp } from '../../store/actions/update-overridable-prop';
 import { useCurrentComponentId, useOverridableProps } from '../../store/store';
 import { getPropTypeForComponentOverride } from '../../utils/get-prop-type-for-component-override';
+import { OVERRIDABLE_PROP_REPLACEMENT_ID } from '../consts';
 
 export function OverridablePropControl< T extends object >( {
 	OriginalControl,
@@ -23,6 +24,9 @@ export function OverridablePropControl< T extends object >( {
 	const { value, bind, setValue, placeholder, ...propContext } = useBoundProp( componentOverridablePropTypeUtil );
 	const componentId = useCurrentComponentId();
 	const overridableProps = useOverridableProps( componentId );
+	const filteredReplacements = getControlReplacements().filter(
+		( r ) => ! r.id || r.id !== OVERRIDABLE_PROP_REPLACEMENT_ID
+	);
 
 	if ( ! componentId ) {
 		return null;
@@ -33,6 +37,7 @@ export function OverridablePropControl< T extends object >( {
 	}
 
 	const isComponentInstance = elementType.key === 'e-component';
+	const overridablePropData = overridableProps?.props?.[ value.override_key ];
 
 	const setOverridableValue = ( newValue: Record< typeof bind, PropValue | null > ) => {
 		const propValue = {
@@ -43,19 +48,22 @@ export function OverridablePropControl< T extends object >( {
 		setValue( propValue );
 
 		if ( ! isComponentInstance ) {
-			const existingProp = overridableProps?.props?.[ propValue.override_key ];
-			updateOverridableProp( componentId, propValue, existingProp?.originPropFields );
+			updateOverridableProp( componentId, propValue, overridablePropData?.originPropFields );
 		}
 	};
 
 	const defaultPropType = elementType.propsSchema[ bind ];
+	const overridePropType = overridablePropData ? getPropTypeForComponentOverride( overridablePropData ) : undefined;
+
+	const resolvedPropType = overridePropType ?? defaultPropType;
+
+	if ( ! resolvedPropType ) {
+		return null;
+	}
 
 	const propType = createTopLevelObjectType( {
 		schema: {
-			[ bind ]:
-				isComponentInstance && overridableProps
-					? getPropTypeForComponentOverride( overridableProps.props[ value.override_key ] ) ?? defaultPropType
-					: defaultPropType,
+			[ bind ]: resolvedPropType,
 		},
 	} );
 
@@ -81,7 +89,7 @@ export function OverridablePropControl< T extends object >( {
 				placeholder={ objectPlaceholder }
 			>
 				<PropKeyProvider bind={ bind }>
-					<ControlReplacementsProvider replacements={ [] }>
+					<ControlReplacementsProvider replacements={ filteredReplacements }>
 						<OriginalControl { ...( props as T ) } />
 					</ControlReplacementsProvider>
 				</PropKeyProvider>

package/src/components/overridable-props/overridable-prop-indicator.tsx

@@ -7,10 +7,11 @@ import { bindPopover, bindTrigger, Popover, Tooltip, usePopupState } from '@elem
 import { __ } from '@wordpress/i18n';
 
 import { componentOverridablePropTypeUtil } from '../../prop-types/component-overridable-prop-type';
-import { useOverridablePropValue } from '../../provider/overridable-prop-context';
+import { useComponentInstanceElement, useOverridablePropValue } from '../../provider/overridable-prop-context';
 import { setOverridableProp } from '../../store/actions/set-overridable-prop';
 import { useCurrentComponentId, useOverridableProps } from '../../store/store';
 import { type OverridableProps } from '../../types';
+import { resolveOverridePropValue } from '../../utils/resolve-override-prop-value';
 import { Indicator } from './indicator';
 import { OverridablePropForm } from './overridable-prop-form';
 import { getOverridableProp } from './utils/get-overridable-prop';
@@ -41,6 +42,8 @@ export function Content( { componentId, overridableProps }: Props ) {
 	const { value, bind, propType } = useBoundProp();
 
 	const contextOverridableValue = useOverridablePropValue();
+	const componentInstanceElement = useComponentInstanceElement();
+
 	const { value: boundPropOverridableValue, setValue: setOverridableValue } = useBoundProp(
 		componentOverridablePropTypeUtil
 	);
@@ -62,7 +65,8 @@ export function Content( { componentId, overridableProps }: Props ) {
 
 	const handleSubmit = ( { label, group }: { label: string; group: string | null } ) => {
 		const propTypeDefault = propType.default ?? {};
-		const originValue = ( ! overridableValue ? value : overridableValue?.origin_value ) ?? propTypeDefault;
+
+		const originValue = resolveOverridePropValue( overridableValue?.origin_value ) ?? value ?? propTypeDefault;
 
 		const matchingOverridableProp = overridableValue
 			? overridableProps?.props?.[ overridableValue.override_key ]
@@ -71,12 +75,12 @@ export function Content( { componentId, overridableProps }: Props ) {
 		const overridablePropConfig = setOverridableProp( {
 			componentId,
 			overrideKey: overridableValue?.override_key ?? null,
-			elementId,
+			elementId: componentInstanceElement?.element.id ?? elementId,
 			label,
 			groupId: group,
 			propKey: bind,
 			elType: elType ?? 'widget',
-			widgetType: elementType.key,
+			widgetType: componentInstanceElement?.elementType.key ?? elementType.key,
 			originValue,
 			originPropFields: matchingOverridableProp?.originPropFields,
 		} );

package/src/init.ts

@@ -26,7 +26,7 @@ import { componentOverrideTransformer } from './component-override-transformer';
 import { ComponentPanelHeader } from './components/component-panel-header/component-panel-header';
 import { panel as componentPropertiesPanel } from './components/component-properties-panel/component-properties-panel';
 import { Components } from './components/components-tab/components';
-import { COMPONENT_DOCUMENT_TYPE } from './components/consts';
+import { COMPONENT_DOCUMENT_TYPE, OVERRIDABLE_PROP_REPLACEMENT_ID } from './components/consts';
 import { CreateComponentForm } from './components/create-component-form/create-component-form';
 import { EditComponent } from './components/edit-component/edit-component';
 import { openEditModeDialog } from './components/in-edit-mode';
@@ -115,6 +115,7 @@ export function init() {
 	} );
 
 	registerControlReplacement( {
+		id: OVERRIDABLE_PROP_REPLACEMENT_ID,
 		component: OverridablePropControl,
 		condition: ( { value } ) => componentOverridablePropTypeUtil.isValid( value ),
 	} );

package/src/prop-types/component-instance-overrides-prop-type.ts

@@ -15,3 +15,5 @@ export const componentInstanceOverridesPropTypeUtil = createPropUtils(
 export type ComponentInstanceOverridesPropValue = z.infer<
 	typeof componentInstanceOverridesPropTypeUtil.schema
 >[ 'value' ];
+
+export type ComponentInstanceOverride = NonNullable< ComponentInstanceOverridesPropValue >[ number ];

package/src/prop-types/component-overridable-prop-type.ts

@@ -14,4 +14,6 @@ export const componentOverridablePropTypeUtil = createPropUtils(
 	} )
 );
 
-export type ComponentOverridablePropValue = z.infer< typeof componentOverridablePropTypeUtil.schema >[ 'value' ];
+export type ComponentOverridableProp = z.infer< typeof componentOverridablePropTypeUtil.schema >;
+
+export type ComponentOverridablePropValue = ComponentOverridableProp[ 'value' ];

package/src/provider/overridable-prop-context.tsx

@@ -1,10 +1,12 @@
 import * as React from 'react';
 import { createContext, type PropsWithChildren, useContext } from 'react';
+import { type useElement } from '@elementor/editor-editing-panel';
 
 import { type ComponentOverridablePropValue } from '../prop-types/component-overridable-prop-type';
 
 type OverridablePropData = {
-	value: ComponentOverridablePropValue;
+	value?: ComponentOverridablePropValue;
+	componentInstanceElement?: ReturnType< typeof useElement >;
 };
 
 const OverridablePropContext = createContext< OverridablePropData | null >( null );
@@ -14,3 +16,5 @@ export function OverridablePropProvider( { children, ...props }: PropsWithChildr
 }
 
 export const useOverridablePropValue = () => useContext( OverridablePropContext )?.value;
+
+export const useComponentInstanceElement = () => useContext( OverridablePropContext )?.componentInstanceElement;

package/src/store/actions/update-overridable-prop.ts

@@ -2,6 +2,7 @@ import { __dispatch as dispatch, __getState as getState } from '@elementor/store
 
 import { type ComponentOverridablePropValue } from '../../prop-types/component-overridable-prop-type';
 import { type OriginPropFields, type OverridableProps } from '../../types';
+import { resolveOverridePropValue } from '../../utils/resolve-override-prop-value';
 import { selectOverridableProps, slice } from '../store';
 
 export function updateOverridableProp(
@@ -21,13 +22,15 @@ export function updateOverridableProp(
 		return;
 	}
 
+	const originValue = resolveOverridePropValue( propValue.origin_value );
+
 	const newOverridableProp = originPropFields
 		? {
-				originValue: propValue.origin_value,
+				originValue,
 				originPropFields,
 		  }
 		: {
-				originValue: propValue.origin_value,
+				originValue,
 		  };
 
 	const newOverridableProps = {

package/src/types.ts

@@ -21,7 +21,7 @@ export type UnpublishedComponent = BaseComponent & {
 	elements: V1ElementData[];
 };
 
-export type OriginPropFields = Pick< OverridableProp, 'propKey' | 'widgetType' | 'elType' >;
+export type OriginPropFields = Pick< OverridableProp, 'propKey' | 'widgetType' | 'elType' | 'elementId' >;
 
 export type OverridableProp = {
 	overrideKey: string;

package/src/utils/get-prop-type-for-component-override.ts

@@ -7,12 +7,13 @@ export const getPropTypeForComponentOverride = ( overridableProp: OverridablePro
 		return getPropType( overridableProp.originPropFields );
 	}
 
-	const { elType, widgetType, propKey } = overridableProp;
+	const { elType, widgetType, propKey, elementId } = overridableProp;
 
 	return getPropType( {
 		elType,
 		widgetType,
 		propKey,
+		elementId,
 	} );
 };
 

package/src/utils/resolve-override-prop-value.ts

@@ -0,0 +1,51 @@
+import { type PropValue } from '@elementor/editor-props';
+
+import {
+	type ComponentInstanceOverrideProp,
+	componentInstanceOverridePropTypeUtil,
+} from '../prop-types/component-instance-override-prop-type';
+import { type ComponentInstanceOverride } from '../prop-types/component-instance-overrides-prop-type';
+import {
+	type ComponentOverridableProp,
+	componentOverridablePropTypeUtil,
+} from '../prop-types/component-overridable-prop-type';
+
+export const resolveOverridePropValue = ( originalPropValue: ComponentInstanceOverride | PropValue ): PropValue => {
+	const isOverridable = componentOverridablePropTypeUtil.isValid( originalPropValue );
+	if ( isOverridable ) {
+		return getOverridableValue( originalPropValue as ComponentOverridableProp );
+	}
+
+	const isOverride = componentInstanceOverridePropTypeUtil.isValid( originalPropValue );
+	if ( isOverride ) {
+		return getOverrideValue( originalPropValue );
+	}
+
+	return originalPropValue;
+};
+
+function getOverridableValue( overridableProp: ComponentOverridableProp | null ): PropValue {
+	const overridableValue = componentOverridablePropTypeUtil.extract( overridableProp );
+
+	if ( ! overridableValue ) {
+		return null;
+	}
+
+	const isOverride = componentInstanceOverridePropTypeUtil.isValid( overridableValue.origin_value );
+
+	if ( isOverride ) {
+		return getOverrideValue( overridableValue.origin_value as ComponentInstanceOverrideProp );
+	}
+
+	return overridableValue.origin_value;
+}
+
+function getOverrideValue( overrideProp: ComponentInstanceOverrideProp | null ): PropValue {
+	const overrideValue = componentInstanceOverridePropTypeUtil.extract( overrideProp );
+
+	if ( ! overrideValue ) {
+		return null;
+	}
+
+	return overrideValue.override_value as PropValue;
+}