Remove settings from WC blocks [MAILPOET-2521]

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

@@ -2,14 +2,11 @@ import App from 'newsletter_editor/App';
 import BaseBlock from 'newsletter_editor/blocks/base';
 
 const BlockModel = BaseBlock.BlockModel.extend({
-  stale: ['styles', 'selected'],
+  stale: ['selected'],
   defaults() {
     return this._getDefaults({
       type: 'woocommerceContent',
       selected: 'new_account',
-      styles: {
-        titleColor: '#000000',
-      },
     }, App.getConfig().get('blockDefaults.woocommerceContent'));
   },
 });
@@ -35,10 +32,6 @@ const BlockView = BaseBlock.BlockView.extend({
   className: 'mailpoet_block mailpoet_woocommerce_content_block mailpoet_droppable_block',
   initialize: function initialize() {
     BaseBlock.BlockView.prototype.initialize.apply(this, arguments);
-    this.listenTo(App.getChannel(), 'changeWoocommerceBaseColor', (value) => {
-      this.model.set('styles.titleColor', value);
-      this.render();
-    });
     this.listenTo(App.getChannel(), 'changeWCEmailType', (value) => {
       this.model.set('selected', value);
       this.render();
@@ -69,7 +62,6 @@ const BlockView = BaseBlock.BlockView.extend({
       viewCid: this.cid,
       model: this.model.toJSON(),
       selected: this.model.get('selected'),
-      styles: this.model.get('styles').toJSON(),
       siteName: window.mailpoet_site_name,
       siteAddress: window.mailpoet_site_address,
     };

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

@@ -1,61 +1,19 @@
 import _ from 'underscore';
-import jQuery from 'jquery';
-import MailPoet from 'mailpoet';
 import App from 'newsletter_editor/App';
 import BaseBlock from 'newsletter_editor/blocks/base';
 
 const BlockModel = BaseBlock.BlockModel.extend({
-  stale: ['styles.backgroundColor', 'contents', 'selected'],
+  stale: ['contents', 'selected'],
   defaults() {
     return this._getDefaults({
       type: 'woocommerceHeading',
       selected: 'new_account',
-      styles: {
-        fontColor: '#000000',
-        backgroundColor: '#FFFFFF',
-      },
     }, App.getConfig().get('blockDefaults.woocommerceHeading'));
   },
 });
 
-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': this.backgroundColorChanged,
-      'click .mailpoet_done_editing': 'close',
-    };
-  },
-  backgroundColorChanged: function backgroundColorChanged(event) {
-    this.changeColorField('styles.backgroundColor', event);
-    App.getChannel().trigger('changeWoocommerceBaseColor', jQuery(event.target).val());
-  },
-  close: function close() {
-    MailPoet.Ajax.post({
-      api_version: window.mailpoet_api_version,
-      endpoint: 'woocommerce_settings',
-      action: 'set',
-      data: {
-        woocommerce_email_base_color: this.model.get('styles.backgroundColor'),
-      },
-    });
-    this.destroy();
-  },
-});
-
 const BlockToolsView = BaseBlock.BlockToolsView.extend({
-  tools: {
+  tools: { move: true },
-    move: true,
-    settings: true,
-  },
-  getSettingsView: () => SettingsView,
 });
 
 const WidgetView = BaseBlock.WidgetView.extend({
@@ -75,8 +33,6 @@ const BlockView = BaseBlock.BlockView.extend({
   className: 'mailpoet_container 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);
     this.listenTo(App.getChannel(), 'changeWCEmailType', (value) => {
       this.model.set('selected', value);
       this.render();
@@ -84,9 +40,6 @@ const BlockView = BaseBlock.BlockView.extend({
   },
   modelEvents: _.omit(BaseBlock.BlockView.prototype.modelEvents, 'change'),
   getTemplate() { return window.templates.woocommerceHeadingBlock; },
-  behaviors: _.defaults({
-    ShowSettingsBehavior: {},
-  }, BaseBlock.BlockView.prototype.behaviors),
   regions: {
     toolsRegion: '.mailpoet_tools',
   },
@@ -102,7 +55,6 @@ const BlockView = BaseBlock.BlockView.extend({
       viewCid: this.cid,
       model: this.model.toJSON(),
       content: contents[selected],
-      styles: this.model.get('styles').toJSON(),
     };
   },
 });

views/newsletter/editor.html

@@ -301,10 +301,6 @@
     '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 %>
@@ -660,9 +656,6 @@
       woocommerceHeadingInsertion: Handlebars.compile(
         jQuery('#newsletter_editor_template_woocommerce_heading_widget').html()
       ),
-      woocommerceHeadingBlockSettings: Handlebars.compile(
-        jQuery('#newsletter_editor_template_woocommerce_heading_settings').html()
-      ),
     };
 
     var mailpoet_site_name = '<%= site_name %>';
@@ -1453,17 +1446,8 @@
             },
           },
         },
-        woocommerceContent: {
-          styles: {
-            titleColor: '<%= woocommerce.email_base_color %>',
-          },
-        },
         woocommerceHeading: {
           contents: <%= json_encode(woocommerce.email_headings) %>,
-          styles: {
-            fontColor: '<%= woocommerce.email_base_text_color %>',
-            backgroundColor: '<%= woocommerce.email_base_color %>',
-          },
         },
       },
       shortcodes: <%= json_encode(shortcodes) %>,

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

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