Add static fallback link to old editor

[MAILPOET-2549]

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

@@ -88,6 +88,7 @@ $gutenberg-control-border-color-focus: #007cba;
 }
 
 // Styles for old editor link
-.mailpoet_old_form_editor_link {
+.mailpoet_old_form_editor_link,
+#mailpoet_form_edit_old_editor_fallback_link {
   padding: 16px;
 }

assets/js/src/form_editor/form_editor.jsx

@@ -16,14 +16,20 @@ const App = () => (
 );
 
 const appElement = document.querySelector('#mailpoet_form_edit');
+const oldEditorLinkElement = document.querySelector('#mailpoet_form_edit_old_editor_fallback_link');
 
 if (appElement) {
-  initStore();
-  initBlocks();
-  ReactDOM.render(
-    <React.StrictMode>
-      <App />
-    </React.StrictMode>,
-    appElement
-  );
+  try {
+    oldEditorLinkElement.style.display = 'none';
+    initStore();
+    initBlocks();
+    ReactDOM.render(
+      <React.StrictMode>
+        <App />
+      </React.StrictMode>,
+      appElement
+    );
+  } catch (e) {
+    oldEditorLinkElement.style.display = 'block';
+  }
 }

views/form/editor.html

@@ -10,6 +10,9 @@
 <div class="block-editor">
     <div id="mailpoet_form_edit" class="block-editor__container">
     </div>
+    <div id="mailpoet_form_edit_old_editor_fallback_link">
+      <a href="?page=mailpoet-form-editor&id=<%=form['id']%>&legacy=1"><%=__('Use the old editor.')%></a>
+    </div>
 </div>
 
 <script>