Add heading woocommerce block

[MAILPOET-2278]

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

@@ -0,0 +1,63 @@
+import App from 'newsletter_editor/App';
+import BaseBlock from 'newsletter_editor/blocks/base';
+
+const BlockModel = BaseBlock.BlockModel.extend({
+  stale: ['styles'],
+  defaults() {
+    return this._getDefaults({
+      type: 'woocommerceHeading',
+      styles: {
+        fontColor: '#000000',
+        backgroundColor: '#FFFFFF',
+      },
+    }, App.getConfig().get('blockDefaults.woocommerceHeading'));
+  },
+});
+
+const BlockToolsView = BaseBlock.BlockToolsView.extend({
+  tools: { move: true },
+});
+
+const WidgetView = BaseBlock.WidgetView.extend({
+  className: BaseBlock.WidgetView.prototype.className + ' mailpoet_droppable_layout_block',
+  getTemplate() { return window.templates.woocommerceHeadingInsertion; },
+  behaviors: {
+    DraggableBehavior: {
+      cloneOriginal: true,
+      drop() {
+        return new BlockModel({}, { parse: true });
+      },
+    },
+  },
+});
+
+const BlockView = BaseBlock.BlockView.extend({
+  className: 'mailpoet_block mailpoet_woocommerce_heading_block mailpoet_droppable_block',
+  getTemplate() { return window.templates.woocommerceHeadingBlock; },
+  regions: {
+    toolsRegion: '.mailpoet_tools',
+  },
+  onDragSubstituteBy() { return WidgetView; },
+  onRender() {
+    this.toolsView = new BlockToolsView({ model: this.model });
+    this.showChildView('toolsRegion', this.toolsView);
+  },
+  templateContext() {
+    return {
+      viewCid: this.cid,
+      model: this.model.toJSON(),
+      styles: this.model.get('styles').toJSON(),
+    };
+  },
+});
+
+App.on('before:start', (BeforeStartApp) => {
+  BeforeStartApp.registerBlockType('woocommerceHeading', {
+    blockModel: BlockModel,
+    blockView: BlockView,
+  });
+});
+
+export default {
+  BlockModel, BlockView, BlockToolsView, WidgetView,
+};

assets/js/src/newsletter_editor/webpack_index.jsx

@@ -49,3 +49,4 @@ import 'newsletter_editor/blocks/posts.js'; // side effect - calls App.on()
 import 'newsletter_editor/blocks/products.js'; // side effect - calls App.on()
 import 'newsletter_editor/blocks/social.js'; // side effect - calls App.on()
 import 'newsletter_editor/blocks/woocommerceContent.js'; // side effect - calls App.on()
+import 'newsletter_editor/blocks/woocommerceHeading.js'; // side effect - calls App.on()

views/newsletter/editor.html

@@ -281,6 +281,18 @@
     'newsletter_editor_template_woocommerce_content_widget',
     'newsletter/templates/blocks/woocommerceContent/widget.hbs'
   ) %>
+  <%= partial(
+    'newsletter_editor_template_woocommerce_heading_block',
+    'newsletter/templates/blocks/woocommerceHeading/block.hbs'
+  ) %>
+  <%= partial(
+    'newsletter_editor_template_woocommerce_heading_widget',
+    'newsletter/templates/blocks/woocommerceHeading/widget.hbs'
+  ) %>
+  <%= partial(
+    'newsletter_editor_template_woocommerce_heading_settings',
+    'newsletter/templates/blocks/woocommerceHeading/settings.hbs'
+  ) %>
 <% endblock %>
 
 <% block content %>
@@ -620,6 +632,16 @@
       woocommerceContentInsertion: Handlebars.compile(
         jQuery('#newsletter_editor_template_woocommerce_content_widget').html()
       ),
+
+      woocommerceHeadingBlock: Handlebars.compile(
+        jQuery('#newsletter_editor_template_woocommerce_heading_block').html()
+      ),
+      woocommerceHeadingInsertion: Handlebars.compile(
+        jQuery('#newsletter_editor_template_woocommerce_heading_widget').html()
+      ),
+      woocommerceHeadingBlockSettings: Handlebars.compile(
+        jQuery('#newsletter_editor_template_woocommerce_heading_settings').html()
+      ),
     };
 
     var config = {
@@ -1412,6 +1434,12 @@
             titleColor: '<%= woocommerce.email_base_color %>',
           },
         },
+        woocommerceHeading: {
+          styles: {
+            fontColor: '#000000',
+            backgroundColor: '<%= woocommerce.email_base_color %>',
+          },
+        },
       },
       shortcodes: <%= json_encode(shortcodes) %>,
       sidepanelWidth: '331px',

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

@@ -0,0 +1,11 @@
+<div class="mailpoet_tools"></div>
+<style type="text/css">
+	.mailpoet_editor_view_{{ viewCid }} .mailpoet_content {
+		background: {{ styles.backgroundColor }};
+		color: {{ styles.fontColor }};
+	}
+</style>
+<div class="mailpoet_content mailpoet_woocommerce_heading" data-automation-id="woocommerce_heading">
+	<p>This is the WC Heading Widget...</p>
+</div>
+<div class="mailpoet_block_highlight"></div>

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

@@ -0,0 +1,3 @@
+<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>

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

@@ -0,0 +1,4 @@
+<div class="mailpoet_widget_icon">
+<%= source('newsletter/templates/svg/block-icons/text.svg') %>
+</div>
+<div class="mailpoet_widget_title"><%= _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!”)') %></div>