@elementor/editor-canvas 3.33.0-196 → 3.33.0-198

package/dist/index.d.mts

@@ -1,6 +1,7 @@
 import * as _elementor_editor_props from '@elementor/editor-props';
 import { AnyTransformable, PropTypeKey, PropsSchema, Props } from '@elementor/editor-props';
-import { V1ElementModelProps } from '@elementor/editor-elements';
+import { V1ElementModelProps, V1ElementConfig } from '@elementor/editor-elements';
+import { TwingArrayLoader, TwingEnvironment } from '@elementor/twing';
 
 declare function init(): void;
 
@@ -63,8 +64,14 @@ declare function createPropsResolver({ transformers, schema: initialSchema, onPr
 declare const startDragElementFromPanel: (props: Omit<V1ElementModelProps, "id">) => void;
 declare const endDragElementFromPanel: () => void;
 
+type DomRenderer = {
+    register: TwingArrayLoader['setTemplate'];
+    render: TwingEnvironment['render'];
+};
+
 type LegacyWindow = Window & {
     elementor: {
+        createBackboneElementsCollection: (children: unknown) => BackboneCollection<ElementModel>;
         modules: {
             elements: {
                 types: {
@@ -94,6 +101,8 @@ declare class ElementType {
 declare class ElementView {
     $el: JQueryElement;
     model: BackboneModel<ElementModel>;
+    collection: BackboneCollection<ElementModel>;
+    constructor(...args: unknown[]);
     onRender(...args: unknown[]): void;
     onDestroy(...args: unknown[]): void;
     attributes(): Record<string, unknown>;
@@ -108,11 +117,15 @@ declare class ElementView {
     renderOnChange(): void;
     render(): void;
     _renderTemplate(): void;
+    _renderChildren(): void;
+    attachBuffer(collectionView: this, buffer: DocumentFragment): void;
     triggerMethod(method: string): void;
     bindUIElements(): void;
     options?: {
         model: BackboneModel<ElementModel>;
     };
+    ui(): Record<string, unknown>;
+    events(): Record<string, unknown>;
 }
 type JQueryElement = {
     find: (selector: string) => JQueryElement;
@@ -123,6 +136,9 @@ type BackboneModel<Model extends object> = {
     get: <T extends keyof Model>(key: T) => Model[T];
     toJSON: () => ToJSON<Model>;
 };
+type BackboneCollection<Model extends object> = {
+    models: BackboneModel<Model>[];
+};
 type ElementModel = {
     id: string;
     settings: BackboneModel<Props>;
@@ -136,8 +152,17 @@ type ContextMenuGroup = {
     actions: unknown[];
 };
 
-declare function registerElementType(type: string, componentClass: () => typeof ElementType): void;
+type CreateTemplatedElementTypeOptions = {
+    type: string;
+    renderer: DomRenderer;
+    element: TemplatedElementConfig;
+};
+type TemplatedElementConfig = Required<Pick<V1ElementConfig, 'twig_templates' | 'twig_main_template' | 'atomic_props_schema' | 'base_styles_dictionary'>>;
+declare function createTemplatedElementView({ type, renderer, element, }: CreateTemplatedElementTypeOptions): typeof ElementView;
 
-declare function createElementViewClassDeclaration(): typeof ElementView;
+type ElementLegacyType = {
+    [key: string]: (options: CreateTemplatedElementTypeOptions) => typeof ElementType;
+};
+declare function registerElementType(type: string, elementTypeGenerator: ElementLegacyType[keyof ElementLegacyType]): void;
 
-export { ElementType, ElementView, type LegacyWindow, type PropsResolver, createElementViewClassDeclaration, createPropsResolver, createTransformer, createTransformersRegistry, endDragElementFromPanel, init, registerElementType, settingsTransformersRegistry, startDragElementFromPanel, styleTransformersRegistry };
+export { type CreateTemplatedElementTypeOptions, ElementType, ElementView, type LegacyWindow, type PropsResolver, createPropsResolver, createTemplatedElementView, createTransformer, createTransformersRegistry, endDragElementFromPanel, init, registerElementType, settingsTransformersRegistry, startDragElementFromPanel, styleTransformersRegistry };

package/dist/index.d.ts

@@ -1,6 +1,7 @@
 import * as _elementor_editor_props from '@elementor/editor-props';
 import { AnyTransformable, PropTypeKey, PropsSchema, Props } from '@elementor/editor-props';
-import { V1ElementModelProps } from '@elementor/editor-elements';
+import { V1ElementModelProps, V1ElementConfig } from '@elementor/editor-elements';
+import { TwingArrayLoader, TwingEnvironment } from '@elementor/twing';
 
 declare function init(): void;
 
@@ -63,8 +64,14 @@ declare function createPropsResolver({ transformers, schema: initialSchema, onPr
 declare const startDragElementFromPanel: (props: Omit<V1ElementModelProps, "id">) => void;
 declare const endDragElementFromPanel: () => void;
 
+type DomRenderer = {
+    register: TwingArrayLoader['setTemplate'];
+    render: TwingEnvironment['render'];
+};
+
 type LegacyWindow = Window & {
     elementor: {
+        createBackboneElementsCollection: (children: unknown) => BackboneCollection<ElementModel>;
         modules: {
             elements: {
                 types: {
@@ -94,6 +101,8 @@ declare class ElementType {
 declare class ElementView {
     $el: JQueryElement;
     model: BackboneModel<ElementModel>;
+    collection: BackboneCollection<ElementModel>;
+    constructor(...args: unknown[]);
     onRender(...args: unknown[]): void;
     onDestroy(...args: unknown[]): void;
     attributes(): Record<string, unknown>;
@@ -108,11 +117,15 @@ declare class ElementView {
     renderOnChange(): void;
     render(): void;
     _renderTemplate(): void;
+    _renderChildren(): void;
+    attachBuffer(collectionView: this, buffer: DocumentFragment): void;
     triggerMethod(method: string): void;
     bindUIElements(): void;
     options?: {
         model: BackboneModel<ElementModel>;
     };
+    ui(): Record<string, unknown>;
+    events(): Record<string, unknown>;
 }
 type JQueryElement = {
     find: (selector: string) => JQueryElement;
@@ -123,6 +136,9 @@ type BackboneModel<Model extends object> = {
     get: <T extends keyof Model>(key: T) => Model[T];
     toJSON: () => ToJSON<Model>;
 };
+type BackboneCollection<Model extends object> = {
+    models: BackboneModel<Model>[];
+};
 type ElementModel = {
     id: string;
     settings: BackboneModel<Props>;
@@ -136,8 +152,17 @@ type ContextMenuGroup = {
     actions: unknown[];
 };
 
-declare function registerElementType(type: string, componentClass: () => typeof ElementType): void;
+type CreateTemplatedElementTypeOptions = {
+    type: string;
+    renderer: DomRenderer;
+    element: TemplatedElementConfig;
+};
+type TemplatedElementConfig = Required<Pick<V1ElementConfig, 'twig_templates' | 'twig_main_template' | 'atomic_props_schema' | 'base_styles_dictionary'>>;
+declare function createTemplatedElementView({ type, renderer, element, }: CreateTemplatedElementTypeOptions): typeof ElementView;
 
-declare function createElementViewClassDeclaration(): typeof ElementView;
+type ElementLegacyType = {
+    [key: string]: (options: CreateTemplatedElementTypeOptions) => typeof ElementType;
+};
+declare function registerElementType(type: string, elementTypeGenerator: ElementLegacyType[keyof ElementLegacyType]): void;
 
-export { ElementType, ElementView, type LegacyWindow, type PropsResolver, createElementViewClassDeclaration, createPropsResolver, createTransformer, createTransformersRegistry, endDragElementFromPanel, init, registerElementType, settingsTransformersRegistry, startDragElementFromPanel, styleTransformersRegistry };
+export { type CreateTemplatedElementTypeOptions, ElementType, ElementView, type LegacyWindow, type PropsResolver, createPropsResolver, createTemplatedElementView, createTransformer, createTransformersRegistry, endDragElementFromPanel, init, registerElementType, settingsTransformersRegistry, startDragElementFromPanel, styleTransformersRegistry };

package/dist/index.js

@@ -30,8 +30,8 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/index.ts
 var index_exports = {};
 __export(index_exports, {
-  createElementViewClassDeclaration: () => createElementViewClassDeclaration,
   createPropsResolver: () => createPropsResolver,
+  createTemplatedElementView: () => createTemplatedElementView,
   createTransformer: () => createTransformer,
   createTransformersRegistry: () => createTransformersRegistry,
   endDragElementFromPanel: () => endDragElementFromPanel,
@@ -1182,26 +1182,21 @@ function createElementViewClassDeclaration() {
 }
 
 // src/legacy/create-templated-element-type.ts
-function createTemplatedElementType({ type, renderer, element }) {
+function createTemplatedElementType({
+  type,
+  renderer,
+  element
+}) {
   const legacyWindow = window;
-  Object.entries(element.twig_templates).forEach(([key, template]) => {
-    renderer.register(key, template);
-  });
-  const propsResolver = createPropsResolver({
-    transformers: settingsTransformersRegistry,
-    schema: element.atomic_props_schema
-  });
   return class extends legacyWindow.elementor.modules.elements.types.Widget {
     getType() {
       return type;
     }
     getView() {
-      return createTemplatedElementViewClassDeclaration({
+      return createTemplatedElementView({
         type,
         renderer,
-        propsResolver,
-        baseStylesDictionary: element.base_styles_dictionary,
-        templateKey: element.twig_main_template
+        element
       });
     }
   };
@@ -1209,16 +1204,30 @@ function createTemplatedElementType({ type, renderer, element }) {
 function canBeTemplated(element) {
   return !!(element.atomic_props_schema && element.twig_templates && element.twig_main_template && element.base_styles_dictionary);
 }
-function createTemplatedElementViewClassDeclaration({
+function createTemplatedElementView({
   type,
   renderer,
-  propsResolver: resolveProps,
-  templateKey,
-  baseStylesDictionary
+  element
 }) {
   const BaseView = createElementViewClassDeclaration();
+  const templateKey = element.twig_main_template;
+  const baseStylesDictionary = element.base_styles_dictionary;
+  Object.entries(element.twig_templates).forEach(([key, template]) => {
+    renderer.register(key, template);
+  });
+  const resolveProps = createPropsResolver({
+    transformers: settingsTransformersRegistry,
+    schema: element.atomic_props_schema
+  });
   return class extends BaseView {
     #abortController = null;
+    __renderChildren;
+    constructor(...args) {
+      super(...args);
+      this.__renderChildren = this._renderChildren;
+      this._renderChildren = () => {
+      };
+    }
     getTemplateType() {
       return "twig";
     }
@@ -1236,18 +1245,23 @@ function createTemplatedElementViewClassDeclaration({
           props: settings,
           signal
         });
-      }).then((resolvedSettings) => {
+      }).then((settings) => {
+        return this.afterSettingsResolve(settings);
+      }).then(async (settings) => {
         const context = {
           id: this.model.get("id"),
           type,
-          settings: resolvedSettings,
+          settings,
           base_styles: baseStylesDictionary
         };
         return renderer.render(templateKey, context);
-      }).then((html) => this.$el.html(html));
+      }).then((html) => this.$el.html(html)).then(() => this.__renderChildren());
       await process.execute();
       this.#afterRenderTemplate();
     }
+    afterSettingsResolve(settings) {
+      return settings;
+    }
     // Emulating the original Marionette behavior.
     #beforeRenderTemplate() {
       this.triggerMethod("before:render:template");
@@ -1261,8 +1275,8 @@ function createTemplatedElementViewClassDeclaration({
 
 // src/legacy/init-legacy-views.ts
 var elementsLegacyTypes = {};
-function registerElementType(type, componentClass) {
-  elementsLegacyTypes[type] = componentClass;
+function registerElementType(type, elementTypeGenerator) {
+  elementsLegacyTypes[type] = elementTypeGenerator;
 }
 function initLegacyViews() {
   (0, import_editor_v1_adapters5.__privateListenTo)((0, import_editor_v1_adapters5.v1ReadyEvent)(), () => {
@@ -1273,12 +1287,14 @@ function initLegacyViews() {
       if (!element.atomic) {
         return;
       }
-      if (elementsLegacyTypes[type]) {
-        const registeredElementTypeClass = elementsLegacyTypes[type]();
-        legacyWindow.elementor.elementsManager.registerElementType(new registeredElementTypeClass());
-        return;
+      let ElementType;
+      if (!!elementsLegacyTypes[type] && canBeTemplated(element)) {
+        ElementType = elementsLegacyTypes[type]({ type, renderer, element });
+      } else if (canBeTemplated(element)) {
+        ElementType = createTemplatedElementType({ type, renderer, element });
+      } else {
+        ElementType = createElementType(type);
       }
-      const ElementType = canBeTemplated(element) ? createTemplatedElementType({ type, renderer, element }) : createElementType(type);
       legacyWindow.elementor.elementsManager.registerElementType(new ElementType());
     });
   });
@@ -1656,8 +1672,8 @@ var getLegacyPanelElementView = ({ settings, ...rest }) => {
 };
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  createElementViewClassDeclaration,
   createPropsResolver,
+  createTemplatedElementView,
   createTransformer,
   createTransformersRegistry,
   endDragElementFromPanel,

package/dist/index.mjs

@@ -1144,26 +1144,21 @@ function createElementViewClassDeclaration() {
 }
 
 // src/legacy/create-templated-element-type.ts
-function createTemplatedElementType({ type, renderer, element }) {
+function createTemplatedElementType({
+  type,
+  renderer,
+  element
+}) {
   const legacyWindow = window;
-  Object.entries(element.twig_templates).forEach(([key, template]) => {
-    renderer.register(key, template);
-  });
-  const propsResolver = createPropsResolver({
-    transformers: settingsTransformersRegistry,
-    schema: element.atomic_props_schema
-  });
   return class extends legacyWindow.elementor.modules.elements.types.Widget {
     getType() {
       return type;
     }
     getView() {
-      return createTemplatedElementViewClassDeclaration({
+      return createTemplatedElementView({
         type,
         renderer,
-        propsResolver,
-        baseStylesDictionary: element.base_styles_dictionary,
-        templateKey: element.twig_main_template
+        element
       });
     }
   };
@@ -1171,16 +1166,30 @@ function createTemplatedElementType({ type, renderer, element }) {
 function canBeTemplated(element) {
   return !!(element.atomic_props_schema && element.twig_templates && element.twig_main_template && element.base_styles_dictionary);
 }
-function createTemplatedElementViewClassDeclaration({
+function createTemplatedElementView({
   type,
   renderer,
-  propsResolver: resolveProps,
-  templateKey,
-  baseStylesDictionary
+  element
 }) {
   const BaseView = createElementViewClassDeclaration();
+  const templateKey = element.twig_main_template;
+  const baseStylesDictionary = element.base_styles_dictionary;
+  Object.entries(element.twig_templates).forEach(([key, template]) => {
+    renderer.register(key, template);
+  });
+  const resolveProps = createPropsResolver({
+    transformers: settingsTransformersRegistry,
+    schema: element.atomic_props_schema
+  });
   return class extends BaseView {
     #abortController = null;
+    __renderChildren;
+    constructor(...args) {
+      super(...args);
+      this.__renderChildren = this._renderChildren;
+      this._renderChildren = () => {
+      };
+    }
     getTemplateType() {
       return "twig";
     }
@@ -1198,18 +1207,23 @@ function createTemplatedElementViewClassDeclaration({
           props: settings,
           signal
         });
-      }).then((resolvedSettings) => {
+      }).then((settings) => {
+        return this.afterSettingsResolve(settings);
+      }).then(async (settings) => {
         const context = {
           id: this.model.get("id"),
           type,
-          settings: resolvedSettings,
+          settings,
           base_styles: baseStylesDictionary
         };
         return renderer.render(templateKey, context);
-      }).then((html) => this.$el.html(html));
+      }).then((html) => this.$el.html(html)).then(() => this.__renderChildren());
       await process.execute();
       this.#afterRenderTemplate();
     }
+    afterSettingsResolve(settings) {
+      return settings;
+    }
     // Emulating the original Marionette behavior.
     #beforeRenderTemplate() {
       this.triggerMethod("before:render:template");
@@ -1223,8 +1237,8 @@ function createTemplatedElementViewClassDeclaration({
 
 // src/legacy/init-legacy-views.ts
 var elementsLegacyTypes = {};
-function registerElementType(type, componentClass) {
-  elementsLegacyTypes[type] = componentClass;
+function registerElementType(type, elementTypeGenerator) {
+  elementsLegacyTypes[type] = elementTypeGenerator;
 }
 function initLegacyViews() {
   __privateListenTo(v1ReadyEvent(), () => {
@@ -1235,12 +1249,14 @@ function initLegacyViews() {
       if (!element.atomic) {
         return;
       }
-      if (elementsLegacyTypes[type]) {
-        const registeredElementTypeClass = elementsLegacyTypes[type]();
-        legacyWindow.elementor.elementsManager.registerElementType(new registeredElementTypeClass());
-        return;
+      let ElementType;
+      if (!!elementsLegacyTypes[type] && canBeTemplated(element)) {
+        ElementType = elementsLegacyTypes[type]({ type, renderer, element });
+      } else if (canBeTemplated(element)) {
+        ElementType = createTemplatedElementType({ type, renderer, element });
+      } else {
+        ElementType = createElementType(type);
       }
-      const ElementType = canBeTemplated(element) ? createTemplatedElementType({ type, renderer, element }) : createElementType(type);
       legacyWindow.elementor.elementsManager.registerElementType(new ElementType());
     });
   });
@@ -1634,8 +1650,8 @@ var getLegacyPanelElementView = ({ settings, ...rest }) => {
   return { model: elementModel };
 };
 export {
-  createElementViewClassDeclaration,
   createPropsResolver,
+  createTemplatedElementView,
   createTransformer,
   createTransformersRegistry,
   endDragElementFromPanel,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@elementor/editor-canvas",
   "description": "Elementor Editor Canvas",
-  "version": "3.33.0-196",
+  "version": "3.33.0-198",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -37,19 +37,19 @@
     "react-dom": "^18.3.1"
   },
   "dependencies": {
-    "@elementor/editor": "3.33.0-196",
-    "@elementor/editor-notifications": "3.33.0-196",
-    "@elementor/editor-documents": "3.33.0-196",
-    "@elementor/editor-elements": "3.33.0-196",
-    "@elementor/editor-props": "3.33.0-196",
-    "@elementor/editor-responsive": "3.33.0-196",
-    "@elementor/editor-styles": "3.33.0-196",
-    "@elementor/editor-styles-repository": "3.33.0-196",
-    "@elementor/editor-v1-adapters": "3.33.0-196",
-    "@elementor/twing": "3.33.0-196",
+    "@elementor/editor": "3.33.0-198",
+    "@elementor/editor-notifications": "3.33.0-198",
+    "@elementor/editor-documents": "3.33.0-198",
+    "@elementor/editor-elements": "3.33.0-198",
+    "@elementor/editor-props": "3.33.0-198",
+    "@elementor/editor-responsive": "3.33.0-198",
+    "@elementor/editor-styles": "3.33.0-198",
+    "@elementor/editor-styles-repository": "3.33.0-198",
+    "@elementor/editor-v1-adapters": "3.33.0-198",
+    "@elementor/twing": "3.33.0-198",
     "@elementor/ui": "1.36.12",
-    "@elementor/utils": "3.33.0-196",
-    "@elementor/wp-media": "3.33.0-196",
+    "@elementor/utils": "3.33.0-198",
+    "@elementor/wp-media": "3.33.0-198",
     "@floating-ui/react": "^0.27.5",
     "@wordpress/i18n": "^5.13.0"
   },

package/src/index.ts

@@ -7,5 +7,8 @@ export { createTransformersRegistry } from './transformers/create-transformers-r
 export { createPropsResolver, type PropsResolver } from './renderers/create-props-resolver';
 export { startDragElementFromPanel, endDragElementFromPanel } from './sync/drag-element-from-panel';
 export { registerElementType } from './legacy/init-legacy-views';
-export { createElementViewClassDeclaration } from './legacy/create-element-type';
+export {
+	createTemplatedElementView,
+	type CreateTemplatedElementTypeOptions,
+} from './legacy/create-templated-element-type';
 export * from './legacy/types';

package/src/legacy/create-templated-element-type.ts

@@ -1,13 +1,13 @@
 import type { V1ElementConfig } from '@elementor/editor-elements';
 
 import { type DomRenderer } from '../renderers/create-dom-renderer';
-import { createPropsResolver, type PropsResolver } from '../renderers/create-props-resolver';
+import { createPropsResolver } from '../renderers/create-props-resolver';
 import { settingsTransformersRegistry } from '../settings-transformers-registry';
 import { signalizedProcess } from '../utils/signalized-process';
 import { createElementViewClassDeclaration } from './create-element-type';
 import { type ElementType, type ElementView, type LegacyWindow } from './types';
 
-type CreateTypeOptions = {
+export type CreateTemplatedElementTypeOptions = {
 	type: string;
 	renderer: DomRenderer;
 	element: TemplatedElementConfig;
@@ -17,30 +17,23 @@ type TemplatedElementConfig = Required<
 	Pick< V1ElementConfig, 'twig_templates' | 'twig_main_template' | 'atomic_props_schema' | 'base_styles_dictionary' >
 >;
 
-export function createTemplatedElementType( { type, renderer, element }: CreateTypeOptions ): typeof ElementType {
+export function createTemplatedElementType( {
+	type,
+	renderer,
+	element,
+}: CreateTemplatedElementTypeOptions ): typeof ElementType {
 	const legacyWindow = window as unknown as LegacyWindow;
 
-	Object.entries( element.twig_templates ).forEach( ( [ key, template ] ) => {
-		renderer.register( key, template );
-	} );
-
-	const propsResolver = createPropsResolver( {
-		transformers: settingsTransformersRegistry,
-		schema: element.atomic_props_schema,
-	} );
-
 	return class extends legacyWindow.elementor.modules.elements.types.Widget {
 		getType() {
 			return type;
 		}
 
 		getView() {
-			return createTemplatedElementViewClassDeclaration( {
+			return createTemplatedElementView( {
 				type,
 				renderer,
-				propsResolver,
-				baseStylesDictionary: element.base_styles_dictionary,
-				templateKey: element.twig_main_template,
+				element,
 			} );
 		}
 	};
@@ -55,26 +48,41 @@ export function canBeTemplated( element: Partial< TemplatedElementConfig > ): el
 	);
 }
 
-type CreateViewOptions = {
-	type: string;
-	renderer: DomRenderer;
-	propsResolver: PropsResolver;
-	templateKey: string;
-	baseStylesDictionary: Record< string, string >;
-};
-
-function createTemplatedElementViewClassDeclaration( {
+export function createTemplatedElementView( {
 	type,
 	renderer,
-	propsResolver: resolveProps,
-	templateKey,
-	baseStylesDictionary,
-}: CreateViewOptions ): typeof ElementView {
+	element,
+}: CreateTemplatedElementTypeOptions ): typeof ElementView {
 	const BaseView = createElementViewClassDeclaration();
 
+	const templateKey = element.twig_main_template;
+
+	const baseStylesDictionary = element.base_styles_dictionary;
+
+	Object.entries( element.twig_templates ).forEach( ( [ key, template ] ) => {
+		renderer.register( key, template );
+	} );
+
+	const resolveProps = createPropsResolver( {
+		transformers: settingsTransformersRegistry,
+		schema: element.atomic_props_schema,
+	} );
+
 	return class extends BaseView {
 		#abortController: AbortController | null = null;
 
+		__renderChildren: () => void;
+
+		constructor( ...args: unknown[] ) {
+			super( ...args );
+
+			// This override blocks the regular usage of `_renderChildren` method,
+			// and assigns it to another method which will be called later in the `_renderTemplate` method.
+			this.__renderChildren = this._renderChildren;
+
+			this._renderChildren = () => {};
+		}
+
 		getTemplateType() {
 			return 'twig';
 		}
@@ -99,24 +107,32 @@ function createTemplatedElementViewClassDeclaration( {
 						signal,
 					} );
 				} )
-				.then( ( resolvedSettings ) => {
+				.then( ( settings ) => {
+					return this.afterSettingsResolve( settings );
+				} )
+				.then( async ( settings ) => {
 					// Same as the Backend.
 					const context = {
 						id: this.model.get( 'id' ),
 						type,
-						settings: resolvedSettings,
+						settings,
 						base_styles: baseStylesDictionary,
 					};
 
 					return renderer.render( templateKey, context );
 				} )
-				.then( ( html ) => this.$el.html( html ) );
+				.then( ( html ) => this.$el.html( html ) )
+				.then( () => this.__renderChildren() );
 
 			await process.execute();
 
 			this.#afterRenderTemplate();
 		}
 
+		afterSettingsResolve( settings: { [ key: string ]: unknown } ) {
+			return settings;
+		}
+
 		// Emulating the original Marionette behavior.
 		#beforeRenderTemplate() {
 			this.triggerMethod( 'before:render:template' );

package/src/legacy/init-legacy-views.ts

@@ -3,16 +3,23 @@ import { __privateListenTo, v1ReadyEvent } from '@elementor/editor-v1-adapters';
 
 import { createDomRenderer } from '../renderers/create-dom-renderer';
 import { createElementType } from './create-element-type';
-import { canBeTemplated, createTemplatedElementType } from './create-templated-element-type';
+import {
+	canBeTemplated,
+	createTemplatedElementType,
+	type CreateTemplatedElementTypeOptions,
+} from './create-templated-element-type';
 import type { ElementType, LegacyWindow } from './types';
 
 type ElementLegacyType = {
-	[ key: string ]: () => typeof ElementType;
+	[ key: string ]: ( options: CreateTemplatedElementTypeOptions ) => typeof ElementType;
 };
 export const elementsLegacyTypes: ElementLegacyType = {};
 
-export function registerElementType( type: string, componentClass: () => typeof ElementType ) {
-	elementsLegacyTypes[ type ] = componentClass;
+export function registerElementType(
+	type: string,
+	elementTypeGenerator: ElementLegacyType[ keyof ElementLegacyType ]
+) {
+	elementsLegacyTypes[ type ] = elementTypeGenerator;
 }
 
 export function initLegacyViews() {
@@ -27,15 +34,15 @@ export function initLegacyViews() {
 				return;
 			}
 
-			if ( elementsLegacyTypes[ type ] ) {
-				const registeredElementTypeClass = elementsLegacyTypes[ type ]();
-				legacyWindow.elementor.elementsManager.registerElementType( new registeredElementTypeClass() );
-				return;
-			}
+			let ElementType;
 
-			const ElementType = canBeTemplated( element )
-				? createTemplatedElementType( { type, renderer, element } )
-				: createElementType( type );
+			if ( !! elementsLegacyTypes[ type ] && canBeTemplated( element ) ) {
+				ElementType = elementsLegacyTypes[ type ]( { type, renderer, element } );
+			} else if ( canBeTemplated( element ) ) {
+				ElementType = createTemplatedElementType( { type, renderer, element } );
+			} else {
+				ElementType = createElementType( type );
+			}
 
 			legacyWindow.elementor.elementsManager.registerElementType( new ElementType() );
 		} );

package/src/legacy/types.ts

@@ -2,6 +2,8 @@ import { type Props } from '@elementor/editor-props';
 
 export type LegacyWindow = Window & {
 	elementor: {
+		createBackboneElementsCollection: ( children: unknown ) => BackboneCollection< ElementModel >;
+
 		modules: {
 			elements: {
 				types: {
@@ -36,6 +38,10 @@ export declare class ElementView {
 
 	model: BackboneModel< ElementModel >;
 
+	collection: BackboneCollection< ElementModel >;
+
+	constructor( ...args: unknown[] );
+
 	onRender( ...args: unknown[] ): void;
 
 	onDestroy( ...args: unknown[] ): void;
@@ -61,6 +67,10 @@ export declare class ElementView {
 
 	_renderTemplate(): void;
 
+	_renderChildren(): void;
+
+	attachBuffer( collectionView: this, buffer: DocumentFragment ): void;
+
 	triggerMethod( method: string ): void;
 
 	bindUIElements(): void;
@@ -68,6 +78,10 @@ export declare class ElementView {
 	options?: {
 		model: BackboneModel< ElementModel >;
 	};
+
+	ui(): Record< string, unknown >;
+
+	events(): Record< string, unknown >;
 }
 
 type JQueryElement = {
@@ -81,6 +95,10 @@ type BackboneModel< Model extends object > = {
 	toJSON: () => ToJSON< Model >;
 };
 
+type BackboneCollection< Model extends object > = {
+	models: BackboneModel< Model >[];
+};
+
 type ElementModel = {
 	id: string;
 	settings: BackboneModel< Props >;