MC-18601: Page Builder Render

Author: davemacaulay

app/code/Magento/PageBuilder/view/adminhtml/web/js/content-type/observable-updater.js

@@ -8,8 +8,8 @@ import ContentTypeInterface from "../content-type.types";
 import {DataObject} from "../data-store";
 import {get} from "../utils/object";
 import appearanceConfig from "./appearance-config";
-import ObservableUpdater, {GeneratedElementsData} from "./observable-updater";
-import ObservableObject from "./observable-updater.types";
+import ObservableUpdater from "./observable-updater";
+import ObservableObject, {GeneratedElementsData} from "./observable-updater.types";
 
 /**
  * @api

app/code/Magento/PageBuilder/view/adminhtml/web/ts/js/content-type/master.ts

@@ -17,12 +17,14 @@ import {get} from "../utils/object";
 import {fromSnakeToCamelCase} from "../utils/string";
 import appearanceConfig from "./appearance-config";
 import Master from "./master";
+import {GeneratedElementsData} from "./observable-updater.types";
 import Preview from "./preview";
 
 export default class ObservableUpdater {
     private converterPool: typeof ConverterPool;
     private massConverterPool: typeof MassConverterPool;
     private converterResolver: (config: object) => string;
+    private previousData: GeneratedElementsData = {};
 
     /**
      * @param {typeof ConverterPool} converterPool
@@ -82,6 +84,9 @@ export default class ObservableUpdater {
 
         for (const elementName of Object.keys(elements)) {
             const elementConfig = elements[elementName];
+            if (this.previousData[elementName] === undefined) {
+                this.previousData[elementName] = {};
+            }
             if (generatedData[elementName] === undefined) {
                 generatedData[elementName] = {
                     attributes: {},
@@ -92,8 +97,12 @@ export default class ObservableUpdater {
             }
 
             if (elementConfig.style !== undefined) {
-                // @todo retrieve previous styles
-                generatedData[elementName].style = this.generateStyles({}, elementConfig, convertedData);
+                let previousStyles = {};
+                if (typeof this.previousData[elementName].style !== "undefined") {
+                    previousStyles = this.previousData[elementName].style;
+                }
+                generatedData[elementName].style = this.generateStyles(previousStyles, elementConfig, convertedData);
+                this.previousData[elementName].style = generatedData[elementName].style;
             }
 
             if (elementConfig.attributes !== undefined) {
@@ -109,8 +118,12 @@ export default class ObservableUpdater {
             }
 
             if (elementConfig.css !== undefined && elementConfig.css.var in convertedData) {
-                // @todo retrieve previous CSS classes
-                generatedData[elementName].css = this.generateCss({}, elementConfig, convertedData);
+                let previousCss = {};
+                if (typeof this.previousData[elementName].css !== "undefined") {
+                    previousCss = this.previousData[elementName].css;
+                }
+                generatedData[elementName].css = this.generateCss(previousCss, elementConfig, convertedData);
+                this.previousData[elementName].css = generatedData[elementName].css;
             }
 
             if (elementConfig.tag !== undefined && elementConfig.tag.var !== undefined) {
@@ -300,10 +313,3 @@ export default class ObservableUpdater {
         return value;
     }
 }
-
-export interface GeneratedElementsData {
-    [key: string]: {
-        [key: string]: {};
-    };
-    appearance?: any;
-}

app/code/Magento/PageBuilder/view/adminhtml/web/ts/js/content-type/observable-updater.ts

@@ -9,3 +9,10 @@ export default interface ObservableObject {
         [key: string]: KnockoutObservable<any>;
     };
 }
+
+export interface GeneratedElementsData {
+    [key: string]: {
+        [key: string]: {};
+    };
+    appearance?: any;
+}

app/code/Magento/PageBuilder/view/adminhtml/web/ts/js/content-type/observable-updater.types.ts

@@ -5,7 +5,7 @@
 
 import ContentTypeCollection from "../../content-type-collection";
 import ContentTypeInterface from "../../content-type.types";
-import {GeneratedElementsData} from "../../content-type/observable-updater";
+import {GeneratedElementsData} from "../../content-type/observable-updater.types";
 import { DataObject } from "../../data-store";
 
 export interface TreeItem {