Add alignment control

[MAILPOET-2809]

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

@@ -3,6 +3,7 @@ import {
   Panel,
   PanelBody,
   RangeControl,
+  SelectControl,
 } from '@wordpress/components';
 import MailPoet from 'mailpoet';
 import PropTypes from 'prop-types';
@@ -79,6 +80,16 @@ const BasicSettingsPanel = ({ onToggle, isOpened }) => {
             value={settings.borderColor}
             onChange={partial(updateStyles, 'borderColor')}
           />
+          <SelectControl
+            label={MailPoet.I18n.t('formSettingsAlignment')}
+            onChange={partial(updateStyles, 'alignment')}
+            options={[
+              { value: 'left', label: MailPoet.I18n.t('formSettingsAlignmentLeft') },
+              { value: 'center', label: MailPoet.I18n.t('formSettingsAlignmentCenter') },
+              { value: 'right', label: MailPoet.I18n.t('formSettingsAlignmentRight') },
+            ]}
+            value={settings.alignment !== undefined ? settings.alignment : 'left'}
+          />
         </div>
       </PanelBody>
     </Panel>

views/form/editor.html

@@ -53,6 +53,10 @@
   'formSettingsBorderSize': _x('Border Size', 'A label for checkbox in form style settings'),
   'formSettingsBorderRadius': _x('Border Radius', 'A label for checkbox in form style settings'),
   'formSettingsInputPadding': _x('Input Padding', 'A label for form style settings'),
+  'formSettingsAlignment': _x('Alignment', 'A label for form style settings'),
+  'formSettingsAlignmentLeft': _x('left', 'An alignment value for form editor'),
+  'formSettingsAlignmentCenter': _x('center', 'An alignment value for form editor'),
+  'formSettingsAlignmentRight': _x('right', 'An alignment value for form editor'),
   'formSettingsBorderColor': _x('Border Color', 'A label for checkbox in form style settings'),
   'formSettingsApplyToAll': __('Apply styles to all inputs'),
   'customFieldSettings': _x('Custom field settings', 'A settings section heading'),