Add an option to select title option

[MAILPOET-1710]

assets/js/src/newsletter_editor/blocks/automatedLatestContentLayout.js

@@ -66,6 +66,7 @@ Module.AutomatedLatestContentLayoutBlockModel = base.BlockModel.extend({
       titleAlignment: 'left', // 'left'|'center'|'right'
       titleIsLink: false, // false|true
       imageFullWidth: false, // true|false
+      titlePosition: 'abovePost', // 'abovePost'|'aboveExcerpt'
       featuredImagePosition: 'centered', // 'centered'|'left'|'right'|'alternate'|'none'
       showAuthor: 'no', // 'no'|'aboveText'|'belowText'
       authorPrecededBy: 'Author:',
@@ -92,7 +93,7 @@ Module.AutomatedLatestContentLayoutBlockModel = base.BlockModel.extend({
   },
   initialize: function () {
     base.BlockView.prototype.initialize.apply(this, arguments);
-    this.on('change:amount change:contentType change:terms change:inclusionType change:displayType change:titleFormat change:featuredImagePosition change:titleAlignment change:titleIsLink change:imageFullWidth change:showAuthor change:authorPrecededBy change:showCategories change:categoriesPrecededBy change:readMoreType change:readMoreText change:sortBy change:showDivider', this._handleChanges, this);
+    this.on('change:amount change:contentType change:terms change:inclusionType change:displayType change:titleFormat change:featuredImagePosition change:titleAlignment change:titleIsLink change:imageFullWidth change:showAuthor change:authorPrecededBy change:showCategories change:categoriesPrecededBy change:readMoreType change:readMoreText change:sortBy change:showDivider change:titlePosition', this._handleChanges, this);
     this.listenTo(this.get('readMoreButton'), 'change', this._handleChanges);
     this.listenTo(this.get('divider'), 'change', this._handleChanges);
     this.on('add remove update reset', this._handleChanges);
@@ -187,6 +188,7 @@ Module.AutomatedLatestContentLayoutBlockSettingsView = base.BlockSettingsView.ex
       'input .mailpoet_automated_latest_content_categories': _.partial(this.changeField, 'categoriesPrecededBy'),
       'input .mailpoet_automated_latest_content_read_more_text': _.partial(this.changeField, 'readMoreText'),
       'change .mailpoet_automated_latest_content_sort_by': _.partial(this.changeField, 'sortBy'),
+      'change .mailpoet_automated_latest_content_title_position': _.partial(this.changeField, 'titlePosition'),
       'click .mailpoet_done_editing': 'close',
     };
   },
@@ -330,8 +332,12 @@ Module.AutomatedLatestContentLayoutBlockSettingsView = base.BlockSettingsView.ex
 
     if (value === 'excerpt') {
       this.$('.mailpoet_automated_latest_content_featured_image_position_container').removeClass('mailpoet_hidden');
+      this.$('.mailpoet_automated_latest_content_title_position_separator').removeClass('mailpoet_hidden');
+      this.$('.mailpoet_automated_latest_content_title_position').removeClass('mailpoet_hidden');
     } else {
       this.$('.mailpoet_automated_latest_content_featured_image_position_container').addClass('mailpoet_hidden');
+      this.$('.mailpoet_automated_latest_content_title_position_separator').addClass('mailpoet_hidden');
+      this.$('.mailpoet_automated_latest_content_title_position').addClass('mailpoet_hidden');
     }
     this.changeField('displayType', event);
   },

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

@@ -50,6 +50,7 @@ Module.PostsBlockModel = base.BlockModel.extend({
       titleAlignment: 'left', // 'left'|'center'|'right'
       titleIsLink: false, // false|true
       imageFullWidth: false, // true|false
+      titlePosition: 'abovePost', // 'abovePost'|'aboveExcerpt'
       featuredImagePosition: 'centered', // 'centered'|'right'|'left'|'alternate'|'none'
       showAuthor: 'no', // 'no'|'aboveText'|'belowText'
       authorPrecededBy: 'Author:',
@@ -98,7 +99,7 @@ Module.PostsBlockModel = base.BlockModel.extend({
     this.on('loadMorePosts', this._loadMorePosts, this);
 
     this.listenTo(this.get('_selectedPosts'), 'add remove reset', refreshTransformedPosts);
-    this.on('change:displayType change:titleFormat change:featuredImagePosition change:titleAlignment change:titleIsLink change:imageFullWidth change:showAuthor change:authorPrecededBy change:showCategories change:categoriesPrecededBy change:readMoreType change:readMoreText change:showDivider', refreshTransformedPosts);
+    this.on('change:displayType change:titleFormat change:featuredImagePosition change:titleAlignment change:titleIsLink change:imageFullWidth change:showAuthor change:authorPrecededBy change:showCategories change:categoriesPrecededBy change:readMoreType change:readMoreText change:showDivider change:titlePosition', refreshTransformedPosts);
     this.listenTo(this.get('readMoreButton'), 'change', refreshTransformedPosts);
     this.listenTo(this.get('divider'), 'change', refreshTransformedPosts);
 
@@ -491,6 +492,7 @@ PostsDisplayOptionsSettingsView = base.BlockSettingsView.extend({
       'input .mailpoet_posts_categories': _.partial(this.changeField, 'categoriesPrecededBy'),
       'input .mailpoet_posts_read_more_text': _.partial(this.changeField, 'readMoreText'),
       'change .mailpoet_posts_sort_by': _.partial(this.changeField, 'sortBy'),
+      'change .mailpoet_automated_latest_content_title_position': _.partial(this.changeField, 'titlePosition'),
     };
   },
   templateContext: function () {

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

@@ -132,6 +132,24 @@
         </div>
     </div>
 
+    <hr class="mailpoet_separator mailpoet_automated_latest_content_title_position_separator {{#ifCond model.displayType '!==' 'excerpt'}}mailpoet_hidden{{/ifCond}}" />
+
+    <div class="mailpoet_form_field mailpoet_automated_latest_content_title_position {{#ifCond model.displayType '!==' 'excerpt'}}mailpoet_hidden{{/ifCond}}">
+        <div class="mailpoet_form_field_title"><%= _x('Title position', 'Setting in the email designer to position the blog post title') %></div>
+        <div class="mailpoet_form_field_radio_option">
+            <label>
+                <input type="radio" name="mailpoet_automated_latest_content_title_position" class="mailpoet_automated_latest_content_title_position" value="abovePost" {{#ifCond model.titlePosition '!=' 'aboveExcerpt'}}CHECKED{{/ifCond}}/>
+                <%= _x('Above the post', 'Display the post title above the post block') %>
+            </label>
+        </div>
+        <div class="mailpoet_form_field_radio_option">
+            <label>
+                <input type="radio" name="mailpoet_automated_latest_content_title_position" class="mailpoet_automated_latest_content_title_position" value="aboveExcerpt" {{#ifCond model.titlePosition '==' 'aboveExcerpt'}}CHECKED{{/ifCond}}/>
+                <%= _x('Above the excerpt text', 'Display the post title above the post excerpt') %>
+            </label>
+        </div>
+    </div>
+
     <hr class="mailpoet_separator mailpoet_automated_latest_content_image_separator {{#ifCond model.displayType '===' 'titleOnly'}}mailpoet_hidden{{/ifCond}}" />
 
     <div class="mailpoet_form_field mailpoet_automated_latest_content_featured_image_position_container {{#ifCond model.displayType '!==' 'excerpt'}}mailpoet_hidden{{/ifCond}}">

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

@@ -87,6 +87,24 @@
     </div>
 </div>
 
+<hr class="mailpoet_separator mailpoet_automated_latest_content_title_position_separator {{#ifCond model.displayType '!==' 'excerpt'}}mailpoet_hidden{{/ifCond}}" />
+
+<div class="mailpoet_form_field mailpoet_automated_latest_content_title_position {{#ifCond model.displayType '!==' 'excerpt'}}mailpoet_hidden{{/ifCond}}">
+    <div class="mailpoet_form_field_title"><%= _x('Title position', 'Setting in the email designer to position the blog post title') %></div>
+    <div class="mailpoet_form_field_radio_option">
+        <label>
+            <input type="radio" name="mailpoet_automated_latest_content_title_position" class="mailpoet_automated_latest_content_title_position" value="abovePost" {{#ifCond model.titlePosition '!=' 'aboveExcerpt'}}CHECKED{{/ifCond}}/>
+            <%= _x('Above the post', 'Display the post title above the post block') %>
+        </label>
+    </div>
+    <div class="mailpoet_form_field_radio_option">
+        <label>
+            <input type="radio" name="mailpoet_automated_latest_content_title_position" class="mailpoet_automated_latest_content_title_position" value="aboveExcerpt" {{#ifCond model.titlePosition '==' 'aboveExcerpt'}}CHECKED{{/ifCond}}/>
+            <%= _x('Above the excerpt text', 'Display the post title above the post excerpt') %>
+        </label>
+    </div>
+</div>
+
 <hr class="mailpoet_separator mailpoet_posts_image_separator {{#ifCond model.displayType '===' 'titleOnly'}}mailpoet_hidden{{/ifCond}}" />
 
 <div class="mailpoet_posts_non_title_list_options {{#ifCond model.displayType '==' 'titleOnly'}}{{#ifCond model.titleFormat '==' 'ul'}}mailpoet_hidden{{/ifCond}}{{/ifCond}}">