diff --git a/assets/js/src/form_editor/blocks/submit/edit.jsx b/assets/js/src/form_editor/blocks/submit/edit.jsx index 679bf1d622..9629c40ddf 100644 --- a/assets/js/src/form_editor/blocks/submit/edit.jsx +++ b/assets/js/src/form_editor/blocks/submit/edit.jsx @@ -9,6 +9,7 @@ import PropTypes from 'prop-types'; import MailPoet from 'mailpoet'; import ParagraphEdit from '../paragraph_edit.jsx'; +import StylesSettings from './styles_settings'; const SubmitEdit = ({ attributes, setAttributes }) => { const inspectorControls = ( @@ -23,7 +24,7 @@ const SubmitEdit = ({ attributes, setAttributes }) => { /> - + setAttributes({ styles })} styles={attributes.styles} /> ); @@ -44,6 +45,11 @@ SubmitEdit.propTypes = { attributes: PropTypes.shape({ label: PropTypes.string.isRequired, className: PropTypes.string, + styles: PropTypes.shape({ + fullWidth: PropTypes.bool.isRequired, + inheritFromTheme: PropTypes.bool.isRequired, + bold: PropTypes.bool, + }), }).isRequired, setAttributes: PropTypes.func.isRequired, }; diff --git a/assets/js/src/form_editor/store/blocks_to_form_body.jsx b/assets/js/src/form_editor/store/blocks_to_form_body.jsx index 7ca4daca9a..830fb5a29d 100644 --- a/assets/js/src/form_editor/store/blocks_to_form_body.jsx +++ b/assets/js/src/form_editor/store/blocks_to_form_body.jsx @@ -260,6 +260,7 @@ export const blocksToFormBodyFactory = (colorDefinitions, fontSizeDefinitions, c id: 'submit', type: 'submit', name: 'Submit', + styles: mapBlockStyles(block.attributes.styles), }; case 'mailpoet-form/divider': return { diff --git a/assets/js/src/form_editor/store/form_body_to_blocks.jsx b/assets/js/src/form_editor/store/form_body_to_blocks.jsx index f903b6444e..5c6afb485b 100644 --- a/assets/js/src/form_editor/store/form_body_to_blocks.jsx +++ b/assets/js/src/form_editor/store/form_body_to_blocks.jsx @@ -308,6 +308,10 @@ export const formBodyToBlocksFactory = ( return { ...mapped, name: 'mailpoet-form/submit-button', + attributes: { + ...mapped.attributes, + styles: mapBlockStyles(item.styles), + }, }; case 'divider': delete mapped.attributes.label; @@ -316,7 +320,6 @@ export const formBodyToBlocksFactory = ( name: 'mailpoet-form/divider', }; case 'html': - delete mapped.attributes.label; return { ...mapped, name: 'mailpoet-form/html', diff --git a/tests/javascript/form_editor/store/block_to_form_test_data.js b/tests/javascript/form_editor/store/block_to_form_test_data.js index 38e92efdff..17d4456a7b 100644 --- a/tests/javascript/form_editor/store/block_to_form_test_data.js +++ b/tests/javascript/form_editor/store/block_to_form_test_data.js @@ -20,6 +20,10 @@ export const submitBlock = { name: 'mailpoet-form/submit-button', attributes: { label: 'Subscribe!', + styles: { + fullWidth: false, + inheritFromTheme: true, + }, }, }; diff --git a/tests/javascript/form_editor/store/blocks_to_form_body.spec.js b/tests/javascript/form_editor/store/blocks_to_form_body.spec.js index a23788b3cb..42715333bb 100644 --- a/tests/javascript/form_editor/store/blocks_to_form_body.spec.js +++ b/tests/javascript/form_editor/store/blocks_to_form_body.spec.js @@ -174,6 +174,9 @@ describe('Blocks to Form Body', () => { expect(input.name).to.be.equal('Submit'); expect(input.type).to.be.equal('submit'); expect(input.params.label).to.be.equal('Subscribe!'); + expect(input.styles).to.deep.equal({ + full_width: '0', + }); }); it('Should map divider block to input data', () => { diff --git a/tests/javascript/form_editor/store/form_body_to_blocks.spec.js b/tests/javascript/form_editor/store/form_body_to_blocks.spec.js index cb6ff1f643..bf0f536a4b 100644 --- a/tests/javascript/form_editor/store/form_body_to_blocks.spec.js +++ b/tests/javascript/form_editor/store/form_body_to_blocks.spec.js @@ -97,18 +97,18 @@ describe('Form Body To Blocks', () => { type: 'textarea', updated_at: '2019-12-10T15:05:06+00:00', }; - const map = formBodyToBlocksFactory( colorDefinitions, [], [customFieldText, customFieldTextarea] ); - const [email, firstName, lastName, customText, customTextArea] = map([ + const [email, firstName, lastName, customText, customTextArea, submit] = map([ { ...emailInput, position: '1' }, { ...firstNameInput, position: '2' }, { ...lastNameInput, position: '3' }, { ...customTextInput, position: '4' }, { ...customTextareaInput, position: '5', id: 2 }, + { ...submitInput, position: '6' }, ]); const defaultStyles = { fullWidth: false, @@ -119,6 +119,7 @@ describe('Form Body To Blocks', () => { expect(lastName.attributes.styles).to.eql(defaultStyles); expect(customText.attributes.styles).to.eql(defaultStyles); expect(customTextArea.attributes.styles).to.eql(defaultStyles); + expect(submit.attributes.styles).to.eql(defaultStyles); }); it('Should map input block styles', () => {