@elementor/editor-components 4.0.0-manual → 4.1.0-684

package/src/store/store.ts

@@ -1,176 +1,14 @@
-import { type V1Document } from '@elementor/editor-documents';
-import {
-	__createSelector as createSelector,
-	__createSlice as createSlice,
-	__useSelector as useSelector,
-	type PayloadAction,
-	type SliceState,
-} from '@elementor/store';
+import { __createSelector as createSelector, __useSelector as useSelector, type SliceState } from '@elementor/store';
 
-import {
-	type Component,
-	type ComponentId,
-	type OverridableProps,
-	type PublishedComponent,
-	type StylesDefinition,
-	type UnpublishedComponent,
-} from '../types';
-import { loadComponents } from './thunks';
-
-type GetComponentResponse = PublishedComponent[];
-
-type Status = 'idle' | 'pending' | 'error';
-
-export type SanitizeAttributes = 'overridableProps';
-
-type ComponentsState = {
-	data: PublishedComponent[];
-	unpublishedData: UnpublishedComponent[];
-	loadStatus: Status;
-	styles: StylesDefinition;
-	createdThisSession: Component[ 'uid' ][];
-	archivedThisSession: ComponentId[];
-	path: ComponentsPathItem[];
-	currentComponentId: V1Document[ 'id' ] | null;
-	updatedComponentNames: Record< number, string >;
-
-	// We use this map to flag any sanitized attribute of a given component
-	// This map currently resets in response to the `editor/documents/open` command
-	sanitized: Record< ComponentId, Partial< Record< SanitizeAttributes, boolean > > >;
-};
+import type { ComponentId, OverridableProps, PublishedComponent, UnpublishedComponent } from '../types';
+import { type slice } from './extensible-slice';
+import { type SanitizeAttributes, SLICE_NAME } from './store-types';
 
 export type ComponentsSlice = SliceState< typeof slice >;
 
