@elementor/editor-components 3.35.0-356 → 3.35.0-358

package/package.json

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

package/src/api.ts

@@ -6,13 +6,18 @@ import { type DocumentSaveStatus, type OverridableProps, type PublishedComponent
 
 const BASE_URL = 'elementor/v1/components';
 
+export type ComponentItems = Array< {
+	uid: string;
+	title: string;
+	elements: V1ElementData[];
+	settings?: {
+		overridable_props?: OverridableProps;
+	};
+} >;
+
 export type CreateComponentPayload = {
 	status: DocumentSaveStatus;
-	items: Array< {
-		uid: string;
-		title: string;
-		elements: V1ElementData[];
-	} >;
+	items: ComponentItems;
 };
 
 type ComponentLockStatusResponse = {
@@ -24,6 +29,19 @@ type GetComponentResponse = Array< PublishedComponent >;
 
 export type CreateComponentResponse = Record< string, number >;
 
+export type ValidateComponentsPayload = {
+	items: ComponentItems;
+};
+
+export type ValidateComponentsResponse = {
+	code: string;
+	message: string;
+	data: {
+		status: number;
+		meta: Record< string, unknown >;
+	};
+};
+
 export const getParams = ( id: number ) => ( {
 	action: 'get_document_config',
 	unique_id: `document-config-${ id }`,
@@ -86,4 +104,8 @@ export const apiClient = {
 				}
 			)
 			.then( ( res ) => res.data.data ),
+	validate: async ( payload: ValidateComponentsPayload ) =>
+		await httpService()
+			.post< HttpResponse< ValidateComponentsResponse > >( `${ BASE_URL }/create-validate`, payload )
+			.then( ( res ) => res.data ),
 };

package/src/component-instance-transformer.ts

@@ -1,24 +1,48 @@
-import { createTransformer } from '@elementor/editor-canvas';
+import { createTransformer, RenderContext } from '@elementor/editor-canvas';
 import { __getState as getState } from '@elementor/store';
 
 import { selectUnpublishedComponents } from './store/store';
+import { type ComponentOverridePropValue } from './types';
 import { getComponentDocumentData } from './utils/component-document-data';
 
+type ComponentInstanceContext = {
+	overrides?: Record< string, unknown >;
+};
+
+export const componentInstanceContext = new RenderContext< ComponentInstanceContext >( 'component-instance', {
+	overrides: {},
+} );
+
 export const componentInstanceTransformer = createTransformer(
-	async ( { component_id: id }: { component_id: number | string } ) => {
+	async ( {
+		component_id: id,
+		overrides: overridesValue,
+	}: {
+		component_id: number | string;
+		overrides?: ComponentOverridePropValue[];
+	} ) => {
 		const unpublishedComponents = selectUnpublishedComponents( getState() );
 
 		const unpublishedComponent = unpublishedComponents.find( ( { uid } ) => uid === id );
+
+		const overrides = overridesValue?.reduce( ( acc, override ) => ( { ...acc, ...override } ), {} );
+
 		if ( unpublishedComponent ) {
-			return structuredClone( unpublishedComponent.elements );
+			return {
+				elements: structuredClone( unpublishedComponent.elements ),
+				overrides,
+			};
 		}
 
 		if ( typeof id !== 'number' ) {
-			throw new Error( `Component ID "${ id }" not found.` );
+			throw new Error( `Component ID "${ id }" not valid.` );
 		}
 
 		const data = await getComponentDocumentData( id );
 
-		return data?.elements ?? [];
+		return {
+			elements: data?.elements ?? [],
+			overrides,
+		};
 	}
 );

package/src/component-overridable-transformer.ts

@@ -1,8 +1,55 @@
-import { createTransformer } from '@elementor/editor-canvas';
+import { createTransformer, settingsTransformersRegistry } from '@elementor/editor-canvas';
+import { type PropValue, type TransformablePropValue } from '@elementor/editor-props';
 
+import { componentInstanceContext } from './component-instance-transformer';
 import { type ComponentOverridable } from './types';
 
-export const componentOverridableTransformer = createTransformer( ( value: ComponentOverridable ) => {
-	// todo: render component overrides
-	return value.origin_value;
-} );
+export const componentOverridableTransformer = createTransformer(
+	( value: ComponentOverridable, options: { key: string } ) => {
+		const { overrides } = componentInstanceContext.get();
+
+		const overrideValue = overrides?.[ value.override_key ];
+
+		if ( overrideValue ) {
+			const isOverride = isOriginValueOverride( value.origin_value );
+
+			if ( isOverride ) {
+				return transformOverride( value, options, overrideValue );
+			}
+
+			return overrideValue;
+		}
+
+		return value.origin_value;
+	}
+);
+
+function transformOverride(
+	value: ComponentOverridable,
+	options: {
+		key: string;
+	},
+	overrideValue: PropValue
+) {
+	const transformer = settingsTransformersRegistry.get( 'override' );
+
+	if ( ! transformer ) {
+		return null;
+	}
+
+	const transformedValue = transformer( value.origin_value.value, options );
+
+	if ( ! transformedValue ) {
+		return null;
+	}
+
+	const [ key ] = Object.keys( transformedValue as Record< string, unknown > );
+
+	return {
+		[ key ]: overrideValue,
+	};
+}
+
+function isOriginValueOverride( originValue: TransformablePropValue< string > ): boolean {
+	return originValue.$$type === 'override';
+}

package/src/component-override-transformer.ts

@@ -0,0 +1,9 @@
+import { createTransformer } from '@elementor/editor-canvas';
+
+import { type ComponentOverridePropValue } from './types';
+
+export const componentOverrideTransformer = createTransformer( ( override: ComponentOverridePropValue ) => {
+	const { override_key: key, override_value: overrideValue } = override;
+
+	return { [ key ]: overrideValue };
+} );

package/src/components/create-component-form/utils/replace-element-with-component.ts

@@ -1,9 +1,12 @@
 import { replaceElement, type V1ElementData, type V1ElementModelProps } from '@elementor/editor-elements';
 
+import { type OverridableProps } from '../../../types';
+
 type ComponentInstanceParams = {
 	id?: number;
 	name: string;
 	uid: string;
+	overridableProps?: OverridableProps;
 };
 
 export const replaceElementWithComponent = ( element: V1ElementData, component: ComponentInstanceParams ) => {
@@ -28,6 +31,7 @@ export const createComponentModel = ( component: ComponentInstanceParams ): Omit
 					},
 				},
 			},
+			overridable_props: component.overridableProps,
 		},
 		editor_settings: {
 			title: component.name,

package/src/create-component-type.ts

@@ -91,9 +91,16 @@ function createComponentView(
 		}
 
 		afterSettingsResolve( settings: { [ key: string ]: unknown } ) {
-			if ( settings.component_instance ) {
+			const componentInstance = settings.component_instance as
+				| {
+						overrides?: Record< string, unknown >;
+						elements?: unknown[];
+				  }
+				| undefined;
+
+			if ( componentInstance ) {
 				this.collection = this.legacyWindow.elementor.createBackboneElementsCollection(
-					settings.component_instance
+					componentInstance.elements
 				);
 
 				this.collection.models.forEach( setInactiveRecursively );

package/src/init.ts

@@ -21,6 +21,7 @@ import { __ } from '@wordpress/i18n';
 
 import { componentInstanceTransformer } from './component-instance-transformer';
 import { componentOverridableTransformer } from './component-overridable-transformer';
+import { componentOverrideTransformer } from './component-override-transformer';
 import { ComponentPanelHeader } from './components/component-panel-header/component-panel-header';
 import { Components } from './components/components-tab/components';
 import { COMPONENT_DOCUMENT_TYPE } from './components/consts';
@@ -119,6 +120,7 @@ export function init() {
 
 	settingsTransformersRegistry.register( 'component-instance', componentInstanceTransformer );
 	settingsTransformersRegistry.register( 'overridable', componentOverridableTransformer );
+	settingsTransformersRegistry.register( 'override', componentOverrideTransformer );
 
 	initMcp();
 }