- Add highlighting of blocks that are being edited;

- Refactor block settings views;
- Change Posts widget to display 8 posts in settings;
- Move ALC/Posts category selector label to Select2 placeholder.

assets/css/src/newsletter_editor/contentBlocks/base.styl

@@ -23,6 +23,7 @@ $block-text-line-height = $text-line-height
     border: 1px solid $transparent-color
 
   &:hover > .mailpoet_block_highlight
+  &.mailpoet_highlight > .mailpoet_block_highlight
     border: 1px dashed $block-hover-highlight-color
 
 

assets/css/src/newsletter_editor/contentBlocks/container.styl

@@ -17,7 +17,7 @@ $three-column-width = ($newsletter-width / 3) - (2 * $column-margin)
   padding-left: 0
   padding-right: 0
 
-  &:hover
+  &:hover > .mailpoet_block_highlight
     border: 0
 
 .mailpoet_container_vertical > *

assets/js/src/newsletter_editor/behaviors/HighlightEditingBehavior.js

@@ -0,0 +1,23 @@
+/**
+ * Highlight Editing Behavior
+ *
+ * Highlights a block that is being edited
+ */
+define([
+    'backbone.marionette',
+    'newsletter_editor/behaviors/BehaviorsLookup',
+  ], function(Marionette, BehaviorsLookup) {
+
+  BehaviorsLookup.HighlightEditingBehavior = Marionette.Behavior.extend({
+    modelEvents: {
+      'startEditing': 'enableHighlight',
+      'stopEditing': 'disableHighlight',
+    },
+    enableHighlight: function() {
+      this.$el.addClass('mailpoet_highlight');
+    },
+    disableHighlight: function() {
+      this.$el.removeClass('mailpoet_highlight');
+    },
+  });
+});

assets/js/src/newsletter_editor/blocks/automatedLatestContent.js

@@ -194,9 +194,6 @@ define([
         "click .mailpoet_done_editing": "close",
       };
     },