-export type ComponentsPathItem = {
-	instanceId?: string;
-	instanceTitle?: string;
-	componentId: V1Document[ 'id' ];
-};
-
-export const initialState: ComponentsState = {
-	data: [],
-	unpublishedData: [],
-	loadStatus: 'idle',
-	styles: {},
-	createdThisSession: [],
-	archivedThisSession: [],
-	path: [],
-	currentComponentId: null,
-	updatedComponentNames: {},
-	sanitized: {},
-};
-
-export const SLICE_NAME = 'components';
-
-export const slice = createSlice( {
-	name: SLICE_NAME,
-	initialState,
-	reducers: {
-		add: ( state, { payload }: PayloadAction< PublishedComponent | PublishedComponent[] > ) => {
-			if ( Array.isArray( payload ) ) {
-				state.data = [ ...payload, ...state.data ];
-			} else {
-				state.data.unshift( payload );
-			}
-		},
-		load: ( state, { payload }: PayloadAction< PublishedComponent[] > ) => {
-			state.data = payload;
-		},
-		addUnpublished: ( state, { payload }: PayloadAction< UnpublishedComponent > ) => {
-			state.unpublishedData.unshift( payload );
-		},
-		removeUnpublished: ( state, { payload }: PayloadAction< string | string[] > ) => {
-			const uidsToRemove = Array.isArray( payload ) ? payload : [ payload ];
-			state.unpublishedData = state.unpublishedData.filter(
-				( component ) => ! uidsToRemove.includes( component.uid )
-			);
-		},
-		resetUnpublished: ( state ) => {
-			state.unpublishedData = [];
-		},
-		removeStyles( state, { payload }: PayloadAction< { id: ComponentId } > ) {
-			const { [ payload.id ]: _, ...rest } = state.styles;
-
-			state.styles = rest;
-		},
-		addStyles: ( state, { payload } ) => {
-			state.styles = { ...state.styles, ...payload };
-		},
-		addCreatedThisSession: ( state, { payload }: PayloadAction< string > ) => {
-			state.createdThisSession.push( payload );
-		},
-		removeCreatedThisSession: ( state, { payload }: PayloadAction< string > ) => {
-			state.createdThisSession = state.createdThisSession.filter( ( uid ) => uid !== payload );
-		},
-		archive: ( state, { payload }: PayloadAction< number > ) => {
-			const component = state.data.find( ( comp ) => comp.id === payload );
-
-			if ( component ) {
-				component.isArchived = true;
-				state.archivedThisSession.push( payload );
-			}
-		},
-		setCurrentComponentId: ( state, { payload }: PayloadAction< V1Document[ 'id' ] | null > ) => {
-			state.currentComponentId = payload;
-		},
-		setPath: ( state, { payload }: PayloadAction< ComponentsPathItem[] > ) => {
-			state.path = payload;
-		},
-		setOverridableProps: (
-			state,
-			{ payload }: PayloadAction< { componentId: ComponentId; overridableProps: OverridableProps } >
-		) => {
-			const component = state.data.find( ( comp ) => comp.id === payload.componentId );
-
-			if ( ! component ) {
-				return;
-			}
-
-			component.overridableProps = payload.overridableProps;
-		},
-		rename: ( state, { payload }: PayloadAction< { componentUid: string; name: string } > ) => {
-			const component = state.data.find( ( comp ) => comp.uid === payload.componentUid );
-
-			if ( ! component ) {
-				return;
-			}
-			if ( component.id ) {
-				state.updatedComponentNames[ component.id ] = payload.name;
-			}
-			component.name = payload.name;
-		},
-		cleanUpdatedComponentNames: ( state ) => {
-			state.updatedComponentNames = {};
-		},
-		updateComponentSanitizedAttribute: (
-			state,
-			{
-				payload: { componentId, attribute },
-			}: PayloadAction< { componentId: ComponentId; attribute: SanitizeAttributes } >
-		) => {
-			if ( ! state.sanitized[ componentId ] ) {
-				state.sanitized[ componentId ] = {};
-			}
-
-			state.sanitized[ componentId ][ attribute ] = true;
-		},
-		resetSanitizedComponents: ( state ) => {
-			state.sanitized = {};
-		},
-	},
-	extraReducers: ( builder ) => {
-		builder.addCase( loadComponents.fulfilled, ( state, { payload }: PayloadAction< GetComponentResponse > ) => {
-			state.data = payload;
-			state.loadStatus = 'idle';
-		} );
-		builder.addCase( loadComponents.pending, ( state ) => {
-			state.loadStatus = 'pending';
-		} );
-		builder.addCase( loadComponents.rejected, ( state ) => {
-			state.loadStatus = 'error';
-		} );
-	},
-} );
+export { slice, registerComponentsReducer, createComponentsAction, __resetExtraReducers } from './extensible-slice';
+export type { ComponentsState, ComponentsPathItem, SanitizeAttributes } from './store-types';
+export { initialState, SLICE_NAME } from './store-types';
 
 export const selectData = ( state: ComponentsSlice ) => state[ SLICE_NAME ].data;
 export const selectArchivedThisSession = ( state: ComponentsSlice ) => state[ SLICE_NAME ].archivedThisSession;

package/src/sync/publish-draft-components-in-page-before-save.ts

@@ -1,10 +1,17 @@
 import { invalidateDocumentData, isDocumentDirty } from '@elementor/editor-documents';
 import { type V1ElementData } from '@elementor/editor-elements';
+import { notify } from '@elementor/editor-notifications';
+import { AxiosError } from '@elementor/http-client';
+import { __ } from '@wordpress/i18n';
 
 import { apiClient } from '../api';
 import { type DocumentSaveStatus } from '../types';
 import { getComponentDocuments } from '../utils/get-component-documents';
 
