Add color to divider

[MAILPOET-2835]

assets/js/src/form_editor/blocks/divider/edit.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import classnames from 'classnames';
 import MailPoet from 'mailpoet';
 import { InspectorControls } from '@wordpress/block-editor';
+import ColorSettings from 'form_editor/components/color_settings';
 import {
   Panel,
   PanelBody,
@@ -50,6 +51,11 @@ const DividerEdit = ({ attributes, setAttributes }: Props) => {
         allowReset
         onChange={(dividerWidth) => (setAttributes({ dividerWidth }))}
       />
+      <ColorSettings
+        name={MailPoet.I18n.t('blockDividerColor')}
+        value={attributes.color}
+        onChange={(color) => (setAttributes({ color }))}
+      />
     </>
   );
 
@@ -57,6 +63,7 @@ const DividerEdit = ({ attributes, setAttributes }: Props) => {
   if (attributes.type === Types.Divider) {
     dividerStyles.borderTopStyle = attributes.style;
     dividerStyles.borderTopWidth = attributes.dividerHeight;
+    dividerStyles.borderTopColor = attributes.color;
     dividerStyles.height = attributes.dividerHeight;
     dividerStyles.width = `${attributes.dividerWidth}%`;
   }

views/form/editor.html

@@ -167,6 +167,7 @@
   'blockDividerStyleDotted': _x('Dotted', 'Setting in the divider block'),
   'blockDividerDividerHeight': _x('Divider Height', 'Settings in the divider block'),
   'blockDividerDividerWidth': _x('Divider Width', 'Settings in the divider block'),
+  'blockDividerColor': _x('Color', 'Settings in the divider block'),
   'formPreviewDesktop': _x('Desktop', 'Desktop browser preview mode'),
   'formPreviewMobile': _x('Mobile', 'Mobile browser preview mode'),
   'formPreviewOthersDisclaimer': __('Psssst. We try our best to show you what the widget might look like, but better check the final result on your website.'),