Extracts editor initialization and bundles with admin vendor

Allows displaying custom breadcrumbs based on email type

assets/js/src/newsletter_editor/initializer.jsx

@@ -0,0 +1,75 @@
+import Hooks from 'wp-js-hooks';
+import Breadcrumb from 'newsletters/breadcrumb.jsx';
+import MailPoet from 'mailpoet';
+import React from 'react';
+import ReactDOM from 'react-dom';
+
+const editorContainer = document.getElementById('mailpoet_editor');
+
+const getUrlParam = param => (location.search.split(`${param}=`)[1] || '').split('&')[0];
+
+const renderBreadcrumb = (newsletterType) => {
+  const breadcrumbContainer = document.getElementById('mailpoet_editor_breadcrumb');
+  let breadcrumb = Hooks.applyFilters('mailpoet_newsletters_editor_breadcrumb', newsletterType, 'editor');
+  breadcrumb = (breadcrumb !== newsletterType) ? breadcrumb : <Breadcrumb step="editor" />;
+
+  if (breadcrumbContainer) {
+    ReactDOM.render(breadcrumb, breadcrumbContainer);
+  }
+};
+
+const initializeEditor = (config) => {
+  if (!editorContainer || !window.EditorApplication) return;
+
+  MailPoet.Modal.loading(true);
+
+  MailPoet.Ajax.post({
+    api_version: window.mailpoet_api_version,
+    endpoint: 'newsletters',
+    action: 'get',
+    data: {
+      id: getUrlParam('id'),
+    },
+  })
+  .always(() => MailPoet.Modal.loading(false))
+  .done((response) => {
+    const newsletter = response.data;
+
+    window.EditorApplication.start({
+      newsletter: newsletter,
+      config: config,
+    });
+
+    renderBreadcrumb(newsletter.type);
+
+    if (newsletter.status === 'sending' && newsletter.queue && newsletter.queue.status === null) {
+      MailPoet.Ajax.post({
+        api_version: window.mailpoet_api_version,
+        endpoint: 'sending_queue',
+        action: 'pause',
+        data: {
+          newsletter_id: newsletter.id,
+        },
+      })
+      .done(() => MailPoet.Notice.success(MailPoet.I18n.t('newsletterIsPaused')))
+      .fail((pauseFailResponse) => {
+        if (pauseFailResponse.errors.length > 0) {
+          MailPoet.Notice.error(
+            pauseFailResponse.errors.map(error => error.message),
+            { scroll: true, static: true }
+          );
+        }
+      });
+    }
+  })
+  .fail((response) => {
+    if (response.errors.length > 0) {
+      MailPoet.Notice.error(
+        response.errors.map(error => error.message),
+        { scroll: true, static: true }
+      );
+    }
+  });
+};
+
+Hooks.addAction('mailpoet_newsletters_editor_initialize', initializeEditor);

views/newsletter/editor.html

@@ -226,16 +226,12 @@
 <% block content %>
 <!-- Hidden heading for notices to appear under -->
 <h1 style="display:none"><%= __('Newsletter Editor') %></h1>
-
 <div id="mailpoet_editor">
   <div id="mailpoet_editor_heading"></div>
-    <div class="mailpoet_breadcrumbs">
+  <div id="mailpoet_editor_breadcrumb" class="mailpoet_breadcrumbs"></div>
-      <%= __('Select type') %> &gt; <%= __('Template') %> &gt; <strong><%= __('Designer') %></strong> &gt; <%= __('Send') %>
-    </div>
   <div class="clearfix"></div>
   <div id="mailpoet_editor_main_wrapper">
-      <div id="mailpoet_editor_styles">
+    <div id="mailpoet_editor_styles"></div>
-      </div>
     <div id="mailpoet_editor_content_container">
       <div class="mailpoet_newsletter_wrapper">
         <div id="mailpoet_editor_content"></div>
@@ -244,9 +240,7 @@
     <div id="mailpoet_editor_sidebar"></div>
     <div class="clear"></div>
   </div>
-    <div id="mailpoet_editor_bottom">
+  <div id="mailpoet_editor_bottom"></div>
-    </div>
-  </div>
 
   <div class="mailpoet_layer_overlay" style="display:none;"></div>
 
@@ -317,7 +311,7 @@
       </div>
     </div>
   </form>
-  </div>
+</div>
 <% endblock %>
 
 <% block translations %>
@@ -352,6 +346,13 @@
     'selectColor': _x('Select', 'select color'),
     'cancelColorSelection': _x('Cancel', 'cancel color selection'),
     'newsletterIsPaused': __('Email sending has been paused.'),
+
+    'selectType': __('Select type'),
+    'events': __('Events'),
+    'conditions': _x('Conditions', 'Configuration options for automatic email events'),
+    'template': __('Template'),
+    'designer': __('Designer'),
+    'send': __('Send'),
   }) %>
 <% endblock %>
 
@@ -371,8 +372,6 @@
   ) %>
 
   <script type="text/javascript">
-    MailPoet.Modal.loading(true);
-
     var templates = {
       styles: Handlebars.compile(
         jQuery('#newsletter_editor_template_styles').html()
@@ -1214,48 +1213,6 @@
         ) %>',
       },
     };
-
+    wp.hooks.doAction('mailpoet_newsletters_editor_initialize', config);
-    MailPoet.Ajax.post({
-      api_version: window.mailpoet_api_version,
-      endpoint: 'newsletters',
-      action: 'get',
-      data: {
-        id: "<%= params('id') | intval %>",
-      }
-    }).always(function() {
-      MailPoet.Modal.loading(false);
-    }).done(function(response) {
-      EditorApplication.start({
-        newsletter: response.data,
-        config: config,
-      });
-      var queue = response.data.queue;
-      if (response.data.status == 'sending' && queue && queue.status === null) {
-        MailPoet.Ajax.post({
-          api_version: window.mailpoet_api_version,
-          endpoint: 'sending_queue',
-          action: 'pause',
-          data: {
-            newsletter_id: response.data.id
-          }
-        }).done(function(respose) {
-          MailPoet.Notice.success(MailPoet.I18n.t('newsletterIsPaused'))
-        }).fail(function(response) {
-          if (response.errors.length > 0) {
-            MailPoet.Notice.error(
-              response.errors.map(function(error) { return error.message; }),
-              { scroll: true, static: true }
-            );
-          }
-        });
-      }
-    }).fail(function(response) {
-      if (response.errors.length > 0) {
-        MailPoet.Notice.error(
-          response.errors.map(function(error) { return error.message; }),
-          { scroll: true, static: true }
-        );
-      }
-    });
   </script>
 <% endblock %>

webpack.config.js

@@ -196,6 +196,7 @@ var adminConfig = {
       'newsletters/types/automatic_emails/events_list.jsx',
       'newsletters/types/automatic_emails/breadcrumb.jsx',
       'newsletters/types/welcome/scheduling.jsx',
+      'newsletter_editor/initializer.jsx',
       'history',
     ],
     admin: [