Bump up release version to 3.0.0-beta.4

Fix URLs containing shortcodes in TinyMCE [MAILPOET-670]

.circle_ci/apache/mailpoet.loc.conf

@@ -0,0 +1,15 @@
+Listen 8080
+
+<VirtualHost *:8080>
+  UseCanonicalName Off
+  ServerName mailpoet.loc
+  DocumentRoot /home/ubuntu/mailpoet/wordpress
+  DirectoryIndex index.php
+  LogLevel notice
+
+  <Directory /home/ubuntu/mailpoet/wordpress>
+    AllowOverride All
+    Allow from All
+  </Directory>
+</VirtualHost>
+

.gitignore

@@ -12,8 +12,9 @@ npm-debug.log
 /views/cache/**
 temp
 .idea
-wysija-newsletters.zip
+mailpoet.zip
 tests/javascript/testBundles
 assets/css/*.css
 assets/js/*.js
 .vagrant
+lang

RoboFile.php

@@ -3,14 +3,21 @@
 class RoboFile extends \Robo\Tasks {
 
   function install() {
-    $this->_exec('./composer.phar install');
+    return $this->taskExecStack()
-    $this->_exec('npm install');
+      ->stopOnFail()
+      ->exec('./composer.phar install')
+      ->exec('npm install')
+      ->run();
   }
 
   function update() {
     $this->say(getenv('WP_TEST_URL'));
-    $this->_exec('./composer.phar update');
+
-    $this->_exec('npm update');
+    return $this->taskExecStack()
+      ->stopOnFail()
+      ->exec('./composer.phar update')
+      ->exec('npm update')
+      ->run();
   }
 
   protected function rsearch($folder, $extensions = array()) {
@@ -61,12 +68,14 @@ class RoboFile extends \Robo\Tasks {
   }
 
   function compileAll() {
-    $this->compileJs();
+    $collection = $this->collection();
-    $this->compileCss();
+    $collection->add(array($this, 'compileJs'));
+    $collection->add(array($this, 'compileCss'));
+    return $collection->run();
   }
 
   function compileJs() {
-    $this->_exec('./node_modules/webpack/bin/webpack.js');
+    return $this->_exec('./node_modules/webpack/bin/webpack.js --bail');
   }
 
   function compileCss() {
@@ -78,7 +87,7 @@ class RoboFile extends \Robo\Tasks {
       'assets/css/src/importExport.styl'
     );
 
-    $this->_exec(join(' ', array(
+    return $this->_exec(join(' ', array(
       './node_modules/stylus/bin/stylus',
       '--include ./node_modules',
       '--include-css',
@@ -89,56 +98,105 @@ class RoboFile extends \Robo\Tasks {
   }
 
   function makepot() {
-    $this->_exec('./node_modules/.bin/grunt makepot'.
+    return $this->_exec('./node_modules/.bin/grunt makepot'.
       ' --gruntfile '.__DIR__.'/tasks/makepot/makepot.js'.
       ' --base_path '.__DIR__
     );
   }
 
   function pushpot() {
-    $this->_exec('./node_modules/.bin/grunt pushpot'.
+    return $this->_exec('./node_modules/.bin/grunt pushpot'.
       ' --gruntfile '.__DIR__.'/tasks/makepot/makepot.js'.
       ' --base_path '.__DIR__
     );
   }
 
-  function testUnit($file = null) {
+  function testUnit($opts=['file' => null, 'xml' => false]) {
     $this->loadEnv();
     $this->_exec('vendor/bin/codecept build');
-    $this->_exec('vendor/bin/codecept run unit -f '.(($file) ? $file : ''));
+
+    $command = 'vendor/bin/codecept run unit -f '.(($opts['file']) ? $opts['file'] : '');
+
+    if($opts['xml']) {
+      $command .= ' --xml';
+    }
+    return $this->_exec($command);
   }
 
-  function testCoverage($file = null) {
+  function testCoverage($opts=['file' => null, 'xml' => false]) {
     $this->loadEnv();
     $this->_exec('vendor/bin/codecept build');
-    $this->_exec(join(' ', array(
+    $command = join(' ', array(
       'vendor/bin/codecept run',
-      (($file) ? $file : ''),
+      (($opts['file']) ? $opts['file'] : ''),
       '--coverage',
-      '--coverage-html'
+      ($opts['xml']) ? '--coverage-xml' : '--coverage-html'
-    )));
+    ));
+
+    if($opts['xml']) {
+      $command .= ' --xml';
+    }
+    return $this->_exec($command);
   }
 
-  function testJavascript() {
+  function testJavascript($xml_output_file = null) {
     $this->compileJs();
 
-    $this->_exec(join(' ', array(
+    $command = join(' ', array(
       './node_modules/.bin/mocha',
       '-r tests/javascript/mochaTestHelper.js',
       'tests/javascript/testBundles/**/*.js'
