Prevent removing email or submit block from blocks data

[MAILPOET-2620]

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

@@ -40,7 +40,7 @@ export default () => {
     'is-sidebar-opened': sidebarOpened,
   });
 
-  const { changeFormBlocks } = useDispatch('mailpoet-form-editor');
+  const { blocksChangedInBlockEditor } = useDispatch('mailpoet-form-editor');
 
   return (
     <div className={layoutClass}>
@@ -49,8 +49,8 @@ export default () => {
         <DropZoneProvider>
           <BlockEditorProvider
             value={select('mailpoet-form-editor').getFormBlocks()}
-            onInput={changeFormBlocks}
+            onInput={blocksChangedInBlockEditor}
-            onChange={changeFormBlocks}
+            onChange={blocksChangedInBlockEditor}
             settings={editorSettings}
             useSubRegistry={false}
           >

assets/js/src/form_editor/store/actions.jsx

@@ -143,3 +143,10 @@ export function* deleteCustomField(customFieldId, clientId) {
     clientId,
   };
 }
+
+export function* blocksChangedInBlockEditor(blocks) {
+  yield {
+    type: 'BLOCKS_CHANGED_IN_BLOCK_EDITOR',
+    blocks,
+  };
+}

assets/js/src/form_editor/store/controls.jsx

@@ -1,7 +1,7 @@
 import { select, dispatch } from '@wordpress/data';
 import MailPoet from 'mailpoet';
 import { merge } from 'lodash';
-import { unregisterBlockType } from '@wordpress/blocks';
+import { unregisterBlockType, createBlock } from '@wordpress/blocks';
 import blocksToFormBody from './blocks_to_form_body.jsx';
 import formatCustomFieldBlockName from '../blocks/format_custom_field_block_name.jsx';
 import getCustomFieldBlockSettings from '../blocks/custom_fields_blocks.jsx';
@@ -93,4 +93,38 @@ export default {
         dispatch('mailpoet-form-editor').deleteCustomFieldFailed(errorMessage);
       });
   },
+
+  /**
+   * We want to ensure that email input and submit are always present.
+   * @param actionData {{type: string, blocks: Object[]}} blocks property contains editor blocks
+   */
+  BLOCKS_CHANGED_IN_BLOCK_EDITOR(actionData) {
+    const newBlocks = actionData.blocks;
+    // Check if both required inputs are present
+    const emailInput = newBlocks.find((block) => block.name === 'mailpoet-form/email-input');
+    const submitInput = newBlocks.find((block) => block.name === 'mailpoet-form/submit-button');
+    if (emailInput && submitInput) {
+      dispatch('mailpoet-form-editor').changeFormBlocks(newBlocks);
+      return;
+    }
+
+    // In case that some of them is missing we restore it from previous state or insert new one
+    const currentBlocks = select('mailpoet-form-editor').getFormBlocks();
+    const fixedBlocks = [...newBlocks];
+    if (!emailInput) {
+      let currentEmailInput = currentBlocks.find((block) => block.name === 'mailpoet-form/email-input');
+      if (!currentEmailInput) {
+        currentEmailInput = createBlock('mailpoet-form/email-input');
+      }
+      fixedBlocks.unshift(currentEmailInput);
+    }
+    if (!submitInput) {
+      let currentSubmit = currentBlocks.find((block) => block.name === 'mailpoet-form/submit-button');
+      if (!currentSubmit) {
+        currentSubmit = createBlock('mailpoet-form/submit-button');
+      }
+      fixedBlocks.push(currentSubmit);
+    }
+    dispatch('core/block-editor').resetBlocks(fixedBlocks);
+  },
 };