add image alignment to Posts

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

@@ -52,7 +52,8 @@ $three-column-width = ($newsletter-width / 3) - (2 * $column-margin)
     width: $column-margin + $one-column-width + $column-margin
 
   // More than one column
-  & > .mailpoet_container_block > .mailpoet_container > .mailpoet_container_block > .mailpoet_container_horizontal
+  & > .mailpoet_container_block > .mailpoet_container > .mailpoet_container_block > .mailpoet_container_horizontal,
+  & > .mailpoet_container_block > .mailpoet_container > .mailpoet_posts_block > .mailpoet_posts_container > .mailpoet_container_block > .mailpoet_container > .mailpoet_container_block > .mailpoet_container_horizontal
 
     // Column number detection technique found here:
     // http://stackoverflow.com/questions/8720931/can-css-detect-the-number-of-children-an-element-has

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

@@ -54,3 +54,6 @@
 
 .mailpoet_post_selection_loading
   color: #999
+
+.mailpoet_posts_container > .mailpoet_droppable_block
+  width: 100%

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

@@ -59,7 +59,7 @@ define([
     },
     parse: function (response) {
       // If container has any blocks - add them to a collection
-      if (response.type === 'container' && _.has(response, 'blocks')) {
+      if (response.type === 'container' && _.has(response, 'blocks') && response.blocks.constructor === Array) {
         response.blocks = new BlockCollection(response.blocks, {
           parse: true
         });

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

@@ -52,6 +52,7 @@ define([
     defaults: function () {
       return this._getDefaults({
         type: 'posts',
+        withLayout: true,
         amount: '10',
         offset: 0,
         contentType: 'post', // 'post'|'page'|'mailpoet_page'
@@ -64,7 +65,7 @@ define([
         titleAlignment: 'left', // 'left'|'center'|'right'
         titleIsLink: false, // false|true
         imageFullWidth: false, // true|false
-        featuredImagePosition: 'belowTitle', // 'aboveTitle'|'belowTitle'|'none'
+        featuredImagePosition: 'centered', // 'centered'|'right'|'left'|'alternate'|'none'
         showAuthor: 'no', // 'no'|'aboveText'|'belowText'
         authorPrecededBy: 'Author:',
         showCategories: 'no', // 'no'|'aboveText'|'belowText'
@@ -190,7 +191,7 @@ define([
     getTemplate: function () { return window.templates.postsBlock; },
     modelEvents: {}, // Forcefully disable all events
     regions: _.extend({
-      postsRegion: '.mailpoet_posts_block_posts'
+      postsRegion: '.mailpoet_posts_container'
     }, base.BlockView.prototype.regions),
     onDragSubstituteBy: function () { return Module.PostsWidgetView; },
     initialize: function () {

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

@@ -1,5 +1,3 @@
 <div class="mailpoet_tools"></div>
-<div class="mailpoet_content">
+<div class="mailpoet_posts_container"></div>
-  <div class="mailpoet_posts_block_posts"></div>
-</div>
 <div class="mailpoet_block_highlight"></div>

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

@@ -95,14 +95,26 @@
         <div class="mailpoet_form_field_title"><%= __('Featured image position') %></div>
         <div class="mailpoet_form_field_radio_option">
             <label>
-                <input type="radio" name="mailpoet_posts_featured_image_position" class="mailpoet_posts_featured_image_position" value="belowTitle" {{#ifCond model.featuredImagePosition '==' 'belowTitle' }}CHECKED{{/ifCond}}/>
+                <input type="radio" name="mailpoet_posts_featured_image_position" class="mailpoet_posts_featured_image_position" value="centered" {{#ifCond model.featuredImagePosition '==' 'centered' }}CHECKED{{/ifCond}}/>
-                <%= __('Below title') %>
+                <%= __('Centered') %>
             </label>
         </div>
         <div class="mailpoet_form_field_radio_option">
             <label>
-                <input type="radio" name="mailpoet_posts_featured_image_position" class="mailpoet_posts_featured_image_position" value="aboveTitle" {{#ifCond model.featuredImagePosition '==' 'aboveTitle' }}CHECKED{{/ifCond}}/>
+                <input type="radio" name="mailpoet_posts_featured_image_position" class="mailpoet_posts_featured_image_position" value="left" {{#ifCond model.featuredImagePosition '==' 'left' }}CHECKED{{/ifCond}}/>
-                <%= __('Above block') %>
+                <%= __('Left') %>
+            </label>
+        </div>
+        <div class="mailpoet_form_field_radio_option">
+            <label>
+                <input type="radio" name="mailpoet_posts_featured_image_position" class="mailpoet_posts_featured_image_position" value="right" {{#ifCond model.featuredImagePosition '==' 'right' }}CHECKED{{/ifCond}}/>
+                <%= __('Right') %>
+            </label>
+        </div>
+        <div class="mailpoet_form_field_radio_option">
+            <label>
+                <input type="radio" name="mailpoet_posts_featured_image_position" class="mailpoet_posts_featured_image_position" value="alternate" {{#ifCond model.featuredImagePosition '==' 'alternate' }}CHECKED{{/ifCond}}/>
+                <%= __('Alternate') %>
             </label>
         </div>
         <div class="mailpoet_form_field_radio_option">