-    )));
+    ));
+
+    if(!empty($xml_output_file)) {
+      $command .= sprintf(
+        ' --reporter xunit --reporter-options output="%s"',
+        $xml_output_file
+      );
+    }
+
+    return $this->_exec($command);
   }
 
   function testDebug() {
     $this->_exec('vendor/bin/codecept build');
     $this->loadEnv();
-    $this->_exec('vendor/bin/codecept run unit --debug');
+    return $this->_exec('vendor/bin/codecept run unit --debug');
   }
 
   function testFailed() {
     $this->loadEnv();
     $this->_exec('vendor/bin/codecept build');
-    $this->_exec('vendor/bin/codecept run -g failed');
+    return $this->_exec('vendor/bin/codecept run -g failed');
+  }
+
+  function qa() {
+    $collection = $this->collection();
+    $collection->add(array($this, 'qaLint'));
+    $collection->add(function() {
+      return $this->qaCodeSniffer('all');
+    });
+    return $collection->run();
+  }
+
+  function qaLint() {
+    return $this->_exec('./tasks/php_lint.sh lib/ tests/ mailpoet.php');
+  }
+
+  function qaCodeSniffer($severity='errors') {
+    if ($severity === 'all') {
+      $severityFlag = '-w';
+    } else {
+      $severityFlag = '-n';
+    }
+    return $this->_exec(
+      './vendor/bin/phpcs '.
+      '--standard=./tasks/code_sniffer/MailPoet '.
+      '--ignore=./lib/Util/Sudzy/*,./lib/Util/CSS.php,./lib/Util/XLSXWriter.php,'.
+      './lib/Config/PopulatorData/Templates/* '.
+      'lib/ '.
+      $severityFlag
+    );
   }
 
   protected function loadEnv() {

assets/css/src/admin.styl

@@ -1,6 +1,7 @@
 @import 'nib'
 
 @require 'select2/dist/css/select2.css'
+@require 'datepicker/datepicker'
 
 @require 'common'
 @require 'modal'
@@ -8,6 +9,8 @@
 
 @require 'form_editor'
 @require 'listing'
+@require 'listing/newsletters'
+
 @require 'box'
 @require 'breadcrumb'
 

assets/css/src/box.styl

@@ -1,3 +1,15 @@
+$box-width = 425px
+$box-height = 150px
+$thumbnail-width = $box-height
+$thumbnail-height = $thumbnail-width
+$box-description-space-between-heading-and-paragraph = 5px
+$box-description-height = 110px
+$box-description-text-height = $box-description-height - $box-description-space-between-heading-and-paragraph
+$box-heading-line-height = $box-description-text-height / 4
+$box-heading-font-size = $box-heading-line-height * 5/7
+$box-description-line-height = $box-heading-line-height / 2
+$box-description-font-size = $box-description-line-height
+
 .mailpoet_boxes.mailpoet_boxes_loading
   opacity: 0.2
 
@@ -6,8 +18,8 @@
   position: relative
   padding: 15px
   margin: 15px 25px 0 0
-  width: 425px
+  width: $box-width
-  height: 150px
+  height: $box-height
   border: 1px solid #dedede
   background-color: #fff
 
@@ -18,22 +30,21 @@
   background-position: center
   color: #222
   border: 1px solid #ccc
-  width: 150px
+  width: $thumbnail-height
-  height: 150px
+  height: $thumbnail-width
   margin-right: 15px
   float: left
   overflow: hidden
   position: relative
 
   img
-    min-width: 150px
+    min-width: $thumbnail-width
-    min-height: 150px
     height: auto
     width: 110%
     position: relative
-    top: 0
+    top: 50%
     left: 50%
-    transform: translate(-50%, 0%)
+    transform: translate(-50%, -50%)
 
   .mailpoet_overlay
     position: absolute
@@ -61,16 +72,21 @@
 .mailpoet_boxes .mailpoet_description
   float:left
   width: 245px
-  max-height: calc(110px - 2em)
+  max-height: $box-description-height
-  padding-bottom: 2em
+  padding-bottom: 0
   overflow: hidden
 
-.mailpoet_boxes .mailpoet_description h3
+  h3
-  margin: 0 0 1em 0
+    margin: 0 0 $box-description-space-between-heading-and-paragraph 0
     overflow: hidden
-  white-space: nowrap
+    max-width: 210px
-  text-overflow: ellipsis
+    line-height: $box-heading-line-height
-  max-width: 220px
+    font-size: $box-heading-font-size
+
+  p
+    font-size: $box-description-font-size
+    line-height: $box-description-line-height
+    margin: 0
 
 .mailpoet_boxes .mailpoet_actions
   position: absolute

assets/css/src/datepicker/datepicker.styl

@@ -0,0 +1,2 @@
+@require 'jquery-ui-1.10.1.css'
+@require 'melon.datepicker.css'

assets/css/src/datepicker/jquery-ui-1.10.1.css

@@ -0,0 +1,649 @@
+/*! jQuery UI - v1.10.1 - 2013-03-10
+* http://jqueryui.com
+* Includes: jquery.ui.core.css, jquery.ui.datepicker.css
+* To view and modify this theme, visit http://jqueryui.com/themeroller/?ffDefault=Trebuchet%20MS%2CTahoma%2CVerdana%2CArial%2Csans-serif&fwDefault=bold&fsDefault=1.1em&cornerRadius=4px&bgColorHeader=f6a828&bgTextureHeader=gloss_wave&bgImgOpacityHeader=35&borderColorHeader=e78f08&fcHeader=ffffff&iconColorHeader=ffffff&bgColorContent=eeeeee&bgTextureContent=highlight_soft&bgImgOpacityContent=100&borderColorContent=dddddd&fcContent=333333&iconColorContent=222222&bgColorDefault=f6f6f6&bgTextureDefault=glass&bgImgOpacityDefault=100&borderColorDefault=cccccc&fcDefault=1c94c4&iconColorDefault=ef8c08&bgColorHover=fdf5ce&bgTextureHover=glass&bgImgOpacityHover=100&borderColorHover=fbcb09&fcHover=c77405&iconColorHover=ef8c08&bgColorActive=ffffff&bgTextureActive=glass&bgImgOpacityActive=65&borderColorActive=fbd850&fcActive=eb8f00&iconColorActive=ef8c08&bgColorHighlight=ffe45c&bgTextureHighlight=highlight_soft&bgImgOpacityHighlight=75&borderColorHighlight=fed22f&fcHighlight=363636&iconColorHighlight=228ef1&bgColorError=b81900&bgTextureError=diagonals_thick&bgImgOpacityError=18&borderColorError=cd0a0a&fcError=ffffff&iconColorError=ffd27a&bgColorOverlay=666666&bgTextureOverlay=diagonals_thick&bgImgOpacityOverlay=20&opacityOverlay=50&bgColorShadow=000000&bgTextureShadow=flat&bgImgOpacityShadow=10&opacityShadow=20&thicknessShadow=5px&offsetTopShadow=-5px&offsetLeftShadow=-5px&cornerRadiusShadow=5px
+* Copyright (c) 2013 jQuery Foundation and other contributors Licensed MIT */
+
+/* Layout helpers
+----------------------------------*/
+.ui-helper-hidden {
+	display: none;
+}
+.ui-helper-hidden-accessible {
+	border: 0;
+	clip: rect(0 0 0 0);
+	height: 1px;
+	margin: -1px;
+	overflow: hidden;
+	padding: 0;
+	position: absolute;
+	width: 1px;
+}
+.ui-helper-reset {
+	margin: 0;
+	padding: 0;
+	border: 0;
+	outline: 0;
+	line-height: 1.3;
+	text-decoration: none;
+	font-size: 100%;
+	list-style: none;
+}
+.ui-helper-clearfix:before,
+.ui-helper-clearfix:after {
+	content: "";
+	display: table;
+	border-collapse: collapse;
+}
+.ui-helper-clearfix:after {
+	clear: both;
+}
+.ui-helper-clearfix {
+	min-height: 0; /* support: IE7 */
+}
+.ui-helper-zfix {
+	width: 100%;
+	height: 100%;
+	top: 0;
+	left: 0;
+	position: absolute;
+	opacity: 0;
+	filter:Alpha(Opacity=0);
+}
+
+.ui-front {
+	z-index: 100;
+}
+
+
+/* Interaction Cues
+----------------------------------*/
+.ui-state-disabled {
+	cursor: default !important;
+}
+
+
+/* Icons
+----------------------------------*/
+
+/* states and images */
+.ui-icon {
+	display: block;
+	text-indent: -99999px;
+	overflow: hidden;
+	background-repeat: no-repeat;
+}
+
+
+/* Misc visuals
+----------------------------------*/
+
+/* Overlays */
+.ui-widget-overlay {
+	position: fixed;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+}
+.ui-datepicker {
+	width: 17em;
+	padding: .2em .2em 0;
+	display: none;
+}
+.ui-datepicker .ui-datepicker-header {
+	position: relative;
+	padding: .2em 0;
+}
+.ui-datepicker .ui-datepicker-prev,
+.ui-datepicker .ui-datepicker-next {
+	position: absolute;
+	top: 2px;
+	width: 1.8em;
+	height: 1.8em;
+}
+.ui-datepicker .ui-datepicker-prev-hover,
+.ui-datepicker .ui-datepicker-next-hover {
+	top: 1px;
+}
+.ui-datepicker .ui-datepicker-prev {
+	left: 2px;
+}
+.ui-datepicker .ui-datepicker-next {
+	right: 2px;
+}
+.ui-datepicker .ui-datepicker-prev-hover {
+	left: 1px;
+}
+.ui-datepicker .ui-datepicker-next-hover {
+	right: 1px;
+}
+.ui-datepicker .ui-datepicker-prev span,
+.ui-datepicker .ui-datepicker-next span {
+	display: block;
+	position: absolute;
+	left: 50%;
+	margin-left: -8px;
+	top: 50%;
+	margin-top: -8px;
+}
+.ui-datepicker .ui-datepicker-title {
+	margin: 0 2.3em;
+	line-height: 1.8em;
+	text-align: center;
+}
+.ui-datepicker .ui-datepicker-title select {
+	font-size: 1em;
+	margin: 1px 0;
+}
+.ui-datepicker select.ui-datepicker-month-year {
+	width: 100%;
+}
+.ui-datepicker select.ui-datepicker-month,
+.ui-datepicker select.ui-datepicker-year {
+	width: 49%;
+}
+.ui-datepicker table {
+	width: 100%;
+	font-size: .9em;
+	border-collapse: collapse;
+	margin: 0 0 .4em;
+}
+.ui-datepicker th {
+	padding: .7em .3em;
+	text-align: center;
+	font-weight: bold;
+	border: 0;
+}
+.ui-datepicker td {
+	border: 0;
+	padding: 1px;
+}
+.ui-datepicker td span,
+.ui-datepicker td a {
+	display: block;
+	padding: .2em;
+	text-align: right;
+	text-decoration: none;
+}
+.ui-datepicker .ui-datepicker-buttonpane {
+	background-image: none;
+	margin: .7em 0 0 0;
+	padding: 0 .2em;
+	border-left: 0;
+	border-right: 0;
+	border-bottom: 0;
+}
+.ui-datepicker .ui-datepicker-buttonpane button {
+	float: right;
+	margin: .5em .2em .4em;
+	cursor: pointer;
+	padding: .2em .6em .3em .6em;
+	width: auto;
+	overflow: visible;
+}
+.ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-current {
+	float: left;
+}
+
+/* with multiple calendars */
+.ui-datepicker.ui-datepicker-multi {
+	width: auto;
+}
+.ui-datepicker-multi .ui-datepicker-group {
+	float: left;
+}
+.ui-datepicker-multi .ui-datepicker-group table {
+	width: 95%;
+	margin: 0 auto .4em;
+}
+.ui-datepicker-multi-2 .ui-datepicker-group {
+	width: 50%;
+}
+.ui-datepicker-multi-3 .ui-datepicker-group {
+	width: 33.3%;
+}
+.ui-datepicker-multi-4 .ui-datepicker-group {
+	width: 25%;
+}
+.ui-datepicker-multi .ui-datepicker-group-last .ui-datepicker-header,
+.ui-datepicker-multi .ui-datepicker-group-middle .ui-datepicker-header {
+	border-left-width: 0;
+}
+.ui-datepicker-multi .ui-datepicker-buttonpane {
+	clear: left;
+}
+.ui-datepicker-row-break {
+	clear: both;
+	width: 100%;
+	font-size: 0;
+}
+
+/* RTL support */
+.ui-datepicker-rtl {
+	direction: rtl;
+}
+.ui-datepicker-rtl .ui-datepicker-prev {
+	right: 2px;
+	left: auto;
+}
+.ui-datepicker-rtl .ui-datepicker-next {
+	left: 2px;
+	right: auto;
+}
+.ui-datepicker-rtl .ui-datepicker-prev:hover {
+	right: 1px;
+	left: auto;
+}
+.ui-datepicker-rtl .ui-datepicker-next:hover {
+	left: 1px;
+	right: auto;
+}
+.ui-datepicker-rtl .ui-datepicker-buttonpane {
+	clear: right;
+}
+.ui-datepicker-rtl .ui-datepicker-buttonpane button {
+	float: left;
+}
+.ui-datepicker-rtl .ui-datepicker-buttonpane button.ui-datepicker-current,
+.ui-datepicker-rtl .ui-datepicker-group {
+	float: right;
+}
+.ui-datepicker-rtl .ui-datepicker-group-last .ui-datepicker-header,
+.ui-datepicker-rtl .ui-datepicker-group-middle .ui-datepicker-header {
+	border-right-width: 0;
+	border-left-width: 1px;
+}
+
+/* Component containers
+----------------------------------*/
+.ui-widget {
+	font-family: Trebuchet MS,Tahoma,Verdana,Arial,sans-serif;
+	font-size: 1.1em;
+}
+.ui-widget .ui-widget {
+	font-size: 1em;
+}
+.ui-widget input,
+.ui-widget select,
+.ui-widget textarea,
+.ui-widget button {
+	font-family: Trebuchet MS,Tahoma,Verdana,Arial,sans-serif;
+	font-size: 1em;
+}
+.ui-widget-content {
+	border: 1px solid #dddddd;
+	background: #eeeeee url(../img/datepicker/ui-bg_highlight-soft_100_eeeeee_1x100.png) 50% top repeat-x;
+	color: #333333;
+}
+.ui-widget-content a {
+	color: #333333;
+}
+.ui-widget-header {
+	border: 1px solid #e78f08;
+	background: #f6a828 url(../img/datepicker/ui-bg_gloss-wave_35_f6a828_500x100.png) 50% 50% repeat-x;
+	color: #ffffff;
+	font-weight: bold;
+}
+.ui-widget-header a {
+	color: #ffffff;
+}
+
+/* Interaction states
+----------------------------------*/
+.ui-state-default,
+.ui-widget-content .ui-state-default,
+.ui-widget-header .ui-state-default {
+	border: 1px solid #cccccc;
+	background: #f6f6f6 url(../img/datepicker/ui-bg_glass_100_f6f6f6_1x400.png) 50% 50% repeat-x;
+	font-weight: bold;
+	color: #1c94c4;
+}
+.ui-state-default a,
+.ui-state-default a:link,
+.ui-state-default a:visited {
+	color: #1c94c4;
+	text-decoration: none;
+}
+.ui-state-hover,
+.ui-widget-content .ui-state-hover,
+.ui-widget-header .ui-state-hover,
+.ui-state-focus,
+.ui-widget-content .ui-state-focus,
+.ui-widget-header .ui-state-focus {
+	border: 1px solid #fbcb09;
+	background: #fdf5ce url(../img/datepicker/ui-bg_glass_100_fdf5ce_1x400.png) 50% 50% repeat-x;
+	font-weight: bold;
+	color: #c77405;
+}
+.ui-state-hover a,
+.ui-state-hover a:hover,
+.ui-state-hover a:link,
+.ui-state-hover a:visited {
+	color: #c77405;
+	text-decoration: none;
+}
+.ui-state-active,
+.ui-widget-content .ui-state-active,
+.ui-widget-header .ui-state-active {
+	border: 1px solid #fbd850;
+	background: #ffffff url(../img/datepicker/ui-bg_glass_65_ffffff_1x400.png) 50% 50% repeat-x;
+	font-weight: bold;
+	color: #eb8f00;
+}
+.ui-state-active a,
+.ui-state-active a:link,
+.ui-state-active a:visited {
+	color: #eb8f00;
+	text-decoration: none;
+}
+
+/* Interaction Cues
+----------------------------------*/
+.ui-state-highlight,
+.ui-widget-content .ui-state-highlight,
+.ui-widget-header .ui-state-highlight {
+	border: 1px solid #fed22f;
+	background: #ffe45c url(../img/datepicker/ui-bg_highlight-soft_75_ffe45c_1x100.png) 50% top repeat-x;
+	color: #363636;
+}
+.ui-state-highlight a,
+.ui-widget-content .ui-state-highlight a,
+.ui-widget-header .ui-state-highlight a {
+	color: #363636;
+}
+.ui-state-error,
+.ui-widget-content .ui-state-error,
+.ui-widget-header .ui-state-error {
+	border: 1px solid #cd0a0a;
+	background: #b81900 url(../img/datepicker/ui-bg_diagonals-thick_18_b81900_40x40.png) 50% 50% repeat;
+	color: #ffffff;
+}
+.ui-state-error a,
+.ui-widget-content .ui-state-error a,
+.ui-widget-header .ui-state-error a {
+	color: #ffffff;
+}
+.ui-state-error-text,
+.ui-widget-content .ui-state-error-text,
+.ui-widget-header .ui-state-error-text {
+	color: #ffffff;
+}
+.ui-priority-primary,
+.ui-widget-content .ui-priority-primary,
+.ui-widget-header .ui-priority-primary {
+	font-weight: bold;
+}
+.ui-priority-secondary,
+.ui-widget-content .ui-priority-secondary,
+.ui-widget-header .ui-priority-secondary {
+	opacity: .7;
+	filter:Alpha(Opacity=70);
+	font-weight: normal;
+}
+.ui-state-disabled,
+.ui-widget-content .ui-state-disabled,
+.ui-widget-header .ui-state-disabled {
+	opacity: .35;
+	filter:Alpha(Opacity=35);
+	background-image: none;
+}
+.ui-state-disabled .ui-icon {
+	filter:Alpha(Opacity=35); /* For IE8 - See #6059 */
+}
+
+/* Icons
+----------------------------------*/
+
+/* states and images */
+.ui-icon {
+	width: 16px;
+	height: 16px;
+	background-position: 16px 16px;
+}
+.ui-icon,
+.ui-widget-content .ui-icon {
+	background-image: url(../img/datepicker/ui-icons_222222_256x240.png);
+}
+.ui-widget-header .ui-icon {
+	background-image: url(../img/datepicker/ui-icons_ffffff_256x240.png);
+}
+.ui-state-default .ui-icon {
+	background-image: url(../img/datepicker/ui-icons_ef8c08_256x240.png);
+}
+.ui-state-hover .ui-icon,
+.ui-state-focus .ui-icon {
+	background-image: url(../img/datepicker/ui-icons_ef8c08_256x240.png);
+}
+.ui-state-active .ui-icon {
+	background-image: url(../img/datepicker/ui-icons_ef8c08_256x240.png);
+}
+.ui-state-highlight .ui-icon {
+	background-image: url(../img/datepicker/ui-icons_228ef1_256x240.png);
+}
+.ui-state-error .ui-icon,
+.ui-state-error-text .ui-icon {
+	background-image: url(../img/datepicker/ui-icons_ffd27a_256x240.png);
+}
+
+/* positioning */
+.ui-icon-carat-1-n { background-position: 0 0; }
+.ui-icon-carat-1-ne { background-position: -16px 0; }
+.ui-icon-carat-1-e { background-position: -32px 0; }
+.ui-icon-carat-1-se { background-position: -48px 0; }
+.ui-icon-carat-1-s { background-position: -64px 0; }
+.ui-icon-carat-1-sw { background-position: -80px 0; }
+.ui-icon-carat-1-w { background-position: -96px 0; }
+.ui-icon-carat-1-nw { background-position: -112px 0; }
+.ui-icon-carat-2-n-s { background-position: -128px 0; }
+.ui-icon-carat-2-e-w { background-position: -144px 0; }
+.ui-icon-triangle-1-n { background-position: 0 -16px; }
+.ui-icon-triangle-1-ne { background-position: -16px -16px; }
+.ui-icon-triangle-1-e { background-position: -32px -16px; }
+.ui-icon-triangle-1-se { background-position: -48px -16px; }
+.ui-icon-triangle-1-s { background-position: -64px -16px; }
+.ui-icon-triangle-1-sw { background-position: -80px -16px; }
+.ui-icon-triangle-1-w { background-position: -96px -16px; }
+.ui-icon-triangle-1-nw { background-position: -112px -16px; }
+.ui-icon-triangle-2-n-s { background-position: -128px -16px; }
+.ui-icon-triangle-2-e-w { background-position: -144px -16px; }
+.ui-icon-arrow-1-n { background-position: 0 -32px; }
+.ui-icon-arrow-1-ne { background-position: -16px -32px; }
+.ui-icon-arrow-1-e { background-position: -32px -32px; }
+.ui-icon-arrow-1-se { background-position: -48px -32px; }
+.ui-icon-arrow-1-s { background-position: -64px -32px; }
+.ui-icon-arrow-1-sw { background-position: -80px -32px; }
+.ui-icon-arrow-1-w { background-position: -96px -32px; }
+.ui-icon-arrow-1-nw { background-position: -112px -32px; }
+.ui-icon-arrow-2-n-s { background-position: -128px -32px; }
+.ui-icon-arrow-2-ne-sw { background-position: -144px -32px; }
+.ui-icon-arrow-2-e-w { background-position: -160px -32px; }
+.ui-icon-arrow-2-se-nw { background-position: -176px -32px; }
+.ui-icon-arrowstop-1-n { background-position: -192px -32px; }
+.ui-icon-arrowstop-1-e { background-position: -208px -32px; }
+.ui-icon-arrowstop-1-s { background-position: -224px -32px; }
+.ui-icon-arrowstop-1-w { background-position: -240px -32px; }
+.ui-icon-arrowthick-1-n { background-position: 0 -48px; }
+.ui-icon-arrowthick-1-ne { background-position: -16px -48px; }
+.ui-icon-arrowthick-1-e { background-position: -32px -48px; }
+.ui-icon-arrowthick-1-se { background-position: -48px -48px; }
+.ui-icon-arrowthick-1-s { background-position: -64px -48px; }
+.ui-icon-arrowthick-1-sw { background-position: -80px -48px; }
+.ui-icon-arrowthick-1-w { background-position: -96px -48px; }
+.ui-icon-arrowthick-1-nw { background-position: -112px -48px; }
+.ui-icon-arrowthick-2-n-s { background-position: -128px -48px; }
+.ui-icon-arrowthick-2-ne-sw { background-position: -144px -48px; }
+.ui-icon-arrowthick-2-e-w { background-position: -160px -48px; }
+.ui-icon-arrowthick-2-se-nw { background-position: -176px -48px; }
+.ui-icon-arrowthickstop-1-n { background-position: -192px -48px; }
+.ui-icon-arrowthickstop-1-e { background-position: -208px -48px; }
+.ui-icon-arrowthickstop-1-s { background-position: -224px -48px; }
+.ui-icon-arrowthickstop-1-w { background-position: -240px -48px; }
+.ui-icon-arrowreturnthick-1-w { background-position: 0 -64px; }
+.ui-icon-arrowreturnthick-1-n { background-position: -16px -64px; }
+.ui-icon-arrowreturnthick-1-e { background-position: -32px -64px; }
+.ui-icon-arrowreturnthick-1-s { background-position: -48px -64px; }
+.ui-icon-arrowreturn-1-w { background-position: -64px -64px; }
+.ui-icon-arrowreturn-1-n { background-position: -80px -64px; }
+.ui-icon-arrowreturn-1-e { background-position: -96px -64px; }
+.ui-icon-arrowreturn-1-s { background-position: -112px -64px; }
+.ui-icon-arrowrefresh-1-w { background-position: -128px -64px; }
+.ui-icon-arrowrefresh-1-n { background-position: -144px -64px; }
+.ui-icon-arrowrefresh-1-e { background-position: -160px -64px; }
+.ui-icon-arrowrefresh-1-s { background-position: -176px -64px; }
+.ui-icon-arrow-4 { background-position: 0 -80px; }
+.ui-icon-arrow-4-diag { background-position: -16px -80px; }
+.ui-icon-extlink { background-position: -32px -80px; }
+.ui-icon-newwin { background-position: -48px -80px; }
+.ui-icon-refresh { background-position: -64px -80px; }
+.ui-icon-shuffle { background-position: -80px -80px; }
+.ui-icon-transfer-e-w { background-position: -96px -80px; }
+.ui-icon-transferthick-e-w { background-position: -112px -80px; }
+.ui-icon-folder-collapsed { background-position: 0 -96px; }
+.ui-icon-folder-open { background-position: -16px -96px; }
+.ui-icon-document { background-position: -32px -96px; }
+.ui-icon-document-b { background-position: -48px -96px; }
+.ui-icon-note { background-position: -64px -96px; }
+.ui-icon-mail-closed { background-position: -80px -96px; }
+.ui-icon-mail-open { background-position: -96px -96px; }
+.ui-icon-suitcase { background-position: -112px -96px; }
+.ui-icon-comment { background-position: -128px -96px; }
+.ui-icon-person { background-position: -144px -96px; }
+.ui-icon-print { background-position: -160px -96px; }
+.ui-icon-trash { background-position: -176px -96px; }
+.ui-icon-locked { background-position: -192px -96px; }
+.ui-icon-unlocked { background-position: -208px -96px; }
+.ui-icon-bookmark { background-position: -224px -96px; }
+.ui-icon-tag { background-position: -240px -96px; }
+.ui-icon-home { background-position: 0 -112px; }
+.ui-icon-flag { background-position: -16px -112px; }
+.ui-icon-calendar { background-position: -32px -112px; }
+.ui-icon-cart { background-position: -48px -112px; }
+.ui-icon-pencil { background-position: -64px -112px; }
+.ui-icon-clock { background-position: -80px -112px; }
+.ui-icon-disk { background-position: -96px -112px; }
+.ui-icon-calculator { background-position: -112px -112px; }
+.ui-icon-zoomin { background-position: -128px -112px; }
+.ui-icon-zoomout { background-position: -144px -112px; }
+.ui-icon-search { background-position: -160px -112px; }
+.ui-icon-wrench { background-position: -176px -112px; }
+.ui-icon-gear { background-position: -192px -112px; }
+.ui-icon-heart { background-position: -208px -112px; }
+.ui-icon-star { background-position: -224px -112px; }
+.ui-icon-link { background-position: -240px -112px; }
+.ui-icon-cancel { background-position: 0 -128px; }
+.ui-icon-plus { background-position: -16px -128px; }
+.ui-icon-plusthick { background-position: -32px -128px; }
+.ui-icon-minus { background-position: -48px -128px; }
+.ui-icon-minusthick { background-position: -64px -128px; }
+.ui-icon-close { background-position: -80px -128px; }
+.ui-icon-closethick { background-position: -96px -128px; }
+.ui-icon-key { background-position: -112px -128px; }
+.ui-icon-lightbulb { background-position: -128px -128px; }
+.ui-icon-scissors { background-position: -144px -128px; }
+.ui-icon-clipboard { background-position: -160px -128px; }
+.ui-icon-copy { background-position: -176px -128px; }
+.ui-icon-contact { background-position: -192px -128px; }
+.ui-icon-image { background-position: -208px -128px; }
+.ui-icon-video { background-position: -224px -128px; }
+.ui-icon-script { background-position: -240px -128px; }
+.ui-icon-alert { background-position: 0 -144px; }
+.ui-icon-info { background-position: -16px -144px; }
+.ui-icon-notice { background-position: -32px -144px; }
+.ui-icon-help { background-position: -48px -144px; }
+.ui-icon-check { background-position: -64px -144px; }
+.ui-icon-bullet { background-position: -80px -144px; }
+.ui-icon-radio-on { background-position: -96px -144px; }
+.ui-icon-radio-off { background-position: -112px -144px; }
+.ui-icon-pin-w { background-position: -128px -144px; }
+.ui-icon-pin-s { background-position: -144px -144px; }
+.ui-icon-play { background-position: 0 -160px; }
+.ui-icon-pause { background-position: -16px -160px; }
+.ui-icon-seek-next { background-position: -32px -160px; }
+.ui-icon-seek-prev { background-position: -48px -160px; }
+.ui-icon-seek-end { background-position: -64px -160px; }
+.ui-icon-seek-start { background-position: -80px -160px; }
+/* ui-icon-seek-first is deprecated, use ui-icon-seek-start instead */
+.ui-icon-seek-first { background-position: -80px -160px; }
+.ui-icon-stop { background-position: -96px -160px; }
+.ui-icon-eject { background-position: -112px -160px; }
+.ui-icon-volume-off { background-position: -128px -160px; }
+.ui-icon-volume-on { background-position: -144px -160px; }
+.ui-icon-power { background-position: 0 -176px; }
+.ui-icon-signal-diag { background-position: -16px -176px; }
+.ui-icon-signal { background-position: -32px -176px; }
+.ui-icon-battery-0 { background-position: -48px -176px; }
+.ui-icon-battery-1 { background-position: -64px -176px; }
+.ui-icon-battery-2 { background-position: -80px -176px; }
+.ui-icon-battery-3 { background-position: -96px -176px; }
+.ui-icon-circle-plus { background-position: 0 -192px; }
+.ui-icon-circle-minus { background-position: -16px -192px; }
+.ui-icon-circle-close { background-position: -32px -192px; }
+.ui-icon-circle-triangle-e { background-position: -48px -192px; }
+.ui-icon-circle-triangle-s { background-position: -64px -192px; }
+.ui-icon-circle-triangle-w { background-position: -80px -192px; }
+.ui-icon-circle-triangle-n { background-position: -96px -192px; }
+.ui-icon-circle-arrow-e { background-position: -112px -192px; }
+.ui-icon-circle-arrow-s { background-position: -128px -192px; }
+.ui-icon-circle-arrow-w { background-position: -144px -192px; }
+.ui-icon-circle-arrow-n { background-position: -160px -192px; }
+.ui-icon-circle-zoomin { background-position: -176px -192px; }
+.ui-icon-circle-zoomout { background-position: -192px -192px; }
+.ui-icon-circle-check { background-position: -208px -192px; }
+.ui-icon-circlesmall-plus { background-position: 0 -208px; }
+.ui-icon-circlesmall-minus { background-position: -16px -208px; }
+.ui-icon-circlesmall-close { background-position: -32px -208px; }
+.ui-icon-squaresmall-plus { background-position: -48px -208px; }
+.ui-icon-squaresmall-minus { background-position: -64px -208px; }
+.ui-icon-squaresmall-close { background-position: -80px -208px; }
+.ui-icon-grip-dotted-vertical { background-position: 0 -224px; }
+.ui-icon-grip-dotted-horizontal { background-position: -16px -224px; }
+.ui-icon-grip-solid-vertical { background-position: -32px -224px; }
+.ui-icon-grip-solid-horizontal { background-position: -48px -224px; }
+.ui-icon-gripsmall-diagonal-se { background-position: -64px -224px; }
+.ui-icon-grip-diagonal-se { background-position: -80px -224px; }
+
+
+/* Misc visuals
+----------------------------------*/
+
+/* Corner radius */
+.ui-corner-all,
+.ui-corner-top,
+.ui-corner-left,
+.ui-corner-tl {
+	border-top-left-radius: 4px;
+}
+.ui-corner-all,
+.ui-corner-top,
+.ui-corner-right,
+.ui-corner-tr {
+	border-top-right-radius: 4px;
+}
+.ui-corner-all,
+.ui-corner-bottom,
+.ui-corner-left,
+.ui-corner-bl {
+	border-bottom-left-radius: 4px;
+}
+.ui-corner-all,
+.ui-corner-bottom,
+.ui-corner-right,
+.ui-corner-br {
+	border-bottom-right-radius: 4px;
+}
+
+/* Overlays */
+.ui-widget-overlay {
+	background: #666666 url(../img/datepicker/ui-bg_diagonals-thick_20_666666_40x40.png) 50% 50% repeat;
+	opacity: .5;
+	filter: Alpha(Opacity=50);
+}
+.ui-widget-shadow {
+	margin: -5px 0 0 -5px;
+	padding: 5px;
+	background: #000000 url(../img/datepicker/ui-bg_flat_10_000000_40x100.png) 50% 50% repeat-x;
+	opacity: .2;
+	filter: Alpha(Opacity=20);
+	border-radius: 5px;
+}

assets/css/src/datepicker/melon.datepicker.css

@@ -0,0 +1,115 @@
+/**
+ * Melon skin from: https://github.com/rtsinani/jquery-datepicker-skins
+ */
+
+.wp-admin {
+	font-size: 90%;
+}
+
+.wp-admin .ui-widget {
+	font-family: "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, Verdana, sans-serif;
+	background: #2e3641;
+	border: none;
+	border-radius: 0;
+	-webkit-border-radius: 0;
+	-moz-border-radius: 0;
+}
+
+.wp-admin .ui-datepicker {
+	padding: 0;
+}
+
+.wp-admin .ui-datepicker-header {
+	border: none;
+	background: transparent;
+	font-weight: normal;
+	font-size: 15px;
+}
+
+.wp-admin .ui-datepicker-header .ui-state-hover {
+	background: transparent;
+	border-color: transparent;
+	cursor: pointer;
+	border-radius: 0;
+	-webkit-border-radius: 0;
+	-moz-border-radius: 0;
+}
+
+.wp-admin .ui-datepicker .ui-datepicker-title {
+	margin-top: .4em;
+	margin-bottom: .3em;
+	color: #e9f0f4;
+}
+
+.wp-admin .ui-datepicker .ui-datepicker-prev-hover,
+.wp-admin .ui-datepicker .ui-datepicker-next-hover,
+.wp-admin .ui-datepicker .ui-datepicker-next,
+.wp-admin .ui-datepicker .ui-datepicker-prev {
+	top: .9em;
+	border:none;
+}
+
+.wp-admin .ui-datepicker .ui-datepicker-prev-hover {
+	left: 2px;
+}
+
+.wp-admin .ui-datepicker .ui-datepicker-next-hover {
+	right: 2px;
+}
+
+.wp-admin .ui-datepicker .ui-datepicker-next span,
+.wp-admin .ui-datepicker .ui-datepicker-prev span {
+	background-image: url(../img/datepicker/ui-icons_ffffff_256x240.png);
+	background-position: -32px 0;
+	margin-top: 0;
+	top: 0;
+	font-weight: normal;
+}
+
+.wp-admin .ui-datepicker .ui-datepicker-prev span {
+	background-position: -96px 0;
+}
+
+.wp-admin .ui-datepicker table {
+	margin: 0;
+}
+
+.wp-admin .ui-datepicker th {
+	padding: 1em 0;
+	color: #ccc;
+	font-size: 13px;
+	font-weight: normal;
+	border: none;
+	border-top: 1px solid #3a414d;
+}
+
+.wp-admin .ui-datepicker td {
+	background: #f97e76;
+	border: none;
+	padding: 0;
+}
+
+.wp-admin td .ui-state-default {
+	background: transparent;
+	border: none;
+	text-align: center;
+	padding: .5em;
+	margin: 0;
+	font-weight: normal;
+	color: #efefef;
+	font-size: 16px;
+}
+
+.wp-admin .ui-state-disabled  {
+	opacity: 1;
+}
+
+.wp-admin .ui-state-disabled .ui-state-default {
+	color: #fba49e;
+}
+
+.wp-admin td .ui-state-active,
+.wp-admin td .ui-state-hover {
+	background: #2e3641;
+}
+

assets/css/src/form.styl

@@ -1,2 +1,5 @@
+.mailpoet_form
+  margin: 0 0 20px 0
+
 .mailpoet_form td
   vertical-align: top !important

assets/css/src/listing/newsletters.styl

@@ -0,0 +1,3 @@
+#newsletters_container
+  h2.nav-tab-wrapper
+    margin-bottom: 1rem

assets/css/src/newsletter_editor/components/blockTools.styl

@@ -1,6 +1,6 @@
-$tool-inactive-color = #bbbbbb
+$tool-inactive-color = #333333
 $tool-inactive-secondary-color = #ffffff
-$tool-hover-color = #333333
+$tool-hover-color = #bbbbbb
 $tool-hover-secondary-color = #ffffff
 $tool-active-color = #d2d2d4
 $tool-active-secondary-color = #ffffff
@@ -12,21 +12,42 @@ $master-column-tool-width = 24px
   position: absolute
   top: 0
   right: 0
-  display: none
   z-index: 20
   padding: 2px
   text-align: right
+  overflow: hidden
+
+  .mailpoet_tool_slider
+    position: relative
+    right: -100%
+    transition: all 250ms cubic-bezier(0.420, 0.000, 0.580, 1.000)
+    opacity: 0
+
+  &.mailpoet_display_tools
+    .mailpoet_tool_slider
+      right: 0
+      opacity: 1
 
   a
     vertical-align: top
 
   .mailpoet_container_horizontal + &
     left: 100%
+    right: initial
     padding-left: 5px
 
+    .mailpoet_tool_slider
+      left: -100%
+      right: initial
+
+    &.mailpoet_display_tools
+      .mailpoet_tool_slider
+        left: 0
+
     .mailpoet_tool
       width: $master-column-tool-width
       height: $master-column-tool-width
+      display: block
 
       .mailpoet_tool_icon
         width: $master-column-tool-width
@@ -46,6 +67,7 @@ $master-column-tool-width = 24px
       opacity: 0
       overflow: hidden
       display: block
+      margin: 0
 
     .mailpoet_delete_block_activated
       width: auto
@@ -125,7 +147,6 @@ $master-column-tool-width = 24px
   border-radius(3px)
   background-color: $warning-background-color
   padding: 3px 5px
-  line-height: 1.2em
 
   .mailpoet_delete_block_activate
     overflow: hidden

assets/css/src/newsletter_editor/components/forms.styl

@@ -4,7 +4,6 @@
 
 .mailpoet_form_field_title
   clear: both
-  font-size: 1.1em
   margin-bottom: 5px
 
 .mailpoet_form_field_title_small

assets/css/src/newsletter_editor/components/heading.styl

@@ -4,7 +4,7 @@
 
 .mailpoet_input_title,
 .mailpoet_input_preheader
-  width: 400px
+  width: 500px
   padding: 3px
   line-height: normal
 

assets/css/src/newsletter_editor/components/sidebar.styl

@@ -17,6 +17,7 @@ $widget-icon-width = 30px
   border-left: $content-border-color
   border-bottom: $content-border-color
   color: $sidebar-text-color
+  font-size: $sidebar-text-size
 
   .mailpoet_sidebar_region
     margin-bottom: 0

assets/css/src/newsletter_editor/components/sidepanel.styl

@@ -3,6 +3,7 @@ $sidepanel-active-heading-color = $primary-active-color
 /* Sidepanel */
 .mailpoet_editor_settings
   color: $sidebar-text-color
+  font-size: $sidebar-text-size
 
   p
     font-size: 1em
@@ -18,7 +19,6 @@ $sidepanel-active-heading-color = $primary-active-color
 
 .mailpoet_sidepanel_field_title
   clear: both
-  font-size: 1.1em
   margin-bottom: 5px
 
 .mailpoet_sidepanel_field_title_small

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

@@ -1,4 +1,5 @@
 $block-hover-highlight-color = $primary-active-color
+$block-text-line-height = $text-line-height
 
 .mailpoet_block
   box-sizing: border-box
@@ -22,6 +23,7 @@ $block-hover-highlight-color = $primary-active-color
     border: 1px solid $transparent-color
 
   &:hover > .mailpoet_block_highlight
+  &.mailpoet_highlight > .mailpoet_block_highlight
     border: 1px dashed $block-hover-highlight-color
 
 
@@ -30,8 +32,34 @@ $block-hover-highlight-color = $primary-active-color
 
 .mailpoet_content
   position: relative
-  line-height: 1.61803398875
+  line-height: $block-text-line-height
 
   p, h1, h2, h3, h4, h5, h6
-    line-height: 1.61803398875
+    line-height: $block-text-line-height
+    padding: 0
+    margin: 0
     font-style: normal
+    font-weight: normal
+
+  h1, h2, h3, h4, h5, h6
+    margin-bottom: 0.3em
+
+  p
+    margin-top: 0
+    margin-bottom: 0
+    font-weight: normal
+
+  ul
+    padding: 0
+    margin-top: 10px
+    margin-bottom: 10px
+
+  li
+    margin-top: 0
+    font-weight: normal
+    margin-bottom: 10px
+
+  blockquote
+    margin: 0 0 $block-text-line-height
+    padding-left: 10px
+    border-left: 2px #565656 solid

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

@@ -1,9 +1,4 @@
-$button-vertical-padding = 13px
-
 .mailpoet_button_block
-  padding-top: $button-vertical-padding
-  padding-bottom: $button-vertical-padding
-
   overflow: hidden
 
   .mailpoet_editor_button

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/css/src/newsletter_editor/contentBlocks/footer.styl

@@ -6,5 +6,5 @@
   .mailpoet_content
     padding: 10px 20px
 
-    p
+    & > *:last-child
-      margin: 0
+      margin-bottom: 0

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

@@ -6,5 +6,5 @@
   .mailpoet_content
     padding: 10px 20px
 
-    p
+    & > *:last-child
-      margin: 0
+      margin-bottom: 0

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

@@ -1,12 +1,12 @@
-$social-block-vertical-padding = 11px
+$social-block-vertical-padding = 0px
 
 $social-icon-width = 32px
 $active-social-icon-set-border-color = #adadad
 $active-social-icon-set-background-color = #daebf2
 $social-icon-set-hover-border-color = $primary-active-color
 
-$tool-inactive-color = #bbbbbb
+$tool-inactive-color = #333333
-$tool-hover-color = #333333
+$tool-hover-color = #bbbbbb
 $tool-active-color = #d2d2d4
 
 $tool-width = 16px

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

@@ -9,16 +9,5 @@
     padding-left: 20px
     padding-right: 20px
 
-    h1, h2, h3, h4, h5, h6
+    & > *:last-child
-      padding: 0
+      margin-bottom: 0
-      margin: 0
-      font-weight: normal
-
-    p
-      margin-top: 0
-      font-weight: normal
-
-blockquote
-  margin: 1em
-  padding-left: 1em
-  border-left: 2px #565656 solid

assets/css/src/newsletter_editor/libraryOverrides.styl

@@ -31,7 +31,7 @@ div.mce-toolbar-grp.mce-container
   box-shadow(0px 0px 3px 1px rgba(0, 0, 0, 0.05))
 
 .mce-window
-  /* Fix TinyMCE mailpoet_custom_fields window lack of hiding overflow */
+  /* Fix TinyMCE mailpoet_shortcodes window lack of hiding overflow */
   div.mce-container-body.mce-abs-layout
     overflow: hidden
 
@@ -40,8 +40,8 @@ div.mce-toolbar-grp.mce-container
     width: -webkit-calc( 100% - 36px )
     width: calc( 100% - 36px )
 
-/* TinyMCE mailpoet_custom_fields toolbar icon */
+/* TinyMCE mailpoet_shortcodes toolbar icon */
-.mce-i-mailpoet_custom_fields:before
+.mce-i-mailpoet_shortcodes:before
   font: 400 20px/1 dashicons!important
   content: "\f307"
 
@@ -84,7 +84,7 @@ position: relative
 body
   overflow-x: auto
 
-/* Hide the "Details" section of Wordpress Media manager */
+/* Hide the "Details" section of WordPress Media manager */
 .media-sidebar
   display: none
 
@@ -98,7 +98,7 @@ body
   .attachments-browser .uploader-inline
     right: 0
 
-/* Remove max width from date selector in Wordpress Media Manager */
+/* Remove max width from date selector in WordPress Media Manager */
 #media-attachment-date-filters
   max-width: calc(100% - 12px)
 

assets/css/src/newsletter_editor/mixins/transitions.styl

@@ -1,12 +1,12 @@
-animation-slide-open-downwards()
+animation-slide-open-downwards($max-height = 2000px)
   transition: all 250ms cubic-bezier(0.420, 0.000, 0.580, 1.000) /* ease-in-out */
-  max-height: 2000px
+  max-height: $max-height
   opacity: 1
+  overflow-y: hidden
 
   &.mailpoet_closed
-    max-height: 0
+    max-height: 0px
     opacity: 0
-    overflow-y: hidden
 
 animation-background-color()
   transition: background 250ms cubic-bezier(0.420, 0.000, 0.580, 1.000) /* ease-in-out */

assets/css/src/newsletter_editor/variables.styl

@@ -24,3 +24,6 @@ $error-text-color = #d54e21
 
 // Dimensions
 $newsletter-width = 660px
+
+$text-line-height = 1.6em
+$sidebar-text-size = 13px

assets/css/src/parsley.styl

@@ -18,6 +18,7 @@ textarea.parsley-error
   list-style-type none
   font-size 0.9em
   line-height 0.9em
+  color #B94A48
   opacity 0
   transition all .3s ease-in
   -o-transition all .3s ease-in

assets/css/src/settings.styl

@@ -1,14 +1,10 @@
 #mailpoet_settings
   // common
   .mailpoet_panel
-    display: none
+    display none
 
   .form-table th
-    width:20em
+    width 20em
-
-  // advanced
-  #mailpoet_role_permissions
-    margin-top: 20px;
 
   // sending methods
   .mailpoet_sending_methods
@@ -28,8 +24,7 @@
       line-height 54px
       font-size 1.5em
     .mailpoet_description
-      line-height 1.5em
+      font-size 14px
-      font-size 1.1em
     .mailpoet_status
       background-color #2f2f2f
       color #fff
@@ -60,11 +55,11 @@
   // responsive
   @media screen and (max-width: 782px)
     .form-table th
-      width: auto
+      width auto
 
     .mailpoet_sending_methods
       li
         float none
-        width: auto
+        width auto
-        margin-right: 0
+        margin-right 0
 

assets/js/lib/mailpoet_custom_fields

@@ -1 +0,0 @@
-../src/newsletter_editor/tinymce/mailpoet_custom_fields

assets/js/lib/mailpoet_shortcodes

@@ -0,0 +1 @@
+../src/newsletter_editor/tinymce/mailpoet_shortcodes

assets/js/src/ajax.js

@@ -1,4 +1,4 @@
-define('ajax', ['mailpoet', 'jquery'], function(MailPoet, jQuery) {
+define('ajax', ['mailpoet', 'jquery', 'underscore'], function(MailPoet, jQuery, _) {
   'use strict';
   MailPoet.Ajax = {
       version: 0.5,
@@ -8,19 +8,11 @@ define('ajax', ['mailpoet', 'jquery'], function(MailPoet, jQuery) {
         endpoint: null,
         action: null,
         token: null,
-        data: {},
+        data: {}
-        onSuccess: function(data, textStatus, xhr) {},
-        onError: function(xhr, textStatus, errorThrown) {}
-      },
-      get: function(options) {
-        return this.request('get', options);
       },
       post: function(options) {
         return this.request('post', options);
       },
-      delete: function(options) {
-        return this.request('delete', options);
-      },
       init: function(options) {
         // merge options
         this.options = jQuery.extend({}, this.defaults, options);
@@ -50,31 +42,31 @@ define('ajax', ['mailpoet', 'jquery'], function(MailPoet, jQuery) {
 
         // set request params
         var params = this.getParams();
-        var jqXHR;
+        var deferred = jQuery.Deferred();
 
-        // make ajax request depending on method
+        // remove null values from the data object
-        if(method === 'get') {
+        if (_.isObject(params.data)) {
-          jqXHR = jQuery.get(
+          params.data = _.pick(params.data, function(value) {
+            return (value !== null)
+          })
+        }
+
+        // ajax request
+        deferred = jQuery.post(
           this.options.url,
           params,
-            this.options.onSuccess,
+          null,
           'json'
-          );
+        ).then(function(data) {
-        } else {
+          return data;
-          jqXHR = jQuery.ajax({
+        }, function(xhr) {
-            url: this.options.url,
+          return xhr.responseJSON;
-            type : 'post',
-            data: params,
-            dataType: 'json',
-            success : this.options.onSuccess,
-            error : this.options.onError
         });
-        }
 
         // clear options
         this.options = {};
 
-        return jqXHR;
+        return deferred;
       }
   };
 });

assets/js/src/cron.jsx

@@ -1,100 +0,0 @@
-define(
-  [
-    'react',
-    'react-dom',
-    'mailpoet'
-  ],
-  function(
-    React,
-    ReactDOM,
-    MailPoet
-  ) {
-  var CronControl = React.createClass({
-    getInitialState: function() {
-      return {
-        status: 'loading'
-      };
-    },
-    getCronData: function() {
-      MailPoet.Ajax.post({
-          endpoint: 'cron',
-          action: 'getStatus'
-        })
-        .done(function(response) {
-          jQuery('.button-primary')
-            .removeClass('disabled');
-          if(response.status !== undefined) {
-            this.setState(response);
-          } else {
-            this.replaceState();
-          }
-        }.bind(this));
-    },
-    componentDidMount: function() {
-      if(this.isMounted()) {
-        this.getCronData();
-        setInterval(this.getCronData, 5000);
-      }
-    },
-    controlCron: function(action) {
-      if(jQuery('.button-primary').hasClass('disabled')) {
-        return;
-      }
-      jQuery('.button-primary')
-        .addClass('disabled');
-      MailPoet.Ajax.post({
-        endpoint: 'cron',
-        action: action,
-      })
-      .done(function(response) {
-        if(!response.result) {
-          MailPoet.Notice.error(MailPoet.I18n.t('daemonControlError'));
-        }
-      }.bind(this));
-    },
-    render: function() {
-      if(this.state.status === 'loading') {
-        return(<div>{MailPoet.I18n.t('loadingDaemonStatus')}</div>);
-      }
-      switch(this.state.status) {
-        case 'started':
-          return(
-            <div>
-              {MailPoet.I18n.t('cronDaemonIsRunning')}
-              <br/>
-              <br/>
-              <a href="#" className="button-primary" onClick={this.controlCron.bind(null, 'stop')}>{MailPoet.I18n.t('stop')}</a>
-            </div>
-          );
-        break;
-        case 'starting':
-        case 'stopping':
-          return(
-            <div>
-              {MailPoet.I18n.t('cronDaemonState').replace('%$1s', this.state.status)}
-            </div>
-          );
-        break;
-        case 'stopped':
-          return(
-            <div>
-              {MailPoet.I18n.t('cronDaemonState').replace('%$1s', this.state.status)}
-              <br />
-              <br />
-              <a href="#" className="button-primary" onClick={this.controlCron.bind(null, 'start')}>{MailPoet.I18n.t('start')}</a>
-            </div>
-          );
-        break;
-      }
-    }
-  });
-
-  const container = document.getElementById('cron_container');
-
-  if(container) {
-    ReactDOM.render(
-      <CronControl />,
-      container
-    );
-  }
-});

assets/js/src/date.js

@@ -40,10 +40,18 @@ define('date',
       return this;
     },
     format: function(date, options) {
+      options = options || {};
       this.init(options);
-      return Moment.utc(date)
+
-        .local()
+      var date = Moment(date, this.convertFormat(options.parseFormat));
-        .format(this.convertFormat(this.options.format));
+      if (options.offset === 0) date = date.utc();
+      return date.format(this.convertFormat(this.options.format));
+    },
+    toDate: function(date, options) {
+      options = options || {};
+      this.init(options);
+
+      return Moment(date, this.convertFormat(options.parseFormat)).toDate();
     },
     short: function(date) {
       return this.format(date, {
@@ -61,32 +69,45 @@ define('date',
       });
     },
     convertFormat: function(format) {
-      const format_mappings = {
+      var format_mappings = {
         date: {
-          D: 'ddd',
-          l: 'dddd',
           d: 'DD',
+          D: 'ddd',
           j: 'D',
-          z: 'DDDD',
+          l: 'dddd',
           N: 'E',
-          S: '',
+          S: 'o',
-          M: 'MMM',
+          w: 'e',
+          z: 'DDD',
+          W: 'W',
           F: 'MMMM',
           m: 'MM',
-          n: '',
+          M: 'MMM',
-          t: '',
+          n: 'M',
-          y: 'YY',
+          t: '', // no equivalent
+          L: '', // no equivalent
+          o: 'YYYY',
           Y: 'YYYY',
-          H: 'HH',
+          y: 'YY',
-          h: 'hh',
+          a: 'a',
-          g: 'h',
           A: 'A',
+          B: '', // no equivalent
+          g: 'h',
+          G: 'H',
+          h: 'hh',
+          H: 'HH',
           i: 'mm',
           s: 'ss',
-          T: 'z',
+          u: 'SSS',
-          O: 'ZZ',
+          e: 'zz', // deprecated since version 1.6.0 of moment.js
-          w: 'd',
+          I: '', // no equivalent
-          W: 'WW'
+          O: '', // no equivalent
+          P: '', // no equivalent
+          T: '', // no equivalent
+          Z: '', // no equivalent
+          c: '', // no equivalent
+          r: '', // no equivalent
+          U: 'X'
         },
         strftime: {
           a: 'ddd',
@@ -115,22 +136,33 @@ define('date',
         }
       };
 
-      const replacements = format_mappings['date'];
+      if (!format || format.length <= 0) return format;
 
-      let outputFormat = '';
+      var replacements = format_mappings['date'];
 
-      Object.keys(replacements).forEach(function(key) {
+      var convertedFormat = [];
-        if (format.indexOf(key) !== -1) {
+      var escapeToken = false;
-          format = format.replace(key, '%'+key);
+
+      for (var index in format) {
+        var token = format[index];
+
+        if (escapeToken === true) {
+          convertedFormat.push('['+token+']');
+          escapeToken = false;
+        } else {
+          if (token === '\\') {
+            // Slash escapes the next symbol to be treated as literal
+            escapeToken = true;
+            continue;
+          } else if (replacements[token] !== undefined) {
+            convertedFormat.push(replacements[token]);
+          } else {
+            convertedFormat.push('['+token+']');
           }
-      });
-      outputFormat = format;
-      Object.keys(replacements).forEach(function(key) {
-        if (outputFormat.indexOf('%'+key) !== -1) {
-          outputFormat = outputFormat.replace('%'+key, replacements[key]);
         }
-      });
+      }
-      return outputFormat;
+
+      return convertedFormat.join('');
     }
   };
 });

assets/js/src/form/fields/checkbox.jsx

@@ -6,7 +6,7 @@ function(
 ) {
   const FormFieldCheckbox = React.createClass({
     onValueChange: function(e) {
-      e.target.value = this.refs.checkbox.checked ? '1' : '';
+      e.target.value = this.refs.checkbox.checked ? '1' : '0';
       return this.props.onValueChange(e);
     },
     render: function() {
@@ -14,7 +14,9 @@ function(
         return false;
       }
 
-      const isChecked = !!(this.props.item[this.props.field.name]);
+      // isChecked will be true only if the value is "1"
+      // it will be false in case value is "0" or empty
+      const isChecked = !!(~~(this.props.item[this.props.field.name]));
       const options = Object.keys(this.props.field.values).map(
         (value, index) => {
           return (

assets/js/src/form/fields/date.jsx

@@ -9,6 +9,13 @@ define([
     render() {
       const yearsRange = 100;
       const years = [];
+
+      if (this.props.placeholder !== undefined) {
+        years.push((
+          <option value="" key={ 0 }>{ this.props.placeholder }</option>
+        ));
+      }
+
       const currentYear = Moment().year();
       for (let i = currentYear; i >= currentYear - yearsRange; i--) {
         years.push((
@@ -20,7 +27,7 @@ define([
       }
       return (
         <select
-          name={ this.props.name + '[year]' }
+          name={ `${this.props.name}[year]` }
           value={ this.props.year }
           onChange={ this.props.onValueChange }
         >
@@ -33,6 +40,13 @@ define([
   class FormFieldDateMonth extends React.Component {
     render() {
       const months = [];
+
+      if (this.props.placeholder !== undefined) {
+        months.push((
+          <option value="" key={ 0 }>{ this.props.placeholder }</option>
+        ));
+      }
+
       for (let i = 1; i <= 12; i++) {
         months.push((
           <option
@@ -43,7 +57,7 @@ define([
       }
       return (
         <select
-          name={ this.props.name + '[month]' }
+          name={ `${this.props.name}[month]` }
           value={ this.props.month }
           onChange={ this.props.onValueChange }
         >
@@ -56,6 +70,13 @@ define([
   class FormFieldDateDay extends React.Component {
     render() {
       const days = [];
+
+      if (this.props.placeholder !== undefined) {
+        days.push((
+          <option value="" key={ 0 }>{ this.props.placeholder }</option>
+        ));
+      }
+
       for (let i = 1; i <= 31; i++) {
         days.push((
           <option
@@ -67,7 +88,7 @@ define([
 
       return (
         <select
-          name={ this.props.name + '[day]' }
+          name={ `${this.props.name}[day]` }
           value={ this.props.day }
           onChange={ this.props.onValueChange }
         >
@@ -81,47 +102,74 @@ define([
     constructor(props) {
       super(props);
       this.state = {
-        year: Moment().year(),
+        year: '',
-        month: 1,
+        month: '',
-        day: 1
+        day: ''
       }
     }
     componentDidMount() {
+      this.extractDateParts();
     }
     componentDidUpdate(prevProps, prevState) {
       if (
         (this.props.item !== undefined && prevProps.item !== undefined)
         && (this.props.item.id !== prevProps.item.id)
       ) {
-        this.extractTimeStamp();
+        this.extractDateParts();
       }
     }
-    extractTimeStamp() {
+    extractDateParts() {
-      const timeStamp = parseInt(this.props.item[this.props.field.name], 10);
+      const value = (this.props.item[this.props.field.name] !== undefined)
+        ? this.props.item[this.props.field.name].trim()
+        : '';
+
+      if(value === '') {
+        return;
+      }
+
+      const dateTime = Moment(value);
 
       this.setState({
-        year: Moment.unix(timeStamp).year(),
+        year: dateTime.format('YYYY'),
-        // Moment returns the month as [0..11]
+        month: dateTime.format('M'),
-        // We increment it to match PHP's mktime() which expects [1..12]
+        day: dateTime.format('D')
-        month: Moment.unix(timeStamp).month() + 1,
-        day: Moment.unix(timeStamp).date()
       });
     }
-    updateTimeStamp(field) {
+    formatValue() {
-      let newTimeStamp = Moment(
+      const dateType = this.props.field.params.date_type;
-        `${this.state.month}/${this.state.day}/${this.state.year}`,
+
-        'M/D/YYYY'
+      let value;
-      ).valueOf();
+
-      if (!isNaN(newTimeStamp) && parseInt(newTimeStamp, 10) > 0) {
+      switch(dateType) {
-        // convert milliseconds to seconds
+        case 'year_month_day':
-        newTimeStamp /= 1000;
+          value = {
-        return this.props.onValueChange({
+            'year': this.state.year,
-          target: {
+            'month': this.state.month,
-            name: field,
+            'day': this.state.day
-            value: newTimeStamp
+          };
-          }
+        break;
-        });
+
+        case 'year_month':
+          value = {
+            'year': this.state.year,
+            'month': this.state.month
+          };
+        break;
+
+        case 'month':
+          value = {
+            'month': this.state.month
+          };
+        break;
+
+        case 'year':
+          value = {
+            'year': this.state.year
+          };
+        break;
       }
+
+      return value;
     }
     onValueChange(e) {
       // extract property from name
@@ -133,35 +181,40 @@ define([
         field = matches[1];
         property = matches[2];
 
-        let value = parseInt(e.target.value, 10);
+        let value = ~~(e.target.value);
 
         this.setState({
           [`${property}`]: value
         }, () => {
-          this.updateTimeStamp(field);
+          this.props.onValueChange({
+            target: {
+              name: field,
+              value: this.formatValue()
+            }
+          });
         });
       }
     }
     render() {
       const monthNames = window.mailpoet_month_names || [];
-
+      const dateFormats = window.mailpoet_date_formats || {};
       const dateType = this.props.field.params.date_type;
-
+      const dateSelects = dateFormats[dateType][0].split('/');
-      const dateSelects = dateType.split('_');
 
       const fields = dateSelects.map(type => {
         switch(type) {
-          case 'year':
+          case 'YYYY':
             return (<FormFieldDateYear
               onValueChange={ this.onValueChange.bind(this) }
               ref={ 'year' }
               key={ 'year' }
               name={ this.props.field.name }
               year={ this.state.year }
+              placeholder={ this.props.field.year_placeholder }
             />);
           break;
 
-          case 'month':
+          case 'MM':
             return (<FormFieldDateMonth
               onValueChange={ this.onValueChange.bind(this) }
               ref={ 'month' }
@@ -169,16 +222,18 @@ define([
               name={ this.props.field.name }
               month={ this.state.month }
               monthNames={ monthNames }
+              placeholder={ this.props.field.month_placeholder }
             />);
           break;
 
-          case 'day':
+          case 'DD':
             return (<FormFieldDateDay
               onValueChange={ this.onValueChange.bind(this) }
               ref={ 'day' }
               key={ 'day' }
               name={ this.props.field.name }
               day={ this.state.day }
+              placeholder={ this.props.field.day_placeholder }
             />);
           break;
         }

assets/js/src/form/fields/field.jsx

@@ -61,6 +61,10 @@ function(
         case 'date':
           field = (<FormFieldDate {...data} />);
         break;
+
+        case 'reactComponent':
+          field = (<data.field.component {...data} />);
+        break;
       }
 
       if(inline === true) {

assets/js/src/form/fields/select.jsx

@@ -1,17 +1,53 @@
-define([
+import React from 'react'
-  'react'
+import _ from 'underscore'
-],
+
-function(
-  React
-) {
 const FormFieldSelect = React.createClass({
-    render: function() {
+  render() {
     if (this.props.field.values === undefined) {
       return false;
     }
 
-      const options = Object.keys(this.props.field.values).map(
+    let filter = false;
+    let placeholder = false;
+    let sortBy = false;
+
+    if (this.props.field.placeholder !== undefined) {
+      placeholder = (
+        <option value="">{ this.props.field.placeholder }</option>
+      );
+    }
+
+    if (this.props.field['filter'] !== undefined) {
+      filter = this.props.field.filter;
+    }
+
+    if (_.isFunction(this.props.field.sortBy)) {
+      sortBy = this.props.field.sortBy;
+    }
+
+    let keys;
+    if (sortBy) {
+      // Extract keys from sorted [key, value] select value pairs, sorted by
+      // provided sorting order.
+      keys =
+        _.map(
+          _.sortBy(
+            _.pairs(this.props.field.values),
+            (item) => sortBy(item[0], item[1])
+          ),
+          (item) => item[0]
+        );
+    } else {
+      keys = Object.keys(this.props.field.values)
+    }
+
+    const options = keys.map(
       (value, index) => {
+
+        if (filter !== false && filter(this.props.item, value) === false) {
+          return;
+        }
+
         return (
           <option
             key={ 'option-' + index }
@@ -30,11 +66,11 @@ function(
         onChange={ this.props.onValueChange }
         {...this.props.field.validation}
       >
+        {placeholder}
         {options}
       </select>
     );
   }
 });
 
-  return FormFieldSelect;
+module.exports = FormFieldSelect;
-});

assets/js/src/form/fields/selection.jsx

@@ -13,12 +13,22 @@ function(
     getInitialState: function() {
       return {
         items: [],
-        initialized: false
+        select2: false
-      }
+      };
+    },
+    componentWillMount: function() {
+      this.loadCachedItems();
+    },
+    allowMultipleValues: function() {
+      return (this.props.field.multiple === true);
+    },
+    isSelect2Initialized: function() {
+      return (this.state.select2 === true);
     },
     componentDidMount: function() {
-      this.loadCachedItems();
+      if(this.allowMultipleValues()) {
         this.setupSelect2();
+      }
     },
     componentDidUpdate: function(prevProps, prevState) {
       if(
@@ -30,12 +40,18 @@ function(
           .trigger('change');
       }
     },
+    componentWillUnmount: function() {
+      if(this.allowMultipleValues()) {
+        this.destroySelect2();
+      }
+    },
+    destroySelect2: function() {
+      if(this.isSelect2Initialized()) {
+        jQuery('#'+this.refs.select.id).select2('destroy');
+      }
+    },
     setupSelect2: function() {
-      if(
+      if(this.isSelect2Initialized()) {
-          !this.props.field.multiple
-          || this.state.initialized === true
-          || this.refs.select === undefined
-        ) {
         return;
       }
 
@@ -67,21 +83,23 @@ function(
 
       select2.on('change', this.handleChange);
 
-      select2.select2(
+      this.setState({ select2: true });
-        'val',
-        this.getSelectedValues()
-      );
-
-      this.setState({ initialized: true });
     },
     getSelectedValues: function() {
       if(this.props.field['selected'] !== undefined) {
         return this.props.field['selected'](this.props.item);
       } else if(this.props.item !== undefined && this.props.field.name !== undefined) {
-        return this.props.item[this.props.field.name];
+        if (this.allowMultipleValues()) {
-      } else {
+          if (Array.isArray(this.props.item[this.props.field.name])) {
-        return null;
+            return this.props.item[this.props.field.name].map(function(item) {
+              return item.id;
+            });
           }
+        } else {
+          return this.props.item[this.props.field.name];
+        }
+      }
+      return null;
     },
     loadCachedItems: function() {
       if(typeof(window['mailpoet_'+this.props.field.endpoint]) !== 'undefined') {
@@ -104,9 +122,10 @@ function(
         } else {
           value = e.target.value;
         }
+        var transformedValue = this.transformChangedValue(value);
         this.props.onValueChange({
          target: {
-            value: value,
+            value: transformedValue,
             name: this.props.field.name
           }
         });
@@ -130,6 +149,16 @@ function(
       }
       return item.id;
     },
+    // When it's impossible to represent the desired value in DOM,
+    // this function may be used to transform the placeholder value into
+    // desired value.
+    transformChangedValue: function(value) {
+      if(typeof this.props.field['transformChangedValue'] === 'function') {
+        return this.props.field.transformChangedValue.call(this, value);
+      } else {
+        return value;
+      }
+    },
     render: function() {
       const options = this.state.items.map((item, index) => {
         let label = this.getLabel(item);

assets/js/src/form/fields/text.jsx

@@ -1,16 +1,20 @@
-define([
+import React from 'react'
-  'react'
+
-],
+const FormFieldText = React.createClass({
-function(
+  render() {
-  React
+    let value = this.props.item[this.props.field.name];
-) {
+    if (value === undefined) {
-  var FormFieldText = React.createClass({
+      value = this.props.field.defaultValue || '';
-    render: function() {
+    }
-      var value = this.props.item[this.props.field.name];
+
-      if(!value) { value = null; }
     return (
       <input
         type="text"
+        disabled={
+          (this.props.field['disabled'] !== undefined)
+          ? this.props.field.disabled(this.props.item)
+          : false
+        }
         className={ (this.props.field.size) ? '' : 'regular-text' }
         size={
           (this.props.field.size !== 'auto' && this.props.field.size > 0)
@@ -21,7 +25,6 @@ function(
         id={ 'field_'+this.props.field.name }
         value={ value }
         placeholder={ this.props.field.placeholder }
-          defaultValue={ this.props.field.defaultValue }
         onChange={ this.props.onValueChange }
         {...this.props.field.validation}
       />
@@ -29,5 +32,4 @@ function(
   }
 });
 
-  return FormFieldText;
+module.exports = FormFieldText;
-});

assets/js/src/form/form.jsx

@@ -13,10 +13,16 @@ define(
     Router,
     FormField
   ) {
+
     var Form = React.createClass({
-      mixins: [
+      contextTypes: {
-        Router.History
+        router: React.PropTypes.object.isRequired
-      ],
+      },
+      getDefaultProps: function() {
+        return {
+          params: {},
+        };
+      },
       getInitialState: function() {
         return {
           loading: false,
@@ -24,10 +30,20 @@ define(
           item: {}
         };
       },
+      getValues: function() {
+        return this.props.item ? this.props.item : this.state.item;
+      },
+      getErrors: function() {
+        return this.props.errors ? this.props.errors : this.state.errors;
+      },
       componentDidMount: function() {
-        if(this.props.params.id !== undefined) {
         if(this.isMounted()) {
+          if(this.props.params.id !== undefined) {
             this.loadItem(this.props.params.id);
+          } else {
+            this.setState({
+              item: jQuery('.mailpoet_form').serializeObject()
+            });
           }
         }
       },
@@ -37,7 +53,9 @@ define(
             loading: false,
             item: {}
           });
+          if (props.item === undefined) {
             this.refs.form.reset();
+          }
         } else {
           this.loadItem(props.params.id);
         }
@@ -48,22 +66,22 @@ define(
         MailPoet.Ajax.post({
           endpoint: this.props.endpoint,
           action: 'get',
-          data: id
+          data: {
-        }).done(function(response) {
+            id: id
-          if(response === false) {
+          }
+        }).done((response) => {
+          this.setState({
+            loading: false,
+            item: response.data
+          });
+        }).fail((response) => {
           this.setState({
             loading: false,
             item: {}
           }, function() {
-              this.history.pushState(null, '/new');
+            this.context.router.push('/new');
-            }.bind(this));
+          });
-          } else {
-            this.setState({
-              loading: false,
-              item: response
         });
-          }
-        }.bind(this));
       },
       handleSubmit: function(e) {
         e.preventDefault();
@@ -88,7 +106,6 @@ define(
             item[field.name] = this.state.item[field.name];
           }
         }.bind(this));
-
         // set id if specified
         if(this.props.params.id !== undefined) {
           item.id = this.props.params.id;
@@ -98,14 +115,13 @@ define(
           endpoint: this.props.endpoint,
           action: 'save',
           data: item
-        }).done(function(response) {
+        }).always(() => {
           this.setState({ loading: false });
-
+        }).done((response) => {
-          if(response.result === true) {
           if(this.props.onSuccess !== undefined) {
             this.props.onSuccess();
           } else {
-              this.history.pushState(null, '/')
+            this.context.router.push('/');
           }
 
           if(this.props.params.id !== undefined) {
@@ -113,16 +129,16 @@ define(
           } else {
             this.props.messages.onCreate();
           }
-          } else {
+        }).fail((response) => {
-            if(response.result === false) {
           if(response.errors.length > 0) {
             this.setState({ errors: response.errors });
           }
-            }
+        });
-          }
-        }.bind(this));
       },
       handleValueChange: function(e) {
+        if (this.props.onChange) {
+          return this.props.onChange(e);
+        } else {
           var item = this.state.item,
             field = e.target.name;
 
@@ -132,13 +148,14 @@ define(
             item: item
           });
           return true;
+        }
       },
       render: function() {
-        if(this.state.errors !== undefined) {
+        if(this.getErrors() !== undefined) {
-          var errors = this.state.errors.map(function(error, index) {
+          var errors = this.getErrors().map(function(error, index) {
             return (
               <p key={ 'error-'+index } className="mailpoet_error">
-                { error }
+                { error.message }
               </p>
             );
           });
@@ -146,14 +163,25 @@ define(
 
         var formClasses = classNames(
           'mailpoet_form',
-          { 'mailpoet_form_loading': this.state.loading }
+          { 'mailpoet_form_loading': this.state.loading || this.props.loading }
         );
 
+        var beforeFormContent = false;
+        var afterFormContent = false;
+
+        if (this.props.beforeFormContent !== undefined) {
+          beforeFormContent = this.props.beforeFormContent(this.getValues());
+        }
+
+        if (this.props.afterFormContent !== undefined) {
+          afterFormContent = this.props.afterFormContent(this.getValues());
+        }
+
         var fields = this.props.fields.map(function(field, i) {
           return (
             <FormField
               field={ field }
-              item={ this.state.item }
+              item={ this.getValues() }
               onValueChange={ this.handleValueChange }
               key={ 'field-'+i } />
           );
@@ -173,6 +201,8 @@ define(
         }
 
         return (
+          <div>
+            { beforeFormContent }
             <form
               id={ this.props.id }
               ref="form"
@@ -193,6 +223,8 @@ define(
 
               { actions }
             </form>
+            { afterFormContent }
+          </div>
         );
       }
     });

assets/js/src/forms/forms.jsx

@@ -1,10 +1,10 @@
 import React from 'react'
 import ReactDOM from 'react-dom'
-import { Router, Route, IndexRoute } from 'react-router'
+import { Router, Route, IndexRoute, Link, useRouterHistory } from 'react-router'
+import { createHashHistory } from 'history'
 import FormList from 'forms/list.jsx'
-import createHashHistory from 'history/lib/createHashHistory'
 
-let history = createHashHistory({ queryKey: false })
+const history = useRouterHistory(createHashHistory)({ queryKey: false });
 
 const App = React.createClass({
   render() {
@@ -12,7 +12,7 @@ const App = React.createClass({
   }
 });
 
-let container = document.getElementById('forms_container');
+const container = document.getElementById('forms_container');
 
 if(container) {
   ReactDOM.render((

assets/js/src/forms/list.jsx

@@ -13,8 +13,11 @@ const columns = [
   },
   {
     name: 'segments',
-    label: MailPoet.I18n.t('segments'),
+    label: MailPoet.I18n.t('segments')
-    sortable: false
+  },
+  {
+    name: 'signups',
+    label: MailPoet.I18n.t('signups')
   },
   {
     name: 'created_at',
@@ -24,9 +27,9 @@ const columns = [
 ];
 
 const messages = {
-  onTrash: function(response) {
+  onTrash: (response) => {
-    var count = ~~response;
+    const count = ~~response.meta.count;
-    var message = null;
+    let message = null;
 
     if (count === 1) {
       message = (
@@ -35,13 +38,13 @@ const messages = {
     } else {
       message = (
         MailPoet.I18n.t('multipleFormsTrashed')
-      ).replace('%$1d', count);
+      ).replace('%$1d', count.toLocaleString());
     }
     MailPoet.Notice.success(message);
   },
-  onDelete: function(response) {
+  onDelete: (response) => {
-    var count = ~~response;
+    const count = ~~response.meta.count;
-    var message = null;
+    let message = null;
 
     if (count === 1) {
       message = (
@@ -50,13 +53,13 @@ const messages = {
     } else {
       message = (
         MailPoet.I18n.t('multipleFormsDeleted')
-      ).replace('%$1d', count);
+      ).replace('%$1d', count.toLocaleString());
     }
     MailPoet.Notice.success(message);
   },
-  onRestore: function(response) {
+  onRestore: (response) => {
-    var count = ~~response;
+    const count = ~~response.meta.count;
-    var message = null;
+    let message = null;
 
     if (count === 1) {
       message = (
@@ -65,12 +68,20 @@ const messages = {
     } else {
       message = (
         MailPoet.I18n.t('multipleFormsRestored')
-      ).replace('%$1d', count);
+      ).replace('%$1d', count.toLocaleString());
     }
     MailPoet.Notice.success(message);
   }
 };
 
+const bulk_actions = [
+  {
+    name: 'trash',
+    label: MailPoet.I18n.t('trash'),
+    onSuccess: messages.onTrash
+  }
+];
+
 const item_actions = [
   {
     name: 'edit',
@@ -82,18 +93,27 @@ const item_actions = [
     }
   },
   {
-    name: 'duplicate_form',
+    name: 'duplicate',
     label: MailPoet.I18n.t('duplicate'),
     onClick: function(item, refresh) {
       return MailPoet.Ajax.post({
         endpoint: 'forms',
         action: 'duplicate',
-        data: item.id
+        data: {
-      }).done(function(response) {
+          id: item.id
+        }
+      }).done((response) => {
         MailPoet.Notice.success(
-          (MailPoet.I18n.t('formDuplicated')).replace('%$1s', response.name)
+          (MailPoet.I18n.t('formDuplicated')).replace('%$1s', response.data.name)
         );
         refresh();
+      }).fail((response) => {
+        if (response.errors.length > 0) {
+          MailPoet.Notice.error(
+            response.errors.map(function(error) { return error.message; }),
+            { scroll: true }
+          );
+        }
       });
     }
   },
@@ -102,22 +122,19 @@ const item_actions = [
   }
 ];
 
-const bulk_actions = [
-  {
-    name: 'trash',
-    label: MailPoet.I18n.t('trash'),
-    onSuccess: messages.onTrash
-  }
-];
-
 const FormList = React.createClass({
   createForm() {
     MailPoet.Ajax.post({
       endpoint: 'forms',
       action: 'create'
-    }).done(function(response) {
+    }).done((response) => {
-      if(response.result && response.form_id) {
+      window.location = mailpoet_form_edit_url + response.data.id;
-        window.location = mailpoet_form_edit_url + response.form_id;
+    }).fail((response) => {
+      if (response.errors.length > 0) {
+        MailPoet.Notice.error(
+          response.errors.map(function(error) { return error.message; }),
+          { scroll: true }
+        );
       }
     });
   },
@@ -134,19 +151,29 @@ const FormList = React.createClass({
       return segment.name;
     }).join(', ');
 
+    if (form.settings.segments_selected_by === 'user') {
+      segments = MailPoet.I18n.t('userChoice') + ' ' + segments;
+    }
+
     return (
       <div>
         <td className={ row_classes }>
           <strong>
-            <a>{ form.name }</a>
+            <a
+              className="row-title"
+              href={ `admin.php?page=mailpoet-form-editor&id=${form.id}` }
+            >{ form.name }</a>
           </strong>
           { actions }
         </td>
-        <td className="column-format" data-colname={MailPoet.I18n.t('segments')}>
+        <td className="column" data-colname={MailPoet.I18n.t('segments')}>
           { segments }
         </td>
+        <td className="column" data-colname={MailPoet.I18n.t('signups')}>
+          { form.signups }
+        </td>
         <td className="column-date" data-colname={MailPoet.I18n.t('createdOn')}>
-          <abbr>{ MailPoet.Date.full(form.created_at) }</abbr>
+          <abbr>{ MailPoet.Date.format(form.created_at) }</abbr>
         </td>
       </div>
     );
@@ -154,20 +181,20 @@ const FormList = React.createClass({
   render() {
     return (
       <div>
-        <h2 className="title">
+        <h1 className="title">
           {MailPoet.I18n.t('pageTitle')} <a
-            className="add-new-h2"
+            className="page-title-action"
             href="javascript:;"
             onClick={ this.createForm }
           >{MailPoet.I18n.t('new')}</a>
-        </h2>
+        </h1>
 
         <Listing
+          limit={ mailpoet_listing_per_page }
           location={ this.props.location }
           params={ this.props.params }
           messages={ messages }
           search={ false }
-          limit={ 1000 }
           endpoint="forms"
           onRenderItem={ this.renderItem }
           columns={ columns }

assets/js/src/handlebars_helpers.js

@@ -140,5 +140,20 @@ define('handlebars_helpers', ['handlebars'], function(Handlebars) {
       return parseInt(string, 10);
   });
 
+  Handlebars.registerHelper('fontWithFallback', function(font) {
+    switch(font) {
+      case 'Arial': return new Handlebars.SafeString("Arial, 'Helvetica Neue', Helvetica, sans-serif");
+      case 'Comic Sans MS': return new Handlebars.SafeString("'Comic Sans MS', 'Marker Felt-Thin', Arial, sans-serif");
+      case 'Courier New': return new Handlebars.SafeString("'Courier New', Courier, 'Lucida Sans Typewriter', 'Lucida Typewriter', monospace");
+      case 'Georgia': return new Handlebars.SafeString("Georgia, Times, 'Times New Roman', serif");
+      case 'Lucida': return new Handlebars.SafeString("'Lucida Sans Unicode', 'Lucida Grande', sans-serif");
+      case 'Tahoma': return new Handlebars.SafeString("Tahoma, Verdana, Segoe, sans-serif");
+      case 'Times New Roman': return new Handlebars.SafeString("'Times New Roman', Times, Baskerville, Georgia, serif");
+      case 'Trebuchet MS': return new Handlebars.SafeString("'Trebuchet MS', 'Lucida Grande', 'Lucida Sans Unicode', 'Lucida Sans', Tahoma, sans-serif");
+      case 'Verdana': return new Handlebars.SafeString("Verdana, Geneva, sans-serif");
+      default: return font;
+    }
+  });
+
   window.Handlebars = Handlebars;
 });

assets/js/src/helpscout.js

@@ -1,3 +1,3 @@
 define([], function() {
-  !function(e,o,n){window.HSCW=o,window.HS=n,n.beacon=n.beacon||{};var t=n.beacon;t.userConfig={},t.readyQueue=[],t.config=function(e){this.userConfig=e},t.ready=function(e){this.readyQueue.push(e)},o.config={docs:{enabled:!1,baseUrl:""},contact:{enabled:!0,formId:"e5c408c7-895e-11e5-9e75-0a7d6919297d"}};var r=e.getElementsByTagName("script")[0],c=e.createElement("script");c.type="text/javascript",c.async=!0,c.src="https://djtflbt20bdde.cloudfront.net/",r.parentNode.insertBefore(c,r)}(document,window.HSCW||{},window.HS||{});
+  !function(e,o,n){window.HSCW=o,window.HS=n,n.beacon=n.beacon||{};var t=n.beacon;t.userConfig={},t.readyQueue=[],t.config=function(e){this.userConfig=e},t.ready=function(e){this.readyQueue.push(e)},o.config={docs:{enabled:!0,baseUrl:"//mailpoet3.helpscoutdocs.com/"},contact:{enabled:!0,formId:"aa21ca80-a4f5-11e6-91aa-0a5fecc78a4d"}};var r=e.getElementsByTagName("script")[0],c=e.createElement("script");c.type="text/javascript",c.async=!0,c.src="https://djtflbt20bdde.cloudfront.net/",r.parentNode.insertBefore(c,r)}(document,window.HSCW||{},window.HS||{});
 });

assets/js/src/listing/bulk_actions.jsx

@@ -47,13 +47,16 @@ function(
 
       data.action = this.state.action;
 
-      var callback = function() {};
+      var onSuccess = function() {};
       if(action['onSuccess'] !== undefined) {
-        callback = action.onSuccess;
+        onSuccess = action.onSuccess;
       }
 
       if(data.action) {
-        this.props.onBulkAction(selected_ids, data, callback);
+        const promise = this.props.onBulkAction(selected_ids, data);
+        if (promise !== false) {
+          promise.then(onSuccess);
+        };
       }
 
       this.setState({

assets/js/src/listing/filters.jsx

@@ -10,10 +10,10 @@ function(
 ) {
   var ListingFilters = React.createClass({
     handleFilterAction: function() {
-      let filters = {}
+      let filters = {};
       this.getAvailableFilters().map((filter, i) => {
         filters[this.refs['filter-'+i].name] = this.refs['filter-'+i].value
-      })
+      });
       return this.props.onSelectFilter(filters);
     },
     handleEmptyTrash: function() {
@@ -21,7 +21,6 @@ function(
     },
     getAvailableFilters: function() {
       let filters = this.props.filters;
-
       return Object.keys(filters).filter(function(filter) {
         return !(
           filters[filter].length === 0
@@ -30,26 +29,29 @@ function(
             && !filters[filter][0].value
           )
         );
-      })
+      });
+    },
+    componentDidUpdate: function() {
+      const selected_filters = this.props.filter;
+      const available_filters = this.getAvailableFilters().map(
+        function(filter, i) {
+          if (selected_filters[filter] !== undefined && selected_filters[filter]) {
+            jQuery(this.refs['filter-'+i])
+              .val(selected_filters[filter])
+              .trigger('change');
+          }
+        }.bind(this)
+      );
     },
     render: function() {
       const filters = this.props.filters;
-      const selected_filters = this.props.filter;
-
       const available_filters = this.getAvailableFilters()
         .map(function(filter, i) {
-          let default_value = false;
-          if (selected_filters[filter] !== undefined && selected_filters[filter]) {
-            default_value = selected_filters[filter]
-          } else {
-            jQuery(`select[name="${filter}"]`).val('');
-          }
           return (
             <select
               ref={ `filter-${i}` }
               key={ `filter-${i}` }
               name={ filter }
-              defaultValue={ default_value }
             >
             { filters[filter].map(function(option, j) {
               return (
@@ -63,7 +65,7 @@ function(
           );
       }.bind(this));
 
-      let button = false;
+      let button;
 
       if (available_filters.length > 0) {
         button = (
@@ -76,7 +78,7 @@ function(
         );
       }
 
-      let empty_trash = false;
+      let empty_trash;
       if (this.props.group === 'trash') {
         empty_trash = (
           <input

assets/js/src/listing/groups.jsx

@@ -21,7 +21,7 @@ define(['react', 'classnames'], function(React, classNames) {
                 href="javascript:;"
                 className={classes}
                 onClick={this.handleSelect.bind(this, group.name)} >
-                {group.label} <span className="count">({ group.count })</span>
+                {group.label} <span className="count">({ group.count.toLocaleString() })</span>
               </a>
             </li>
           );

assets/js/src/listing/header.jsx

@@ -1,21 +1,15 @@
-define([
+import MailPoet from 'mailpoet'
-    'react',
+import React from 'react'
-    'classnames',
+import classNames from 'classnames'
-    'mailpoet'
-  ], function(
-    React,
-    classNames,
-    MailPoet
-  ) {
 
-  var ListingHeader = React.createClass({
+const ListingHeader = React.createClass({
   handleSelectItems: function() {
     return this.props.onSelectItems(
       this.refs.toggle.checked
     );
   },
   render: function() {
-      var columns = this.props.columns.map(function(column, index) {
+    const columns = this.props.columns.map(function(column, index) {
       column.is_primary = (index === 0);
       column.sorted = (this.props.sort_by === column.name)
         ? this.props.sort_order
@@ -29,7 +23,7 @@ define([
       );
     }.bind(this));
 
-      var checkbox = false;
+    let checkbox;
 
     if(this.props.is_selectable === true) {
       checkbox = (
@@ -57,21 +51,21 @@ define([
   }
 });
 
-  var ListingColumn = React.createClass({
+const ListingColumn = React.createClass({
   handleSort: function() {
-      var sort_by = this.props.column.name,
+    const sort_by = this.props.column.name;
-          sort_order = (this.props.column.sorted === 'asc') ? 'desc' : 'asc';
+    const sort_order = (this.props.column.sorted === 'asc') ? 'desc' : 'asc';
     this.props.onSort(sort_by, sort_order);
   },
   render: function() {
-      var classes = classNames(
+    const classes = classNames(
       'manage-column',
       { 'column-primary': this.props.column.is_primary },
       { 'sortable': this.props.column.sortable },
       this.props.column.sorted,
       { 'sorted': (this.props.sort_by === this.props.column.name) }
     );
-      var label;
+    let label;
 
     if(this.props.column.sortable === true) {
       label = (
@@ -87,12 +81,11 @@ define([
       <th
         className={ classes }
         id={this.props.column.name }
-          scope="col">
+        scope="col"
-          {label}
+        width={ this.props.column.width || null }
-        </th>
+      >{label}</th>
     );
   }
 });
 
-  return ListingHeader;
+module.exports = ListingHeader;
-});

assets/js/src/listing/listing.jsx

@@ -1,36 +1,20 @@
-define(
+import MailPoet from 'mailpoet'
-  [
+import jQuery from 'jquery'
-    'mailpoet',
+import React from 'react'
-    'jquery',
+import _ from 'underscore'
-    'react',
+import { Router, Link } from 'react-router'
-    'react-router',
+import classNames from 'classnames'
-    'classnames',
+import ListingBulkActions from 'listing/bulk_actions.jsx'
-    'listing/bulk_actions.jsx',
+import ListingHeader from 'listing/header.jsx'
-    'listing/header.jsx',
+import ListingPages from 'listing/pages.jsx'
-    'listing/pages.jsx',
+import ListingSearch from 'listing/search.jsx'
-    'listing/search.jsx',
+import ListingGroups from 'listing/groups.jsx'
-    'listing/groups.jsx',
+import ListingFilters from 'listing/filters.jsx'
-    'listing/filters.jsx'
-  ],
-  function(
-    MailPoet,
-    jQuery,
-    React,
-    Router,
-    classNames,
-    ListingBulkActions,
-    ListingHeader,
-    ListingPages,
-    ListingSearch,
-    ListingGroups,
-    ListingFilters
-  ) {
-    var Link = Router.Link;
 
-    var ListingItem = React.createClass({
+const ListingItem = React.createClass({
   getInitialState: function() {
     return {
-          toggled: true
+      expanded: false
     };
   },
   handleSelectItem: function(e) {
@@ -51,7 +35,7 @@ define(
     this.props.onDeleteItem(id);
   },
   handleToggleItem: function(id) {
-        this.setState({ toggled: !this.state.toggled });
+    this.setState({ expanded: !this.state.expanded });
   },
   render: function() {
     var checkbox = false;
@@ -150,8 +134,10 @@ define(
       );
     }
 
+    let actions;
+
     if (this.props.group === 'trash') {
-           var actions = (
+       actions = (
         <div>
           <div className="row-actions">
             <span>
@@ -183,7 +169,7 @@ define(
         </div>
       );
     } else {
-          var actions = (
+      actions = (
         <div>
           <div className="row-actions">
             { item_actions }
@@ -197,7 +183,7 @@ define(
       );
     }
 
-        var row_classes = classNames({ 'is-expanded': !this.state.toggled })
+    const row_classes = classNames({ 'is-expanded': this.state.expanded });
 
     return (
       <tr className={ row_classes }>
@@ -209,7 +195,7 @@ define(
 });
 
 
-    var ListingItems = React.createClass({
+const ListingItems = React.createClass({
   render: function() {
     if (this.props.items.length === 0) {
       return (
@@ -231,8 +217,7 @@ define(
         </tbody>
       );
     } else {
-
+      const select_all_classes = classNames(
-          var selectAllClasses = classNames(
         'mailpoet_select_all',
         { 'mailpoet_hidden': (
             this.props.selection === false
@@ -243,7 +228,7 @@ define(
 
       return (
         <tbody>
-              <tr className={ selectAllClasses }>
+          <tr className={ select_all_classes }>
             <td colSpan={
                 this.props.columns.length
                 + (this.props.is_selectable ? 1 : 0)
@@ -294,10 +279,10 @@ define(
   }
 });
 
-    var Listing = React.createClass({
+const Listing = React.createClass({
-      mixins: [
+  contextTypes: {
-        Router.History
+    router: React.PropTypes.object.isRequired
-      ],
+  },
   getInitialState: function() {
     return {
       loading: false,
@@ -305,8 +290,8 @@ define(
       page: 1,
       count: 0,
       limit: 10,
-          sort_by: 'id',
+      sort_by: null,
-          sort_order: 'desc',
+      sort_order: null,
       items: [],
       groups: [],
       group: 'all',
@@ -316,58 +301,67 @@ define(
       selection: false
     };
   },
-      componentDidUpdate: function(prevProps, prevState) {
-        // reset group to "all" if trash gets emptied
-        if(
-          // we were viewing the trash
-          (prevState.group === 'trash' && prevState.count > 0)
-          &&
-          // we are still viewing the trash but there are no items left
-          (this.state.group === 'trash' && this.state.count === 0)
-          &&
-          // only do this when no filter is set
-          (Object.keys(this.state.filter).length === 0)
-        ) {
-          this.handleGroup('all');
-        }
-      },
   getParam: function(param) {
-        var regex = /(.*)\[(.*)\]/
+    const regex = /(.*)\[(.*)\]/;
-        var matches = regex.exec(param)
+    const matches = regex.exec(param);
-        return [matches[1], matches[2]]
+    return [matches[1], matches[2]];
   },
   initWithParams: function(params) {
-        let state = this.state || {}
+    let state = this.getInitialState();
-        let original_state = state
      // check for url params
-        if(params.splat !== undefined) {
+    if (params.splat) {
       params.splat.split('/').map(param => {
         let [key, value] = this.getParam(param);
         switch(key) {
           case 'filter':
-                let filters = {}
+            let filters = {};
             value.split('&').map(function(pair) {
                 let [k, v] = pair.split('=')
                 filters[k] = v
               }
-                )
+            );
 
-                state.filter = filters
+            state.filter = filters;
           break;
           default:
-                state[key] = value
+            state[key] = value;
         }
-          })
+      });
     }
+
+    // limit per page
     if (this.props.limit !== undefined) {
       state.limit = Math.abs(~~this.props.limit);
     }
+
+    // sort by
+    if (state.sort_by === null && this.props.sort_by !== undefined) {
+      state.sort_by = this.props.sort_by;
+    }
+
+    // sort order
+    if (state.sort_order === null && this.props.sort_order !== undefined) {
+      state.sort_order = this.props.sort_order;
+    }
+
     this.setState(state, function() {
       this.getItems();
     }.bind(this));
   },
+  getParams: function() {
+    // get all route parameters (without the "splat")
+    let params = _.omit(this.props.params, 'splat');
+    // TODO:
+    // find a way to set the "type" in the routes definition
+    // so that it appears in `this.props.params`
+    if (this.props.type) {
+      params.type = this.props.type;
+    }
+    return params;
+  },
   setParams: function() {
-        var params = Object.keys(this.state)
+    if (this.props.location) {
+      let params = Object.keys(this.state)
         .filter(key => {
           return (
             [
@@ -381,31 +375,56 @@ define(
           )
         })
         .map(key => {
-            let value = this.state[key]
+          let value = this.state[key];
           if (value === Object(value)) {
             value = jQuery.param(value)
           } else if (value === Boolean(value)) {
             value = value.toString()
           }
 
-            if(value !== '') {
+          if (value !== '' && value !== null) {
             return `${key}[${value}]`
           }
         })
         .filter(key => { return (key !== undefined) })
         .join('/');
-        params = '/'+params
 
-        if(this.props.location) {
+      // set url
-          if(this.props.location.pathname !== params) {
+      let url = this.getUrlWithParams(params);
-            this.history.pushState(null, `${params}`)
+
+      if (this.props.location.pathname !== url) {
+        this.context.router.push(`${url}`);
       }
     }
   },
+  getUrlWithParams: function(params) {
+    let base_url = (this.props.base_url !== undefined)
+      ? this.props.base_url
+      : null;
+
+    if (base_url !== null) {
+      base_url = this.setBaseUrlParams(base_url);
+      return `/${ base_url }/${ params }`;
+    } else {
+      return `/${ params }`;
+    }
+  },
+  setBaseUrlParams: function(base_url) {
+    if (base_url.indexOf(':') !== -1) {
+      const params = this.getParams();
+      Object.keys(params).map((key) => {
+        if (base_url.indexOf(':'+key) !== -1) {
+          base_url = base_url.replace(':'+key, params[key]);
+        }
+      });
+    }
+
+    return base_url;
+  },
   componentDidMount: function() {
     if (this.isMounted()) {
-          const params = this.props.params || {}
+      const params = this.props.params || {};
-          this.initWithParams(params)
+      this.initWithParams(params);
 
       if (this.props.auto_refresh) {
         jQuery(document).on('heartbeat-tick.mailpoet', function(e, data) {
@@ -415,8 +434,8 @@ define(
     }
   },
   componentWillReceiveProps: function(nextProps) {
-        const params = nextProps.params || {}
+    const params = nextProps.params || {};
-        this.initWithParams(params)
+    this.initWithParams(params);
   },
   getItems: function() {
     if (this.isMounted()) {
@@ -428,6 +447,7 @@ define(
         endpoint: this.props.endpoint,
         action: 'listing',
         data: {
+          params: this.getParams(),
           offset: (this.state.page - 1) * this.state.limit,
           limit: this.state.limit,
           group: this.state.group,
@@ -436,21 +456,29 @@ define(
           sort_by: this.state.sort_by,
           sort_order: this.state.sort_order
         }
-          }).done(function(response) {
+      }).always(() => {
+        this.setState({ loading: false });
+      }).done((response) => {
         this.setState({
-              items: response.items || [],
+          items: response.data || [],
-              filters: response.filters || {},
+          filters: response.meta.filters || {},
-              groups: response.groups || [],
+          groups: response.meta.groups || [],
-              count: response.count || 0,
+          count: response.meta.count || 0
-              loading: false
+        }, () => {
-            }, function() {
+          // if viewing an empty trash
-              if(this.props['onGetItems'] !== undefined) {
+          if (this.state.group === 'trash' && response.meta.count === 0) {
-                  this.props.onGetItems(
+            // redirect to default group
-                    ~~(this.state.groups[0]['count'])
+            this.handleGroup('all');
+          }
+        });
+      }).fail(function(response) {
+        if (response.errors.length > 0) {
+          MailPoet.Notice.error(
+            response.errors.map(function(error) { return error.message; }),
+            { scroll: true }
           );
         }
-            }.bind(this));
+      });
-          }.bind(this));
     }
   },
   handleRestoreItem: function(id) {
@@ -462,8 +490,10 @@ define(
     MailPoet.Ajax.post({
       endpoint: this.props.endpoint,
       action: 'restore',
-          data: id
+      data: {
-        }).done(function(response) {
+        id: id
+      }
+    }).done((response) => {
       if (
         this.props.messages !== undefined
         && this.props.messages['onRestore'] !== undefined
@@ -471,7 +501,12 @@ define(
         this.props.messages.onRestore(response);
       }
       this.getItems();
-        }.bind(this));
+    }).fail((response) => {
+      MailPoet.Notice.error(
+        response.errors.map(function(error) { return error.message; }),
+        { scroll: true }
+      );
+    });
   },
   handleTrashItem: function(id) {
     this.setState({
@@ -482,8 +517,10 @@ define(
     MailPoet.Ajax.post({
       endpoint: this.props.endpoint,
       action: 'trash',
-          data: id
+      data: {
-        }).done(function(response) {
+        id: id
+      }
+    }).done((response) => {
       if (
         this.props.messages !== undefined
         && this.props.messages['onTrash'] !== undefined
@@ -491,7 +528,12 @@ define(
         this.props.messages.onTrash(response);
       }
       this.getItems();
-        }.bind(this));
+    }).fail((response) => {
+      MailPoet.Notice.error(
+        response.errors.map(function(error) { return error.message; }),
+        { scroll: true }
+      );
+    });
   },
   handleDeleteItem: function(id) {
     this.setState({
@@ -502,8 +544,10 @@ define(
     MailPoet.Ajax.post({
       endpoint: this.props.endpoint,
       action: 'delete',
-          data: id
+      data: {
-        }).done(function(response) {
+        id: id
+      }
+    }).done((response) => {
       if (
         this.props.messages !== undefined
         && this.props.messages['onDelete'] !== undefined
@@ -511,31 +555,44 @@ define(
         this.props.messages.onDelete(response);
       }
       this.getItems();
-        }.bind(this));
+    }).fail((response) => {
-      },
+      MailPoet.Notice.error(
-      handleEmptyTrash: function() {
+        response.errors.map(function(error) { return error.message; }),
-        this.handleBulkAction('all', {
+        { scroll: true }
-          action: 'delete',
-          group: 'trash'
-        }, function(response) {
-          MailPoet.Notice.success(
-            MailPoet.I18n.t('permanentlyDeleted').replace('%d', response)
       );
     });
   },
-      handleBulkAction: function(selected_ids, params, callback) {
+  handleEmptyTrash: function() {
+    return this.handleBulkAction('all', {
+      action: 'delete',
+      group: 'trash'
+    }).done((response) => {
+      MailPoet.Notice.success(
+        MailPoet.I18n.t('permanentlyDeleted').replace('%d', response.meta.count)
+      );
+      // redirect to default group
+      this.handleGroup('all');
+    }).fail((response) => {
+      MailPoet.Notice.error(
+        response.errors.map(function(error) { return error.message; }),
+        { scroll: true }
+      );
+    });
+  },
+  handleBulkAction: function(selected_ids, params) {
     if (
       this.state.selection === false
       && this.state.selected_ids.length === 0
       && selected_ids !== 'all'
     ) {
-          return;
+      return false;
     }
 
     this.setState({ loading: true });
 
     var data = params || {};
     data.listing = {
+      params: this.getParams(),
       offset: 0,
       limit: 0,
       filter: this.state.filter,
@@ -546,14 +603,13 @@ define(
       data.listing.selection = selected_ids;
     }
 
-        MailPoet.Ajax.post({
+    return MailPoet.Ajax.post({
       endpoint: this.props.endpoint,
       action: 'bulkAction',
       data: data
-        }).done(function(response) {
+    }).done(() => {
       this.getItems();
-          callback(response);
+    });
-        }.bind(this));
   },
   handleSearch: function(search) {
     this.setState({
@@ -563,16 +619,14 @@ define(
       selected_ids: []
     }, function() {
       this.setParams();
-          this.getItems();
     }.bind(this));
   },
   handleSort: function(sort_by, sort_order = 'asc') {
     this.setState({
       sort_by: sort_by,
-          sort_order: sort_order,
+      sort_order: (sort_order === 'asc') ? 'asc' : 'desc',
     }, function() {
       this.setParams();
-          this.getItems();
     }.bind(this));
   },
   handleSelectItem: function(id, is_checked) {
@@ -632,7 +686,6 @@ define(
       page: 1
     }, function() {
       this.setParams();
-          this.getItems();
     }.bind(this));
   },
   handleGroup: function(group) {
@@ -646,7 +699,6 @@ define(
       page: 1
     }, function() {
       this.setParams();
-          this.getItems();
     }.bind(this));
   },
   handleSetPage: function(page) {
@@ -656,23 +708,28 @@ define(
       selected_ids: []
     }, function() {
       this.setParams();
-          this.getItems();
     }.bind(this));
   },
   handleRenderItem: function(item, actions) {
-        var render = this.props.onRenderItem(item, actions);
+    const render = this.props.onRenderItem(item, actions);
     return render.props.children;
   },
   handleRefreshItems: function() {
     this.getItems();
   },
   render: function() {
-        var items = this.state.items,
+    const items = this.state.items;
-            sort_by =  this.state.sort_by,
+    const sort_by = this.state.sort_by;
-            sort_order =  this.state.sort_order;
+    const sort_order = this.state.sort_order;
+
+    // columns
+    let columns = this.props.columns || [];
+    columns = columns.filter(function(column) {
+      return (column.display === undefined || !!(column.display) === true);
+    });
 
     // bulk actions
-        var bulk_actions = this.props.bulk_actions || [];
+    let bulk_actions = this.props.bulk_actions || [];
 
     if (this.state.group === 'trash' && bulk_actions.length > 0) {
       bulk_actions = [
@@ -690,9 +747,9 @@ define(
     }
 
     // item actions
-        var item_actions = this.props.item_actions || [];
+    const item_actions = this.props.item_actions || [];
 
-        var table_classes = classNames(
+    const table_classes = classNames(
       'mailpoet_listing_table',
       'wp-list-table',
       'widefat',
@@ -702,7 +759,7 @@ define(
     );
 
     // search
-        var search = (
+    let search = (
       <ListingSearch
         onSearch={ this.handleSearch }
         search={ this.state.search }
@@ -713,7 +770,7 @@ define(
     }
 
     // groups
-        var groups = (
+    let groups = (
       <ListingGroups
         groups={ this.state.groups }
         group={ this.state.group }
@@ -730,6 +787,7 @@ define(
         { search }
         <div className="tablenav top clearfix">
           <ListingBulkActions
+            count={ this.state.count }
             bulk_actions={ bulk_actions }
             selection={ this.state.selection }
             selected_ids={ this.state.selected_ids }
@@ -753,9 +811,9 @@ define(
               onSort={ this.handleSort }
               onSelectItems={ this.handleSelectItems }
               selection={ this.state.selection }
-                  sort_by={ this.state.sort_by }
+              sort_by={ sort_by }
-                  sort_order={ this.state.sort_order }
+              sort_order={ sort_order }
-                  columns={ this.props.columns }
+              columns={ columns }
               is_selectable={ bulk_actions.length > 0 } />
           </thead>
 
@@ -765,7 +823,7 @@ define(
             onRestoreItem={ this.handleRestoreItem }
             onTrashItem={ this.handleTrashItem }
             onRefreshItems={ this.handleRefreshItems }
-                columns={ this.props.columns }
+            columns={ columns }
             is_selectable={ bulk_actions.length > 0 }
             onSelectItem={ this.handleSelectItem }
             onSelectAll={ this.handleSelectAll }
@@ -783,15 +841,16 @@ define(
               onSort={ this.handleSort }
               onSelectItems={ this.handleSelectItems }
               selection={ this.state.selection }
-                  sort_by={ this.state.sort_by }
+              sort_by={ sort_by }
-                  sort_order={ this.state.sort_order }
+              sort_order={ sort_order }
-                  columns={ this.props.columns }
+              columns={ columns }
               is_selectable={ bulk_actions.length > 0 } />
           </tfoot>
 
         </table>
         <div className="tablenav bottom">
           <ListingBulkActions
+            count={ this.state.count }
             bulk_actions={ bulk_actions }
             selection={ this.state.selection }
             selected_ids={ this.state.selected_ids }
@@ -807,6 +866,4 @@ define(
   }
 });
 
-    return Listing;
+module.exports = Listing;
-  }
-);

assets/js/src/listing/pages.jsx

@@ -148,7 +148,7 @@ define([
                   className="current-page" />
                  {MailPoet.I18n.t('pageOutOf')} 
                 <span className="total-pages">
-                  {Math.ceil(this.props.count / this.props.limit)}
+                  {Math.ceil(this.props.count / this.props.limit).toLocaleString()}
                 </span>
               </span>
               &nbsp;
@@ -167,7 +167,7 @@ define([
         return (
           <div className={ classes }>
             <span className="displaying-num">{
-              MailPoet.I18n.t('numberOfItems').replace('%$1d', this.props.count)
+              MailPoet.I18n.t('numberOfItems').replace('%$1d', this.props.count.toLocaleString())
             }</span>
             { pagination }
           </div>

assets/js/src/newsletter_editor/behaviors/DraggableBehavior.js

@@ -112,7 +112,16 @@ define([
             }
           }
         },
-      }).preventDefault('auto');
+      })
+      .preventDefault('auto')
+      .actionChecker(function (pointer, event, action) {
+        // Disable dragging with right click
+        if (event.button !== 0) {
+          return null;
+        }
+
+        return action;
+      });
 
       if (this.options.drop !== undefined) {
         interactable.getDropModel = this.options.drop;

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/behaviors/ShowSettingsBehavior.js

@@ -0,0 +1,31 @@
+/**
+ * Show Settings Behavior
+ *
+ * Opens up settings of a BlockView if contents are clicked upon
+ */
+define([
+    'backbone.marionette',
+    'jquery',
+    'newsletter_editor/behaviors/BehaviorsLookup',
+  ], function(Marionette, jQuery, BehaviorsLookup) {
+
+  BehaviorsLookup.ShowSettingsBehavior = Marionette.Behavior.extend({
+    defaults: {
+      ignoreFrom: '', // selector
+    },
+    events: {
+      'click .mailpoet_content': 'showSettings',
+    },
+    showSettings: function(event) {
+      if(!this.isIgnoredElement(event.target)) {
+        this.view.triggerMethod('showSettings');
+      }
+    },
+    isIgnoredElement: function(element) {
+      return this.options.ignoreFrom
+        && this.options.ignoreFrom.length > 0
+        && jQuery(element).is(this.options.ignoreFrom);
+    },
+  });
+});
+

assets/js/src/newsletter_editor/behaviors/TextEditorBehavior.js

@@ -0,0 +1,76 @@
+/**
+ * Text Editor Behavior
+ *
+ * Adds TinyMCE text editing capabilities to a view
+ */
+define([
+    'backbone.marionette',
+    'underscore',
+    'newsletter_editor/behaviors/BehaviorsLookup'
+  ], function(Marionette, _, BehaviorsLookup) {
+
+  BehaviorsLookup.TextEditorBehavior = Marionette.Behavior.extend({
+    defaults: {
+      selector: '.mailpoet_content',
+      toolbar1: "bold italic link unlink forecolor mailpoet_shortcodes",
+      toolbar2: "",
+      validElements: "p[class|style],span[class|style],a[href|class|title|target|style],strong[class|style],em[class|style],strike,br",
+      invalidElements: "script",
+      blockFormats: 'Paragraph=p',
+      plugins: "link textcolor colorpicker mailpoet_shortcodes",
+      configurationFilter: function(originalConfig) { return originalConfig; },
+    },
+    onDomRefresh: function() {
+      var that = this;
+      if (this.view.disableTextEditor === true) {
+        return;
+      }
+
+      this.$(this.options.selector).tinymce(this.options.configurationFilter({
+        inline: true,
+
+        menubar: false,
+        toolbar1: this.options.toolbar1,
+        toolbar2: this.options.toolbar2,
+
+        valid_elements: this.options.validElements,
+        invalid_elements: this.options.invalidElements,
+        block_formats: this.options.blockFormats,
+        relative_urls: false,
+        remove_script_host: false,
+        convert_urls: true,
+        urlconverter_callback: function(url, node, on_save, name) {
+          if (url.match(/\[.+\]/g)) {
+            // Do not convert URLs with shortcodes
+            return url;
+          }
+
+          return this.documentBaseURI.toAbsolute(
+            url,
+            this.settings.remove_script_host
+          );
+        },
+
+        plugins: this.options.plugins,
+
+        setup: function(editor) {
+          editor.on('change', function(e) {
+            that.view.triggerMethod('text:editor:change', editor.getContent());
+          });
+
+          editor.on('click', function(e) {
+            editor.focus();
+          });
+
+          editor.on('focus', function(e) {
+            that.view.triggerMethod('text:editor:focus');
+          });
+
+          editor.on('blur', function(e) {
+            that.view.triggerMethod('text:editor:blur');
+          });
+        },
+      }));
+    }
+  });
+});

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

@@ -13,6 +13,7 @@ define([
     'newsletter_editor/blocks/divider',
     'newsletter_editor/components/communication',
     'mailpoet',
+    'backbone.supermodel',
     'underscore',
     'jquery'
   ], function(
@@ -22,6 +23,7 @@ define([
     DividerBlock,
     CommunicationComponent,
     MailPoet,
+    SuperModel,
     _,
     jQuery
   ) {
@@ -31,6 +33,41 @@ define([
   var Module = {},
       base = BaseBlock;
 
+  Module.ALCSupervisor = SuperModel.extend({
+    initialize: function() {
+      var DELAY_REFRESH_FOR_MS = 500;
+      this.listenTo(
+        App.getChannel(),
+        'automatedLatestContentRefresh',
+        _.debounce(this.refresh, DELAY_REFRESH_FOR_MS)
+      );
+    },
+    refresh: function() {
+      var models = App.findModels(function(model) {
+        return model.get('type') === 'automatedLatestContent';
+      }) || [];
+
+      if (models.length === 0) return;
+      var blocks = _.map(models, function(model) {
+        return model.toJSON();
+      });
+
+      CommunicationComponent.getBulkTransformedPosts({
+        blocks: blocks,
+      }).then(_.partial(this.refreshBlocks, models));
+    },
+    refreshBlocks: function(models, renderedBlocks) {
+      _.each(
+        _.zip(models, renderedBlocks),
+        function(args) {
+          var model = args[0],
+              contents = args[1];
+          model.trigger('refreshPosts', contents);
+        }
+      );
+    },
+  });
+
   Module.AutomatedLatestContentBlockModel = base.BlockModel.extend({
     stale: ['_container'],
     defaults: function() {
@@ -72,34 +109,21 @@ define([
     },
     initialize: function() {
       base.BlockView.prototype.initialize.apply(this, arguments);
-      this.fetchPosts();
       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._scheduleFetchPosts, this);
       this.listenTo(this.get('readMoreButton'), 'change', this._scheduleFetchPosts);
       this.listenTo(this.get('divider'), 'change', this._scheduleFetchPosts);
+      this.on('add remove update reset', this._scheduleFetchPosts);
+      this.on('refreshPosts', this.updatePosts, this);
     },
-    fetchPosts: function() {
+    updatePosts: function(posts) {
-      var that = this;
+      this.get('_container.blocks').reset(posts, {parse: true});
-      CommunicationComponent.getTransformedPosts(this.toJSON()).done(function(content) {
-        that.get('_container').get('blocks').reset(content, {parse: true});
-        that.trigger('postsChanged');
-      }).fail(function(error) {
-        MailPoet.Notice.error(MailPoet.I18n.t('failedToFetchRenderedPosts'));
-      });
     },
     /**
      * Batch more changes during a specific time, instead of fetching
      * ALC posts on each model change
      */
     _scheduleFetchPosts: function() {
-      var timeout = 500,
+      App.getChannel().trigger('automatedLatestContentRefresh');
-        that = this;
-      if (this._fetchPostsTimer !== undefined) {
-        clearTimeout(this._fetchPostsTimer);
-      }
-      this._fetchPostsTimer = setTimeout(function() {
-        that.fetchPosts();
-        that._fetchPostsTimer = undefined;
-      }, timeout);
     },
   });
 
@@ -124,6 +148,7 @@ define([
         renderOptions = {
           disableTextEditor: true,
           disableDragAndDrop: true,
+          emptyContainerMessage: MailPoet.I18n.t('noPostsToDisplay'),
         };
       this.toolsView = new Module.AutomatedLatestContentBlockToolsView({ model: this.model });
       this.toolsRegion.show(this.toolsView);
@@ -149,24 +174,21 @@ define([
         "change .mailpoet_automated_latest_content_title_format": 'changeTitleFormat',
         "change .mailpoet_automated_latest_content_title_as_links": _.partial(this.changeBoolField, 'titleIsLink'),
         "change .mailpoet_automated_latest_content_show_divider": _.partial(this.changeBoolField, 'showDivider'),
-        "keyup .mailpoet_automated_latest_content_show_amount": _.partial(this.changeField, "amount"),
+        "input .mailpoet_automated_latest_content_show_amount": _.partial(this.changeField, "amount"),
         "change .mailpoet_automated_latest_content_content_type": _.partial(this.changeField, "contentType"),
         "change .mailpoet_automated_latest_content_include_or_exclude": _.partial(this.changeField, "inclusionType"),
         "change .mailpoet_automated_latest_content_title_alignment": _.partial(this.changeField, "titleAlignment"),
         "change .mailpoet_automated_latest_content_image_full_width": _.partial(this.changeBoolField, "imageFullWidth"),
         "change .mailpoet_automated_latest_content_featured_image_position": _.partial(this.changeField, "featuredImagePosition"),
         "change .mailpoet_automated_latest_content_show_author": _.partial(this.changeField, "showAuthor"),
-        "keyup .mailpoet_automated_latest_content_author_preceded_by": _.partial(this.changeField, "authorPrecededBy"),
+        "input .mailpoet_automated_latest_content_author_preceded_by": _.partial(this.changeField, "authorPrecededBy"),
         "change .mailpoet_automated_latest_content_show_categories": _.partial(this.changeField, "showCategories"),
-        "keyup .mailpoet_automated_latest_content_categories": _.partial(this.changeField, "categoriesPrecededBy"),
+        "input .mailpoet_automated_latest_content_categories": _.partial(this.changeField, "categoriesPrecededBy"),
-        "keyup .mailpoet_automated_latest_content_read_more_text": _.partial(this.changeField, "readMoreText"),
+        "input .mailpoet_automated_latest_content_read_more_text": _.partial(this.changeField, "readMoreText"),
         "change .mailpoet_automated_latest_content_sort_by": _.partial(this.changeField, "sortBy"),
         "click .mailpoet_done_editing": "close",
       };
     },
-    behaviors: {
-      ColorPickerBehavior: {},
-    },
     templateHelpers: function() {
       return {
         model: this.model.toJSON(),
@@ -181,6 +203,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 {
@@ -188,8 +211,10 @@ define([
             };
           },
           transport: function(options, success, failure) {
-            var taxonomies,
+            var taxonomies;
-                promise = CommunicationComponent.getTaxonomies(that.model.get('contentType')).then(function(tax) {
+            var promise = CommunicationComponent.getTaxonomies(
+              that.model.get('contentType')
+            ).then(function(tax) {
               taxonomies = tax;
               // Fetch available terms based on the list of taxonomies already fetched
               var promise = CommunicationComponent.getTerms({
@@ -198,7 +223,7 @@ define([
               }).then(function(terms) {
                 return {
                   taxonomies: taxonomies,
-                  terms: terms,
+                  terms: terms
                 };
               });
               return promise;
@@ -287,9 +312,11 @@ define([
       if (value == 'titleOnly') {
         this.$('.mailpoet_automated_latest_content_title_as_list').removeClass('mailpoet_hidden');
         this.$('.mailpoet_automated_latest_content_image_full_width_option').addClass('mailpoet_hidden');
+        this.$('.mailpoet_automated_latest_content_image_separator').addClass('mailpoet_hidden');
       } else {
         this.$('.mailpoet_automated_latest_content_title_as_list').addClass('mailpoet_hidden');
         this.$('.mailpoet_automated_latest_content_image_full_width_option').removeClass('mailpoet_hidden');
+        this.$('.mailpoet_automated_latest_content_image_separator').removeClass('mailpoet_hidden');
 
         // Reset titleFormat if it was set to List when switching away from displayType=titleOnly
         if (this.model.get('titleFormat') === 'ul') {
@@ -363,5 +390,10 @@ define([
     });
   });
 
+  App.on('start', function() {
+    App._ALCSupervisor = new Module.ALCSupervisor();
+    App._ALCSupervisor.refresh();
+  });
+
   return Module;
 });

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

@@ -40,6 +40,9 @@ define([
       // Remove stale attributes from resulting JSON object
       return _.omit(SuperModel.prototype.toJSON.call(this), this.stale);
     },
+    getChildren: function() {
+      return [];
+    },
   });
 
   Module.BlockView = AugmentedView.extend({
@@ -77,6 +80,7 @@ define([
           }
         },
       },
+      HighlightEditingBehavior: {},
     },
     templateHelpers: function() {
       return {
@@ -95,12 +99,12 @@ define([
     },
     showTools: function(_event) {
       if (!this.showingToolsDisabled) {
-        this.$('> .mailpoet_tools').show();
+        this.$('> .mailpoet_tools').addClass('mailpoet_display_tools');
         this.toolsView.triggerMethod('showTools');
       }
     },
     hideTools: function(e) {
-      this.$('> .mailpoet_tools').hide();
+      this.$('> .mailpoet_tools').removeClass('mailpoet_display_tools');
       this.toolsView.triggerMethod('hideTools');
     },
     enableShowingTools: function() {
@@ -215,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',
@@ -224,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();
@@ -253,6 +267,7 @@ define([
     },
     onBeforeDestroy: function() {
       MailPoet.Modal.close();
+      this.model.trigger('stopEditing');
     },
   });
 

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

@@ -19,7 +19,7 @@ define([
       return this._getDefaults({
         type: 'button',
         text: 'Button',
-        url: 'http://google.com',
+        url: '',
         styles: {
           block: {
             backgroundColor: '#ff0000',
@@ -44,6 +44,9 @@ define([
     className: "mailpoet_block mailpoet_button_block mailpoet_droppable_block",
     getTemplate: function() { return templates.buttonBlock; },
     onDragSubstituteBy: function() { return Module.ButtonWidgetView; },
+    behaviors: _.extend({}, base.BlockView.prototype.behaviors, {
+      ShowSettingsBehavior: {},
+    }),
     initialize: function() {
       base.BlockView.prototype.initialize.apply(this, arguments);
 
@@ -65,8 +68,8 @@ define([
     getTemplate: function() { return templates.buttonBlockSettings; },
     events: function() {
       return {
-        "keyup .mailpoet_field_button_text": _.partial(this.changeField, "text"),
+        "input .mailpoet_field_button_text": _.partial(this.changeField, "text"),
-        "keyup .mailpoet_field_button_url": _.partial(this.changeField, "url"),
+        "input .mailpoet_field_button_url": _.partial(this.changeField, "url"),
         "change .mailpoet_field_button_alignment": _.partial(this.changeField, "styles.block.textAlign"),
         "change .mailpoet_field_button_font_color": _.partial(this.changeColorField, "styles.block.fontColor"),
         "change .mailpoet_field_button_font_family": _.partial(this.changeField, "styles.block.fontFamily"),
@@ -77,45 +80,24 @@ define([
 
         "input .mailpoet_field_button_border_width": _.partial(this.updateValueAndCall, '.mailpoet_field_button_border_width_input', _.partial(this.changePixelField, "styles.block.borderWidth").bind(this)),
         "change .mailpoet_field_button_border_width": _.partial(this.updateValueAndCall, '.mailpoet_field_button_border_width_input', _.partial(this.changePixelField, "styles.block.borderWidth").bind(this)),
-        "change .mailpoet_field_button_border_width_input": _.partial(this.updateValueAndCall, '.mailpoet_field_button_border_width', _.partial(this.changePixelField, "styles.block.borderWidth").bind(this)),
+        "input .mailpoet_field_button_border_width_input": _.partial(this.updateValueAndCall, '.mailpoet_field_button_border_width', _.partial(this.changePixelField, "styles.block.borderWidth").bind(this)),
-        "keyup .mailpoet_field_button_border_width_input": _.partial(this.updateValueAndCall, '.mailpoet_field_button_border_width', _.partial(this.changePixelField, "styles.block.borderWidth").bind(this)),
 
         "input .mailpoet_field_button_border_radius": _.partial(this.updateValueAndCall, '.mailpoet_field_button_border_radius_input', _.partial(this.changePixelField, "styles.block.borderRadius").bind(this)),
         "change .mailpoet_field_button_border_radius": _.partial(this.updateValueAndCall, '.mailpoet_field_button_border_radius_input', _.partial(this.changePixelField, "styles.block.borderRadius").bind(this)),
-        "change .mailpoet_field_button_border_radius_input": _.partial(this.updateValueAndCall, '.mailpoet_field_button_border_radius', _.partial(this.changePixelField, "styles.block.borderRadius").bind(this)),
+        "input .mailpoet_field_button_border_radius_input": _.partial(this.updateValueAndCall, '.mailpoet_field_button_border_radius', _.partial(this.changePixelField, "styles.block.borderRadius").bind(this)),
-        "keyup .mailpoet_field_button_border_radius_input": _.partial(this.updateValueAndCall, '.mailpoet_field_button_border_radius', _.partial(this.changePixelField, "styles.block.borderRadius").bind(this)),
 
         "input .mailpoet_field_button_width": _.partial(this.updateValueAndCall, '.mailpoet_field_button_width_input', _.partial(this.changePixelField, "styles.block.width").bind(this)),
         "change .mailpoet_field_button_width": _.partial(this.updateValueAndCall, '.mailpoet_field_button_width_input', _.partial(this.changePixelField, "styles.block.width").bind(this)),
-        "change .mailpoet_field_button_width_input": _.partial(this.updateValueAndCall, '.mailpoet_field_button_width', _.partial(this.changePixelField, "styles.block.width").bind(this)),
+        "input .mailpoet_field_button_width_input": _.partial(this.updateValueAndCall, '.mailpoet_field_button_width', _.partial(this.changePixelField, "styles.block.width").bind(this)),
-        "keyup .mailpoet_field_button_width_input": _.partial(this.updateValueAndCall, '.mailpoet_field_button_width', _.partial(this.changePixelField, "styles.block.width").bind(this)),
 
         "input .mailpoet_field_button_line_height": _.partial(this.updateValueAndCall, '.mailpoet_field_button_line_height_input', _.partial(this.changePixelField, "styles.block.lineHeight").bind(this)),
         "change .mailpoet_field_button_line_height": _.partial(this.updateValueAndCall, '.mailpoet_field_button_line_height_input', _.partial(this.changePixelField, "styles.block.lineHeight").bind(this)),
-        "change .mailpoet_field_button_line_height_input": _.partial(this.updateValueAndCall, '.mailpoet_field_button_line_height', _.partial(this.changePixelField, "styles.block.lineHeight").bind(this)),
+        "input .mailpoet_field_button_line_height_input": _.partial(this.updateValueAndCall, '.mailpoet_field_button_line_height', _.partial(this.changePixelField, "styles.block.lineHeight").bind(this)),
-        "keyup .mailpoet_field_button_line_height_input": _.partial(this.updateValueAndCall, '.mailpoet_field_button_line_height', _.partial(this.changePixelField, "styles.block.lineHeight").bind(this)),
 
         "click .mailpoet_field_button_replace_all_styles": "applyToAll",
         "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

@@ -65,6 +65,13 @@ define([
       }
       return response;
     },
+    getChildren: function() {
+      var models = this.get('blocks').map(function(model, index, list) {
+        return [model, model.getChildren()];
+      });
+
+      return _.flatten(models);
+    },
   });
 
   Module.ContainerBlockView = Marionette.CompositeView.extend({
@@ -118,6 +125,7 @@ define([
           return view.renderOptions.depth === 1;
         },
       },
+      HighlightEditingBehavior: {}
     },
     onDragSubstituteBy: function() {
       // For two and three column layouts display their respective widgets,
@@ -178,13 +186,13 @@ define([
     },
     showTools: function() {
       if (this.renderOptions.depth === 1 && !this.$el.hasClass('mailpoet_container_layer_active')) {
-        this.$(this.ui.tools).show();
+        this.$(this.ui.tools).addClass('mailpoet_display_tools');
         this.toolsView.triggerMethod('showTools');
       }
     },
     hideTools: function() {
       if (this.renderOptions.depth === 1 && !this.$el.hasClass('mailpoet_container_layer_active')) {
-        this.$(this.ui.tools).hide();
+        this.$(this.ui.tools).removeClass('mailpoet_display_tools');
         this.toolsView.triggerMethod('hideTools');
       }
     },
@@ -286,6 +294,7 @@ define([
     templateHelpers: function() {
       return {
         isRoot: this.renderOptions.depth === 0,
+        emptyContainerMessage: this.renderOptions.emptyContainerMessage || '',
       };
     },
   });
@@ -302,9 +311,6 @@ define([
         "click .mailpoet_done_editing": "close",
       };
     },
-    behaviors: {
-      ColorPickerBehavior: {},
-    },
     regions: {
       columnsSettingsRegion: '.mailpoet_container_columns_settings',
     },

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

@@ -43,6 +43,9 @@ define([
         minLength: 0, // TODO: Move this number to editor configuration
         modelField: 'styles.block.padding',
       },
+      ShowSettingsBehavior: {
+        ignoreFrom: '.mailpoet_resize_handle'
+      },
     }, base.BlockView.prototype.behaviors),
     onDragSubstituteBy: function() { return Module.DividerWidgetView; },
     initialize: function() {
@@ -88,8 +91,7 @@ define([
 
         "input .mailpoet_field_divider_border_width": _.partial(this.updateValueAndCall, '.mailpoet_field_divider_border_width_input', _.partial(this.changePixelField, "styles.block.borderWidth").bind(this)),
         "change .mailpoet_field_divider_border_width": _.partial(this.updateValueAndCall, '.mailpoet_field_divider_border_width_input', _.partial(this.changePixelField, "styles.block.borderWidth").bind(this)),
-        "change .mailpoet_field_divider_border_width_input": _.partial(this.updateValueAndCall, '.mailpoet_field_divider_border_width', _.partial(this.changePixelField, "styles.block.borderWidth").bind(this)),
+        "input .mailpoet_field_divider_border_width_input": _.partial(this.updateValueAndCall, '.mailpoet_field_divider_border_width', _.partial(this.changePixelField, "styles.block.borderWidth").bind(this)),
-        "keyup .mailpoet_field_divider_border_width_input": _.partial(this.updateValueAndCall, '.mailpoet_field_divider_border_width', _.partial(this.changePixelField, "styles.block.borderWidth").bind(this)),
 
         "change .mailpoet_field_divider_border_color": _.partial(this.changeColorField, "styles.block.borderColor"),
         "change .mailpoet_field_divider_background_color": _.partial(this.changeColorField, "styles.block.backgroundColor"),
@@ -102,23 +104,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

@@ -16,7 +16,7 @@ define([
     defaults: function() {
       return this._getDefaults({
         type: 'footer',
-        text: '<a href="[subscription:unsubscribe_url]">Unsubscribe</a> | <a href="[subscription:manage_url]">Manage subscription</a><br /><b>Add your postal address here!</b>',
+        text: '<a href="[link:subscription_unsubscribe_url]">Unsubscribe</a> | <a href="[link:subscription_manage_url]">Manage subscription</a><br /><b>Add your postal address here!</b>',
         styles: {
           block: {
             backgroundColor: 'transparent',
@@ -42,45 +42,37 @@ define([
     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',
     }, _.omit(base.BlockView.prototype.modelEvents, 'change')),
+    behaviors: _.extend({}, base.BlockView.prototype.behaviors, {
+      TextEditorBehavior: {
+        configurationFilter: function(originalSettings) {
+          return _.extend({}, originalSettings, {
+            mailpoet_shortcodes: App.getConfig().get('shortcodes').toJSON(),
+            mailpoet_shortcodes_window_title: MailPoet.I18n.t('shortcodesWindowTitle'),
+          });
+        }
+      },
+    }),
     onDragSubstituteBy: function() { return Module.FooterWidgetView; },
     onRender: function() {
       this.toolsView = new Module.FooterBlockToolsView({ model: this.model });
       this.toolsRegion.show(this.toolsView);
     },
-    onDomRefresh: function() {
+    onTextEditorChange: function(newContent) {
-      this.attachTextEditor();
+      this.model.set('text', newContent);
     },
-    attachTextEditor: function() {
+    onTextEditorFocus: function() {
-      var that = this;
+      this.disableDragging();
-      this.$('.mailpoet_content').tinymce({
+      this.disableShowingTools();
-        inline: true,
-
-        menubar: false,
-        toolbar: "bold italic link unlink forecolor mailpoet_custom_fields",
-
-        valid_elements: "p[class|style],span[class|style],a[href|class|title|target|style],strong[class|style],em[class|style],strike,br",
-        invalid_elements: "script",
-        block_formats: 'Paragraph=p',
-
-        plugins: "link textcolor colorpicker mailpoet_custom_fields",
-
-        setup: function(editor) {
-          editor.on('change', function(e) {
-            that.model.set('text', editor.getContent());
-          });
-
-          editor.on('focus', function(e) {
-            that.disableShowingTools();
-          });
-
-          editor.on('blur', function(e) {
-            that.enableShowingTools();
-          });
     },
-
+    onTextEditorBlur: function() {
-        mailpoet_custom_fields: App.getConfig().get('customFields').toJSON(),
+      this.enableDragging();
-        mailpoet_custom_fields_window_title: MailPoet.I18n.t('customFieldsWindowTitle'),
+      this.enableShowingTools();
-      });
+    },
+    disableDragging: function() {
+      this.$('.mailpoet_content').addClass('mailpoet_ignore_drag');
+    },
+    enableDragging: function() {
+      this.$('.mailpoet_content').removeClass('mailpoet_ignore_drag');
     },
   });
 
@@ -104,9 +96,6 @@ define([
         "click .mailpoet_done_editing": "close",
       };
     },
-    behaviors: {
-      ColorPickerBehavior: {},
-    },
     templateHelpers: function() {
       return {
         model: this.model.toJSON(),