Add style settings to button inspector control and store them

[MAILPOET-2604]

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 }) => {
           />
         </PanelBody>
       </Panel>
-
+      <StylesSettings onChange={(styles) => setAttributes({ styles })} styles={attributes.styles} />
     </InspectorControls>
   );
 
@@ -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,
 };

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 {

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',

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

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', () => {

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', () => {