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); + }, };