-    behaviors: {
-      ColorPickerBehavior: {},
-    },
     templateHelpers: function() {
       return {
         model: this.model.toJSON(),
@@ -211,6 +208,7 @@ define([
       this.$('.mailpoet_automated_latest_content_categories_and_tags').select2({
         multiple: true,
         allowClear: true,
+        placeholder: MailPoet.I18n.t('categoriesAndTags'),
         ajax: {
           data: function (params) {
             return {

assets/js/src/newsletter_editor/blocks/base.js

@@ -80,6 +80,7 @@ define([
           }
         },
       },
+      HighlightEditingBehavior: {},
     },
     templateHelpers: function() {
       return {
@@ -218,8 +219,12 @@ define([
 
   Module.BlockSettingsView = Marionette.LayoutView.extend({
     className: 'mailpoet_editor_settings',
-    initialize: function() {
+    behaviors: {
-      MailPoet.Modal.panel({
+      ColorPickerBehavior: {},
+    },
+    initialize: function(params) {
+      this.model.trigger('startEditing');
+      var panelParams = {
         element: this.$el,
         template: '',
         position: 'right',
@@ -227,7 +232,13 @@ define([
         onCancel: function() {
           this.destroy();
         }.bind(this),
-      });
+      };
+      this.renderOptions = params.renderOptions || {};
+      if (this.renderOptions.displayFormat === 'subpanel') {
+        MailPoet.Modal.subpanel(panelParams);
+      } else {
+        MailPoet.Modal.panel(panelParams);
+      }
     },
     close: function(event) {
       this.destroy();
@@ -256,6 +267,7 @@ define([
     },
     onBeforeDestroy: function() {
       MailPoet.Modal.close();
+      this.model.trigger('stopEditing');
     },
   });
 

assets/js/src/newsletter_editor/blocks/button.js

@@ -99,23 +99,6 @@ define([
         "click .mailpoet_done_editing": "close",
       };
     },
-    behaviors: {
-      ColorPickerBehavior: {},
-    },
-    initialize: function(params) {
-      var panelParams = {
-        element: this.$el,
-        template: '',
-        position: 'right',
-        width: App.getConfig().get('sidepanelWidth'),
-      };
-      this.renderOptions = params.renderOptions || {};
-      if (this.renderOptions.displayFormat === 'subpanel') {
-        MailPoet.Modal.subpanel(panelParams);
-      } else {
-        MailPoet.Modal.panel(panelParams);
-      }
-    },
     templateHelpers: function() {
       return {
         model: this.model.toJSON(),

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

@@ -125,6 +125,7 @@ define([
           return view.renderOptions.depth === 1;
         },
       },
+      HighlightEditingBehavior: {}
     },
     onDragSubstituteBy: function() {
       // For two and three column layouts display their respective widgets,
@@ -309,9 +310,6 @@ define([
         "click .mailpoet_done_editing": "close",
       };
     },
-    behaviors: {
-      ColorPickerBehavior: {},
-    },
     regions: {
       columnsSettingsRegion: '.mailpoet_container_columns_settings',
     },

assets/js/src/newsletter_editor/blocks/divider.js

@@ -102,23 +102,6 @@ define([
         'change:styles.block.borderColor': 'repaintDividerStyleOptions',
       };
     },
-    behaviors: {
-      ColorPickerBehavior: {},
-    },
-    initialize: function(params) {
-      var panelParams = {
-        element: this.$el,
-        template: '',
-        position: 'right',
-        width: App.getConfig().get('sidepanelWidth'),
-      };
-      this.renderOptions = params.renderOptions || {};
-      if (this.renderOptions.displayFormat === 'subpanel') {
-        MailPoet.Modal.subpanel(panelParams);
-      } else {
-        MailPoet.Modal.panel(panelParams);
-      }
-    },
     templateHelpers: function() {
       return {
         model: this.model.toJSON(),

assets/js/src/newsletter_editor/blocks/footer.js

@@ -106,9 +106,6 @@ define([
         "click .mailpoet_done_editing": "close",
       };
     },
-    behaviors: {
-      ColorPickerBehavior: {},
-    },
     templateHelpers: function() {
       return {
         model: this.model.toJSON(),

assets/js/src/newsletter_editor/blocks/header.js

@@ -106,9 +106,6 @@ define([
         "click .mailpoet_done_editing": "close",
       };
     },
-    behaviors: {
-      ColorPickerBehavior: {},
-    },
     templateHelpers: function() {
       return {
         model: this.model.toJSON(),

assets/js/src/newsletter_editor/blocks/posts.js

@@ -23,7 +23,19 @@ define([
     'newsletter_editor/blocks/button',
     'newsletter_editor/blocks/divider',
     'select2'
-  ], function(Backbone, Marionette, Radio, _, jQuery, MailPoet, App, CommunicationComponent, BaseBlock, ButtonBlock, DividerBlock) {
+  ], function(
+    Backbone,
+    Marionette,
+    Radio,
+    _,
+    jQuery,
+    MailPoet,
+    App,
+    CommunicationComponent,
+    BaseBlock,
+    ButtonBlock,
+    DividerBlock
+  ) {
 
   "use strict";
 
@@ -195,6 +207,7 @@ define([
       };
     },
     initialize: function() {
+      this.model.trigger('startEditing');
       this.selectionView = new PostSelectionSettingsView({ model: this.model });
       this.displayOptionsView = new PostsDisplayOptionsSettingsView({ model: this.model });
     },
@@ -209,8 +222,6 @@ define([
         element: this.$el,
         template: '',
         position: 'right',
-        overlay: true,
-        highlight: blockView.$el,
         width: App.getConfig().get('sidepanelWidth'),
         onCancel: function() {
           // Self destroy the block if the user closes settings modal
@@ -274,6 +285,7 @@ define([
       this.$('.mailpoet_posts_categories_and_tags').select2({
         multiple: true,
         allowClear: true,
+        placeholder: MailPoet.I18n.t('categoriesAndTags'),
         ajax: {
           data: function (params) {
             return {
@@ -405,9 +417,6 @@ define([
         "change .mailpoet_posts_sort_by": _.partial(this.changeField, "sortBy"),
       };
     },
-    behaviors: {
-      ColorPickerBehavior: {},
-    },
     templateHelpers: function() {
       return {
         model: this.model.toJSON(),

assets/js/src/newsletter_editor/blocks/social.js

@@ -139,6 +139,7 @@ define([
           }
         },
       },
+      HighlightEditingBehavior: {},
     },
     onDragSubstituteBy: function() { return Module.SocialWidgetView; },
     constructor: function() {

assets/js/src/newsletter_editor/blocks/spacer.js

@@ -70,9 +70,6 @@ define([
         "click .mailpoet_done_editing": "close",
       };
     },
-    behaviors: {
-      ColorPickerBehavior: {},
-    },
   });
 
   Module.SpacerWidgetView = base.WidgetView.extend({

package.json

@@ -9,7 +9,7 @@
   },
   "dependencies": {
     "backbone": "1.3.3",
-    "backbone.marionette": "2.4.6",
+    "backbone.marionette": "2.4.7",
     "backbone.radio": "1.0.5",
     "backbone.supermodel": "1.2.0",
     "c3": "~0.4.10",

views/newsletter/editor.html

@@ -327,6 +327,7 @@
     'templateDescriptionMissing': __('Please add a template description'),
     'templateSaved': __('Template has been saved.'),
     'templateSaveFailed': __('Template has not been saved, please try again.'),
+    'categoriesAndTags': __('Categories & tags'),
   }) %>
 <% endblock %>
 
@@ -1058,7 +1059,7 @@
           },
         },
         posts: {
-          amount: '10',
+          amount: '8',
           contentType: 'post', // 'post'|'page'|'mailpoet_page'
           postStatus: 'publish', // 'draft'|'pending'|'private'|'publish'|'future'
           inclusionType: 'include', // 'include'|'exclude'

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

@@ -13,7 +13,6 @@
 </div>
 
 <div class="mailpoet_form_field">
-    <div class="mailpoet_form_field_title"><%= __('Categories & tags:') %></div>
     <div class="mailpoet_form_field_select_option">
         <select class="mailpoet_select mailpoet_automated_latest_content_categories_and_tags" multiple="multiple">
           {{#each terms}}

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

@@ -5,4 +5,4 @@
 </style>
 {{/ifCond}}
 <div class="mailpoet_container {{#ifCond model.orientation '===' 'horizontal'}}mailpoet_container_horizontal{{/ifCond}}{{#ifCond model.orientation '===' 'vertical'}}mailpoet_container_vertical{{/ifCond}}"></div>
-<div class="mailpoet_tools"></div>
+<div class="mailpoet_tools"></div><div class="mailpoet_block_highlight">

views/newsletter/templates/blocks/posts/settingsSelection.hbs

@@ -13,9 +13,6 @@
             <option value="pending"><%= __('Pending Review') %></option>
             <option value="private"><%= __('Private') %></option>
         </select></div>
-    <div class="mailpoet_post_selection_filter_row">
-      <div class="mailpoet_form_field_title"><%= __('Categories & tags:') %></div>
-    </div>
     <div class="mailpoet_post_selection_filter_row">
         <select class="mailpoet_select mailpoet_posts_categories_and_tags" multiple="multiple">
           {{#each terms}}

webpack.config.js

@@ -147,6 +147,7 @@ config.push(_.extend({}, baseConfig, {
       'newsletter_editor/behaviors/ColorPickerBehavior.js',
       'newsletter_editor/behaviors/ContainerDropZoneBehavior.js',
       'newsletter_editor/behaviors/DraggableBehavior.js',
+      'newsletter_editor/behaviors/HighlightEditingBehavior.js',
       'newsletter_editor/behaviors/ResizableBehavior.js',
       'newsletter_editor/behaviors/SortableBehavior.js',
       'newsletter_editor/blocks/base.js',
@@ -205,6 +206,10 @@ config.push(_.extend({}, baseConfig, {
       'filesaver',
       'velocity-animate',
 
+      'mailpoet',
+      'notice',
+      'i18n',
+
       'newsletter_editor/communicationsFix.js',
       'newsletter_editor/App',
       'newsletter_editor/components/config.js',
@@ -218,6 +223,7 @@ config.push(_.extend({}, baseConfig, {
       'newsletter_editor/behaviors/ColorPickerBehavior.js',
       'newsletter_editor/behaviors/ContainerDropZoneBehavior.js',
       'newsletter_editor/behaviors/DraggableBehavior.js',
+      'newsletter_editor/behaviors/HighlightEditingBehavior.js',
       'newsletter_editor/behaviors/ResizableBehavior.js',
       'newsletter_editor/behaviors/SortableBehavior.js',
       'newsletter_editor/blocks/base.js',