@elementor/editor-canvas 4.4.0-1088 → 4.4.0-1089

package/dist/index.d.mts

@@ -196,6 +196,7 @@ type ElementModel = {
     elType: string;
     settings: BackboneModel<Props>;
     editor_settings: Record<string, unknown>;
+    styles?: V1ElementModelProps['styles'];
     widgetType: string;
     editSettings?: BackboneModel<{
         inactive?: boolean;

package/dist/index.d.ts

@@ -196,6 +196,7 @@ type ElementModel = {
     elType: string;
     settings: BackboneModel<Props>;
     editor_settings: Record<string, unknown>;
+    styles?: V1ElementModelProps['styles'];
     widgetType: string;
     editSettings?: BackboneModel<{
         inactive?: boolean;

package/dist/index.js

@@ -3022,6 +3022,7 @@ function createTemplatedElementView({
 }
 
 // src/legacy/create-nested-templated-element-type.ts
+var STYLES_REFERENCE_UNTRACKED = /* @__PURE__ */ Symbol("styles-reference-untracked");
 function canBeNestedTemplated(element) {
   return canBeTemplated(element) && "support_nesting" in element && !!element.support_nesting;
 }
@@ -3081,6 +3082,7 @@ function createNestedTemplatedElementView({
   return AtomicElementBaseView.extend({
     _abortController: null,
     _lastResolvedSettingsHash: null,
+    _lastRenderedStyles: STYLES_REFERENCE_UNTRACKED,
     _domUpdateWasSkipped: false,
     template: false,
     attributes() {
@@ -3117,6 +3119,23 @@ function createNestedTemplatedElementView({
         this._initAlpine();
       });
       this.model.trigger("render:complete");
+      this._notifyStylesChanged();
+    },
+    // `document/elements/create` fires before the nested template has fully painted, so the
+    // styles provider rebuilds CSS too early and misses the new local class IDs. Dispatching
+    // ELEMENT_STYLE_CHANGE_EVENT here — after the template and all children are in the DOM —
+    // gives the provider a second chance to regenerate CSS against the live class names.
+    //
+    // The reference-equality guard prevents a parent re-render from emitting one event per
+    // unchanged descendant. Use a sentinel for the initial state — otherwise elements with no
+    // local styles (undefined === undefined) would never notify, and descendants like e-heading
+    // that rely on this post-paint refresh would lose their CSS after detach.
+    _notifyStylesChanged() {
+      const styles = this.model.get("styles");
+      if (this._lastRenderedStyles !== STYLES_REFERENCE_UNTRACKED && styles === this._lastRenderedStyles) {
+        return;
+      }
+      this._lastRenderedStyles = styles;
       window.dispatchEvent(new CustomEvent(import_editor_elements6.ELEMENT_STYLE_CHANGE_EVENT));
     },
     async _renderTemplate() {

package/dist/index.mjs

@@ -2982,6 +2982,7 @@ function createTemplatedElementView({
 }
 
 // src/legacy/create-nested-templated-element-type.ts
+var STYLES_REFERENCE_UNTRACKED = /* @__PURE__ */ Symbol("styles-reference-untracked");
 function canBeNestedTemplated(element) {
   return canBeTemplated(element) && "support_nesting" in element && !!element.support_nesting;
 }
@@ -3041,6 +3042,7 @@ function createNestedTemplatedElementView({
   return AtomicElementBaseView.extend({
     _abortController: null,
     _lastResolvedSettingsHash: null,
+    _lastRenderedStyles: STYLES_REFERENCE_UNTRACKED,
     _domUpdateWasSkipped: false,
     template: false,
     attributes() {
@@ -3077,6 +3079,23 @@ function createNestedTemplatedElementView({
         this._initAlpine();
       });
       this.model.trigger("render:complete");
+      this._notifyStylesChanged();
+    },
+    // `document/elements/create` fires before the nested template has fully painted, so the
+    // styles provider rebuilds CSS too early and misses the new local class IDs. Dispatching
+    // ELEMENT_STYLE_CHANGE_EVENT here — after the template and all children are in the DOM —
+    // gives the provider a second chance to regenerate CSS against the live class names.
+    //
+    // The reference-equality guard prevents a parent re-render from emitting one event per
+    // unchanged descendant. Use a sentinel for the initial state — otherwise elements with no
+    // local styles (undefined === undefined) would never notify, and descendants like e-heading
+    // that rely on this post-paint refresh would lose their CSS after detach.
+    _notifyStylesChanged() {
+      const styles = this.model.get("styles");
+      if (this._lastRenderedStyles !== STYLES_REFERENCE_UNTRACKED && styles === this._lastRenderedStyles) {
+        return;
+      }
+      this._lastRenderedStyles = styles;
       window.dispatchEvent(new CustomEvent(ELEMENT_STYLE_CHANGE_EVENT2));
     },
     async _renderTemplate() {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@elementor/editor-canvas",
   "description": "Elementor Editor Canvas",
-  "version": "4.4.0-1088",
+  "version": "4.4.0-1089",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -37,26 +37,26 @@
     "react-dom": "^18.3.1"
   },
   "dependencies": {
-    "@elementor/editor": "4.4.0-1088",
-    "@elementor/editor-controls": "4.4.0-1088",
-    "@elementor/editor-documents": "4.4.0-1088",
-    "@elementor/editor-elements": "4.4.0-1088",
-    "@elementor/editor-interactions": "4.4.0-1088",
-    "@elementor/editor-mcp": "4.4.0-1088",
-    "@elementor/editor-notifications": "4.4.0-1088",
-    "@elementor/editor-props": "4.4.0-1088",
-    "@elementor/editor-responsive": "4.4.0-1088",
-    "@elementor/editor-styles": "4.4.0-1088",
-    "@elementor/editor-styles-repository": "4.4.0-1088",
-    "@elementor/editor-ui": "4.4.0-1088",
-    "@elementor/editor-v1-adapters": "4.4.0-1088",
-    "@elementor/events": "4.4.0-1088",
-    "@elementor/http-client": "4.4.0-1088",
-    "@elementor/schema": "4.4.0-1088",
-    "@elementor/twing": "4.4.0-1088",
+    "@elementor/editor": "4.4.0-1089",
+    "@elementor/editor-controls": "4.4.0-1089",
+    "@elementor/editor-documents": "4.4.0-1089",
+    "@elementor/editor-elements": "4.4.0-1089",
+    "@elementor/editor-interactions": "4.4.0-1089",
+    "@elementor/editor-mcp": "4.4.0-1089",
+    "@elementor/editor-notifications": "4.4.0-1089",
+    "@elementor/editor-props": "4.4.0-1089",
+    "@elementor/editor-responsive": "4.4.0-1089",
+    "@elementor/editor-styles": "4.4.0-1089",
+    "@elementor/editor-styles-repository": "4.4.0-1089",
+    "@elementor/editor-ui": "4.4.0-1089",
+    "@elementor/editor-v1-adapters": "4.4.0-1089",
+    "@elementor/events": "4.4.0-1089",
+    "@elementor/http-client": "4.4.0-1089",
+    "@elementor/schema": "4.4.0-1089",
+    "@elementor/twing": "4.4.0-1089",
     "@elementor/ui": "1.37.5",
-    "@elementor/utils": "4.4.0-1088",
-    "@elementor/wp-media": "4.4.0-1088",
+    "@elementor/utils": "4.4.0-1089",
+    "@elementor/wp-media": "4.4.0-1089",
     "@floating-ui/react": "^0.27.5",
     "@wordpress/i18n": "^5.13.0",
     "dompurify": "^3.2.6"

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

@@ -12,7 +12,13 @@ import {
 	setupTwigRenderer,
 	waitForChildrenToComplete,
 } from './twig-rendering-utils';
-import { type ElementType, type ElementView, type LegacyWindow, type NestedTemplatedElementViewClass } from './types';
+import {
+	type ElementModel,
+	type ElementType,
+	type ElementView,
+	type LegacyWindow,
+	type NestedTemplatedElementViewClass,
+} from './types';
 
 export type NestedTemplatedElementConfig = TemplatedElementConfig & {
 	allowed_child_types?: string[];
@@ -21,6 +27,8 @@ export type NestedTemplatedElementConfig = TemplatedElementConfig & {
 
 export type ModelExtensions = Record< string, unknown >;
 
+const STYLES_REFERENCE_UNTRACKED = Symbol( 'styles-reference-untracked' );
+
 export type CreateNestedTemplatedElementTypeOptions = {
 	type: string;
 	renderer: DomRenderer;
@@ -108,6 +116,7 @@ export function createNestedTemplatedElementView( {
 	return AtomicElementBaseView.extend( {
 		_abortController: null as AbortController | null,
 		_lastResolvedSettingsHash: null as string | null,
+		_lastRenderedStyles: STYLES_REFERENCE_UNTRACKED as typeof STYLES_REFERENCE_UNTRACKED | ElementModel[ 'styles' ],
 		_domUpdateWasSkipped: false,
 
 		template: false,
@@ -164,6 +173,27 @@ export function createNestedTemplatedElementView( {
 			} );
 
 			this.model.trigger( 'render:complete' );
+			this._notifyStylesChanged();
+		},
+
+		// `document/elements/create` fires before the nested template has fully painted, so the
+		// styles provider rebuilds CSS too early and misses the new local class IDs. Dispatching
+		// ELEMENT_STYLE_CHANGE_EVENT here — after the template and all children are in the DOM —
+		// gives the provider a second chance to regenerate CSS against the live class names.
+		//
+		// The reference-equality guard prevents a parent re-render from emitting one event per
+		// unchanged descendant. Use a sentinel for the initial state — otherwise elements with no
+		// local styles (undefined === undefined) would never notify, and descendants like e-heading
+		// that rely on this post-paint refresh would lose their CSS after detach.
+		_notifyStylesChanged() {
+			const styles = this.model.get( 'styles' );
+
+			if ( this._lastRenderedStyles !== STYLES_REFERENCE_UNTRACKED && styles === this._lastRenderedStyles ) {
+				return;
+			}
+
+			this._lastRenderedStyles = styles;
+
 			window.dispatchEvent( new CustomEvent( ELEMENT_STYLE_CHANGE_EVENT ) );
 		},
 

package/src/legacy/types.ts

@@ -229,6 +229,7 @@ export type ElementModel = {
 	elType: string;
 	settings: BackboneModel< Props >;
 	editor_settings: Record< string, unknown >;
+	styles?: V1ElementModelProps[ 'styles' ];
 	widgetType: string;
 	editSettings?: BackboneModel< { inactive?: boolean } >;
 	elements?: BackboneCollection< ElementModel >;