Add layout block bg color, remove bg colors of individual columns

assets/js/src/newsletter_editor/blocks/container.js

@@ -162,10 +162,10 @@ define([
       this.toolsView = new Module.ContainerBlockToolsView({
         model: this.model,
         tools: {
-          settings: this.renderOptions.depth > 1,
+          settings: this.renderOptions.depth === 1,
           delete: this.renderOptions.depth === 1,
           move: this.renderOptions.depth === 1,
-          layerSelector: this.renderOptions.depth === 1,
+          layerSelector: false,
         },
       });
       this.toolsRegion.show(this.toolsView);
@@ -265,6 +265,41 @@ define([
     behaviors: {
       ColorPickerBehavior: {},
     },
+    regions: {
+      columnsSettingsRegion: '.mailpoet_container_columns_settings',
+    },
+    initialize: function() {
+      base.BlockSettingsView.prototype.initialize.apply(this, arguments);
+
+      this._columnsSettingsView = new (Module.ContainerBlockColumnsSettingsView)({
+        collection: this.model.get('blocks'),
+      });
+    },
+    onRender: function() {
+      this.columnsSettingsRegion.show(this._columnsSettingsView);
+    },
+  });
+
+  Module.ContainerBlockColumnsSettingsView = Marionette.CollectionView.extend({
+    getChildView: function() { return Module.ContainerBlockColumnSettingsView; },
+    childViewOptions: function(model, index) {
+      return {
+        columnIndex: index,
+      };
+    },
+  });
+
+  Module.ContainerBlockColumnSettingsView = Marionette.ItemView.extend({
+    getTemplate: function() { return templates.containerBlockColumnSettings; },
+    initialize: function(options) {
+      this.columnNumber = (options.columnIndex || 0) + 1;
+    },
+    templateHelpers: function() {
+      return {
+        model: this.model.toJSON(),
+        columnNumber: this.columnNumber,
+      };
+    },
   });
 
   Module.OneColumnContainerWidgetView = base.WidgetView.extend({

tests/javascript/mochaTestHelper.js

@@ -83,6 +83,7 @@ testHelpers.loadTemplate('blocks/container/oneColumnLayoutWidget.hbs', window, {
 testHelpers.loadTemplate('blocks/container/twoColumnLayoutWidget.hbs', window, {id: 'newsletter_editor_template_container_two_column_widget'});
 testHelpers.loadTemplate('blocks/container/threeColumnLayoutWidget.hbs', window, {id: 'newsletter_editor_template_container_three_column_widget'});
 testHelpers.loadTemplate('blocks/container/settings.hbs', window, {id: 'newsletter_editor_template_container_settings'});
+testHelpers.loadTemplate('blocks/container/columnSettings.hbs', window, {id: 'newsletter_editor_template_container_column_settings'});
 
 testHelpers.loadTemplate('blocks/divider/block.hbs', window, {id: 'newsletter_editor_template_divider_block'});
 testHelpers.loadTemplate('blocks/divider/widget.hbs', window, {id: 'newsletter_editor_template_divider_widget'});
@@ -154,6 +155,7 @@ global.templates = {
   twoColumnLayoutInsertion: Handlebars.compile(jQuery('#newsletter_editor_template_container_two_column_widget').html()),
   threeColumnLayoutInsertion: Handlebars.compile(jQuery('#newsletter_editor_template_container_three_column_widget').html()),
   containerBlockSettings: Handlebars.compile(jQuery('#newsletter_editor_template_container_settings').html()),
+  containerBlockColumnSettings: Handlebars.compile(jQuery('#newsletter_editor_template_container_column_settings').html()),
 
   buttonBlock: Handlebars.compile(jQuery('#newsletter_editor_template_button_block').html()),
   buttonInsertion: Handlebars.compile(jQuery('#newsletter_editor_template_button_widget').html()),

views/newsletter/form.html

@@ -148,6 +148,10 @@
     'newsletter_editor_template_container_settings',
     'newsletter/templates/blocks/container/settings.hbs'
   ) %>
+  <%= partial(
+    'newsletter_editor_template_container_column_settings',
+    'newsletter/templates/blocks/container/columnSettings.hbs'
+  ) %>
   <%= partial(
     'newsletter_editor_template_divider_block',
     'newsletter/templates/blocks/divider/block.hbs'
@@ -374,6 +378,9 @@
       containerBlockSettings: Handlebars.compile(
         jQuery('#newsletter_editor_template_container_settings').html()
       ),
+      containerBlockColumnSettings: Handlebars.compile(
+        jQuery('#newsletter_editor_template_container_column_settings').html()
+      ),
 
       buttonBlock: Handlebars.compile(
         jQuery('#newsletter_editor_template_button_block').html()

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

@@ -1,4 +1,4 @@
-<h3><%= __('Column background color') %></h3>
+<h3><%= __('Layout') %></h3>
 <div class="mailpoet_form_field">
     <label>
         <div class="mailpoet_form_field_input_option">
@@ -8,6 +8,8 @@
     </label>
 </div>
 
+<div class="mailpoet_container_columns_settings"></div>
+
 <div class="mailpoet_form_field">
     <input type="button" class="mailpoet_button mailpoet_button_primary mailpoet_done_editing" value="<%= __('Done') %>" />
 </div>