Update colors when changed from settings

[MAILPOET-2278]

assets/js/src/newsletter_editor/blocks/woocommerceHeading.js

@@ -17,6 +17,19 @@ const BlockModel = BaseBlock.BlockModel.extend({
 
 const SettingsView = BaseBlock.BlockSettingsView.extend({
   getTemplate: function getTemplate() { return window.templates.woocommerceHeadingBlockSettings; },
+  templateContext() {
+    return {
+      model: this.model.toJSON(),
+      styles: this.model.get('styles').toJSON(),
+    };
+  },
+  events: function events() {
+    return {
+      'change .mailpoet_field_wc_heading_font_color': _.partial(this.changeColorField, 'styles.fontColor'),
+      'change .mailpoet_field_wc_heading_background_color': _.partial(this.changeColorField, 'styles.backgroundColor'),
+      'click .mailpoet_done_editing': 'close',
+    };
+  },
 });
 
 const BlockToolsView = BaseBlock.BlockToolsView.extend({
@@ -42,6 +55,12 @@ const WidgetView = BaseBlock.WidgetView.extend({
 
 const BlockView = BaseBlock.BlockView.extend({
   className: 'mailpoet_block mailpoet_woocommerce_heading_block mailpoet_droppable_block',
+  initialize: function initialize() {
+    BaseBlock.BlockView.prototype.initialize.apply(this, arguments);
+    this.listenTo(this.model, 'change:styles.fontColor', this.render);
+    this.listenTo(this.model, 'change:styles.backgroundColor', this.render);
+  },
+  modelEvents: _.omit(BaseBlock.BlockView.prototype.modelEvents, 'change'),
   getTemplate() { return window.templates.woocommerceHeadingBlock; },
   behaviors: _.defaults({
     ShowSettingsBehavior: {},

views/newsletter/templates/blocks/woocommerceHeading/settings.hbs

@@ -1,3 +1,21 @@
 <h3><%= _x('WooCommerce Email Heading', 'Name of a widget in the email editor. This widget is used to display WooCommerce messages (like ”Thanks for your order!”)') %></h3>
 
-<p>Settings fields here...</p>
+<div class="mailpoet_form_field">
+    <div class="mailpoet_form_field_input_option">
+        <input type="text" name="font-color" class="mailpoet_field_wc_heading_font_color mailpoet_color" value="{{ styles.fontColor }}" />
+    </div>
+    <div class="mailpoet_form_field_title mailpoet_form_field_title_inline"><%= __('Font color') %></div>
+</div>
+
+<div class="mailpoet_form_field">
+    <div class="mailpoet_form_field_input_option">
+        <input type="text" name="background-color" class="mailpoet_field_wc_heading_background_color mailpoet_color" value="{{ styles.backgroundColor }}" />
+    </div>
+    <div class="mailpoet_form_field_title mailpoet_form_field_title_inline"><%= __('Background color') %></div>
+</div>
+
+<a href="?page=wc-settings&tab=email" target="_blank"><%= __('Customize WooCommerce email headings.') %></a>
+
+<div class="mailpoet_form_field">
+    <input type="button" class="button button-primary mailpoet_done_editing" data-automation-id="spacer_done_button" value="<%= __('Done') | escape('html_attr') %>" />
+</div>