Merge pull request #366 from mailpoet/newsletter_rendering

Newsletter rendering

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

@@ -30,3 +30,7 @@ $block-hover-highlight-color = $primary-active-color
 
 .mailpoet_content
   position: relative
+  line-height: 1.61803398875
+
+  p
+    line-height: 1.61803398875

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

@@ -1,6 +1,10 @@
 .mailpoet_footer_block
   padding-left: 0
   padding-right: 0
+  margin-bottom: 0
 
   .mailpoet_content
-    padding: 5px 20px
+    padding: 10px 20px
+
+    p
+      margin: 0

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

@@ -1,6 +1,10 @@
 .mailpoet_header_block
   padding-left: 0
   padding-right: 0
+  margin-bottom: 0
 
   .mailpoet_content
-    padding: 5px 20px
+    padding: 10px 20px
+
+    p
+      margin: 0

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

@@ -1,16 +1,21 @@
-$text-vertical-padding = 3px
-
 .mailpoet_text_block
   padding-left: 0
   padding-right: 0
 
   & > .mailpoet_content
     overflow: hidden
-    padding-top: 13px
+    padding-top: 0
-    padding-bottom: 13px
+    padding-bottom: 0px
     padding-left: 20px
     padding-right: 20px
 
+    h1, h2, h3, h4, h5, h6
+      padding: 0
+      margin: 0
+
+    p
+      margin-top: 0
+
 blockquote
   margin: 1em
   padding-left: 1em

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

@@ -81,7 +81,7 @@ define([
      * ALC posts on each model change
      */
     _scheduleFetchPosts: function() {
-      var timeout = 2000,
+      var timeout = 500,
         that = this;
       if (this._fetchPostsTimer !== undefined) {
         clearTimeout(this._fetchPostsTimer);

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

@@ -41,7 +41,7 @@ define([
     getTemplate: function() { return templates.footerBlock; },
     modelEvents: _.extend({
       'change:styles.block.backgroundColor change:styles.text.fontColor change:styles.text.fontFamily change:styles.text.fontSize change:styles.text.textAlign change:styles.link.fontColor change:styles.link.textDecoration': 'render',
-    }, base.BlockView.prototype.modelEvents),
+    }, _.omit(base.BlockView.prototype.modelEvents, 'change')),
     onDragSubstituteBy: function() { return Module.FooterWidgetView; },
     onRender: function() {
       this.toolsView = new Module.FooterBlockToolsView({ model: this.model });

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

@@ -41,7 +41,7 @@ define([
     getTemplate: function() { return templates.headerBlock; },
     modelEvents: _.extend({
       'change:styles.block.backgroundColor change:styles.text.fontColor change:styles.text.fontFamily change:styles.text.fontSize change:styles.text.textAlign change:styles.link.fontColor change:styles.link.textDecoration': 'render',
-    }, base.BlockView.prototype.modelEvents),
+    }, _.omit(base.BlockView.prototype.modelEvents, 'change')),
     onDragSubstituteBy: function() { return Module.HeaderWidgetView; },
     onRender: function() {
       this.toolsView = new Module.HeaderBlockToolsView({ model: this.model });

assets/js/src/newsletter_editor/components/sidebar.js

@@ -236,7 +236,7 @@ define([
         data: json,
       }).done(function(response){
         console.log('Should open a new window');
-        window.open('data:text/html,' + encodeURIComponent(response.rendered_body), '_blank');
+        window.open('data:text/html;charset=utf-8,' + encodeURIComponent(response.rendered_body), '_blank');
       }).fail(function(error) {
         console.log('Preview error', json);
         alert('Something went wrong, check console');

lib/Newsletter/Editor/PostTransformer.php

@@ -134,7 +134,7 @@ class PostTransformer {
     } else {
       $total_blocks = count($structure);
       $read_more_text = sprintf(
-        '<a href="%s">%s</a>',
+        '<p><a href="%s">%s</a></p>',
         get_permalink($post_id),
         $this->args['readMoreText']
       );

views/newsletter/templates/components/styles.hbs

@@ -3,25 +3,21 @@
     .mailpoet_text_block .mailpoet_content p {
         color: {{ text.fontColor }};
         font-size: {{ text.fontSize }};
-        line-height: {{ text.fontSize }};
         font-family: {{ text.fontFamily }};
     }
     .mailpoet_text_block .mailpoet_content h1 {
         color: {{ h1.fontColor }};
         font-size: {{ h1.fontSize }};
-        line-height: {{ h1.fontSize }};
         font-family: {{ h1.fontFamily }};
     }
     .mailpoet_text_block .mailpoet_content h2 {
         color: {{ h2.fontColor }};
         font-size: {{ h2.fontSize }};
-        line-height: {{ h2.fontSize }};
         font-family: {{ h2.fontFamily }};
     }
     .mailpoet_text_block .mailpoet_content h3 {
         color: {{ h3.fontColor }};
         font-size: {{ h3.fontSize }};
-        line-height: {{ h3.fontSize }};
         font-family: {{ h3.fontFamily }};
     }
     .mailpoet_content a {