Add default inputs style settings

[MAILPOET-2599]

assets/js/src/form_editor/blocks/custom_text/custom_text.jsx

@@ -1,5 +1,6 @@
 import Icon from './icon.jsx';
 import Edit from './edit.jsx';
+import { defaultBlockStyles } from '../../store/form_body_to_blocks.jsx';
 
 export const name = 'mailpoet-form/custom-text';
 
@@ -30,6 +31,10 @@ export function getSettings(customField) {
         type: 'string',
         default: customField.id,
       },
+      styles: {
+        type: 'object',
+        default: defaultBlockStyles,
+      },
     },
     supports: {
       html: false,

assets/js/src/form_editor/blocks/custom_text/edit.jsx

@@ -14,7 +14,7 @@ import ParagraphEdit from '../paragraph_edit.jsx';
 import CustomFieldSettings from './custom_field_settings.jsx';
 import formatLabel from '../label_formatter.jsx';
 import mapCustomFieldFormData from '../map_custom_field_form_data.jsx';
-import InputStylesSettings from '../input_styles_settings.jsx';
+import { InputStylesSettings, inputStylesPropTypes } from '../input_styles_settings.jsx';
 
 const CustomTextEdit = ({ attributes, setAttributes, clientId }) => {
   const isSaving = useSelect(
@@ -78,7 +78,10 @@ const CustomTextEdit = ({ attributes, setAttributes, clientId }) => {
           />
         </PanelBody>
       </Panel>
-      <InputStylesSettings />
+      <InputStylesSettings
+        styles={attributes.styles}
+        onChange={(styles) => (setAttributes({ styles }))}
+      />
     </InspectorControls>
   );
 
@@ -113,6 +116,7 @@ CustomTextEdit.propTypes = {
     labelWithinInput: PropTypes.bool.isRequired,
     mandatory: PropTypes.bool.isRequired,
     customFieldId: PropTypes.number.isRequired,
+    styles: inputStylesPropTypes.isRequired,
   }).isRequired,
   setAttributes: PropTypes.func.isRequired,
   clientId: PropTypes.string.isRequired,

assets/js/src/form_editor/blocks/custom_textarea/custom_textarea.jsx

@@ -1,5 +1,6 @@
 import Icon from '../custom_text/icon.jsx';
 import Edit from './edit.jsx';
+import { defaultBlockStyles } from '../../store/form_body_to_blocks.jsx';
 
 export const name = 'mailpoet-form/custom-textarea';
 
@@ -34,6 +35,10 @@ export function getSettings(customField) {
         type: 'string',
         default: customField.id,
       },
+      styles: {
+        type: 'object',
+        default: defaultBlockStyles,
+      },
     },
     supports: {
       html: false,

assets/js/src/form_editor/blocks/custom_textarea/edit.jsx

@@ -14,7 +14,7 @@ import ParagraphEdit from '../paragraph_edit.jsx';
 import CustomFieldSettings from '../custom_text/custom_field_settings.jsx';
 import formatLabel from '../label_formatter.jsx';
 import mapCustomFieldFormData from '../map_custom_field_form_data.jsx';
-import InputStylesSettings from '../input_styles_settings.jsx';
+import { InputStylesSettings, inputStylesPropTypes } from '../input_styles_settings.jsx';
 
 const CustomTextAreaEdit = ({ attributes, setAttributes, clientId }) => {
   const isSaving = useSelect(
@@ -100,7 +100,10 @@ const CustomTextAreaEdit = ({ attributes, setAttributes, clientId }) => {
           />
         </PanelBody>
       </Panel>
-      <InputStylesSettings />
+      <InputStylesSettings
+        styles={attributes.styles}
+        onChange={(styles) => (setAttributes({ styles }))}
+      />
     </InspectorControls>
   );
 
@@ -140,6 +143,7 @@ CustomTextAreaEdit.propTypes = {
     labelWithinInput: PropTypes.bool.isRequired,
     mandatory: PropTypes.bool.isRequired,
     lines: PropTypes.string,
+    styles: inputStylesPropTypes.isRequired,
   }).isRequired,
   setAttributes: PropTypes.func.isRequired,
   clientId: PropTypes.string.isRequired,

assets/js/src/form_editor/blocks/email/edit.jsx

@@ -10,7 +10,7 @@ import PropTypes from 'prop-types';
 import MailPoet from 'mailpoet';
 
 import ParagraphEdit from '../paragraph_edit.jsx';
-import InputStylesSettings from '../input_styles_settings.jsx';
+import { InputStylesSettings, inputStylesPropTypes } from '../input_styles_settings.jsx';
 
 const EmailEdit = ({ attributes, setAttributes }) => {
   const inspectorControls = (
@@ -30,7 +30,10 @@ const EmailEdit = ({ attributes, setAttributes }) => {
           />
         </PanelBody>
       </Panel>
-      <InputStylesSettings />
+      <InputStylesSettings
+        styles={attributes.styles}
+        onChange={(styles) => (setAttributes({ styles }))}
+      />
     </InspectorControls>
   );
 
@@ -62,6 +65,7 @@ EmailEdit.propTypes = {
   attributes: PropTypes.shape({
     label: PropTypes.string.isRequired,
     labelWithinInput: PropTypes.bool.isRequired,
+    styles: inputStylesPropTypes.isRequired,
   }).isRequired,
   setAttributes: PropTypes.func.isRequired,
 };

assets/js/src/form_editor/blocks/email/email.jsx

@@ -1,6 +1,7 @@
 import MailPoet from 'mailpoet';
 import edit from './edit.jsx';
 import icon from './icon.jsx';
+import { defaultBlockStyles } from '../../store/form_body_to_blocks.jsx';
 
 export const name = 'mailpoet-form/email-input';
 
@@ -18,6 +19,10 @@ export const settings = {
       type: 'boolean',
       default: true,
     },
+    styles: {
+      type: 'object',
+      default: defaultBlockStyles,
+    },
   },
   supports: {
     html: false,

assets/js/src/form_editor/blocks/first_name/edit.jsx

@@ -11,7 +11,7 @@ import MailPoet from 'mailpoet';
 
 import ParagraphEdit from '../paragraph_edit.jsx';
 import formatLabel from '../label_formatter.jsx';
-import InputStylesSettings from '../input_styles_settings.jsx';
+import { InputStylesSettings, inputStylesPropTypes } from '../input_styles_settings.jsx';
 
 const FirstNameEdit = ({ attributes, setAttributes }) => {
   const inspectorControls = (
@@ -36,7 +36,10 @@ const FirstNameEdit = ({ attributes, setAttributes }) => {
           />
         </PanelBody>
       </Panel>
-      <InputStylesSettings />
+      <InputStylesSettings
+        styles={attributes.styles}
+        onChange={(styles) => (setAttributes({ styles }))}
+      />
     </InspectorControls>
   );
 
@@ -69,6 +72,7 @@ FirstNameEdit.propTypes = {
     label: PropTypes.string.isRequired,
     labelWithinInput: PropTypes.bool.isRequired,
     mandatory: PropTypes.bool.isRequired,
+    styles: inputStylesPropTypes.isRequired,
   }).isRequired,
   setAttributes: PropTypes.func.isRequired,
 };

assets/js/src/form_editor/blocks/first_name/first_name.jsx

@@ -1,6 +1,7 @@
 import MailPoet from 'mailpoet';
 import icon from './icon.jsx';
 import edit from './edit.jsx';
+import { defaultBlockStyles } from '../../store/form_body_to_blocks.jsx';
 
 export const name = 'mailpoet-form/first-name-input';
 
@@ -22,6 +23,10 @@ export const settings = {
       type: 'boolean',
       default: false,
     },
+    styles: {
+      type: 'object',
+      default: defaultBlockStyles,
+    },
   },
   supports: {
     html: false,

assets/js/src/form_editor/blocks/input_styles_settings.jsx

@@ -1,16 +1,61 @@
-import React from 'react';
+import React, { useState } from 'react';
 import MailPoet from 'mailpoet';
 import {
   Panel,
   PanelBody,
+  ToggleControl,
 } from '@wordpress/components';
+import { partial } from 'underscore';
+import PropTypes from 'prop-types';
 
-const InputStylesSettings = () => (
+const InputStylesSettings = ({
+  styles,
+  onChange,
+}) => {
+  const [localStyles, setStyles] = useState(styles);
+
+  const updateStyles = (property, value) => {
+    const updated = { ...localStyles };
+    updated[property] = value;
+    onChange(updated);
+    setStyles(updated);
+  };
+  return (
     <Panel>
       <PanelBody title={MailPoet.I18n.t('formSettingsStyles')} initialOpen={false}>
-      TODO: styles settings
+        <ToggleControl
+          label={MailPoet.I18n.t('formSettingsDisplayFullWidth')}
+          checked={localStyles.fullWidth}
+          onChange={partial(updateStyles, 'fullWidth')}
+        />
+        <ToggleControl
+          label={MailPoet.I18n.t('formSettingsInheritStyleFromTheme')}
+          checked={localStyles.inheritFromTheme}
+          onChange={partial(updateStyles, 'inheritFromTheme')}
+        />
+        {!localStyles.inheritFromTheme ? (
+          <>
+            <ToggleControl
+              label={MailPoet.I18n.t('formSettingsBold')}
+              checked={localStyles.bold || false}
+              onChange={partial(updateStyles, 'bold')}
+            />
+          </>
+        ) : null}
       </PanelBody>
     </Panel>
-);
+  );
+};
 
-export default InputStylesSettings;
+export const inputStylesPropTypes = PropTypes.shape({
+  fullWidth: PropTypes.bool.isRequired,
+  inheritFromTheme: PropTypes.bool.isRequired,
+  bold: PropTypes.bool,
+});
+
+InputStylesSettings.propTypes = {
+  styles: inputStylesPropTypes.isRequired,
+  onChange: PropTypes.func.isRequired,
+};
+
+export { InputStylesSettings };

assets/js/src/form_editor/blocks/last_name/edit.jsx

@@ -11,7 +11,7 @@ import MailPoet from 'mailpoet';
 
 import ParagraphEdit from '../paragraph_edit.jsx';
 import formatLabel from '../label_formatter.jsx';
-import InputStylesSettings from '../input_styles_settings.jsx';
+import { InputStylesSettings, inputStylesPropTypes } from '../input_styles_settings.jsx';
 
 const LastNameEdit = ({ attributes, setAttributes }) => {
   const inspectorControls = (
@@ -36,7 +36,10 @@ const LastNameEdit = ({ attributes, setAttributes }) => {
           />
         </PanelBody>
       </Panel>
-      <InputStylesSettings />
+      <InputStylesSettings
+        styles={attributes.styles}
+        onChange={(styles) => (setAttributes({ styles }))}
+      />
     </InspectorControls>
   );
 
@@ -69,6 +72,7 @@ LastNameEdit.propTypes = {
     label: PropTypes.string.isRequired,
     labelWithinInput: PropTypes.bool.isRequired,
     mandatory: PropTypes.bool.isRequired,
+    styles: inputStylesPropTypes.isRequired,
   }).isRequired,
   setAttributes: PropTypes.func.isRequired,
 };

assets/js/src/form_editor/blocks/last_name/last_name.jsx

@@ -1,6 +1,7 @@
 import MailPoet from 'mailpoet';
 import icon from './icon.jsx';
 import edit from './edit.jsx';
+import { defaultBlockStyles } from '../../store/form_body_to_blocks.jsx';
 
 export const name = 'mailpoet-form/last-name-input';
 
@@ -22,6 +23,10 @@ export const settings = {
       type: 'boolean',
       default: true,
     },
+    styles: {
+      type: 'object',
+      default: defaultBlockStyles,
+    },
   },
   supports: {
     html: false,

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

@@ -4,6 +4,16 @@ import formatCustomFieldBlockName from '../blocks/format_custom_field_block_name
 
 const generateId = () => (`${Math.random().toString()}-${Date.now()}`);
 
+export const defaultBlockStyles = {
+  fullWidth: true,
+  inheritFromTheme: true,
+};
+
+const backwardCompatibleBlockStyles = {
+  fullWidth: false,
+  inheritFromTheme: true,
+};
+
 export const customFieldValuesToBlockValues = (values) => values.map((value) => {
   const mappedValue = {
     name: value.value,
@@ -55,6 +65,10 @@ const mapCustomField = (item, customFields, mappedCommonProperties) => {
       mapped.attributes.values = customFieldValuesToBlockValues(item.params.values);
     }
   }
+
+  if (customField.type === 'text' || customField.type === 'textarea') {
+    mapped.attributes.styles = backwardCompatibleBlockStyles;
+  }
   return mapped;
 };
 
@@ -153,6 +167,7 @@ export const formBodyToBlocksFactory = (colorDefinitions, customFields = []) =>
           return {
             ...mapped,
             name: 'mailpoet-form/email-input',
+            styles: backwardCompatibleBlockStyles,
           };
         case 'heading':
           if (item.params && has(item.params, 'level')) {
@@ -177,11 +192,13 @@ export const formBodyToBlocksFactory = (colorDefinitions, customFields = []) =>
           return {
             ...mapped,
             name: 'mailpoet-form/first-name-input',
+            styles: backwardCompatibleBlockStyles,
           };
         case 'last_name':
           return {
             ...mapped,
             name: 'mailpoet-form/last-name-input',
+            styles: backwardCompatibleBlockStyles,
           };
         case 'segments':
           if (

tests/javascript/form_editor/store/form_body_to_blocks.spec.js

@@ -8,6 +8,7 @@ import {
   segmentsInput,
   submitInput,
   customTextInput,
+  customTextareaInput,
   customRadioInput,
   customSelectInput,
   customCheckboxInput,
@@ -64,6 +65,51 @@ describe('Form Body To Blocks', () => {
     expect(block.attributes.labelWithinInput).to.be.equal(false);
   });
 
+  it('Should add default styles to input blocks', () => {
+    const customFieldText = {
+      created_at: '2019-12-10T15:05:06+00:00',
+      id: 1,
+      name: 'Custom Field name',
+      params: {
+        label: 'Street name',
+        required: '1',
+        validate: '',
+      },
+      type: 'text',
+      updated_at: '2019-12-10T15:05:06+00:00',
+    };
+    const customFieldTextarea = {
+      created_at: '2019-12-10T15:05:06+00:00',
+      id: 2,
+      name: 'Custom Field 2 name',
+      params: {
+        label: 'Description',
+        required: '1',
+        validate: '',
+        lines: '3',
+      },
+      type: 'textarea',
+      updated_at: '2019-12-10T15:05:06+00:00',
+    };
+
+    const [email, firstName, lastName, customText, customTextArea] = formBodyToBlocks([
+      { ...emailInput, position: '1' },
+      { ...firstNameInput, position: '2' },
+      { ...lastNameInput, position: '3' },
+      { ...customTextInput, position: '4' },
+      { ...customTextareaInput, position: '5', id: 2 },
+    ], [customFieldText, customFieldTextarea]);
+    const defaultStyles = {
+      fullWidth: false,
+      inheritFromTheme: true,
+    };
+    expect(email.attributes.styles).to.eql(defaultStyles);
+    expect(firstName.attributes.styles).to.eql(defaultStyles);
+    expect(lastName.attributes.styles).to.eql(defaultStyles);
+    expect(customText.attributes.styles).to.eql(defaultStyles);
+    expect(customTextArea.attributes.styles).to.eql(defaultStyles);
+  });
+
   it('Should map email with label within correctly', () => {
     const email = { ...emailInput };
     email.params.label_within = '1';

tests/javascript/form_editor/store/form_to_block_test_data.js

@@ -82,6 +82,20 @@ export const customTextInput = {
   },
   position: null,
 };
+export const customTextareaInput = {
+  type: 'textarea',
+  name: 'Description',
+  id: '1',
+  unique: '1',
+  static: '0',
+  params: {
+    required: '',
+    label: 'Name of the street',
+    label_within: '1',
+    lines: '3',
+  },
+  position: null,
+};
 export const customRadioInput = {
   type: 'radio',
   name: 'Options',

views/form/editor.html

@@ -46,6 +46,9 @@
   'formSettingsStylesFontSize': __('Font Size'),
   'formSettingsStylesFontColor': __('Font Color'),
   'formSettingsStylesFontColorInherit': __('Inherit from theme'),
+  'formSettingsInheritStyleFromTheme': __('Inherit style from theme'),
+  'formSettingsDisplayFullWidth': _x('Display Fullwidth', 'A label for checkbox in form style settings'),
+  'formSettingsBold': _x('Bold', 'A label for checkbox in form style settings'),
   'customFieldSettings': _x('Custom field settings', 'A settings section heading'),
   'customFieldsFormSettings': _x('Form settings', 'A settings section heading'),
   'formPlacement': _x('Form Placement', 'A settings section heading'),