Add link to old editor to the sidebar

[MAILPOET-2549]

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

@@ -86,3 +86,8 @@ $gutenberg-control-border-color-focus: #007cba;
     margin: 8px 0;
   }
 }
+
+// Styles for old editor link
+.mailpoet_old_form_editor_link {
+  padding: 16px;
+}

assets/js/src/form_editor/components/sidebar.jsx

@@ -28,6 +28,9 @@ SidebarHeader.propTypes = {
   ]).isRequired,
 };
 
+const oldEditorUrl = new URL(window.location.href);
+oldEditorUrl.searchParams.set('legacy', 1);
+
 export default () => {
   const activeTab = useSelect(
     (select) => select('mailpoet-form-editor').getSidebarActiveTab(),
@@ -74,6 +77,13 @@ export default () => {
         </ul>
       </SidebarHeader>
       {activeTab === 'form' ? <FormSettings /> : <BlockSettings />}
+      <p className="mailpoet_old_form_editor_link">
+        {MailPoet.I18n.t('editorIsUsingGutenberg')}
+        <br />
+        <a href="mailto:quentin@mailpoet.com">{MailPoet.I18n.t('giveFeedback')}</a>
+        {' '}
+        <a href={oldEditorUrl.toString()}>{MailPoet.I18n.t('useOldEditor')}</a>
+      </p>
     </div>
   );
 };

views/form/editor.html

@@ -108,7 +108,10 @@
   'blockCreateButton': _x('Create', 'Label on form submit button.'),
   'customFieldName': _x('Field name', 'Label for form field for custom input name'),
   'selectCustomFieldType': _x('Select a field type', 'Label for form field for custom input type'),
-  'customFieldWithNameExists': __('The custom field [name] already exists. Please choose another name.')
+  'customFieldWithNameExists': __('The custom field [name] already exists. Please choose another name.'),
+  'editorIsUsingGutenberg': __('This form editor uses the WordPress Block Editor (Gutenberg)'),
+  'giveFeedback': __('Give feedback.'),
+  'useOldEditor': __('Use the old editor.')
 }) %>
 <% endblock %>