Release 3.46.6

[MAILPOET-2614]

.babelrc

@@ -1,9 +1,11 @@
 {
   "presets": [
+    "@babel/preset-typescript",
     "@babel/preset-react",
     "@babel/preset-env"
   ],
   "plugins": [
+    "babel-plugin-typescript-to-proptypes",
     "@babel/plugin-proposal-class-properties",
     [
       "@babel/plugin-transform-runtime", {

.eslintrc.ts.json

@@ -0,0 +1,137 @@
+{
+  "extends": [
+    "airbnb",
+    "plugin:@typescript-eslint/eslint-recommended",
+    "plugin:@typescript-eslint/recommended",
+    "plugin:@typescript-eslint/recommended-requiring-type-checking"
+  ],
+  "env": {
+    "amd": true,
+    "browser": true,
+    "mocha": true
+  },
+  "parser": "@typescript-eslint/parser",
+  "parserOptions": {
+    "tsconfigRootDir": ".",
+    "project": ["./tsconfig.json"],
+    "ecmaVersion": 6,
+    "ecmaFeatures": {
+      "jsx": true
+    }
+  },
+  "plugins": [
+    "react-hooks",
+    "no-only-tests",
+    "@typescript-eslint"
+  ],
+  "settings": {
+    "import/resolver": "webpack"
+  },
+  "rules": {
+    // Typrescript Rules
+    "@typescript-eslint/adjacent-overload-signatures": "off",
+    "@typescript-eslint/array-type": "off",
+    "@typescript-eslint/await-thenable": "off",
+    "@typescript-eslint/ban-ts-comment": "off",
+    "@typescript-eslint/ban-types": "off",
+    "@typescript-eslint/consistent-type-assertions": "off",
+    "@typescript-eslint/consistent-type-definitions": "off",
+    "@typescript-eslint/explicit-function-return-type": "off",
+    "@typescript-eslint/explicit-member-accessibility": "off",
+    "@typescript-eslint/explicit-module-boundary-types": "off",
+    "@typescript-eslint/member-delimiter-style": "off",
+    "@typescript-eslint/member-ordering": "off",
+    "@typescript-eslint/naming-convention": "off",
+    "@typescript-eslint/no-dynamic-delete": "off",
+    "@typescript-eslint/no-empty-interface": "off",
+    "@typescript-eslint/no-explicit-any": "off",
+    "@typescript-eslint/no-extra-non-null-assertion": "off",
+    "@typescript-eslint/no-extraneous-class": "off",
+    "@typescript-eslint/no-floating-promises": "off",
+    "@typescript-eslint/no-for-in-array": "off",
+    "@typescript-eslint/no-implied-eval": "off",
+    "@typescript-eslint/no-inferrable-types": "off",
+    "@typescript-eslint/no-misused-new": "off",
+    "@typescript-eslint/no-misused-promises": "off",
+    "@typescript-eslint/no-namespace": "off",
+    "@typescript-eslint/no-non-null-asserted-optional-chain": "off",
+    "@typescript-eslint/no-non-null-assertion": "off",
+    "@typescript-eslint/no-parameter-properties": "off",
+    "@typescript-eslint/no-require-imports": "off",
+    "@typescript-eslint/no-this-alias": "off",
+    "@typescript-eslint/no-throw-literal": "off",
+    "@typescript-eslint/no-type-alias": "off",
+    "@typescript-eslint/no-unnecessary-boolean-literal-compare": "off",
+    "@typescript-eslint/no-unnecessary-condition": "off",
+    "@typescript-eslint/no-unnecessary-qualifier": "off",
+    "@typescript-eslint/no-unnecessary-type-arguments": "off",
+    "@typescript-eslint/no-unnecessary-type-assertion": "off",
+    "@typescript-eslint/no-unused-vars-experimental": "off",
+    "@typescript-eslint/no-var-requires": "off",
+    "@typescript-eslint/prefer-as-const": "off",
+    "@typescript-eslint/prefer-for-of": "off",
+    "@typescript-eslint/prefer-function-type": "off",
+    "@typescript-eslint/prefer-includes": "off",
+    "@typescript-eslint/prefer-namespace-keyword": "off",
+    "@typescript-eslint/prefer-nullish-coalescing": "off",
+    "@typescript-eslint/prefer-optional-chain": "off",
+    "@typescript-eslint/prefer-readonly": "off",
+    "@typescript-eslint/prefer-regexp-exec": "off",
+    "@typescript-eslint/prefer-string-starts-ends-with": "off",
+    "@typescript-eslint/promise-function-async": "off",
+    "@typescript-eslint/require-array-sort-compare": "off",
+    "@typescript-eslint/restrict-plus-operands": "off",
+    "@typescript-eslint/restrict-template-expressions": "off",
+    "@typescript-eslint/strict-boolean-expressions": "off",
+    "@typescript-eslint/switch-exhaustiveness-check": "off",
+    "@typescript-eslint/triple-slash-reference": "off",
+    "@typescript-eslint/type-annotation-spacing": "off",
+    "@typescript-eslint/typedef": "off",
+    "@typescript-eslint/unbound-method": "off",
+    "@typescript-eslint/unified-signatures": "off",
+    // ESlint recommended rules adjusted for Typescript
+    "@typescript-eslint/brace-style": "off",
+    "@typescript-eslint/comma-spacing": "off",
+    "@typescript-eslint/default-param-last": "off",
+    "@typescript-eslint/func-call-spacing": "off",
+    "@typescript-eslint/indent": "off",
+    "@typescript-eslint/no-array-constructor": "off",
+    "@typescript-eslint/no-dupe-class-members": "off",
+    "@typescript-eslint/no-empty-function": "off",
+    "@typescript-eslint/no-extra-parens": "off",
+    "@typescript-eslint/no-extra-semi": "off",
+    "@typescript-eslint/no-magic-numbers": "off",
+    "@typescript-eslint/no-unused-expressions": "off",
+    "@typescript-eslint/no-unused-vars": "off",
+    "@typescript-eslint/no-use-before-define": "off",
+    "@typescript-eslint/no-useless-constructor": "off",
+    "@typescript-eslint/quotes": "off",
+    "@typescript-eslint/require-await": "off",
+    "@typescript-eslint/return-await": "off",
+    "@typescript-eslint/semi": "off",
+    "@typescript-eslint/space-before-function-paren": "off",
+    "@typescript-eslint/camelcase": "off",
+    // PropTypes
+    "react/prop-types": 0,
+    // Hooks
+    "react-hooks/rules-of-hooks": "error",
+    "react-hooks/exhaustive-deps": "warn",
+    // Exceptions
+    "react/jsx-filename-extension": 0,
+    "arrow-parens": ["error", "always"],
+    "comma-dangle": ["error", "always-multiline"],
+    "no-only-tests/no-only-tests": 2,
+    "no-script-url": 0,
+    "import/extensions": 0, // we wouldn't be able to import jQuery without this line
+    "react/destructuring-assignment": 0, // that would be too many changes to fix this one
+    "prefer-destructuring": 0, // that would be too many changes to fix this one
+    "jsx-a11y/label-has-for": [2, {
+      "required": {"some": ["nesting", "id"]} // some of our labels are hidden and we cannot nest those
+    }],
+    "jsx-a11y/anchor-is-valid": 0, // cannot fix this one, it would break wprdpress themes
+    "jsx-a11y/label-has-associated-control": [ 2, {
+      "either": "either" // control has to be either nested or associated via htmlFor
+    }]
+  }
+}
+

RoboFile.php

@@ -363,7 +363,7 @@ class RoboFile extends \Robo\Tasks {
   }
 
   public function qaLintJavascript() {
-    return $this->_exec('npm run lint');
+    return $this->_exec('npm run check-types && npm run lint');
   }
 
   public function qaLintCss() {
@@ -445,11 +445,22 @@ class RoboFile extends \Robo\Tasks {
         )
         ->run();
     }
+    if (substr($filePath, -4) === '.tsx' || substr($filePath, -3) === '.ts') {
+      // fix ESLint using TS rules
+      return $this->collectionBuilder()
+        ->taskExec(
+          'npx eslint -c .eslintrc.ts.json ' .
+            '--max-warnings 0 ' .
+            '--fix ' .
+            $filePath
+        )
+        ->run();
+    }
     if (substr($filePath, -8) === '.spec.js') {
       // fix ESLint using tests rules
       return $this->collectionBuilder()
         ->taskExec(
-          'npx eslint -c .eslintrc.tests.json ' .
+          'npx eslint -c .eslintrc.tests_newsletter_editor.json ' .
             '--max-warnings 0 ' .
             '--fix ' .
             $filePath
@@ -883,7 +894,7 @@ class RoboFile extends \Robo\Tasks {
     $dir = new RecursiveDirectoryIterator($folder);
     $iterator = new RecursiveIteratorIterator($dir);
 
-    $pattern = '/^.+\.(' . join($extensions, '|') . ')$/i';
+    $pattern = '/^.+\.(' . join('|', $extensions) . ')$/i';
 
     $files = new RegexIterator(
       $iterator,

assets/css/src/components-editor/3rd-party-overrides/_overrides.scss

@@ -30,7 +30,7 @@
   .tox {
     /* Small style changes to better fit TinyMCE to our editor */
     &.tox-tinymce-inline {
-      border: 1px solid $content-border-color;
+      border: 1px solid $color-editor-border-content;
       border-radius: 3px;
       box-shadow: 0 0 3px 1px rgba(0, 0, 0, .05);
 
@@ -44,7 +44,7 @@
     }
 
     .tox-toolbar {
-      background-color: $primary-background-color;
+      background-color: $color-primary-background;
 
       /* Fix double border on top of TineMCE popup */
       &:first-child {
@@ -87,9 +87,9 @@
   }
 
   &.auto-fold #wpcontent {
-    @media only screen and (max-width: 960px) { margin-left: 36px; }
+    @include breakpoint-max-width(960px) { margin-left: 36px; }
 
-    @media only screen and (max-width: 782px) { margin-left: 0; }
+    @include breakpoint-max-width(782px) { margin-left: 0; }
   }
 
   .wrap {
@@ -129,7 +129,7 @@
   .sp-replacer {
     border: 0;
     border-radius: 3px;
-    box-shadow: 1px 2px darken($primary-background-color, 13%);
+    box-shadow: 1px 2px darken($color-primary-background, 13%);
     padding: 0;
   }
 
@@ -155,8 +155,8 @@
   }
 
   .mailpoet_panel_wrapper {
-    background-color: $primary-background-color;
-    border: 1px solid $content-border-color;
+    background-color: $color-primary-background;
+    border: 1px solid $color-editor-border-content;
   }
 
   .wrap > .mailpoet_notice,

assets/css/src/components-editor/_buttons.scss

@@ -0,0 +1,45 @@
+.mailpoet_button {
+  background-color: $color-primary-background;
+  border: 1px solid $color-editor-border-structure;
+  border-radius: 3px;
+  color: $color-primary-inactive;
+  line-height: normal;
+  margin: 0;
+  padding: 6px 20px;
+  vertical-align: top;
+}
+
+.mailpoet_button_full {
+  box-sizing: border-box;
+  width: 100%;
+}
+
+.mailpoet_button_primary {
+  background-color: $color-primary-button;
+  border-color: $color-primary;
+  color: $color-white;
+
+  &:hover {
+    background-color: $color-primary-highlight;
+  }
+}
+
+.mailpoet_button_group {
+  display: inline;
+
+  .mailpoet_button:first-child {
+    border-bottom-right-radius: 0;
+    border-top-right-radius: 0;
+    margin-right: 0;
+    padding: 6px 12px;
+  }
+
+  .mailpoet_button:last-child {
+    border-bottom-left-radius: 0;
+    border-left: 0;
+    border-top-left-radius: 0;
+    margin-left: 0;
+    padding-left: 10px;
+    padding-right: 10px;
+  }
+}

assets/css/src/components-editor/_common.scss

@@ -0,0 +1,101 @@
+.admin_page_mailpoet-newsletter-editor {
+  a {
+    color: $color-primary-button;
+    text-decoration: none;
+  }
+
+  .mailpoet_hidden {
+    display: none !important;
+  }
+
+  .mailpoet_form_narrow_select2 span.select2-container {
+    width: 103px !important;
+  }
+
+  span.select2-container--open > span.select2-dropdown {
+    min-width: 150px;
+  }
+
+  span.select2-container--open > span.select2-dropdown li.select2-results__option {
+    font-size: 13px;
+    margin: 0 !important;
+
+    .select2-results__group {
+      color: #bfbfbf;
+      font-weight: normal;
+    }
+
+    .select2-results__option {
+      font-size: 13px;
+      padding-left: 15px;
+
+      &[aria-selected=true] {
+        background-color: #eee;
+        color: #444;
+      }
+    }
+  }
+
+  .mailpoet_settings_notice {
+    color: #999;
+  }
+}
+
+#mailpoet_editor_content ol,
+#mailpoet_editor_content ul {
+  padding-left: 40px;
+}
+
+#mailpoet_editor_content ul {
+  list-style-type: disc;
+
+  ul {
+    list-style-type: circle;
+
+    ul { list-style-type: square; }
+  }
+}
+
+.tooltip-help-designer-subject-line div,
+.tooltip-help-designer-preheader div {
+  z-index: 100001;
+}
+
+.tooltip-help-send-preview {
+  color: #fff;
+  margin-top: -10px;
+  position: absolute;
+  right: 4px;
+  top: 50%;
+}
+
+.tooltip-help-designer-ideal-width {
+  color: #656565;
+  font-weight: normal;
+  margin-left: 5px;
+  text-transform: none;
+}
+
+.tooltip-help-designer-full-width .dashicons {
+  line-height: 34px;
+}
+
+.tooltip-help-designer-full-width span {
+  line-height: 1.4em;
+}
+
+.mailpoet_text_content p {
+  margin: 1em 0;
+}
+
+.mailpoet_separator {
+  margin: 17px 20px;
+}
+
+.mailpoet_option_offset_left_small {
+  margin-left: 10px;
+}
+
+input.mailpoet_option_offset_left_small {
+  margin-left: 10px !important;
+}

assets/css/src/components-editor/_forms.scss

@@ -0,0 +1,170 @@
+input.mailpoet_color {
+  width: 5em;
+}
+
+select.mailpoet_font-family {
+  width: 8em;
+}
+
+select.mailpoet_font-size {
+  width: 5em;
+}
+
+.mailpoet_input,
+.mailpoet_select {
+  $form-control-padding: 3px;
+  appearance: none;
+  border-radius: 1px;
+  box-shadow: none !important;
+  line-height: 28px - $form-control-padding * 2;
+  padding: $form-control-padding;
+}
+
+.mailpoet_input {
+  border: 1px solid $color-editor-border-content;
+  width: 283px;
+}
+
+.mailpoet_input_small {
+  width: 58px;
+}
+
+.mailpoet_input_medium {
+  width: 150px;
+}
+
+.mailpoet_input_full {
+  box-sizing: border-box;
+  margin: 0;
+  width: 100%;
+}
+
+.mailpoet_range {
+  -webkit-appearance: none;
+  padding: 0;
+  vertical-align: middle;
+  width: 283px;
+
+  &:focus {
+    outline: none;
+  }
+
+  &::-webkit-slider-runnable-track {
+    background: $range-track-background-color;
+    border: 1px solid $range-track-border-color;
+    border-radius: $range-border-radius;
+    cursor: pointer;
+    height: $range-track-height;
+    width: 100%;
+  }
+
+  &::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    background: $range-thumb-background-color;
+    border: 1px solid $range-thumb-border-color;
+    border-radius: $range-border-radius;
+    cursor: pointer;
+    height: $range-thumb-height;
+    margin-top: -1 * $range-thumb-height / 3;
+    width: $range-thumb-width;
+  }
+
+  &:hover::-webkit-slider-thumb {
+    background: $range-thumb-hover-background-color;
+  }
+
+  &::-moz-range-track {
+    background: $range-track-background-color;
+    border: 1px solid $range-track-border-color;
+    border-radius: $range-border-radius;
+    cursor: pointer;
+    height: $range-track-height;
+    width: 100%;
+  }
+
+  &::-moz-range-thumb {
+    background: $range-thumb-background-color;
+    border: 1px solid $range-thumb-border-color;
+    border-radius: $range-border-radius;
+    cursor: pointer;
+    height: $range-thumb-height;
+    width: $range-thumb-width;
+  }
+
+  &:hover::-moz-range-thumb {
+    background: $range-thumb-hover-background-color;
+  }
+
+  &::-ms-fill-lower {
+    background: $range-track-background-color;
+    border: 1px solid $range-track-border-color;
+  }
+
+  &::-ms-fill-upper {
+    background: $range-track-background-color;
+    border: 1px solid $range-track-border-color;
+  }
+
+  &::-ms-track {
+    background: transparent;
+    border-color: transparent;
+    border-width: $range-track-height * 2 0;
+    color: transparent;
+    cursor: pointer;
+    height: $range-track-height;
+    width: 100%;
+  }
+
+  &::-ms-thumb {
+    background: $range-thumb-background-color;
+    border: 1px solid $range-thumb-border-color;
+    border-radius: $range-border-radius;
+    cursor: pointer;
+    height: $range-thumb-height;
+    width: $range-thumb-width;
+  }
+
+  &:hover::-ms-thumb {
+    background: $range-thumb-hover-background-color;
+  }
+
+  &:focus::-ms-fill-lower {
+    background: $range-track-background-color;
+    border: 1px solid $range-track-border-color;
+  }
+
+  &:focus::-ms-fill-upper {
+    background: $range-track-background-color;
+    border: 1px solid $range-track-border-color;
+  }
+}
+
+.mailpoet_range_small {
+  width: 100px;
+}
+
+.mailpoet_range_medium {
+  width: 180px;
+}
+
+.mailpoet_select {
+  border-color: $color-editor-border-content;
+  color: $color-primary-text;
+  margin: 0;
+}
+
+.mailpoet_select_large {
+  width: 139px;
+}
+
+.mailpoet_select_medium {
+  width: 103px;
+}
+
+.mailpoet_select_small {
+  width: 68px;
+}
+
+.mailpoet_select_half_width {
+  width: 50%;
+}

assets/css/src/components-editor/_layout.scss

@@ -1,6 +1,3 @@
-$sidebar-width: 330px;
-$content-border-color: $structure-border-color;
-
 #mailpoet_editor {
   clear: both;
   width: 100%;
@@ -22,7 +19,7 @@ $content-border-color: $structure-border-color;
 }
 
 #mailpoet_editor_main_wrapper {
-  border: 1px solid $content-border-color;
+  border: 1px solid $color-editor-border-structure;
   border-left: 0;
   min-width: 1050px;
   position: relative;
@@ -30,19 +27,19 @@ $content-border-color: $structure-border-color;
 
 #mailpoet_editor_content_container {
   box-sizing: border-box;
-  padding-right: $sidebar-width;
+  padding-right: $editor-sidebar-width;
   width: 100%;
 }
 
 #mailpoet_editor_sidebar {
   box-sizing: border-box;
   float: right;
-  width: $sidebar-width;
+  width: $editor-sidebar-width;
 }
 
 .mailpoet_newsletter_wrapper {
   margin: auto;
-  max-width: $newsletter-width;
+  max-width: $grid-editor-width;
   position: relative;
-  width: $newsletter-width;
+  width: $grid-editor-width;
 }

assets/css/src/components-editor/components/_block-tools.scss

@@ -1,15 +1,3 @@
-$tool-inactive-color: #333;
-$tool-inactive-secondary-color: #fff;
-$tool-hover-color: #bbb;
-$tool-hover-secondary-color: #fff;
-$tool-active-color: #d2d2d4;
-$tool-active-secondary-color: #fff;
-
-$content-icon-size: 14px;
-$content-icon-size-with-padding: 24px;
-$column-icon-size: 15px;
-$column-icon-size-with-padding: 27px;
-
 .mailpoet_tools {
   bottom: 100%;
   left: 50%;
@@ -23,7 +11,7 @@ $column-icon-size-with-padding: 27px;
   z-index: 20;
 
   .mailpoet_tools_slider {
-    background: $editor-content-color;
+    background: $color-editor-background-content;
     border-radius: 10px 10px 0 0;
     display: flex;
     flex-direction: row;
@@ -51,7 +39,7 @@ $column-icon-size-with-padding: 27px;
     transform: none;
 
     .mailpoet_tools_slider {
-      background: $editor-column-color;
+      background: $color-editor-background-column;
       border-radius: 0 10px 10px 0;
       flex-direction: column;
       padding: 7px 3px;
@@ -69,13 +57,13 @@ $column-icon-size-with-padding: 27px;
 
     .mailpoet_tool {
       display: block;
-      height: $column-icon-size-with-padding;
-      width: $column-icon-size-with-padding;
+      height: $editor-tool-column-size-with-padding;
+      width: $editor-tool-column-size-with-padding;
 
       svg {
-        height: $column-icon-size;
+        height: $editor-tool-column-size;
         padding: 6px;
-        width: $column-icon-size;
+        width: $editor-tool-column-size;
       }
     }
 
@@ -85,7 +73,7 @@ $column-icon-size-with-padding: 27px;
 
     .mailpoet_delete_block_activate {
       display: block;
-      max-height: $column-icon-size-with-padding;
+      max-height: $editor-tool-column-size-with-padding;
       max-width: none;
       opacity: 1;
     }
@@ -118,15 +106,15 @@ $column-icon-size-with-padding: 27px;
 
 .mailpoet_tool {
   display: inline-block;
-  height: $content-icon-size-with-padding;
-  width: $content-icon-size-with-padding;
+  height: $editor-tool-size-with-padding;
+  width: $editor-tool-size-with-padding;
 
   svg {
     fill: #fff;
-    height: $content-icon-size;
+    height: $editor-tool-size;
     padding: 5px;
     vertical-align: top;
-    width: $content-icon-size;
+    width: $editor-tool-size;
   }
 
   &:hover svg,
@@ -158,7 +146,7 @@ $column-icon-size-with-padding: 27px;
 
   .mailpoet_delete_block_activate {
     display: inline-block;
-    max-width: $content-icon-size-with-padding;
+    max-width: $editor-tool-size-with-padding;
     opacity: 1;
 
     @include animation-fade-in-and-scale-horizontally();
@@ -174,10 +162,28 @@ $column-icon-size-with-padding: 27px;
 
     @include animation-fade-in-and-scale-horizontally();
   }
+
+  .mailpoet_delete_block_confirm {
+    color: $color-editor-warning-text;
+
+    &:hover {
+      color: $color-editor-warning-text;
+      text-decoration: underline;
+    }
+  }
+
+  .mailpoet_delete_block_cancel {
+    color: $color-editor-warning-alternate;
+
+    &:hover {
+      color: $color-editor-warning-alternate;
+      text-decoration: underline;
+    }
+  }
 }
 
 .mailpoet_delete_block_activated {
-  background-color: $warning-background-color;
+  background-color: $color-editor-warning;
   height: auto;
   padding: 0 5px;
   width: auto;
@@ -199,21 +205,3 @@ $column-icon-size-with-padding: 27px;
     margin-left: 3px;
   }
 }
-
-.mailpoet_delete_block_confirm {
-  color: $warning-text-color;
-
-  &:hover {
-    color: $warning-text-color;
-    text-decoration: underline;
-  }
-}
-
-.mailpoet_delete_block_cancel {
-  color: $warning-alternate-text-color;
-
-  &:hover {
-    color: $warning-alternate-text-color;
-    text-decoration: underline;
-  }
-}

assets/css/src/components-editor/components/_drag-and-drop.scss

@@ -1,21 +1,14 @@
-$drop-active-color: $primary-active-color;
-
-$marker-width: 2px;
-$marker-z-index: 1;
-
-$draggable-widget-z-index: 2;
-
 .mailpoet_drop_marker {
-  background-color: $primary-active-color;
-  box-shadow: 0 0 1px 0 $primary-active-color;
-  min-height: $marker-width;
-  min-width: $marker-width;
+  background-color: $color-primary;
+  box-shadow: 0 0 1px 0 $color-primary;
+  min-height: $editor-dnd-drop-size;
+  min-width: $editor-dnd-drop-size;
   position: absolute;
-  z-index: $marker-z-index;
+  z-index: $editor-dnd-drop-zindex;
 
   &:before,
   &:after {
-    color: $primary-active-color;
+    color: $color-primary;
     font: 400 40px / 1 dashicons;
     margin-top: -18px;
     position: absolute;
@@ -35,11 +28,11 @@ $draggable-widget-z-index: 2;
 .mailpoet_drop_marker.mailpoet_drop_marker_middle,
 .mailpoet_drop_marker.mailpoet_drop_marker_first.mailpoet_drop_marker_after,
 .mailpoet_drop_marker.mailpoet_drop_marker_last.mailpoet_drop_marker_before {
-  margin-top: -1 * ($marker-width / 2);
+  margin-top: -1 * ($editor-dnd-drop-size / 2);
 }
 
 .mailpoet_drop_marker.mailpoet_drop_marker_last.mailpoet_drop_marker_after {
-  margin-top: -1 * $marker-width;
+  margin-top: -1 * $editor-dnd-drop-size;
 }
 
 #mailpoet_editor .mailpoet_droppable_active {
@@ -47,8 +40,8 @@ $draggable-widget-z-index: 2;
 }
 
 .mailpoet_block.mailpoet_droppable_active {
-  border: 1px dashed $drop-active-color !important;
-  width: $newsletter-width;
+  border: 1px dashed $color-primary !important;
+  width: $grid-editor-width;
 
   .mailpoet_tools {
     display: none !important;
@@ -58,7 +51,7 @@ $draggable-widget-z-index: 2;
 .mailpoet_widget.mailpoet_droppable_active {
   margin: 0;
   padding: 0;
-  z-index: $draggable-widget-z-index;
+  z-index: $editor-dnd-drag-zindex;
 
   @include animation-fade-in();
 
@@ -69,9 +62,9 @@ $draggable-widget-z-index: 2;
 }
 
 .mailpoet_drop_active > .mailpoet_container > div > .mailpoet_container_empty {
-  background-color: $primary-active-color;
-  box-shadow: inset 1px 2px 1px $primary-inset-shadow-color;
-  color: $white-color;
+  background-color: $color-primary;
+  box-shadow: inset 1px 2px 1px $color-primary-shadow-inset;
+  color: $color-white;
 }
 
 .mailpoet_droppable_block {

assets/css/src/components-editor/components/_forms.scss

@@ -20,7 +20,7 @@
   }
 
   .mailpoet_form_field_optional {
-    color: $primary-inactive-color;
+    color: $color-primary-inactive;
     font-size: .8em;
   }
 

assets/css/src/components-editor/components/_history.scss

@@ -10,7 +10,7 @@
   svg {
     display: inline-block;
     height: 26px;
-    stroke: $primary-active-color;
+    stroke: $color-primary;
     vertical-align: top;
     width: 26px;
   }
@@ -19,5 +19,5 @@
 .mailpoet_history_arrow_inactive {
   cursor: not-allowed;
 
-  svg { stroke: $primary-inactive-color; }
+  svg { stroke: $color-primary-inactive; }
 }

assets/css/src/components-editor/components/_resize.scss

@@ -1,26 +1,22 @@
-$resize-active-color: $editor-content-color;
-$resize-handle-font-color: $white-color;
-$resize-handle-z-index: 2;
-
 .mailpoet_resize_handle_container {
   left: 50%;
   margin-top: -16px;
   position: absolute;
   top: 100%;
   transform: translateX(-50%);
-  z-index: $resize-handle-z-index;
+  z-index: $editor-resize-handle-zindex;
 }
 
 .mailpoet_resize_handle {
   align-items: center;
-  background: $editor-content-color;
+  background: $color-editor-background-content;
   border-radius: 10px;
   cursor: ns-resize;
   display: none;
   justify-content: space-between;
   min-width: 60px;
   padding: 7px 10px;
-  z-index: $resize-handle-z-index;
+  z-index: $editor-resize-handle-zindex;
 
   .mailpoet_resize_handle_text,
   .mailpoet_resize_handle_icon {
@@ -33,7 +29,7 @@ $resize-handle-z-index: 2;
 }
 
 .mailpoet_resize_handle_text {
-  color: $resize-handle-font-color;
+  color: $editor-resize-handle-color;
   font-size: 11px;
   font-weight: bold;
   line-height: 1.5em;
@@ -45,7 +41,7 @@ $resize-handle-z-index: 2;
   margin-left: 5px;
 
   > svg {
-    fill: $resize-handle-font-color;
+    fill: $editor-resize-handle-color;
     height: 15px;
     vertical-align: top;
     width: 15px;
@@ -67,14 +63,14 @@ $resize-handle-z-index: 2;
 }
 
 .mailpoet_image_resize_handle {
-  background: $editor-content-color;
+  background: $color-editor-background-content;
   border-radius: 6px 0 0;
   cursor: nwse-resize;
   display: none;
   height: 24px;
   position: relative;
   width: 24px;
-  z-index: $resize-handle-z-index;
+  z-index: $editor-resize-handle-zindex;
 
   .mailpoet_resizable_block.mailpoet_highlight & {
     display: inline-block;
@@ -96,7 +92,7 @@ $resize-handle-z-index: 2;
   padding: 1px;
 
   > svg {
-    fill: $resize-handle-font-color;
+    fill: $editor-resize-handle-color;
     height: 22px;
     vertical-align: top;
     width: 22px;
@@ -104,7 +100,7 @@ $resize-handle-z-index: 2;
 }
 
 .mailpoet_block.mailpoet_image_resize_active > .mailpoet_block_highlight {
-  border: 2px solid $resize-active-color;
+  border: 2px solid $editor-resize-color;
 
   .mailpoet_image_resize_handle {
     display: inline-block;

assets/css/src/components-editor/components/_save.scss

@@ -14,8 +14,8 @@
 }
 
 .mailpoet_save_options {
-  background: $white-color;
-  border: 1px solid $content-border-color;
+  background: $color-white;
+  border: 1px solid $color-editor-border-content;
   border-radius: 3px;
   clear: both;
   margin: 5px 0;
@@ -39,11 +39,11 @@
 }
 
 .mailpoet_save_option:hover {
-  background-color: $primary-active-background-color;
-  color: $white-color;
+  background-color: $color-primary-button;
+  color: $color-white;
 
   > a {
-    color: $white-color;
+    color: $color-white;
   }
 }
 
@@ -59,8 +59,8 @@
 
 .mailpoet_save_as_template_container,
 .mailpoet_export_template_container {
-  background-color: $white-color;
-  border: 1px solid $structure-border-color;
+  background-color: $color-white;
+  border: 1px solid $color-editor-border-structure;
   border-radius: 3px;
   clear: both;
   display: inline-block;
@@ -82,7 +82,7 @@
 }
 
 .mailpoet_editor_last_saved {
-  color: $primary-inactive-color;
+  color: $color-primary-inactive;
   font-size: .9em;
   margin-top: 10px;
   text-align: right;
@@ -93,16 +93,16 @@
 }
 
 .mailpoet_save_woocommerce_error {
-  color: $error-text-color;
+  color: $color-editor-warning;
   margin-top: 10px;
   text-align: right;
 }
 
 .mailpoet_save_error {
-  color: $error-text-color;
+  color: $color-editor-warning;
   margin-top: 10px;
   text-align: right;
-  width: $sidebar-width;
+  width: $editor-sidebar-width;
 }
 
 .mailpoet_save_dropdown_down {

assets/css/src/components-editor/components/_sidebar.scss

@@ -0,0 +1,152 @@
+#mailpoet_editor_sidebar {
+  border-bottom: $color-editor-border-content;
+  border-left: $color-editor-border-content;
+  color: $editor-sidebar-color;
+  font-size: $editor-sidebar-font-size;
+
+  .mailpoet_sidebar_region {
+    border-bottom: 1px solid $color-editor-border-content;
+    border-left: 1px solid $color-editor-border-content;
+    border-right: 0;
+    border-top: 0;
+    margin-bottom: 0;
+
+    &.closed .mailpoet_region_content {
+      display: none;
+    }
+  }
+
+  .mailpoet_region_content {
+    margin-top: 12px;
+    padding: 0 20px;
+  }
+
+  &,
+  .postbox {
+    background-color: $editor-sidebar-background;
+  }
+
+  .postbox {
+    padding-bottom: 20px;
+
+    &.closed {
+      padding-bottom: 0;
+    }
+
+    &.closed h3 {
+      color: $color-primary-inactive;
+      cursor: pointer;
+    }
+
+    h3,
+    &:hover h3 {
+      color: $color-primary;
+      margin: 0;
+      padding: 17px 20px;
+      text-transform: uppercase;
+    }
+
+    h3,
+    .handlediv {
+      border: 0;
+      cursor: auto;
+    }
+
+    .handlediv:before {
+      color: $color-primary;
+      content: '\f142';
+      display: inline-block;
+      font: 400 20px / 1 dashicons;
+      -webkit-font-smoothing: antialiased;
+      -moz-osx-font-smoothing: grayscale;
+      position: relative;
+      right: 18px;
+      speak: none;
+      text-decoration: none !important;
+      top: 18px;
+    }
+
+    &.closed .handlediv:before {
+      color: $color-primary-inactive;
+      content: '\f140';
+    }
+
+    &.closed:hover .handlediv:before {
+      color: $color-primary;
+    }
+  }
+}
+
+.mailpoet_widget {
+  display: inline-block;
+  float: left;
+  padding: 0 13px 15px;
+  text-align: center;
+  width: $editor-widget-size;
+
+  &:nth-child(3n+1) {
+    clear: left;
+  }
+
+  .mailpoet_widget_icon {
+    background-color: $color-white;
+    border-radius: 3px;
+    box-shadow: 1px 2px $editor-widget-shadow-color;
+    box-sizing: border-box;
+    color: $editor-widget-icon-color;
+    fill: $editor-widget-icon-color;
+    height: $editor-widget-size;
+    line-height: $editor-widget-size;
+    margin-bottom: 9px;
+    text-align: center;
+    width: $editor-widget-size;
+
+    /* Vertically align widget icon glyphs */
+    > * {
+      font-size: $editor-widget-icon-size;
+      height: $editor-widget-icon-size;
+      vertical-align: middle;
+      width: $editor-widget-icon-size;
+    }
+
+    &:hover {
+      border: 1px solid $editor-widget-icon-color-hover;
+      color: $editor-widget-icon-color-hover;
+      fill: $editor-widget-icon-color-hover;
+    }
+  }
+
+  &.mailpoet_droppable_active {
+    color: $editor-widget-icon-color-hover;
+    fill: $editor-widget-icon-color-hover;
+
+    .mailpoet_widget_icon {
+      border: 1px solid $editor-widget-icon-color-hover;
+      box-shadow: none;
+      color: $editor-widget-icon-color-hover;
+      fill: $editor-widget-icon-color-hover;
+    }
+
+    .mailpoet_widget_title {
+      display: none;
+    }
+  }
+}
+
+/* Browser preview modal */
+.mailpoet_browser_preview_wrapper {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  position: absolute;
+  width: 100%;
+}
+
+.mailpoet_browser_preview_link {
+  position: absolute;
+  top: -25px;
+}
+
+.mailpoet_popup .mailpoet_browser_preview_toggle {
+  top: -30px;
+}

assets/css/src/components-editor/components/_sidepanel.scss

@@ -1,16 +1,14 @@
-$sidepanel-active-heading-color: $primary-active-color;
-
 /* Sidepanel */
 .mailpoet_editor_settings {
-  color: $sidebar-text-color;
-  font-size: $sidebar-text-size;
+  color: $editor-sidebar-color;
+  font-size: $editor-sidebar-font-size;
 
   p {
     font-size: 1em;
   }
 
   h3 {
-    color: $sidepanel-active-heading-color;
+    color: $color-primary;
     font-size: 1.4em;
     text-transform: uppercase;
   }
@@ -38,7 +36,7 @@ $sidepanel-active-heading-color: $primary-active-color;
 }
 
 .mailpoet_sidepanel_field_optional {
-  color: $primary-inactive-color;
+  color: $color-primary-inactive;
   font-size: .8em;
 }
 

assets/css/src/components-editor/content-blocks/_base.scss

@@ -1,5 +1,3 @@
-$block-text-line-height: $text-line-height;
-
 .mailpoet_block {
   background-color: inherit;
   box-sizing: border-box;
@@ -8,7 +6,7 @@ $block-text-line-height: $text-line-height;
   position: relative;
 
   > .mailpoet_block_highlight {
-    border: 2px solid $transparent-color;
+    border: 2px solid $color-transparent;
     bottom: 0;
     left: 0;
     pointer-events: none;
@@ -20,7 +18,7 @@ $block-text-line-height: $text-line-height;
   }
 
   &.mailpoet_highlight > .mailpoet_block_highlight {
-    border: 2px solid $editor-content-color !important;
+    border: 2px solid $color-editor-background-content !important;
   }
 
   > .mailpoet_container_horizontal ~ .mailpoet_block_highlight {
@@ -31,12 +29,12 @@ $block-text-line-height: $text-line-height;
   }
 
   &.mailpoet_highlight > .mailpoet_container_horizontal ~ .mailpoet_block_highlight {
-    border: 2px solid $editor-column-color !important;
+    border: 2px solid $color-editor-background-column !important;
   }
 }
 
 .mailpoet_content {
-  line-height: $block-text-line-height;
+  line-height: $editor-line-height;
   position: relative;
 
   h1,
@@ -47,7 +45,7 @@ $block-text-line-height: $text-line-height;
   h6 {
     font-style: normal;
     font-weight: normal;
-    line-height: $block-text-line-height;
+    line-height: $editor-line-height;
     margin: 0 0 .3em;
     padding: 0;
   }
@@ -62,7 +60,7 @@ $block-text-line-height: $text-line-height;
   p {
     font-style: normal;
     font-weight: normal;
-    line-height: $block-text-line-height;
+    line-height: $editor-line-height;
   }
 
   ul {
@@ -79,7 +77,7 @@ $block-text-line-height: $text-line-height;
 
   blockquote {
     border-left: 2px #565656 solid;
-    margin: 0 0 $block-text-line-height;
+    margin: 0 0 $editor-line-height;
     padding-left: 10px;
   }
 }

assets/css/src/components-editor/content-blocks/_container.scss

@@ -1,9 +1,3 @@
-$column-margin: 20px;
-$one-column-width: $newsletter-width - (2 * $column-margin);
-$two-column-width: $newsletter-width / 2 - (2 * $column-margin);
-$three-column-width: $newsletter-width / 3 - (2 * $column-margin);
-$two-column-wider-column-width: (($newsletter-width / 3) - $column-margin) * 2;
-
 .mailpoet_container {
   min-height: 15px;
   position: relative;
@@ -37,7 +31,7 @@ $two-column-wider-column-width: (($newsletter-width / 3) - $column-margin) * 2;
 
   > .mailpoet_container_block {
     border: 0;
-    width: $newsletter-width;
+    width: $grid-editor-width;
   }
 
   > .mailpoet_container_block > .mailpoet_container > .mailpoet_container_block {
@@ -48,7 +42,7 @@ $two-column-wider-column-width: (($newsletter-width / 3) - $column-margin) * 2;
   .mailpoet_container_horizontal > .mailpoet_container_block {
     padding-bottom: 0;
     padding-top: 0;
-    width: $column-margin + $one-column-width + $column-margin;
+    width: $editor-column-margin + $editor-column-width-one + $editor-column-margin;
   }
 
   > .mailpoet_container_block > .mailpoet_container > .mailpoet_container_block > .mailpoet_container_horizontal,
@@ -58,30 +52,30 @@ $two-column-wider-column-width: (($newsletter-width / 3) - $column-margin) * 2;
   > .mailpoet_container_block > .mailpoet_container .mailpoet_automated_latest_content_block_products .mailpoet_container_horizontal {
     > .mailpoet_block:first-child:nth-last-child(2),
     > .mailpoet_block:first-child:nth-last-child(2) ~ .mailpoet_block {
-      width: $column-margin + $two-column-width + $column-margin;
+      width: $editor-column-margin + $editor-column-width-two + $editor-column-margin;
     }
 
     > .mailpoet_block:first-child:nth-last-child(3),
     > .mailpoet_block:first-child:nth-last-child(3) ~ .mailpoet_block {
-      width: $column-margin + $three-column-width + $column-margin;
+      width: $editor-column-margin + $editor-column-width-three + $editor-column-margin;
     }
   }
 
   > .mailpoet_container_block > .mailpoet_container > .mailpoet_container_block > .mailpoet_container_horizontal.mailpoet_irregular_width_contents_container.column_layout_1_2 > .mailpoet_container_block:first-child,
   > .mailpoet_container_block > .mailpoet_container > .mailpoet_container_block > .mailpoet_container_horizontal.mailpoet_irregular_width_contents_container.column_layout_2_1 > .mailpoet_container_block:nth-child(2) {
-    width: $column-margin + $three-column-width + $column-margin;
+    width: $editor-column-margin + $editor-column-width-three + $editor-column-margin;
   }
 
   > .mailpoet_container_block > .mailpoet_container > .mailpoet_container_block > .mailpoet_container_horizontal.mailpoet_irregular_width_contents_container.column_layout_2_1 > .mailpoet_container_block:first-child,
   > .mailpoet_container_block > .mailpoet_container > .mailpoet_container_block > .mailpoet_container_horizontal.mailpoet_irregular_width_contents_container.column_layout_1_2 > .mailpoet_container_block:nth-child(2) {
-    width: $column-margin + $two-column-wider-column-width + $column-margin;
+    width: $editor-column-margin + $editor-column-width-two-wider + $editor-column-margin;
   }
 }
 
 .mailpoet_container_empty {
   background-color: #f2f2f2;
   border-radius: 3px;
-  box-shadow: inset 1px 2px 1px $primary-inactive-color;
+  box-shadow: inset 1px 2px 1px $color-primary-inactive;
   color: #656565;
   margin: 20px;
   padding: 15px;

assets/css/src/components-editor/content-blocks/_divider.scss

@@ -1,7 +1,3 @@
-$active-divider-border-color: #adadad;
-$active-divider-background-color: #daebf2;
-$divider-hover-border-color: $primary-active-color;
-
 .mailpoet_divider_block {
   cursor: all-scroll;
   padding: 0;
@@ -16,18 +12,18 @@ $divider-hover-border-color: $primary-active-color;
   border: 1px solid transparent;
   display: block;
   margin: auto;
-  max-width: $newsletter-width;
+  max-width: $grid-editor-width;
   padding: 10px 0;
   width: 100%;
 
   &:hover {
-    border: 1px solid $divider-hover-border-color;
+    border: 1px solid $editor-divider-border-color-hover;
   }
 }
 
 .mailpoet_active_divider_style {
-  background: $active-divider-background-color;
-  border: 1px solid $active-divider-border-color;
+  background: $editor-divider-background-color;
+  border: 1px solid $editor-divider-border-color;
 }
 
 .mailpoet_divider_selector img {

assets/css/src/components-editor/content-blocks/_posts.scss

@@ -44,8 +44,8 @@
 }
 
 .mailpoet_settings_posts_single_post {
-  background-color: $white-color;
-  border: 1px solid $content-border-color;
+  background-color: $color-white;
+  border: 1px solid $color-editor-border-content;
   border-radius: 1px;
   box-sizing: border-box;
   height: 38px;
@@ -56,7 +56,7 @@
   width: 100%;
 
   &:hover {
-    border-color: $primary-active-color;
+    border-color: $color-primary;
   }
 
   .mailpoet_select_post_checkbox {

assets/css/src/components-editor/content-blocks/_products.scss

@@ -44,8 +44,8 @@
 }
 
 .mailpoet_settings_products_single_product {
-  background-color: $white-color;
-  border: 1px solid $content-border-color;
+  background-color: $color-white;
+  border: 1px solid $color-editor-border-content;
   border-radius: 1px;
   box-sizing: border-box;
   height: 38px;
@@ -56,7 +56,7 @@
   width: 100%;
 
   &:hover {
-    border-color: $primary-active-color;
+    border-color: $color-primary;
   }
 
   .mailpoet_select_product_checkbox {

assets/css/src/components-editor/content-blocks/_social.scss

@@ -1,14 +1,3 @@
-$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: #333;
-$tool-hover-color: #bbb;
-$tool-active-color: #d2d2d4;
-
-$tool-width: 16px;
-
 .mailpoet_social_block {
   .mailpoet_social {
     text-align: center;
@@ -38,25 +27,25 @@ $tool-width: 16px;
   padding: 5px;
 
   &:hover {
-    border: 1px solid $social-icon-set-hover-border-color;
+    border: 1px solid $editor-social-icon-border-color-hover;
   }
 
   img {
-    height: $social-icon-width;
+    height: $editor-social-icon-width;
     padding: 2px 3px;
     vertical-align: middle;
-    width: $social-icon-width;
+    width: $editor-social-icon-width;
   }
 }
 
 .mailpoet_active_icon_set {
-  background-color: $active-social-icon-set-background-color;
-  border: 1px dashed $active-social-icon-set-border-color;
+  background-color: $editor-social-icon-background-color;
+  border: 1px dashed $editor-social-icon-border-color;
 }
 
 .mailpoet_social_icon_settings {
-  background: $white-color;
-  border: 1px solid $content-border-color;
+  background: $color-white;
+  border: 1px solid $color-editor-border-content;
   margin-bottom: 9px;
   padding: 28px 9px (18px - 10px) 9px;
   position: relative;
@@ -103,16 +92,16 @@ $tool-width: 16px;
   top: 10px;
 
   .mailpoet_tool_icon {
-    fill: $tool-inactive-color;
-    height: $tool-width;
-    width: $tool-width;
+    fill: $editor-tool-social-color;
+    height: $editor-tool-social-width;
+    width: $editor-tool-social-width;
 
     &:hover {
-      fill: $tool-hover-color;
+      fill: $editor-tool-social-hover;
     }
 
     &:active {
-      fill: $primary-active-color;
+      fill: $color-primary;
     }
   }
 }
@@ -122,5 +111,5 @@ $tool-width: 16px;
 }
 
 .mailpoet_social_icon_settings_delete_icon {
-  right: 5px + 5px + $tool-width;
+  right: 5px + 5px + $editor-tool-social-width;
 }

assets/css/src/components-form-editor/_block-editor.scss

@@ -0,0 +1,47 @@
+// We don't want to allow user to remove Submit or Email + we hide core/column toolbar because it is empty
+// There is no way to hide the delete button programmatically so we hide last toolbar that contains the delete option
+// There is a feature request for adding that into Gutenberg https://github.com/WordPress/gutenberg/issues/16364
+// We also hide options to prevent removing Email or Submit when they are in multi-select
+.block-editor-block-contextual-toolbar[data-type='mailpoet-form/email-input'],
+.block-editor-block-contextual-toolbar[data-type='mailpoet-form/submit-button'],
+.block-editor-block-contextual-toolbar[data-type='core/column'],
+.is-multi-selected {
+  .block-editor-block-toolbar > .components-toolbar:last-child {
+    display: none;
+  }
+}
+
+// Drag and drop library we use for custom fields does not support nested scrollable
+// https://github.com/atlassian/react-beautiful-dnd/issues/131
+.block-editor-editor-skeleton__body,
+.is-sidebar-opened .block-editor-editor-skeleton__sidebar {
+  overflow: hidden;
+}
+
+// Fix for settings toolbar placement in header
+.edit-post-header {
+  flex-direction: row-reverse;
+  justify-content: space-between;
+}
+
+// Html blocks contains iframe which captures clicks and in some cases prevents selecting block.
+// This adds an transparent overlay over the iframe.
+.mailpoet-html-block-editor-content-wrapper {
+  position: relative;
+
+  &:after {
+    background: transparent;
+    content: ' ';
+    display: block;
+    height: 100%;
+    left: 0;
+    position: absolute;
+    top: 0;
+    width: 100%;
+  }
+}
+
+// Wordpress displays h3 and h2 the same size by default. To make it less confusing we need to make h2 different size.
+h2 {
+  font-size: 1.7em;
+}

assets/css/src/components-form-editor/_custom-field.scss

@@ -1,4 +1,3 @@
-
 .mailpoet_custom_select {
   .mailpoet_select {
     padding: 0 24px 0 8px;

assets/css/src/components-form-editor/_header.scss

@@ -0,0 +1,9 @@
+.mailpoet-editor-header-button {
+  padding-left: 8px;
+  padding-right: 8px;
+
+  @media (min-width: 600px) {
+    margin-right: 12px;
+    padding: 0 12px;
+  }
+}

assets/css/src/components-form-editor/_preview.scss

@@ -0,0 +1,6 @@
+.mailpoet_spinner_wrapper {
+  align-items: center;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}

assets/css/src/components-form-editor/_sidebar.scss

@@ -0,0 +1,261 @@
+.components-panel {
+  .select2-container {
+    width: 100% !important;
+
+    input.select2-search__field:focus {
+      border: 0;
+      box-shadow: none;
+    }
+
+    .select2-selection {
+      border-color: $gutenberg-control-border-color;
+    }
+
+    &.select2-container--focus {
+      .select2-selection {
+        border-color: $gutenberg-control-border-color-focus;
+        box-shadow: 0 0 0 1px $gutenberg-control-border-color-focus;
+      }
+    }
+  }
+
+  .mailpoet-form-missing-lists {
+    .select2-selection {
+      border-color: red;
+    }
+
+    .mailpoet-form-lists-error {
+      color: red;
+    }
+  }
+}
+
+.components-base-control.mailpoet-form-success-types__control {
+  margin-bottom: 0;
+
+  .components-base-control__label {
+    display: block;
+  }
+
+  .components-radio-control__option {
+    display: inline-block;
+    margin-right: 1em;
+
+    input {
+      margin-right: 6px;
+    }
+  }
+}
+
+.button-on-top,
+.button-on-top.components-button.is-link {
+  margin-bottom: 12px;
+  max-height: 30px;
+}
+
+.mailpoet-dnd-items-list > div {
+  display: flex;
+  flex-direction: column;
+
+  > * {
+    margin-bottom: 12px
+  }
+}
+
+.mailpoet-form-segments-settings-list {
+  align-items: center;
+  display: flex;
+  flex-direction: row;
+
+  .components-base-control {
+    flex-grow: 1;
+    margin: 8px 0;
+
+    .components-base-control__field {
+      margin: 0;
+    }
+  }
+
+  .mailpoet-form-segments-segment-remove {
+    cursor: pointer;
+    flex-grow: 0;
+    margin: 8px 0;
+  }
+}
+
+.mailpoet-styles-settings {
+  display: grid;
+  grid-auto-flow: row;
+  grid-row-gap: 20px;
+
+  .components-base-control {
+    margin-bottom: 0;
+  }
+}
+
+.mailpoet-styles-settings-heading {
+  font-size: 15px;
+
+  .component-color-indicator {
+    vertical-align: text-bottom;
+  }
+}
+
+.CodeMirror {
+  border: 1px solid #eee;
+}
+
+.form-placement-option {
+  background-color: #fff;
+  border: solid $form-placement-option-border $form-placement-option-base-color;
+  border-radius: 4px;
+  box-shadow: 0 1px 2px 0 $form-placement-option-base-color;
+  cursor: pointer;
+  display: flex;
+  flex-direction: column;
+  height: $form-placement-option-height;
+  justify-content: space-between;
+  margin: 0 16px 16px 0;
+  padding: 6px;
+  pointer-events: auto;
+  position: relative;
+  text-align: center;
+  width: $form-placement-option-width;
+}
+
+.form-placement-settings-overlay {
+  background-color: rgba(0, 0, 0, .3);
+  border-radius: 2px;
+  height: $form-placement-option-height - (2 * $form-placement-option-border);
+  left: 0;
+  pointer-events: none;
+  position: absolute;
+  top: 0;
+  width: $form-placement-option-width - (2 * $form-placement-option-border);
+  z-index: 3;
+}
+
+.form-placement-option-active {
+  border: solid $form-placement-option-active-border $gutenberg-control-active-color;
+  box-shadow: 0 4px 8px 0 rgba(156, 166, 204, .5);
+
+  .form-placement-settings-overlay {
+    height: $form-placement-option-height - (2 * $form-placement-option-active-border);
+    width: $form-placement-option-width - (2 * $form-placement-option-active-border);
+  }
+}
+
+.form-placement-settings {
+  width: 400px;
+}
+
+.form-placement-option-label {
+  align-items: center;
+  color: $form-placement-option-text-color;
+  display: flex;
+  font-size: 14px;
+  height: 40px;
+  justify-content: center;
+  pointer-events: none;
+  width: 100%;
+  z-index: 2;
+
+  p {
+    margin-bottom: 0;
+  }
+}
+
+.form-placement-option-settings {
+  display: flex;
+  flex-direction: row;
+  height: 25px;
+  justify-content: space-between;
+  pointer-events: none;
+  width: 100%;
+  z-index: 4;
+}
+
+.form-placement-settings-oval {
+  background-color: $form-placement-option-oval;
+  border: solid 1px $form-placement-option-oval-border;
+  border-radius: 7px;
+  height: 13px;
+  pointer-events: none;
+  width: 13px;
+}
+
+.form-placement-settings-check {
+  height: 13px;
+  pointer-events: none;
+  width: 13px;
+  z-index: 4;
+}
+
+.form-placement-settings-icon {
+  height: 14px;
+  pointer-events: none;
+  width: 14px;
+  z-index: 4;
+
+  svg {
+    fill: $form-placement-option-base-color;
+  }
+}
+
+.form-placement-settings-icon-hover {
+  svg {
+    fill: white;
+  }
+}
+
+.form-placement-option-icon {
+  background-color: #fff;
+  box-shadow: 0 4px 18px 0 rgba(68, 75, 102, .15);
+  height: 63px;
+  margin: 0 auto;
+  object-fit: contain;
+  pointer-events: none;
+  width: 76px;
+  z-index: 2;
+
+  svg {
+    height: 63px;
+    width: 76px;
+  }
+}
+
+.mailpoet-toggle-list {
+  display: grid;
+  grid-row-gap: 20px;
+  grid-template-columns: 1fr 45px;
+  margin-bottom: 40px;
+}
+
+.components-button.mailpoet-save-button {
+  background-color: #ff5301;
+  border-radius: 4px;
+  color: #fff;
+  display: block;
+  font-size: 16px;
+  font-stretch: normal;
+  font-style: normal;
+  font-weight: bold;
+  height: 48px;
+  letter-spacing: normal;
+  line-height: 1.25;
+  margin-left: auto;
+  padding-left: 16px;
+  padding-right: 16px;
+  text-align: center;
+
+  &:hover {
+    background-color: #fff !important;
+    color: #ff5301 !important;
+  }
+}
+
+.mailpoet-form-placement-save {
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-end;
+}

assets/css/src/components-plugin/_box.scss

@@ -1,16 +1,3 @@
-$box-width: 425px;
-$box-height: 150px;
-$thumbnail-height: $box-height * 2;
-$box-margin-big: 40px;
-$box-margin-small: 20px;
-$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: .2;
 }
@@ -27,7 +14,7 @@ ul.mailpoet_boxes {
   display: flex;
   margin: 15px 25px 0 0;
   padding: 15px;
-  width: $box-width;
+  width: $newsletter-box-width;
 }
 
 .mailpoet_boxes .mailpoet_boxes_content {
@@ -40,7 +27,7 @@ ul.mailpoet_boxes {
   box-sizing: border-box;
   flex-direction: column;
   height: auto;
-  margin: 0 0 $box-margin-big;
+  margin: 0 0 $newsletter-box-margin-big;
   padding: 0;
   width: 30.5%;
 
@@ -63,7 +50,7 @@ ul.mailpoet_boxes {
     padding: 8px 16px;
     right: 0;
 
-    @media screen and (max-width: 782px) {
+    @include breakpoint-max-width(782px) {
       padding: 6px 16px 2px;
     }
   }
@@ -84,36 +71,36 @@ ul.mailpoet_boxes {
     }
   }
 
-  @media screen and (max-width: 1178px) {
+  @include breakpoint-max-width(1178px) {
     width: 47%;
   }
 
-  @media screen and (max-width: 520px) {
+  @include breakpoint-max-width(520px) {
     width: 90%;
   }
 }
 
-@media screen and (min-width: 1179px) {
+@include breakpoint-min-width(1179px) {
   .mailpoet_boxes .mailpoet_template_boxes:nth-child(3n-1) {
-    margin: 0 $box-margin-big $box-margin-big $box-margin-big;
+    margin: 0 $newsletter-box-margin-big $newsletter-box-margin-big $newsletter-box-margin-big;
   }
 }
 
-@media screen and (max-width: 1178px) {
+@include breakpoint-max-width(1178px) {
   .mailpoet_boxes .mailpoet_template_boxes:nth-child(2n-1) {
-    margin: 0 $box-margin-big $box-margin-big 0;
+    margin: 0 $newsletter-box-margin-big $newsletter-box-margin-big 0;
   }
 }
 
-@media screen and (max-width: 782px) {
+@include breakpoint-max-width(782px) {
   .mailpoet_boxes .mailpoet_template_boxes:nth-child(2n-1) {
-    margin: 0 $box-margin-small $box-margin-small 0;
+    margin: 0 $newsletter-box-margin-small $newsletter-box-margin-small 0;
   }
 }
 
-@media screen and (max-width: 520px) {
+@include breakpoint-max-width(520px) {
   .mailpoet_boxes .mailpoet_template_boxes:nth-child(1n) {
-    margin: 0 0 $box-margin-small $box-margin-small;
+    margin: 0 0 $newsletter-box-margin-small $newsletter-box-margin-small;
   }
 }
 
@@ -122,27 +109,27 @@ ul.mailpoet_boxes {
   background-repeat: no-repeat;
   background-size: 100% 100%;
   border: 0;
-  height: $thumbnail-height;
+  height: $newsletter-thumbnail-height;
   overflow: hidden;
   position: relative;
   width: 100%;
 
   img {
     height: auto;
-    min-width: $thumbnail-height;
+    min-width: $newsletter-thumbnail-height;
     width: 100%;
   }
 }
 
 .woocommerce .mailpoet_thumbnail,
 .mailpoet_boxes .mailpoet_newsletter_types .mailpoet_thumbnail {
-  height: $box-height;
+  height: $newsletter-box-height;
   margin-right: 15px;
   overflow: hidden;
-  width: $box-height;
+  width: $newsletter-box-height;
 
   img {
-    min-width: $box-height;
+    min-width: $newsletter-box-height;
     transform: translate(-50%, -50%);
     width: 110%;
   }
@@ -199,15 +186,15 @@ ul.mailpoet_boxes {
   word-wrap: break-word;
 
   h3 {
-    font-size: $box-heading-font-size;
+    font-size: $newsletter-box-heading-font-size;
     font-weight: 700;
-    line-height: $box-heading-line-height;
-    margin: 0 0 $box-description-space-between-heading-and-paragraph 0;
+    line-height: $newsletter-box-heading-line-height;
+    margin: 0 0 $newsletter-box-description-space-between-heading-and-paragraph 0;
     max-width: 223px;
   }
 
   p {
-    font-size: $box-description-font-size;
+    font-size: $newsletter-box-description-font-size;
     margin: 0;
   }
 }

assets/css/src/components-plugin/_browser-preview.scss

@@ -0,0 +1,47 @@
+.mailpoet_browser_preview_toggle {
+  flex: 0 1 auto;
+  height: 30px;
+  padding-bottom: 10px;
+  text-align: center;
+  width: 100%;
+}
+
+.mailpoet_browser_preview_toggle > label {
+  display: inline-block;
+  margin: 0 5px;
+}
+
+.mailpoet_browser_preview_container {
+  border: 1px solid #979797;
+  border-radius: 20px;
+  box-sizing: border-box;
+  display: flex;
+  flex: 1 1 auto;
+  flex-direction: column;
+  height: 100%;
+  margin: auto;
+  padding: 20px;
+  transition: width .5s;
+}
+
+.mailpoet_browser_preview_container_desktop {
+  width: 100%;
+}
+
+.mailpoet_browser_preview_container_mobile {
+  width: 350px;
+}
+
+.mailpoet_browser_preview_border {
+  border: 1px solid #c3c3c3;
+  box-sizing: border-box;
+  height: 100%;
+  padding: 30px;
+  width: 100%;
+}
+
+.mailpoet_browser_preview_iframe {
+  display: block;
+  margin: auto;
+  width: calc(100% - 1px);
+}

assets/css/src/components-plugin/_common.scss

@@ -0,0 +1,50 @@
+.clearfix {
+  @include clearfix();
+}
+
+.relative-holder {
+  position: relative;
+}
+
+a:focus {
+  outline: 0 none !important;
+}
+
+.mailpoet_success {
+  color: #090;
+}
+
+.mailpoet_error {
+  color: #900;
+}
+
+.mailpoet_hidden {
+  display: none;
+}
+
+.mailpoet_spaced_block {
+  margin: 1em 0;
+}
+
+.mailpoet_centered {
+  text-align: center;
+}
+
+/* double class is intentional here, we need to be very specific here to
+   something wrapping our warning message could override its style */
+p.sender_email_address_warning.sender_email_address_warning,
+p.sender_email_address_warning.sender_email_address_warning a {
+  align-self: flex-start;
+  color: #900;
+  text-align: left;
+}
+
+p.sender_email_address_warning:first-child {
+  margin-top: 1em;
+}
+
+.button.mailpoet-button-bigger {
+  font-size: 1.5em;
+  height: 46px;
+  padding: 10px 18px;
+}

assets/css/src/components-plugin/_forms.scss

@@ -0,0 +1,62 @@
+.mailpoet_form {
+  margin: 0 0 20px;
+}
+
+.mailpoet_form td {
+  vertical-align: top !important;
+}
+
+.select2-container {
+  width: 25em !important;
+}
+
+input.select2-search__field::-webkit-input-placeholder {
+  color: $color-placeholder-select2;
+}
+
+input.select2-search__field:-moz-placeholder {
+  color: $color-placeholder-select2;
+}
+
+input.select2-search__field::-moz-placeholder {
+  color: $color-placeholder-select2;
+}
+
+input.select2-search__field:-ms-input-placeholder {
+  color: $color-placeholder-select2;
+}
+
+.select2-container--default.select2-container--focus .select2-selection--multiple {
+  border: 1px solid #aaa; /* default Select2 border for single dropdown */
+}
+
+textarea.regular-text {
+  width: 25em !important;
+}
+
+@include breakpoint-max-width(782px) {
+  .select2-container {
+    width: 100% !important;
+  }
+}
+
+progress {
+  background-color: $progress-background;
+  border: 0;
+  height: 2em;
+  width: 100%;
+}
+
+progress::-webkit-progress-bar {
+  background-color: $progress-background;
+}
+
+progress::-webkit-progress-value {
+  background-color: $progress-foreground;
+  border-radius: $progress-border-radius;
+}
+
+progress::-moz-progress-bar {
+  background-color: $progress-foreground;
+  border-radius: $progress-border-radius;
+}

assets/css/src/components-plugin/_import-export.scss

@@ -240,3 +240,13 @@ tr {
     }
   }
 }
+
+.mailpoet_offer_migration {
+  margin-top: 40px;
+}
+
+.default-list {
+  font-size: 13px;
+  list-style-type: disc;
+  margin-left: 40px;
+}

assets/css/src/components-plugin/_legacy-modal.scss

@@ -1,20 +1,10 @@
-$modal_title_color: #cfcfcf;
-$modal_highlight_background_color: #f1f1f1;
-$modal_background_color: #fff;
-$modal_popup_margin: 30px;
-$modal_popup_margin_mobile: 10px;
-$modal_popup_padding: 30px;
-$modal_popup_padding_mobile: 12px;
-$modal_close_button_size: 23px;
-$overlay_background_color: rgba(0, 0, 0, .6);
-
 body.mailpoet_modal_opened {
   overflow: hidden;
 }
 
 .mailpoet_modal_overlay {
   align-items: center;
-  background-color: $overlay_background_color;
+  background-color: $legacy-modal-overlay-background-color;
   box-sizing: border-box;
   display: flex;
   height: 100%;
@@ -22,7 +12,7 @@ body.mailpoet_modal_opened {
   left: 0;
   overflow-x: hidden;
   overflow-y: auto;
-  padding: $modal_popup_margin;
+  padding: $legacy-modal-popup-margin;
   position: fixed;
   top: 0;
   width: 100%;
@@ -30,7 +20,7 @@ body.mailpoet_modal_opened {
 }
 
 .mailpoet_modal_highlight {
-  background-color: $modal_highlight_background_color;
+  background-color: $legacy-modal-highlight-background-color;
   box-shadow: 0 0 20px 2px rgba(#fff, 75%);
   pointer-events: none;
   position: relative;
@@ -42,7 +32,7 @@ body.mailpoet_modal_opened {
 }
 
 .mailpoet_modal_overlay.mailpoet_overlay_loading {
-  background-color: $overlay_background_color !important;
+  background-color: $legacy-modal-overlay-background-color !important;
   display: flex !important;
 }
 
@@ -59,7 +49,7 @@ body.mailpoet_modal_opened {
 }
 
 .mailpoet_popup_wrapper {
-  background-color: $modal_background_color;
+  background-color: $legacy-modal-background-color;
   border-radius: 4px;
   box-shadow: 1px 2px 4px #343434;
   box-sizing: border-box;
@@ -67,7 +57,7 @@ body.mailpoet_modal_opened {
   flex-flow: column;
   height: 100%;
   overflow: hidden;
-  padding: $modal_popup_padding;
+  padding: $legacy-modal-popup-padding;
   position: relative;
   width: 100%;
   z-index: 0;
@@ -81,7 +71,7 @@ body.mailpoet_modal_opened {
   font-size: 23px;
   font-weight: 600;
   line-height: 29px;
-  margin: 0 ($modal_close_button_size + 20) 0 0;
+  margin: 0 ($legacy-modal-close-button-size + 20) 0 0;
 }
 
 .mailpoet_popup_body {
@@ -137,7 +127,7 @@ body.mailpoet_modal_opened {
 .mailpoet_panel_title h2 {
   border-left: 1px solid #444;
   border-right: 1px solid #444;
-  color: $modal_title_color;
+  color: $legacy-modal-title-color;
   font-family: 'Lucida Grande', Verdana, Arial, sans-serif;
   font-size: 1em;
   font-weight: normal;
@@ -169,11 +159,11 @@ body.mailpoet_modal_opened {
 }
 
 .mailpoet_popup .mailpoet_modal_close {
-  height: $modal_close_button_size;
+  height: $legacy-modal-close-button-size;
   padding: 3px 0;
-  right: $modal_popup_padding;
-  top: $modal_popup_padding;
-  width: $modal_close_button_size;
+  right: $legacy-modal-popup-padding;
+  top: $legacy-modal-popup-padding;
+  width: $legacy-modal-close-button-size;
 }
 
 .mailpoet_panel .mailpoet_modal_close {
@@ -203,9 +193,9 @@ body.mailpoet_modal_opened {
   text-align: right;
 }
 
-@media screen and (max-width: 782px) {
+@include breakpoint-max-width(782px) {
   .mailpoet_modal_overlay {
-    padding: $modal_popup_margin_mobile;
+    padding: $legacy-modal-popup-margin-mobile;
   }
 
   .mailpoet_popup {
@@ -214,16 +204,16 @@ body.mailpoet_modal_opened {
   }
 
   .mailpoet_popup_wrapper {
-    padding: $modal_popup_padding_mobile;
+    padding: $legacy-modal-popup-padding-mobile;
   }
 
   .mailpoet_popup_title h2 {
-    margin-right: $modal_close_button_size + 10;
+    margin-right: $legacy-modal-close-button-size + 10;
   }
 
   .mailpoet_popup .mailpoet_modal_close {
-    right: $modal_popup_padding_mobile;
-    top: $modal_popup_padding_mobile;
+    right: $legacy-modal-popup-padding-mobile;
+    top: $legacy-modal-popup-padding-mobile;
   }
 
   .mailpoet_modal_overlay.mailpoet_panel_overlay {

assets/css/src/components-plugin/_listing.scss

@@ -38,7 +38,7 @@
     }
   }
 
-  @media screen and (max-width: 782px) {
+  @include breakpoint-max-width(782px) {
     thead th.column-primary,
     tfoot th.column-primary {
       width: 100% !important;

assets/css/src/components-plugin/_modal.scss

@@ -0,0 +1,144 @@
+#mailpoet_modal {
+  display: block !important;
+}
+
+.mailpoet-modal-screen-overlay {
+  align-items: center;
+  animation: edit-post__fade-in-animation .2s ease-out 0s;
+  animation-duration: 100ms;
+  animation-fill-mode: forwards;
+  background-color: rgba(#000, .7);
+  bottom: 0;
+  display: flex;
+  justify-content: center;
+  left: 0;
+  position: fixed;
+  right: 0;
+  top: 0;
+  z-index: $modal-screen-overlay-z-index;
+}
+
+// Full-screen on mobiles
+.mailpoet-modal-frame {
+  background: white;
+  border: $modal-border-width solid $modal-light-gray-500;
+  box-shadow: $modal-shadow-modal;
+  box-sizing: border-box;
+  height: 100%;
+  overflow: auto;
+  width: 100%;
+
+  // Centered on desktops
+
+  @include breakpoint-min-width(600px) {
+    // Animate the modal frame/contents appearing on the page.
+    animation: mailpoet-modal-appear-animation .1s ease-out;
+    animation-duration: 100ms;
+    animation-fill-mode: forwards;
+    height: auto;
+    max-height: calc(100% - #{ $modal-header-height } - #{ $modal-header-height });
+    max-width: calc(100% - #{ $modal-grid-size-large } - #{ $modal-grid-size-large });
+    min-width: $modal-min-width;
+    width: auto;
+  }
+}
+
+@keyframes mailpoet-modal-appear-animation {
+  from {
+    margin-top: $modal-grid-size * 4;
+  }
+
+  to {
+    margin-top: 0;
+  }
+}
+
+// Fix header to the top so it is always there to provide context to the modal
+// if the content needs to be scrolled (for example, on the keyboard shortcuts
+// modal screen).
+.mailpoet-modal-header {
+  align-items: center;
+  background: white;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: row;
+  height: $modal-header-height;
+  justify-content: space-between;
+  margin: 0 -#{$modal-grid-size-xlarge} $modal-grid-size-xlarge;
+  padding: 0 $modal-grid-size-xlarge;
+  // For z-index to take effect, the element must be positioned. A "sticky"
+  // element is positioned, but since this is not supported in IE11,
+  // "relative" is used as a fallback.
+  position: relative;
+  position: sticky;
+  top: 0;
+  z-index: $modal-header-z-index;
+
+  // Rules inside this query are only run by Microsoft Edge.
+  // Edge has bugs around position: sticky;, so it needs a separate top rule.
+  // See also https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/17555420/.
+
+  @supports (-ms-ime-align:auto) {
+    position: fixed;
+    width: 100%;
+  }
+
+  .mailpoet-modal-header-heading {
+    font-size: 1rem;
+    font-weight: 600;
+  }
+
+  h1 {
+    line-height: 1;
+    margin: 0;
+  }
+
+  .components-button {
+    left: $modal-grid-size;
+    position: relative;
+  }
+
+  .mailpoet-modal-close svg {
+    opacity: .5;
+    stroke: $modal-dark-gray-900;
+  }
+}
+
+.mailpoet-modal-header-heading-container {
+  align-items: center;
+  display: flex;
+  flex-direction: row;
+  flex-grow: 1;
+  justify-content: left;
+}
+
+.mailpoet-modal-header-icon-container {
+  display: inline-block;
+
+  svg {
+    max-height: $modal-icon-button-size;
+    max-width: $modal-icon-button-size;
+    padding: $modal-grid-size;
+  }
+}
+
+// Modal contents.
+.mailpoet-modal-content {
+  box-sizing: border-box;
+  height: 100%;
+  padding: 0 $modal-grid-size-xlarge $modal-grid-size-xlarge;
+
+  // Rules inside this query are only run by Microsoft Edge.
+  // This is a companion top padding to the fixed rule in line 77.
+
+  @supports (-ms-ime-align:auto) {
+    padding-top: $modal-header-height;
+  }
+}
+
+.mailpoet-modal-full-screen {
+  height: 100%;
+  margin: 30px;
+  max-width: 100%;
+  min-width: 95%;
+}

assets/css/src/components-plugin/_newsletter-templates.scss

@@ -0,0 +1,8 @@
+.mailpoet_template_iframe {
+  left: 0;
+  max-width: $grid-editor-width;
+  position: absolute;
+  top: 0;
+  width: $grid-editor-width;
+  z-index: -9999;
+}

assets/css/src/components-plugin/_pages-custom.scss

@@ -1,7 +1,6 @@
 /*
 Custom styles for MailPoet pages.
 */
-
 .mailpoet-about-wrap {
   .videoWrapper {
     /* padding-top: 25px */

assets/css/src/components-plugin/_pages.scss

@@ -4,7 +4,6 @@ This is to make MailPoet pages independent of the WordPress
 About page styles that may differ across WP versions.
 Please add custom styles to pages_custom.styl
 */
-
 .mailpoet-about-wrap {
   font-size: 15px;
   margin: 25px 40px 0 20px;
@@ -238,7 +237,7 @@ Please add custom styles to pages_custom.styl
     }
   }
 
-  @media screen and (max-width: 782px) {
+  @include breakpoint-max-width(782px) {
     .two-col-text {
       column-count: 1;
     }
@@ -249,7 +248,7 @@ Please add custom styles to pages_custom.styl
     }
   }
 
-  @media screen and (max-width: 500px) {
+  @include breakpoint-max-width(500px) {
     margin-left: 10px;
     margin-right: 20px;
 

assets/css/src/components-plugin/_premium-page.scss

@@ -1,11 +1,10 @@
-
 .mailpoet-about-wrap.mailpoet-premium-page {
   display: flex;
   flex-direction: column;
   margin: 25px auto 0;
   padding: 0 150px;
 
-  @media screen and (max-width: 1500px) {
+  @include breakpoint-max-width(1500px) {
     padding: 0;
   }
 
@@ -36,27 +35,27 @@
     flex-direction: row;
     margin-bottom: 3em;
 
-    @media screen and (max-width: 500px) {
+    @include breakpoint-max-width(500px) {
       flex-wrap: wrap;
     }
 
     img {
       margin-right: 100px;
 
-      @media screen and (max-width: 1100px) {
+      @include breakpoint-max-width(1100px) {
         height: 50%;
         margin-right: 75px;
         width: 50%;
       }
 
-      @media screen and (max-width: 500px) {
+      @include breakpoint-max-width(500px) {
         height: 40%;
         margin: 0 auto;
         width: 40%;
       }
     }
 
-    @media screen and (max-width: 500px) {
+    @include breakpoint-max-width(500px) {
       .mailpoet-premium-page-intro-link-wrap {
         text-align: center;
       }
@@ -101,11 +100,11 @@
     .mailpoet-premium-page-feature {
       width: 29%;
 
-      @media screen and (max-width: 640px) {
+      @include breakpoint-max-width(640px) {
         width: 49%;
       }
 
-      @media screen and (max-width: 500px) {
+      @include breakpoint-max-width(500px) {
         width: 100%;
       }
 
@@ -129,12 +128,12 @@
       justify-content: space-between;
       margin: 0 20px;
 
-      @media screen and (max-width: 500px) {
+      @include breakpoint-max-width(500px) {
         width: 100%;
       }
     }
 
-    @media screen and (max-width: 880px) {
+    @include breakpoint-max-width(880px) {
       display: block;
 
       > div { display: block; }
@@ -155,7 +154,7 @@
     flex-grow: 100;
   }
 
-  @media screen and (max-width: 1100px) {
+  @include breakpoint-max-width(1100px) {
     h2 {
       font-size: 2em; // The text WooCommerce is too long and so on smaller displays it overflows. This helps.
     }

assets/css/src/components-plugin/_settings.scss

@@ -145,7 +145,7 @@
     margin-top: 10px;
   }
 
-  @media screen and (max-width: 782px) {
+  @include breakpoint-max-width(782px) {
     .form-table th {
       width: auto;
     }

assets/css/src/components-plugin/_stats.scss

@@ -30,12 +30,12 @@
 }
 
 .mailpoet_stats_premium_banner {
-  background-color: $info-message-background-color;
+  background-color: #fed2bf;
   padding: 10px;
   text-align: center;
 }
 
-@media screen and (max-width: 520px) {
+@include breakpoint-max-width(520px) {
   .mailpoet_stat_info {
     display: none;
   }

assets/css/src/components-plugin/_toggle.scss

@@ -0,0 +1,82 @@
+input[type=checkbox].mailpoet-toggle {
+  display: none;
+
+  // add default box-sizing for this scope
+  &,
+  &:after,
+  &:before,
+  *,
+  *:after,
+  *:before,
+  + .mailpoet-toggle-button {
+    box-sizing: border-box;
+
+    &::selection {
+      background: none;
+    }
+  }
+
+  + .mailpoet-toggle-button {
+    cursor: pointer;
+    display: block;
+    height: 24px;
+    outline: 0;
+    position: relative;
+    user-select: none;
+    width: 40px;
+
+    &:after,
+    &:before {
+      content: '';
+      display: block;
+      height: 22px;
+      position: relative;
+      width: 22px;
+    }
+
+    &:after {
+      left: -3px;
+      top: -3px;
+    }
+
+    &:before {
+      display: none;
+    }
+  }
+
+  &:checked + .mailpoet-toggle-button:after {
+    left: 14px;
+  }
+}
+
+$very-light-blue: #e5e9f8;
+$apricot: #f5a278;
+$pale-grey: #fdfdff;
+
+// themes
+.mailpoet-toggle-light {
+  + .mailpoet-toggle-button {
+    background: $pale-grey;
+    border: solid 1px $very-light-blue;
+    border-radius: 2em;
+    padding: 2px;
+    transition: all .4s ease;
+
+    &:after {
+      background-color: #fff;
+      border: solid 1px $very-light-blue;
+      border-radius: 50%;
+      box-shadow: 0 4px 8px 0 rgba(220, 220, 220, .5);
+      transition: all .2s ease;
+    }
+  }
+
+  &:checked + .mailpoet-toggle-button {
+    background: $apricot;
+    border: solid 1px $apricot;
+
+    &:after {
+      border: solid 1px $apricot;
+    }
+  }
+}

assets/css/src/components-plugin/_welcome-wizard.scss

@@ -29,7 +29,7 @@
     max-width: 100%;
   }
 
-  @media screen and (max-width: 782px) {
+  @include breakpoint-max-width(782px) {
     display: none;
   }
 }
@@ -46,7 +46,7 @@
   text-align: left;
   width: 50%;
 
-  @media screen and (max-width: 782px) {
+  @include breakpoint-max-width(782px) {
     padding: 30px;
     width: 100%;
   }

assets/css/src/components-post-editor-block/_post-editor-block.scss

@@ -0,0 +1,10 @@
+.mailpoet-block-div {
+  padding: 20px;
+}
+
+.mailpoet-block-create-new-content {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  min-height: 60px;
+}

assets/css/src/components-public/_public.scss

@@ -0,0 +1,159 @@
+/* labels */
+.mailpoet_text_label,
+.mailpoet_textarea_label,
+.mailpoet_select_label,
+.mailpoet_radio_label,
+.mailpoet_checkbox_label,
+.mailpoet_list_label,
+.mailpoet_date_label {
+  display: block;
+}
+
+.mailpoet_textarea {
+  height: auto;
+}
+
+/* form loading */
+.mailpoet_form_sending {
+  .mailpoet_form_loading {
+    display: block;
+  }
+
+  .mailpoet_submit {
+    display: none;
+  }
+}
+
+.mailpoet_form_loading {
+  display: none;
+  text-align: center;
+  width: 30px;
+}
+
+.mailpoet_form_loading > span {
+  animation: mailpoet-bouncedelay 1.4s infinite ease-in-out both;
+  background-color: #5b5b5b;
+  border-radius: 100%;
+  display: inline-block;
+  height: 5px;
+  width: 5px;
+}
+
+.mailpoet_form_loading .mailpoet_bounce1 {
+  animation-delay: -.32s;
+}
+
+.mailpoet_form_loading .mailpoet_bounce2 {
+  animation-delay: -.16s;
+  margin: 0 7px;
+}
+
+.mailpoet_captcha_form {
+  .mailpoet_validate_success { color: #468847; }
+  .mailpoet_validate_error { color: #b94a48; }
+}
+
+.mailpoet_captcha_update {
+  cursor: pointer;
+}
+
+@keyframes mailpoet-bouncedelay {
+  0%,
+  80%,
+  100% { transform: scale(0); }
+  40% { transform: scale(1); }
+}
+
+// Form columns
+$form-break-small-width: 500px;
+$form-block-margin: 20px;
+$form-columns-with-background-padding: 10px;
+$form-columns-space-between: 20px;
+
+.mailpoet_form .mailpoet_paragraph {
+  margin-bottom: $form-block-margin;
+}
+
+// Default value for users who don't have the value in Custom CSS
+.mailpoet_column_with_background {
+  padding: $form-columns-with-background-padding;
+}
+// Default value for users who don't have the value in Custom CSS
+.mailpoet_form_column:not(:first-child) {
+  margin-left: $form-columns-space-between;
+}
+
+@mixin maxWidthColumns() {
+  flex-wrap: wrap;
+
+  &.mailpoet_column_with_background .mailpoet_form_column:last-child .mailpoet_paragraph:last-child {
+    margin-bottom: 0 !important;
+  }
+}
+
+@mixin maxWidthColumn() {
+  // This must be important since the Column assigns its own width as an inline style.
+  flex-basis: 100% !important;
+
+  &:not(:first-child) {
+    margin-left: 0 !important;
+  }
+}
+
+.mailpoet_form_columns {
+  display: flex;
+  flex-wrap: nowrap;
+
+  // Alignment settings
+  &.mailpoet_vertically_align_top {
+    align-items: flex-start;
+  }
+
+  &.mailpoet_vertically_align_center {
+    align-items: flex-start;
+  }
+
+  &.mailpoet_vertically_align_bottom {
+    align-items: flex-start;
+  }
+
+  @include breakpoint-max-width(#{ ($form-break-small-width - 1) }) {
+    @include maxWidthColumns;
+  }
+
+  .mailpoet_form_tight_container & {
+    @include maxWidthColumns;
+  }
+}
+
+.mailpoet_form_column {
+  display: flex;
+  flex-direction: column;
+
+  // Alignment
+  &.mailpoet_vertically_align_top {
+    align-self: flex-start;
+  }
+
+  &.mailpoet_vertically_align_center {
+    align-self: center;
+  }
+
+  &.mailpoet_vertically_align_bottom {
+    align-self: flex-end;
+  }
+
+  @include breakpoint-min-width($form-break-small-width) {
+    .mailpoet_form_form:not(.mailpoet_form_tight_container) .mailpoet_column_with_background & .mailpoet_paragraph:last-child {
+      margin-bottom: 0 !important;
+    }
+  }
+
+  @include breakpoint-max-width(#{ ($form-break-small-width - 1) }) {
+    @include maxWidthColumn;
+  }
+
+  .mailpoet_form_tight_container & {
+    @include maxWidthColumn;
+  }
+}

assets/css/src/components/_common.scss

@@ -1,111 +0,0 @@
-.clearfix {
-  @include clearfix();
-}
-
-.relative-holder {
-  position: relative;
-}
-
-a:focus {
-  outline: 0 none !important;
-}
-
-.mailpoet_success {
-  color: #090;
-}
-
-.mailpoet_error {
-  color: #900;
-}
-
-.mailpoet_hidden {
-  display: none;
-}
-
-.mailpoet_spaced_block {
-  margin: 1em 0;
-}
-
-.mailpoet_centered {
-  text-align: center;
-}
-
-.select2-container {
-  width: 25em !important;
-}
-
-$placeholder-color: #999; /* default Select2 placeholder color for single dropdown */
-
-input.select2-search__field::-webkit-input-placeholder {
-  color: $placeholder-color;
-}
-
-input.select2-search__field:-moz-placeholder {
-  color: $placeholder-color;
-}
-
-input.select2-search__field::-moz-placeholder {
-  color: $placeholder-color;
-}
-
-input.select2-search__field:-ms-input-placeholder {
-  color: $placeholder-color;
-}
-
-.select2-container--default.select2-container--focus .select2-selection--multiple {
-  border: 1px solid #aaa; /* default Select2 border for single dropdown */
-}
-
-textarea.regular-text {
-  width: 25em !important;
-}
-
-@media screen and (max-width: 782px) {
-  .select2-container {
-    width: 100% !important;
-  }
-}
-
-$progress-border-radius: 5px;
-$progress-background: #efefef;
-$progress-foreground: #69b1e9;
-
-progress {
-  background-color: $progress-background;
-  border: 0;
-  height: 2em;
-  width: 100%;
-}
-
-progress::-webkit-progress-bar {
-  background-color: $progress-background;
-}
-
-progress::-webkit-progress-value {
-  background-color: $progress-foreground;
-  border-radius: $progress-border-radius;
-}
-
-progress::-moz-progress-bar {
-  background-color: $progress-foreground;
-  border-radius: $progress-border-radius;
-}
-
-/* double class is intentional here, we need to be very specific here to
-   something wrapping our warning message could override its style */
-p.sender_email_address_warning.sender_email_address_warning,
-p.sender_email_address_warning.sender_email_address_warning a {
-  align-self: flex-start;
-  color: #900;
-  text-align: left;
-}
-
-p.sender_email_address_warning:first-child {
-  margin-top: 1em;
-}
-
-.button.mailpoet-button-bigger {
-  font-size: 1.5em;
-  height: 46px;
-  padding: 10px 18px;
-}

assets/css/src/components/_form.scss

@@ -1,7 +0,0 @@
-.mailpoet_form {
-  margin: 0 0 20px;
-}
-
-.mailpoet_form td {
-  vertical-align: top !important;
-}

assets/css/src/components/_formValidation.scss

@@ -1,8 +0,0 @@
-.parsley-errors-list {
-  margin-top: 8px;
-}
-
-.parsley-required,
-.parsley-custom-error-message {
-  color: #b94a48;
-}

assets/css/src/components/_newsletterTemplates.scss

@@ -1,10 +0,0 @@
-@import 'newsletterEditor/variables';
-
-.mailpoet_template_iframe {
-  left: 0;
-  max-width: $newsletter-width;
-  position: absolute;
-  top: 0;
-  width: $newsletter-width;
-  z-index: -9999;
-}

assets/css/src/components/_parsley.scss

@@ -19,7 +19,7 @@ textarea.parsley-error {
   font-size: .9em;
   line-height: .9em;
   list-style-type: none;
-  margin: 2px 0 3px;
+  margin: 8px 0 3px;
   opacity: 0;
   padding: 0;
   transition: all .3s ease-in;
@@ -28,3 +28,8 @@ textarea.parsley-error {
     opacity: 1;
   }
 }
+
+.parsley-required,
+.parsley-custom-error-message {
+  color: #b94a48;
+}

assets/css/src/components/_public.scss

@@ -1,61 +0,0 @@
-/* labels */
-.mailpoet_text_label,
-.mailpoet_textarea_label,
-.mailpoet_select_label,
-.mailpoet_radio_label,
-.mailpoet_checkbox_label,
-.mailpoet_list_label,
-.mailpoet_date_label {
-  display: block;
-}
-
-/* form loading */
-.mailpoet_form_sending {
-  .mailpoet_form_loading {
-    display: block;
-  }
-
-  .mailpoet_submit {
-    display: none;
-  }
-}
-
-.mailpoet_form_loading {
-  display: none;
-  text-align: center;
-  width: 30px;
-}
-
-.mailpoet_form_loading > span {
-  animation: mailpoet-bouncedelay 1.4s infinite ease-in-out both;
-  background-color: #5b5b5b;
-  border-radius: 100%;
-  display: inline-block;
-  height: 5px;
-  width: 5px;
-}
-
-.mailpoet_form_loading .mailpoet_bounce1 {
-  animation-delay: -.32s;
-}
-
-.mailpoet_form_loading .mailpoet_bounce2 {
-  animation-delay: -.16s;
-  margin: 0 7px;
-}
-
-.mailpoet_captcha_form {
-  .mailpoet_validate_success { color: #468847; }
-  .mailpoet_validate_error { color: #b94a48; }
-}
-
-.mailpoet_captcha_update {
-  cursor: pointer;
-}
-
-@keyframes mailpoet-bouncedelay {
-  0%,
-  80%,
-  100% { transform: scale(0); }
-  40% { transform: scale(1); }
-}

assets/css/src/components/formEditor/components/_block_editor.scss

@@ -1,28 +0,0 @@
-// Fix for broken drag and drop for blocks
-// This should had been fixed in Gutenberg's master branch
-// https://github.com/WordPress/gutenberg/pull/15054
-// It doesn't work even after upgrading to package version with the fix.
-// It needs further investigation
-.edit-post-editor-regions__content {
-  .block-editor-block-mover__control-drag-handle {
-    display: none !important;
-  }
-}
-
-// We don't want to allow user to remove Submit or Email.
-// There is no way to hide the delete button programmatically so we hide last toolbar that contains the delete option
-// There is a feature request for adding that into Gutenberg https://github.com/WordPress/gutenberg/issues/16364
-// We also hide options to prevent removing Email or Submit when they are in multi-select
-.block-editor-block-contextual-toolbar[data-type='mailpoet-form/email-input'],
-.block-editor-block-contextual-toolbar[data-type='mailpoet-form/submit-button'],
-.is-multi-selected {
-  .components-toolbar:last-child {
-    display: none;
-  }
-}
-
-// Drag and drop library we use for custom fields does not support nested scrollable
-// https://github.com/atlassian/react-beautiful-dnd/issues/131
-.edit-post-editor-regions__body {
-  overflow: hidden;
-}

assets/css/src/components/formEditor/components/_sidebar.scss

@@ -1,91 +0,0 @@
-$gutenberg-control-border-color: #7e8993;
-$gutenberg-control-border-color-focus: #007cba;
-
-.components-panel {
-  .select2-container {
-    width: 100% !important;
-
-    input.select2-search__field:focus {
-      border: 0;
-      box-shadow: none;
-    }
-
-    .select2-selection {
-      border-color: $gutenberg-control-border-color;
-    }
-
-    &.select2-container--focus {
-      .select2-selection {
-        border-color: $gutenberg-control-border-color-focus;
-        box-shadow: 0 0 0 1px $gutenberg-control-border-color-focus;
-      }
-    }
-  }
-
-  .mailpoet-form-missing-lists {
-    .select2-selection {
-      border-color: red;
-    }
-
-    .mailpoet-form-lists-error {
-      color: red;
-    }
-  }
-}
-
-.components-base-control.mailpoet-form-success-types__control {
-  margin-bottom: 0;
-
-  .components-base-control__label {
-    display: block;
-  }
-
-  .components-radio-control__option {
-    display: inline-block;
-    margin-right: 1em;
-
-    input {
-      margin-right: 6px;
-    }
-  }
-}
-
-.button-on-top,
-.button-on-top.components-button.is-link {
-  margin-bottom: 12px;
-  max-height: 30px;
-}
-
-.mailpoet-dnd-items-list > div {
-  display: flex;
-  flex-direction: column;
-
-  > * {
-    margin-bottom: 12px
-  }
-}
-
-.mailpoet-form-segments-settings-list {
-  align-items: center;
-  display: flex;
-  flex-direction: row;
-
-  .components-base-control {
-    flex-grow: 1;
-    margin: 8px 0;
-
-    .components-base-control__field {
-      margin: 0;
-    }
-  }
-
-  .mailpoet-form-segments-segment-remove {
-    cursor: pointer;
-    flex-grow: 0;
-    margin: 8px 0;
-  }
-}
-
-.mailpoet_sidebar_note {
-  padding: 16px;
-}

assets/css/src/components/listing/_newsletters.scss

@@ -1,94 +0,0 @@
-$excellent-badge-color: #2993ab;
-$good-badge-color: #f0b849;
-$bad-badge-color: #d54e21;
-$green-badge-color: #55bd56;
-$video-guide-badge-color: #46b450;
-
-#newsletters_container {
-  h2.nav-tab-wrapper {
-    margin-bottom: 1rem;
-  }
-}
-
-.mailpoet_stats_text {
-  font-size: 14px;
-  font-weight: 600;
-}
-
-.mailpoet_stat_excellent {
-  color: $excellent-badge-color;
-}
-
-.mailpoet_stat_good {
-  color: $good-badge-color;
-}
-
-.mailpoet_stat_bad {
-  color: $bad-badge-color;
-}
-
-.mailpoet_stat_hidden {
-  display: none;
-}
-
-.mailpoet_stat_link_small {
-  font-size: .75rem;
-  text-decoration: underline !important;
-}
-
-.mailpoet_badge {
-  border-radius: 3px;
-  color: white;
-  cursor: pointer;
-  font-size: .5625rem;
-  font-weight: 500;
-  letter-spacing: 1px;
-  margin-right: 4px;
-  padding: 4px 6px 3px;
-  text-transform: uppercase;
-  vertical-align: middle;
-}
-
-.mailpoet_badge_excellent,
-.mailpoet_badge_teal {
-  background: $excellent-badge-color;
-}
-
-.mailpoet_badge_good,
-.mailpoet_badge_yellow {
-  background: $good-badge-color;
-}
-
-.mailpoet_badge_bad,
-.mailpoet_badge_red {
-  background: $bad-badge-color;
-}
-
-.mailpoet_badge_green {
-  background: $green-badge-color;
-}
-
-.mailpoet_badge_video {
-  background: $video-guide-badge-color;
-  display: inline-block;
-  line-height: 20px;
-  padding: 3px 6px;
-  text-decoration: none;
-  vertical-align: top;
-
-  &:hover,
-  &:active,
-  &:focus {
-    background: $green-badge-color;
-    color: #fff;
-  }
-
-  .dashicons {
-    font-size: 14px;
-    line-height: 20px;
-  }
-}
-
-.mailpoet_badge_video_grey {
-  background: #c3c3c3;
-}

assets/css/src/components/newsletterEditor/_common.scss

@@ -1,342 +0,0 @@
-$link-color: $primary-active-background-color;
-
-$select-border-color: $content-border-color;
-$select-text-color: $primary-text-color;
-
-$button-default-border-color: $structure-border-color;
-$button-default-background-color: $primary-background-color;
-$button-default-text-color: $primary-inactive-color;
-
-$button-primary-border-color: $primary-active-color;
-$button-primary-background-color: $primary-active-background-color;
-$button-primary-hover-background-color: $primary-active-color-highlight;
-$button-primary-text-color: $white-color;
-
-$range-track-background-color: $white-color;
-$range-track-border-color: $structure-border-color;
-$range-track-height: 12px;
-$range-thumb-background-color: $primary-inactive-color;
-$range-thumb-border-color: #333;
-$range-thumb-width: 13px;
-$range-thumb-height: 26px;
-$range-border-radius: 3px;
-$range-thumb-hover-background-color: $primary-active-color;
-
-.admin_page_mailpoet-newsletter-editor {
-  a {
-    color: $link-color;
-    text-decoration: none;
-  }
-
-  .mailpoet_hidden {
-    display: none !important;
-  }
-
-  .mailpoet_form_narrow_select2 span.select2-container {
-    width: 103px !important;
-  }
-
-  span.select2-container--open > span.select2-dropdown {
-    min-width: 150px;
-  }
-
-  span.select2-container--open > span.select2-dropdown li.select2-results__option {
-    font-size: 13px;
-    margin: 0 !important;
-
-    .select2-results__group {
-      color: #bfbfbf;
-      font-weight: normal;
-    }
-
-    .select2-results__option {
-      font-size: 13px;
-      padding-left: 15px;
-
-      &[aria-selected=true] {
-        background-color: #eee;
-        color: #444;
-      }
-    }
-  }
-
-  .mailpoet_settings_notice {
-    color: #999;
-  }
-}
-
-input.mailpoet_color {
-  width: 5em;
-}
-
-select.mailpoet_font-family {
-  width: 8em;
-}
-
-select.mailpoet_font-size {
-  width: 5em;
-}
-
-.mailpoet_input,
-.mailpoet_select {
-  $form-control-padding: 3px;
-  appearance: none;
-  border-radius: 1px;
-  box-shadow: none !important;
-  line-height: 28px - $form-control-padding * 2;
-  padding: $form-control-padding;
-}
-
-.mailpoet_input {
-  border: 1px solid $select-border-color;
-  width: 283px;
-}
-
-.mailpoet_input_small {
-  width: 58px;
-}
-
-.mailpoet_input_medium {
-  width: 150px;
-}
-
-.mailpoet_input_full {
-  box-sizing: border-box;
-  margin: 0;
-  width: 100%;
-}
-
-.mailpoet_range {
-  -webkit-appearance: none;
-  padding: 0;
-  vertical-align: middle;
-  width: 283px;
-
-  &:focus {
-    outline: none;
-  }
-
-  &::-webkit-slider-runnable-track {
-    background: $range-track-background-color;
-    border: 1px solid $range-track-border-color;
-    border-radius: $range-border-radius;
-    cursor: pointer;
-    height: $range-track-height;
-    width: 100%;
-  }
-
-  &::-webkit-slider-thumb {
-    -webkit-appearance: none;
-    background: $range-thumb-background-color;
-    border: 1px solid $range-thumb-border-color;
-    border-radius: $range-border-radius;
-    cursor: pointer;
-    height: $range-thumb-height;
-    margin-top: -1 * $range-thumb-height / 3;
-    width: $range-thumb-width;
-  }
-
-  &:hover::-webkit-slider-thumb {
-    background: $range-thumb-hover-background-color;
-  }
-
-  &::-moz-range-track {
-    background: $range-track-background-color;
-    border: 1px solid $range-track-border-color;
-    border-radius: $range-border-radius;
-    cursor: pointer;
-    height: $range-track-height;
-    width: 100%;
-  }
-
-  &::-moz-range-thumb {
-    background: $range-thumb-background-color;
-    border: 1px solid $range-thumb-border-color;
-    border-radius: $range-border-radius;
-    cursor: pointer;
-    height: $range-thumb-height;
-    width: $range-thumb-width;
-  }
-
-  &:hover::-moz-range-thumb {
-    background: $range-thumb-hover-background-color;
-  }
-
-  &::-ms-fill-lower {
-    background: $range-track-background-color;
-    border: 1px solid $range-track-border-color;
-  }
-
-  &::-ms-fill-upper {
-    background: $range-track-background-color;
-    border: 1px solid $range-track-border-color;
-  }
-
-  &::-ms-track {
-    background: transparent;
-    border-color: transparent;
-    border-width: $range-track-height * 2 0;
-    color: transparent;
-    cursor: pointer;
-    height: $range-track-height;
-    width: 100%;
-  }
-
-  &::-ms-thumb {
-    background: $range-thumb-background-color;
-    border: 1px solid $range-thumb-border-color;
-    border-radius: $range-border-radius;
-    cursor: pointer;
-    height: $range-thumb-height;
-    width: $range-thumb-width;
-  }
-
-  &:hover::-ms-thumb {
-    background: $range-thumb-hover-background-color;
-  }
-
-  &:focus::-ms-fill-lower {
-    background: $range-track-background-color;
-    border: 1px solid $range-track-border-color;
-  }
-
-  &:focus::-ms-fill-upper {
-    background: $range-track-background-color;
-    border: 1px solid $range-track-border-color;
-  }
-}
-
-.mailpoet_range_small {
-  width: 100px;
-}
-
-.mailpoet_range_medium {
-  width: 180px;
-}
-
-.mailpoet_select {
-  border-color: $select-border-color;
-  color: $select-text-color;
-  margin: 0;
-}
-
-.mailpoet_select_large {
-  width: 139px;
-}
-
-.mailpoet_select_medium {
-  width: 103px;
-}
-
-.mailpoet_select_small {
-  width: 68px;
-}
-
-.mailpoet_select_half_width {
-  width: 50%;
-}
-
-#mailpoet_editor_content ol,
-#mailpoet_editor_content ul {
-  padding-left: 40px;
-}
-
-#mailpoet_editor_content ul {
-  list-style-type: disc;
-
-  ul {
-    list-style-type: circle;
-
-    ul { list-style-type: square; }
-  }
-}
-
-.mailpoet_button {
-  background-color: $button-default-background-color;
-  border: 1px solid $button-default-border-color;
-  border-radius: 3px;
-  color: $button-default-text-color;
-  line-height: normal;
-  margin: 0;
-  padding: 6px 20px;
-  vertical-align: top;
-}
-
-.mailpoet_button_full {
-  box-sizing: border-box;
-  width: 100%;
-}
-
-.tooltip-help-designer-subject-line div,
-.tooltip-help-designer-preheader div {
-  z-index: 100001;
-}
-
-.tooltip-help-send-preview {
-  color: #fff;
-  margin-top: -10px;
-  position: absolute;
-  right: 4px;
-  top: 50%;
-}
-
-.tooltip-help-designer-ideal-width {
-  color: #656565;
-  font-weight: normal;
-  margin-left: 5px;
-  text-transform: none;
-}
-
-.tooltip-help-designer-full-width .dashicons {
-  line-height: 34px;
-}
-
-.tooltip-help-designer-full-width span {
-  line-height: 1.4em;
-}
-
-.mailpoet_button_primary {
-  background-color: $button-primary-background-color;
-  border-color: $button-primary-border-color;
-  color: $button-primary-text-color;
-
-  &:hover {
-    background-color: $button-primary-hover-background-color;
-  }
-}
-
-.mailpoet_button_group {
-  display: inline;
-
-  .mailpoet_button:first-child {
-    border-bottom-right-radius: 0;
-    border-top-right-radius: 0;
-    margin-right: 0;
-    padding: 6px 12px;
-  }
-
-  .mailpoet_button:last-child {
-    border-bottom-left-radius: 0;
-    border-left: 0;
-    border-top-left-radius: 0;
-    margin-left: 0;
-    padding-left: 10px;
-    padding-right: 10px;
-  }
-}
-
-.mailpoet_text_content p {
-  margin: 1em 0;
-}
-
-.mailpoet_separator {
-  margin: 17px 20px;
-}
-
-.mailpoet_option_offset_left_small {
-  margin-left: 10px;
-}
-
-input.mailpoet_option_offset_left_small {
-  margin-left: 10px !important;
-}

assets/css/src/components/newsletterEditor/_variables.scss

@@ -1,33 +0,0 @@
-$transparent-color: rgba(255, 255, 255, 0);
-$white-color: rgb(255, 255, 255);
-$black-color: rgb(0, 0, 0);
-
-$structure-border-color: #ddd;
-$content-border-color: #e5e5e5;
-
-$primary-active-color: #0074a2;
-$primary-active-color-highlight: #1e8cbe;
-$primary-inactive-color: #a4a4a4;
-
-$primary-active-background-color: #2ea1cd;
-$primary-background-color: #f8f8f8;
-
-$primary-text-color: #656565;
-
-$primary-inset-shadow-color: #025c80;
-
-$warning-background-color: #e64047;
-$warning-text-color: $white-color;
-$warning-alternate-text-color: #f4c6c8;
-
-$error-text-color: #d54e21;
-
-$editor-column-color: #7fbbd0;
-$editor-content-color: #0078a2;
-
-$newsletter-width: 660px;
-
-$text-line-height: 1.6em;
-$sidebar-text-size: 13px;
-
-$info-message-background-color: #fed2bf;

assets/css/src/components/newsletterEditor/components/_sidebar.scss

@@ -1,207 +0,0 @@
-$select-border-color: $content-border-color;
-$select-text-color: $primary-text-color;
-
-$sidebar-background-color: $primary-background-color;
-$sidebar-active-heading-color: $primary-active-color;
-$sidebar-inactive-heading-color: $primary-inactive-color;
-$sidebar-text-color: $primary-text-color;
-
-$widget-width: 70px;
-$widget-background-color: $white-color;
-$widget-shadow-color: darken($primary-background-color, 13%);
-$widget-icon-color: darken($primary-background-color, 31.5%);
-$widget-icon-hover-color: $primary-active-color;
-$widget-icon-width: 30px;
-
-#mailpoet_editor_sidebar {
-  border-bottom: $content-border-color;
-  border-left: $content-border-color;
-  color: $sidebar-text-color;
-  font-size: $sidebar-text-size;
-
-  .mailpoet_sidebar_region {
-    border-bottom: 1px solid $content-border-color;
-    border-left: 1px solid $content-border-color;
-    border-right: 0;
-    border-top: 0;
-    margin-bottom: 0;
-
-    &.closed .mailpoet_region_content {
-      display: none;
-    }
-  }
-
-  .mailpoet_region_content {
-    margin-top: 12px;
-    padding: 0 20px;
-  }
-
-  &,
-  .postbox {
-    background-color: $sidebar-background-color;
-  }
-
-  .postbox {
-    padding-bottom: 20px;
-
-    &.closed {
-      padding-bottom: 0;
-    }
-
-    &.closed h3 {
-      color: $sidebar-inactive-heading-color;
-      cursor: pointer;
-    }
-
-    h3,
-    &:hover h3 {
-      color: $sidebar-active-heading-color;
-      margin: 0;
-      padding: 17px 20px;
-      text-transform: uppercase;
-    }
-
-    h3,
-    .handlediv {
-      border: 0;
-      cursor: auto;
-    }
-
-    .handlediv:before {
-      color: $sidebar-active-heading-color;
-      content: '\f142';
-      display: inline-block;
-      font: 400 20px / 1 dashicons;
-      -webkit-font-smoothing: antialiased;
-      -moz-osx-font-smoothing: grayscale;
-      position: relative;
-      right: 18px;
-      speak: none;
-      text-decoration: none !important;
-      top: 18px;
-    }
-
-    &.closed .handlediv:before {
-      color: $sidebar-inactive-heading-color;
-      content: '\f140';
-    }
-
-    &.closed:hover .handlediv:before {
-      color: $sidebar-active-heading-color;
-    }
-  }
-}
-
-.mailpoet_widget {
-  display: inline-block;
-  float: left;
-  padding: 0 13px 15px;
-  text-align: center;
-  width: $widget-width;
-
-  &:nth-child(3n+1) {
-    clear: left;
-  }
-
-  .mailpoet_widget_icon {
-    background-color: $widget-background-color;
-    border-radius: 3px;
-    box-shadow: 1px 2px $widget-shadow-color;
-    box-sizing: border-box;
-    color: $widget-icon-color;
-    fill: $widget-icon-color;
-    height: $widget-width;
-    line-height: $widget-width;
-    margin-bottom: 9px;
-    text-align: center;
-    width: $widget-width;
-
-    /* Vertically align widget icon glyphs */
-    > * {
-      font-size: $widget-icon-width;
-      height: $widget-icon-width;
-      vertical-align: middle;
-      width: $widget-icon-width;
-    }
-
-    &:hover {
-      border: 1px solid $widget-icon-hover-color;
-      color: $widget-icon-hover-color;
-      fill: $widget-icon-hover-color;
-    }
-  }
-
-  &.mailpoet_droppable_active {
-    color: $widget-icon-hover-color;
-    fill: $widget-icon-hover-color;
-
-    .mailpoet_widget_icon {
-      border: 1px solid $widget-icon-hover-color;
-      box-shadow: none;
-      color: $widget-icon-hover-color;
-      fill: $widget-icon-hover-color;
-    }
-
-    .mailpoet_widget_title {
-      display: none;
-    }
-  }
-}
-
-/* Browser preview modal */
-.mailpoet_browser_preview_wrapper {
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-  position: absolute;
-  width: 100%;
-}
-
-.mailpoet_browser_preview_toggle {
-  flex: 0 1 auto;
-  height: 30px;
-  padding: 10px 0;
-  position: absolute;
-  text-align: center;
-  top: -30px;
-  width: 100%;
-}
-
-.mailpoet_browser_preview_toggle > label {
-  display: inline-block;
-  margin: 0 5px;
-}
-
-.mailpoet_browser_preview_container {
-  border: 1px solid #979797;
-  border-radius: 20px;
-  box-sizing: border-box;
-  display: flex;
-  flex: 1 1 auto;
-  flex-direction: column;
-  height: 100%;
-  margin: 15px auto 0;
-  padding: 20px;
-  transition: width .5s;
-}
-
-.mailpoet_browser_preview_container_desktop {
-  width: 100%;
-}
-
-.mailpoet_browser_preview_container_mobile {
-  width: 350px;
-}
-
-.mailpoet_browser_preview_border {
-  border: 1px solid #c3c3c3;
-  box-sizing: border-box;
-  height: 100%;
-  width: 100%;
-}
-
-.mailpoet_browser_preview_iframe {
-  display: block;
-  margin: auto;
-  width: calc(100% - 1px);
-}

assets/css/src/formEditor.scss

@@ -1,11 +0,0 @@
-@import '../../../node_modules/@wordpress/edit-post/build-style/style';
-@import '../../../node_modules/@wordpress/editor/build-style/style';
-@import '../../../node_modules/@wordpress/components/build-style/style';
-@import '../../../node_modules/@wordpress/block-editor/build-style/style';
-@import '../../../node_modules/@wordpress/block-library/build-style/style';
-@import '../../../node_modules/@wordpress/block-library/build-style/theme';
-@import '../../../node_modules/@wordpress/block-library/build-style/editor';
-@import './components/formEditor/components/form_title';
-@import './components/formEditor/components/sidebar';
-@import './components/formEditor/components/block_editor';
-@import './components/formEditor/components/custom_field';

assets/css/src/mailpoet-admin.scss

@@ -1,2 +1,4 @@
-@import 'components/globals';
-@import 'components/plugins/members';
+// Utilities
+// Helpers and overrides.
+@import 'components-admin/menu';
+@import 'components-admin/3rd-party-plugins/members';

assets/css/src/mailpoet-editor.scss

@@ -0,0 +1,51 @@
+// Settings
+// Global variables, config switches. Not producing any CSS.
+@import 'settings/grid';
+@import 'settings/colors';
+@import 'settings/editor';
+@import 'settings/range';
+
+// Tools
+// Default mixins and functions. Still not producing any CSS.
+@import 'mixins/animations';
+@import 'mixins/breakpoints';
+
+// Generic
+// 3rd-party styles, can be overwritten.
+@import '../../../node_modules/spectrum-colorpicker/spectrum';
+
+// Components
+// Actual UI components.
+@import 'components-editor/buttons';
+@import 'components-editor/common';
+@import 'components-editor/forms';
+@import 'components-editor/layout';
+@import 'components-editor/components/forms';
+@import 'components-editor/components/heading';
+@import 'components-editor/components/history';
+@import 'components-editor/components/sidebar';
+@import 'components-editor/components/sidepanel';
+@import 'components-editor/components/save';
+@import 'components-editor/components/block-tools';
+@import 'components-editor/components/layers';
+@import 'components-editor/components/drag-and-drop';
+@import 'components-editor/components/resize';
+@import 'components-editor/content-blocks/base';
+@import 'components-editor/content-blocks/container';
+@import 'components-editor/content-blocks/automated-latest-content';
+@import 'components-editor/content-blocks/posts';
+@import 'components-editor/content-blocks/products';
+@import 'components-editor/content-blocks/button';
+@import 'components-editor/content-blocks/divider';
+@import 'components-editor/content-blocks/image';
+@import 'components-editor/content-blocks/social';
+@import 'components-editor/content-blocks/spacer';
+@import 'components-editor/content-blocks/text';
+@import 'components-editor/content-blocks/header';
+@import 'components-editor/content-blocks/footer';
+@import 'components-editor/content-blocks/woocommerce-heading';
+@import 'components-editor/content-blocks/woocommerce-content';
+
+// Utilities
+// Helpers and overrides.
+@import 'components-editor/3rd-party-overrides/overrides';

assets/css/src/mailpoet-form-editor.scss

@@ -0,0 +1,24 @@
+// Settings
+// Global variables, config switches. Not producing any CSS.
+@import 'settings/form-editor';
+
+// Generic
+// 3rd-party styles, can be overwritten.
+@import '../../../node_modules/@wordpress/edit-post/build-style/style';
+@import '../../../node_modules/@wordpress/editor/build-style/style';
+@import '../../../node_modules/@wordpress/components/build-style/style';
+@import '../../../node_modules/@wordpress/block-editor/build-style/style';
+@import '../../../node_modules/@wordpress/block-library/build-style/style';
+@import '../../../node_modules/@wordpress/block-library/build-style/theme';
+@import '../../../node_modules/@wordpress/block-library/build-style/editor';
+@import '../../../node_modules/codemirror/lib/codemirror';
+@import '../../../node_modules/codemirror/theme/neo';
+
+// Components
+// Actual UI components.
+@import './components-form-editor/form-title';
+@import './components-form-editor/header';
+@import './components-form-editor/sidebar';
+@import './components-form-editor/preview';
+@import './components-form-editor/block-editor';
+@import './components-form-editor/custom-field';

assets/css/src/mailpoet-plugin.scss

@@ -1,61 +1,50 @@
-@import 'components/mixins';
+// Settings
+// Global variables, config switches. Not producing any CSS.
+@import 'settings/grid';
+@import 'settings/badge';
+@import 'settings/colors';
+@import 'settings/legacy-modal';
+@import 'settings/modal';
+@import 'settings/newsletter';
+@import 'settings/progress';
+
+// Tools
+// Default mixins and functions. Still not producing any CSS.
+@import 'mixins/breakpoints';
+@import 'mixins/clearfix';
+
+// Generic
+// 3rd-party styles, can be overwritten.
 @import '../../../node_modules/select2/dist/css/select2';
-@import '../../../node_modules/spectrum-colorpicker/spectrum';
-@import 'components/automaticEmails';
-@import 'components/datepicker/datepicker';
-@import 'components/dynamicSegments';
-@import 'components/common';
-@import 'components/modal';
-@import 'components/notice';
-@import 'components/listing';
-@import 'components/listing/newsletters';
-@import 'components/box';
-@import 'components/breadcrumb';
-@import 'components/form';
+@import 'components-plugin/3rd-party-plugins/datepicker';
+
+// Components
+// Actual UI components.
 @import 'components/parsley';
-@import 'components/formValidation';
-@import 'components/settings';
-@import 'components/progressBar';
-@import 'components/subscribers';
-@import 'components/pages';
-@import 'components/pagesCustom';
-@import 'components/premiumPage';
-@import 'components/mp2migrator';
-@import 'components/newsletterTemplates';
-@import 'components/welcomeWizard';
-@import 'components/featureAnnouncement';
-@import 'components/newsletterCongratulate.scss';
-@import 'components/discounts';
-@import 'components/reviewRequest';
-@import 'components/stats';
-@import 'components/importExport';
-@import 'components/newsletterEditor/mixins/transitions';
-@import 'components/newsletterEditor/variables';
-@import 'components/newsletterEditor/common';
-@import 'components/newsletterEditor/layout';
-@import 'components/newsletterEditor/components/forms';
-@import 'components/newsletterEditor/components/heading';
-@import 'components/newsletterEditor/components/history';
-@import 'components/newsletterEditor/components/sidebar';
-@import 'components/newsletterEditor/components/sidepanel';
-@import 'components/newsletterEditor/components/save';
-@import 'components/newsletterEditor/components/blockTools';
-@import 'components/newsletterEditor/components/layers';
-@import 'components/newsletterEditor/components/dragAndDrop';
-@import 'components/newsletterEditor/components/resize';
-@import 'components/newsletterEditor/contentBlocks/base';
-@import 'components/newsletterEditor/contentBlocks/container';
-@import 'components/newsletterEditor/contentBlocks/automatedLatestContent';
-@import 'components/newsletterEditor/contentBlocks/posts';
-@import 'components/newsletterEditor/contentBlocks/products';
-@import 'components/newsletterEditor/contentBlocks/button';
-@import 'components/newsletterEditor/contentBlocks/divider';
-@import 'components/newsletterEditor/contentBlocks/image';
-@import 'components/newsletterEditor/contentBlocks/social';
-@import 'components/newsletterEditor/contentBlocks/spacer';
-@import 'components/newsletterEditor/contentBlocks/text';
-@import 'components/newsletterEditor/contentBlocks/header';
-@import 'components/newsletterEditor/contentBlocks/footer';
-@import 'components/newsletterEditor/contentBlocks/woocommerceHeading';
-@import 'components/newsletterEditor/contentBlocks/woocommerceContent';
-@import 'components/newsletterEditor/libraryOverrides';
+@import 'components-plugin/automatic-emails';
+@import 'components-plugin/browser-preview';
+@import 'components-plugin/dynamic-segments';
+@import 'components-plugin/common';
+@import 'components-plugin/legacy-modal';
+@import 'components-plugin/modal';
+@import 'components-plugin/notice';
+@import 'components-plugin/listing';
+@import 'components-plugin/box';
+@import 'components-plugin/breadcrumb';
+@import 'components-plugin/forms';
+@import 'components-plugin/settings';
+@import 'components-plugin/progress-bar';
+@import 'components-plugin/subscribers';
+@import 'components-plugin/pages';
+@import 'components-plugin/pages-custom';
+@import 'components-plugin/premium-page';
+@import 'components-plugin/mp2-migrator';
+@import 'components-plugin/newsletter-templates';
+@import 'components-plugin/welcome-wizard';
+@import 'components-plugin/feature-announcement';
+@import 'components-plugin/newsletter-congratulate';
+@import 'components-plugin/discounts';
+@import 'components-plugin/review-request';
+@import 'components-plugin/stats';
+@import 'components-plugin/import-export';
+@import 'components-plugin/toggle';

assets/css/src/mailpoet-post-editor-block.scss

@@ -0,0 +1,3 @@
+// Components
+// Actual UI components.
+@import 'components-post-editor-block/post-editor-block';

assets/css/src/mailpoet-public.scss

@@ -1,4 +1,9 @@
-@import 'components/mixins';
+// Tools
+// Default mixins and functions. Not producing any CSS.
+@import 'mixins/breakpoints';
+@import 'mixins/clearfix';
+
+// Components
+// Actual UI components.
 @import 'components/parsley';
-@import 'components/formValidation';
-@import 'components/public';
+@import 'components-public/public';

assets/css/src/mixins/_breakpoints.scss

@@ -0,0 +1,11 @@
+@mixin breakpoint-max-width($width) {
+  @media screen and (max-width: $width) {
+    @content;
+  }
+}
+
+@mixin breakpoint-min-width($width) {
+  @media screen and (min-width: $width) {
+    @content;
+  }
+}

assets/css/src/settings/_badge.scss

@@ -0,0 +1,5 @@
+$badge-color-bad: #d54e21;
+$badge-color-excellent: #2993ab;
+$badge-color-good: #f0b849;
+$badge-color-green: #55bd56;
+$badge-color-video-guide: #46b450;

assets/css/src/settings/_colors.scss

@@ -0,0 +1,26 @@
+// General colors
+$color-placeholder-select2: #999; /* default Select2 placeholder color for single dropdown */
+$color-transparent: rgba(#fff, 0);
+$color-white: rgb(255, 255, 255);
+
+
+// Primary (blueish) color
+$color-primary: #0074a2;
+$color-primary-background: #f8f8f8;
+$color-primary-button: #2ea1cd;
+$color-primary-highlight: #1e8cbe;
+$color-primary-inactive: #a4a4a4;
+$color-primary-shadow-inset: #025c80;
+$color-primary-text: #656565;
+
+
+// Newsletter editor colors
+$color-editor-background-column: #7fbbd0;
+$color-editor-background-content: #0078a2;
+
+$color-editor-border-content: #e5e5e5;
+$color-editor-border-structure: #ddd;
+
+$color-editor-warning: #d54e21;
+$color-editor-warning-alternate: #f4c6c8;
+$color-editor-warning-text: $color-white;

assets/css/src/settings/_editor.scss

@@ -0,0 +1,44 @@
+$editor-line-height: 1.6em;
+
+$editor-column-margin: 20px;
+$editor-column-width-one: $grid-editor-width - (2 * $editor-column-margin);
+$editor-column-width-two: $grid-editor-width / 2 - (2 * $editor-column-margin);
+$editor-column-width-two-wider: (($grid-editor-width / 3) - $editor-column-margin) * 2;
+$editor-column-width-three: $grid-editor-width / 3 - (2 * $editor-column-margin);
+
+$editor-divider-background-color: #daebf2;
+$editor-divider-border-color: #adadad;
+$editor-divider-border-color-hover: $color-primary;
+
+$editor-dnd-drag-zindex: 2;
+$editor-dnd-drop-size: 2px;
+$editor-dnd-drop-zindex: 1;
+
+$editor-resize-color: $color-editor-background-content;
+$editor-resize-handle-color: $color-white;
+$editor-resize-handle-zindex: 2;
+
+$editor-sidebar-background: $color-primary-background;
+$editor-sidebar-color: $color-primary-text;
+$editor-sidebar-font-size: 13px;
+$editor-sidebar-width: 330px;
+
+$editor-social-icon-background-color: #daebf2;
+$editor-social-icon-border-color: #adadad;
+$editor-social-icon-border-color-hover: $color-primary;
+$editor-social-icon-width: 32px;
+
+$editor-tool-size: 14px;
+$editor-tool-size-with-padding: 24px;
+$editor-tool-column-size: 15px;
+$editor-tool-column-size-with-padding: 27px;
+$editor-tool-social-color: #333;
+$editor-tool-social-hover: #bbb;
+$editor-tool-social-width: 16px;
+
+$editor-widget-icon-color-hover: $color-primary;
+$editor-widget-icon-color: darken($color-primary-background, 31.5%);
+$editor-widget-icon-size: 30px;
+$editor-widget-shadow-color: darken($color-primary-background, 13%);
+$editor-widget-size: 70px;
+

assets/css/src/settings/_form-editor.scss

@@ -0,0 +1,11 @@
+$gutenberg-control-border-color: #7e8993;
+$gutenberg-control-active-color: #ff5301;
+$gutenberg-control-border-color-focus: #007cba;
+$form-placement-option-base-color: #e5e9f8;
+$form-placement-option-text-color: #23282d;
+$form-placement-option-oval: #dcdcdc;
+$form-placement-option-oval-border: #969ca1;
+$form-placement-option-height: 142px;
+$form-placement-option-width: 116px;
+$form-placement-option-border: 1px;
+$form-placement-option-active-border: 2px;

assets/css/src/settings/_grid.scss

@@ -0,0 +1 @@
+$grid-editor-width: 660px;