Add Form Styles Panel

[MAILPOET-2600]

assets/js/src/form_editor/components/form_settings/form_settings.jsx

@@ -3,6 +3,7 @@ import React from 'react';
 import { useDispatch, useSelect } from '@wordpress/data';
 import { partial } from 'lodash';
 import BasicSettingsPanel from './basic_settings_panel.jsx';
+import StylesSettingsPanel from './styles_settings_panel.jsx';
 import FormPlacementPanel from './form_placement_panel.jsx';
 import CustomCssPanel from './custom_css_panel.jsx';
 
@@ -19,6 +20,10 @@ export default () => {
         isOpened={openedPanels.includes('basic-settings')}
         onToggle={partial(toggleSidebarPanel, 'basic-settings')}
       />
+      <StylesSettingsPanel
+        isOpened={openedPanels.includes('styles-settings')}
+        onToggle={partial(toggleSidebarPanel, 'styles-settings')}
+      />
       <FormPlacementPanel
         isOpened={openedPanels.includes('form-placement')}
         onToggle={partial(toggleSidebarPanel, 'form-placement')}

assets/js/src/form_editor/components/form_settings/styles_settings_panel.jsx

@@ -0,0 +1,24 @@
+import {
+  Panel,
+  PanelBody,
+} from '@wordpress/components';
+import React from 'react';
+import MailPoet from 'mailpoet';
+import PropTypes from 'prop-types';
+
+const BasicSettingsPanel = ({ onToggle, isOpened }) => {
+  return (
+    <Panel>
+      <PanelBody title={MailPoet.I18n.t('formSettingsStyles')} opened={isOpened} onToggle={onToggle}>
+        Styles
+      </PanelBody>
+    </Panel>
+  );
+};
+
+BasicSettingsPanel.propTypes = {
+  onToggle: PropTypes.func.isRequired,
+  isOpened: PropTypes.bool.isRequired,
+};
+
+export default BasicSettingsPanel;

views/form/editor.html

@@ -34,6 +34,7 @@
   'changesNotSaved': __('Your changes you made may not be saved'),
   'form': __('Form'),
   'formSettings': _x('Settings', 'A settings section heading'),
+  'formSettingsStyles': __('Styles'),
   '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'),