diff --git a/assets/js/src/form_editor/components/editor.jsx b/assets/js/src/form_editor/components/editor.jsx
index ab12d5767b..6f23ca095a 100644
--- a/assets/js/src/form_editor/components/editor.jsx
+++ b/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 (
@@ -49,8 +49,8 @@ export default () => {
diff --git a/assets/js/src/form_editor/store/actions.jsx b/assets/js/src/form_editor/store/actions.jsx
index b8bf70ba64..68f2c377ae 100644
--- a/assets/js/src/form_editor/store/actions.jsx
+++ b/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,
+ };
+}
diff --git a/assets/js/src/form_editor/store/controls.jsx b/assets/js/src/form_editor/store/controls.jsx
index 73fb3d00ea..66d7872099 100644
--- a/assets/js/src/form_editor/store/controls.jsx
+++ b/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);
+ },
};