Display texts using selected colour

[MAILPOET-2600]

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

@@ -10,10 +10,18 @@ import { InspectorControls } from '@wordpress/block-editor';
 import PropTypes from 'prop-types';
 import MailPoet from 'mailpoet';
 import { debounce } from 'lodash';
+import { useSelect } from '@wordpress/data';
 
 import ParagraphEdit from '../paragraph_edit.jsx';
 
 const CustomHtmlEdit = ({ attributes, setAttributes }) => {
+  const fontColor = useSelect(
+    (select) => {
+      const settings = select('mailpoet-form-editor').getFormSettings();
+      return settings.fontColor;
+    },
+    []
+  );
   const [renderedContent, setRenderedContent] = useState(attributes.content);
   const setRenderedContentDebounced = useCallback(debounce((content) => {
     setRenderedContent(content);
@@ -46,6 +54,7 @@ const CustomHtmlEdit = ({ attributes, setAttributes }) => {
     </InspectorControls>
   );
   const styles = attributes.nl2br ? ['body { white-space: pre-line; }'] : [];
+  styles.push(` body {color: ${fontColor} `);
   const key = `${renderedContent}_${styles}`;
   return (
     <ParagraphEdit>

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

@@ -3,15 +3,18 @@ import PropTypes from 'prop-types';
 import { useSelect } from '@wordpress/data';
 
 const FormBackground = ({ children }) => {
-  const backgroundColor = useSelect(
+  const { fontColor, backgroundColor } = useSelect(
     (select) => {
       const settings = select('mailpoet-form-editor').getFormSettings();
-      return settings.backgroundColor;
+      return {
+        backgroundColor: settings.backgroundColor,
+        fontColor: settings.fontColor,
+      };
     },
     []
   );
   return (
-    <div style={{ backgroundColor }}>
+    <div style={{ backgroundColor, color: fontColor }}>
       {children}
     </div>
   );

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

@@ -0,0 +1,24 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { useSelect } from '@wordpress/data';
+
+const FormTextColor = ({ children }) => {
+  const fontColor = useSelect(
+    (select) => {
+      const settings = select('mailpoet-form-editor').getFormSettings();
+      return settings.fontColor;
+    },
+    []
+  );
+  return (
+    <div style={{ color: fontColor }}>
+      {children}
+    </div>
+  );
+};
+
+FormTextColor.propTypes = {
+  children: PropTypes.node.isRequired,
+};
+
+export default FormTextColor;