Set headings color from WooCommerce

[MAILPOET-2279]

assets/js/src/newsletter_editor/blocks/woocommerceContent.js

@@ -4,9 +4,12 @@ import BaseBlock from 'newsletter_editor/blocks/base';
 
 const BlockModel = BaseBlock.BlockModel.extend({
   defaults: function () {
-    return {
+    return this._getDefaults({
       type: 'woocommerceContent',
-    };
+      styles: {
+        titleColor: '#000000',
+      },
+    }, App.getConfig().get('blockDefaults.woocommerceContent'));
   },
 });
 

lib/AdminPages/Pages/NewsletterEditor.php

@@ -66,6 +66,9 @@ class NewsletterEditor {
       'current_wp_user' => array_merge($subscriber_data, $this->wp->wpGetCurrentUser()->to_array()),
       'sub_menu' => Menu::MAIN_PAGE_SLUG,
       'mss_active' => Bridge::isMPSendingServiceEnabled(),
+      'woocommerce' => [
+        'email_base_color' => $this->wp->getOption('woocommerce_email_base_color', '#000000'),
+      ],
     ];
     $this->wp->wpEnqueueMedia();
     $this->wp->wpEnqueueStyle('editor', $this->wp->includesUrl('css/editor.css'));

views/newsletter/editor.html

@@ -1407,6 +1407,11 @@
             },
           },
         },
+        woocommerceContent: {
+          styles: {
+            titleColor: '<%= woocommerce.email_base_color %>',
+          },
+        },
       },
       shortcodes: <%= json_encode(shortcodes) %>,
       sidepanelWidth: '331px',

views/newsletter/templates/blocks/woocommerceContent/block.hbs

@@ -1,4 +1,11 @@
 <div class="mailpoet_tools"></div>
+<style type="text/css">
+    .mailpoet_editor_view_{{ viewCid }} .mailpoet_content h1,
+    .mailpoet_editor_view_{{ viewCid }} .mailpoet_content h2,
+    .mailpoet_editor_view_{{ viewCid }} .mailpoet_content h3 {
+        color: {{ model.styles.titleColor }};
+    }
+</style>
 <div class="mailpoet_content mailpoet_woocommerce_content" data-automation-id="woocommerce_content">
 <p style="margin:0 0 16px">Hi Elon,</p>
 <p style="margin:0 0 16px">Just to let you know — we've received your order #0001, and it is now being processed:</p>