+const INSUFFICIENT_PERMISSIONS_ERROR_CODE = 'insufficient_permissions';
+const PUBLISH_UPGRADE_URL = 'https://go.elementor.com/go-pro-components-edit/';
+const PUBLISH_UPGRADE_NOTIFICATION_ID = 'component-publish-upgrade';
+
 type Options = {
 	status: DocumentSaveStatus;
 	elements: V1ElementData[];
@@ -23,7 +30,41 @@ export async function publishDraftComponentsInPageBeforeSave( { status, elements
 		return;
 	}
 
-	await apiClient.updateStatuses( draftIds, 'publish' );
+	try {
+		await apiClient.updateStatuses( draftIds, 'publish' );
+	} catch ( error ) {
+		if ( isInsufficientPermissionsError( error ) ) {
+			notifyPublishUpgrade();
+			return;
+		}
+
+		throw error;
+	}
 
 	draftIds.forEach( ( id ) => invalidateDocumentData( id ) );
 }
+
+function isInsufficientPermissionsError( error: unknown ): boolean {
+	return error instanceof AxiosError && error.response?.data?.code === INSUFFICIENT_PERMISSIONS_ERROR_CODE;
+}
+
+function notifyPublishUpgrade() {
+	notify( {
+		type: 'promotion',
+		id: PUBLISH_UPGRADE_NOTIFICATION_ID,
+		message: __(
+			'You have unpublished component on this page. You need a pro version to publish it.',
+			'elementor'
+		),
+		additionalActionProps: [
+			{
+				size: 'small',
+				variant: 'contained',
+				color: 'promotion',
+				href: PUBLISH_UPGRADE_URL,
+				target: '_blank',
+				children: __( 'Upgrade Now', 'elementor' ),
+			},
+		],
+	} );
+}

package/src/types.ts

@@ -74,7 +74,7 @@ export type ExtendedWindow = Window & {
 	elementorCommon: Record< string, unknown > & {
 		eventsManager: {
 			config: {
-				locations: Record< string, string >;
+				locations: Record< string, string | Record< string, string > >;
 				secondaryLocations: Record< string, string >;
 				triggers: Record< string, string >;
 			};

package/src/utils/detach-component-instance/detach-component-instance.ts

@@ -0,0 +1,172 @@
+import { getContainer, replaceElement, type V1Element, type V1ElementModelProps } from '@elementor/editor-elements';
+import { undoable } from '@elementor/editor-v1-adapters';
+import { __dispatch as dispatch, __getState as getState } from '@elementor/store';
+import { __ } from '@wordpress/i18n';
+
+import { componentInstanceOverridesPropTypeUtil } from '../../prop-types/component-instance-overrides-prop-type';
+import {
+	type ComponentInstanceProp,
+	componentInstancePropTypeUtil,
+} from '../../prop-types/component-instance-prop-type';
+import { selectComponent, selectCurrentComponentId, selectOverridableProps, slice } from '../../store/store';
+import { type OverridableProps } from '../../types';
+import { getComponentDocumentData } from '../component-document-data';
+import { trackComponentEvent } from '../tracking';
+import { resolveDetachedInstance } from './resolve-detached-instance';
+
+type DetachParams = {
+	instanceId: string;
+	componentId: number;
+	trackingInfo: {
+		location: string;
+		secondaryLocation?: string;
+		trigger: string;
+	};
+};
+
+type DoReturn = {
+	detachedElement: V1Element;
+	detachedInstanceElementData: V1ElementModelProps;
+	editedComponentOnDetach: number | null;
+	overridablePropsBeforeDetach: OverridableProps | null;
+	originalInstanceModel: V1ElementModelProps;
+};
+
+export async function detachComponentInstance( {
+	instanceId,
+	componentId,
+	trackingInfo,
+}: DetachParams ): Promise< DoReturn > {
+	const instanceContainer = getContainer( instanceId );
+
+	if ( ! instanceContainer ) {
+		throw new Error( `Instance container with ID "${ instanceId }" not found.` );
+	}
+
+	const componentData = await getComponentDocumentData( componentId );
+
+	if ( ! componentData ) {
+		throw new Error( `Component with ID "${ componentId }" not found.` );
+	}
+
+	const rootElement = componentData.elements?.[ 0 ];
+
+	if ( ! rootElement ) {
+		throw new Error( `Component with ID "${ componentId }" has no root element.` );
+	}
+
+	const undoableDetach = undoable(
+		{
+			do: (): DoReturn => {
+				const overrides = extractInstanceOverrides( instanceContainer );
+				const detachedInstanceElementData = resolveDetachedInstance(
+					rootElement,
+					overrides
+				) as V1ElementModelProps;
+
+				const editedComponentOnDetach = selectCurrentComponentId( getState() );
+				// We need to store the overridable props of the current component before detach to restore them on undo.
+				const overridablePropsBeforeDetach = editedComponentOnDetach
+					? selectOverridableProps( getState(), editedComponentOnDetach ) ?? null
+					: null;
+
+				const originalInstanceModel = instanceContainer.model.toJSON();
+
+				const detachedElement = replaceElement( {
+					currentElementId: instanceId,
+					newElement: detachedInstanceElementData,
+					withHistory: false,
+				} );
+
+				const componentUid = selectComponent( getState(), componentId )?.uid;
+				trackComponentEvent( {
+					action: 'detached',
+					source: 'user',
+					component_uid: componentUid,
+					instance_id: instanceId,
+					location: trackingInfo.location,
+					secondary_location: trackingInfo.secondaryLocation,
+					trigger: trackingInfo.trigger,
+				} );
+
+				return {
+					detachedElement,
+					detachedInstanceElementData,
+					editedComponentOnDetach,
+					overridablePropsBeforeDetach,
+					originalInstanceModel,
+				};
+			},
+			undo: (
+				_: undefined,
+				{
+					detachedElement,
+					originalInstanceModel,
+					overridablePropsBeforeDetach,
+					editedComponentOnDetach,
+				}: DoReturn
+			): V1Element => {
+				const restoredInstance = replaceElement( {
+					currentElementId: detachedElement.id,
+					newElement: originalInstanceModel,
+					withHistory: false,
+				} );
+
+				const currentComponentId = selectCurrentComponentId( getState() );
+				if (
+					currentComponentId &&
+					currentComponentId === editedComponentOnDetach &&
+					overridablePropsBeforeDetach
+				) {
+					dispatch(
+						slice.actions.setOverridableProps( {
+							componentId: currentComponentId,
+							overridableProps: overridablePropsBeforeDetach,
+						} )
+					);
+				}
+
+				return restoredInstance;
+			},
+			redo: ( _: undefined, doReturn: DoReturn, restoredInstance: V1Element ) => {
+				const { detachedInstanceElementData } = doReturn;
+
+				const editedComponentOnDetach = selectCurrentComponentId( getState() );
+				// We need to store the overridable props of the current component before detach to restore them on undo.
+				const overridablePropsBeforeDetach = editedComponentOnDetach
+					? selectOverridableProps( getState(), editedComponentOnDetach ) ?? null
+					: null;
+
+				const detachedElement = replaceElement( {
+					currentElementId: restoredInstance.id,
+					newElement: detachedInstanceElementData,
+					withHistory: false,
+				} );
+
+				return {
+					...doReturn,
+					detachedElement,
+					editedComponentOnDetach,
+					overridablePropsBeforeDetach,
+				};
+			},
+		},
+		{
+			title: __( 'Detach from Component', 'elementor' ),
+			subtitle: __( 'Instance detached', 'elementor' ),
+		}
+	);
+
+	return undoableDetach();
+}
+
+function extractInstanceOverrides( instanceContainer: NonNullable< ReturnType< typeof getContainer > > ) {
+	const settings = instanceContainer.model.toJSON().settings;
+	const componentInstance = componentInstancePropTypeUtil.extract(
+		settings?.component_instance as ComponentInstanceProp
+	);
+
+	const overrides = componentInstanceOverridesPropTypeUtil.extract( componentInstance?.overrides );
+
+	return overrides ?? [];
+}

package/src/utils/detach-component-instance/index.ts

@@ -0,0 +1 @@
+export { detachComponentInstance } from './detach-component-instance';

package/src/utils/detach-component-instance/regenerate-local-style-ids.ts

@@ -0,0 +1,53 @@
+import { generateElementId, type V1ElementData, type V1ElementSettingsProps } from '@elementor/editor-elements';
+import { classesPropTypeUtil, type ClassesPropValue, type PropValue } from '@elementor/editor-props';
+import { type StyleDefinition, type StyleDefinitionID } from '@elementor/editor-styles';
+
+// Ts version for atomic-widgets/assets/js/editor/utils/regenerate-local-style-ids.js
+export function regenerateLocalStyleIds( element: V1ElementData ): {
+	styles: Record< StyleDefinitionID, StyleDefinition > | undefined;
+	settings: V1ElementSettingsProps | undefined;
+} {
+	const originalStyles = element.styles;
+
+	if ( ! originalStyles || Object.keys( originalStyles ).length === 0 ) {
+		return { styles: undefined, settings: undefined };
+	}
+
+	const newStyles: Record< string, StyleDefinition > = {};
+	const styleIdMapping: Record< string, string > = {};
+
+	for ( const [ originalStyleId, style ] of Object.entries( originalStyles ) ) {
+		const newStyleId = generateLocalStyleId( element.id );
+
+		newStyles[ newStyleId ] = { ...style, id: newStyleId };
+		styleIdMapping[ originalStyleId ] = newStyleId;
+	}
+
+	const settings = element.settings;
+	if ( ! settings || Object.keys( settings ).length === 0 ) {
+		return { styles: newStyles, settings: undefined };
+	}
+
+	const updatedSettings = { ...settings };
+
+	for ( const [ propKey, propValue ] of Object.entries( updatedSettings ) ) {
+		if ( isClassesProp( propValue ) && propValue.value.length > 0 ) {
+			const updatedClasses = propValue.value.map( ( classId ) => styleIdMapping[ classId ] ?? classId );
+
+			updatedSettings[ propKey ] = classesPropTypeUtil.create( updatedClasses );
+		}
+	}
+
+	return {
+		styles: newStyles,
+		settings: updatedSettings,
+	};
+}
+
+function isClassesProp( prop: PropValue ): prop is ClassesPropValue {
+	return classesPropTypeUtil.isValid( prop );
+}
+
+function generateLocalStyleId( elementId: string ): string {
+	return `e-${ elementId }-${ generateElementId() }`;
+}

package/src/utils/detach-component-instance/resolve-detached-instance.ts

@@ -0,0 +1,94 @@
+import { generateElementId, type V1ElementData } from '@elementor/editor-elements';
+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 { componentOverridablePropTypeUtil } from '../../prop-types/component-overridable-prop-type';
+import { regenerateLocalStyleIds } from './regenerate-local-style-ids';
+import { resolveOverridableSettings } from './resolve-overridable-settings';
+
+/**
+ * Creates detached element from component instance
+ * by applying overrides, reverting overridables, and regenerating IDs.
+ * This is used when detaching a component instance from its origin component.
+ *
+ * The function goes through all nested elements recursively and:
+ * - Regenerates element IDs and local style IDs
+ * - Resolves overridable settings - applies all instance overrides to element settings,
+ * or replaces overridable with origin_value when no matching override exists.
+ *
+ * @param element   - The component's root element
+ * @param overrides - Array of overrides from the component instance
+ * @return A new element data with all overrides applied and new IDs
+ */
+export function resolveDetachedInstance(
+	element: V1ElementData,
+	overrides: ComponentInstanceOverride[]
+): V1ElementData {
+	const overrideMap = createOverrideMap( overrides );
+
+	return resolveElementRecursive( structuredClone( element ), overrideMap );
+}
+
+function resolveElementRecursive(
+	element: V1ElementData,
+	overrideMap: Map< string, ComponentInstanceOverrideProp >
+): V1ElementData {
+	element.id = generateElementId();
+
+	if ( element.styles ) {
+		const { styles, settings } = regenerateLocalStyleIds( element );
+
+		element.styles = styles;
+		if ( settings ) {
+			element.settings = { ...element.settings, ...settings };
+		}
+	}
+
+	if ( element.settings ) {
+		element.settings = resolveOverridableSettings( element, overrideMap );
+	}
+
+	if ( element.elements?.length ) {
+		element.elements = element.elements.map( ( child ) => resolveElementRecursive( child, overrideMap ) );
+	}
+
+	return element;
+}
+
+function createOverrideMap( overrides: ComponentInstanceOverride[] ): Map< string, ComponentInstanceOverrideProp > {
+	const map = new Map< string, ComponentInstanceOverrideProp >();
+
+	overrides.forEach( ( item ) => {
+		let override: ComponentInstanceOverrideProp | null = null;
+
+		if ( componentInstanceOverridePropTypeUtil.isValid( item ) ) {
+			override = item;
+		} else if ( componentOverridablePropTypeUtil.isValid( item ) ) {
+			override = getOverridableOverride( item );
+		}
+
+		if ( override ) {
+			const overrideKey = override.value.override_key;
+			map.set( overrideKey, override );
+		}
+	} );
+
+	return map;
+}
+
+export function getOverridableOverride( propValue: PropValue ): ComponentInstanceOverrideProp | null {
+	if ( ! componentOverridablePropTypeUtil.isValid( propValue ) ) {
+		return null;
+	}
+
+	const originValue = componentOverridablePropTypeUtil.extract( propValue )?.origin_value;
+	if ( ! componentInstanceOverridePropTypeUtil.isValid( originValue ) ) {
+		return null;
+	}
+
+	return originValue;
+}

package/src/utils/detach-component-instance/resolve-overridable-settings.ts

@@ -0,0 +1,121 @@
+import { type V1ElementData, type V1ElementSettingsProps } from '@elementor/editor-elements';
+import { type PropValue } from '@elementor/editor-props';
+
+import {
+	type ComponentInstanceOverrideProp,
+	componentInstanceOverridePropTypeUtil,
+} from '../../prop-types/component-instance-override-prop-type';
+import {
+	type ComponentInstanceProp,
+	componentInstancePropTypeUtil,
+} from '../../prop-types/component-instance-prop-type';
+import { componentOverridablePropTypeUtil } from '../../prop-types/component-overridable-prop-type';
+import { isComponentInstance } from '../is-component-instance';
+
+export function resolveOverridableSettings(
+	element: V1ElementData,
+	overrideMap: Map< string, ComponentInstanceOverrideProp >
+): V1ElementSettingsProps {
+	if ( isComponentInstance( { widgetType: element.widgetType, elType: element.elType } ) ) {
+		return resolveOverridableSettingsForComponentInstance( element, overrideMap );
+	}
+
+	return resolveOverridableSettingsForElement( element, overrideMap );
+}
+
+function resolveOverridableSettingsForElement(
+	element: V1ElementData,
+	overrideMap: Map< string, ComponentInstanceOverrideProp >
+): V1ElementSettingsProps {
+	const updatedSettings = element.settings ? { ...element.settings } : {};
+
+	for ( const [ settingKey, settingValue ] of Object.entries( element.settings ?? {} ) ) {
+		updatedSettings[ settingKey ] = resolvePropValue( settingValue, overrideMap );
+	}
+
+	return updatedSettings;
+}
+
+function resolveOverridableSettingsForComponentInstance(
+	element: V1ElementData,
+	overrideMap: Map< string, ComponentInstanceOverrideProp >
+): V1ElementSettingsProps {
+	const componentInstance = element.settings?.component_instance as ComponentInstanceProp | undefined;
+
+	if ( ! componentInstancePropTypeUtil.isValid( componentInstance ) ) {
+		return element.settings ?? {};
+	}
+
+	const instanceOverrides = componentInstance.value.overrides?.value;
+
+	if ( ! instanceOverrides?.length ) {
+		return element.settings ?? {};
+	}
+
+	const updatedOverrides = instanceOverrides.map( ( item ) =>
+		resolvePropValue( item, overrideMap, { isOverridableOverride: true } )
+	);
+
+	return {
+		...element.settings,
+		component_instance: {
+			...componentInstance,
+			value: {
+				...componentInstance.value,
+				overrides: {
+					...componentInstance.value.overrides,
+					value: updatedOverrides,
+				},
+			},
+		},
+	};
+}
+
+function resolvePropValue(
+	propValue: PropValue,
+	overrideMap: Map< string, ComponentInstanceOverrideProp >,
+	options?: { isOverridableOverride?: boolean }
+): PropValue | null {
+	const { isOverridableOverride = false } = options ?? {};
+
+	// if it's not an overridable, return the prop value as is
+	if ( ! componentOverridablePropTypeUtil.isValid( propValue ) ) {
+		return propValue;
+	}
+
+	const overridableKey = propValue.value.override_key;
+	const matchingOverride = overrideMap.get( overridableKey );
+
+	const originValue = componentOverridablePropTypeUtil.extract( propValue )?.origin_value;
+
+	// if no matching override, return the overridable's origin value
+	if ( ! matchingOverride ) {
+		return originValue;
+	}
+
+	if ( isOverridableOverride ) {
+		return resolveOverridableOverride( matchingOverride, originValue );
+	}
+
+	// for regular props, when there's a matching override, return the matching override value
+	const matchingOverrideValue = componentInstanceOverridePropTypeUtil.extract( matchingOverride )
+		?.override_value as PropValue | null;
+	return matchingOverrideValue;
+}
+
+function resolveOverridableOverride(
+	matchingOverride: ComponentInstanceOverrideProp,
+	originValue: PropValue
+): ComponentInstanceOverrideProp | null {
+	if ( ! originValue || ! componentInstanceOverridePropTypeUtil.isValid( originValue ) ) {
+		return null;
+	}
+
+	// for overridable overrides, we should create a new override with the matching override value
+	// but keep the origin value's override key and schema source, so they'll match the inner component.
+	return componentInstanceOverridePropTypeUtil.create( {
+		override_value: matchingOverride.value.override_value,
+		override_key: originValue.value.override_key,
+		schema_source: originValue.value.schema_source,
+	} );
+}