Add global styles for use in WC header and content blocks [MAILPOET-2521]

assets/js/src/newsletter_editor/components/sidebar.js

@@ -77,11 +77,6 @@ SidebarView = Marionette.View.extend({
       }
     },
   },
-  templateContext: function () {
-    return {
-      isWoocommerceTransactional: this.model.isWoocommerceTransactional(),
-    };
-  },
   initialize: function () {
     jQuery(window)
       .on('resize', this.updateHorizontalScroll.bind(this))
@@ -97,6 +92,7 @@ SidebarView = Marionette.View.extend({
     this.showChildView('stylesRegion', new Module.SidebarStylesView({
       model: App.getGlobalStyles(),
       availableStyles: App.getAvailableStyles(),
+      isWoocommerceTransactional: this.model.isWoocommerceTransactional(),
     }));
     this.showChildView('previewRegion', new Module.SidebarPreviewView());
   },
@@ -213,16 +209,21 @@ Module.SidebarStylesView = Marionette.View.extend({
       },
       'change #mailpoet_newsletter_background_color': _.partial(this.changeColorField, 'wrapper.backgroundColor'),
       'change #mailpoet_background_color': _.partial(this.changeColorField, 'body.backgroundColor'),
+      // WooCommerce styles
+      'change #mailpoet_wc_heading_font_color': _.partial(this.changeColorField, 'woocommerce.headingFontColor'),
+      'change #mailpoet_wc_branding_color': _.partial(this.changeColorField, 'woocommerce.brandingColor'),
     };
   },
   templateContext: function () {
     return {
       model: this.model.toJSON(),
       availableStyles: this.availableStyles.toJSON(),
+      isWoocommerceTransactional: this.isWoocommerceTransactional,
     };
   },
   initialize: function (options) {
     this.availableStyles = options.availableStyles;
+    this.isWoocommerceTransactional = options.isWoocommerceTransactional;
     App.getChannel().on('historyUpdate', this.render);
   },
   changeField: function (field, event) {

assets/js/src/newsletter_editor/components/styles.js

@@ -57,12 +57,20 @@ Module.StylesModel = SuperModel.extend({
 
 Module.StylesView = Marionette.View.extend({
   getTemplate: function () { return window.templates.styles; }, // eslint-disable-line func-names
+  templateContext: function () { // eslint-disable-line func-names
+    return {
+      isWoocommerceTransactional: this.isWoocommerceTransactional,
+    };
+  },
   modelEvents: {
     change: 'render',
   },
   serializeData: function () { // eslint-disable-line func-names
     return this.model.toJSON();
   },
+  initialize: function (options) { // eslint-disable-line func-names
+    this.isWoocommerceTransactional = options.isWoocommerceTransactional;
+  },
 });
 
 Module._globalStyles = new SuperModel();
@@ -92,7 +100,10 @@ App.on('before:start', function (BeforeStartApp, options) { // eslint-disable-li
 });
 
 App.on('start', function (StartApp) { // eslint-disable-line func-names
-  var stylesView = new Module.StylesView({ model: StartApp.getGlobalStyles() });
+  var stylesView = new Module.StylesView({
+    model: StartApp.getGlobalStyles(),
+    isWoocommerceTransactional: App.getNewsletter().isWoocommerceTransactional(),
+  });
   StartApp._appView.showChildView('stylesRegion', stylesView);
 });