Add custom html block

[MAILPOET-2462]

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

@@ -7,6 +7,7 @@ import * as submit from './submit/submit.jsx';
 import * as firstName from './first_name/first_name.jsx';
 import * as lastName from './last_name/last_name.jsx';
 import * as segmentSelect from './segment_select/segment_select.jsx';
+import * as customHtml from './custom_html/custom_html.jsx';
 
 export default () => {
   setCategories([
@@ -20,4 +21,5 @@ export default () => {
   registerBlockType(firstName.name, firstName.settings);
   registerBlockType(lastName.name, lastName.settings);
   registerBlockType(segmentSelect.name, segmentSelect.settings);
+  registerBlockType(customHtml.name, customHtml.settings);
 };

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

@@ -0,0 +1,27 @@
+import MailPoet from 'mailpoet';
+import icon from './icon.jsx';
+import edit from './edit.jsx';
+
+export const name = 'mailpoet-form/custom-html';
+
+export const settings = {
+  title: MailPoet.I18n.t('blockCustomHtml'),
+  description: MailPoet.I18n.t('blockCustomHtmlDescription'),
+  icon,
+  category: 'fields',
+  attributes: {
+    content: {
+      type: 'string',
+      default: MailPoet.I18n.t('blockCustomHtmlDefault'),
+    },
+  },
+  supports: {
+    html: false,
+    customClassName: false,
+    multiple: true,
+  },
+  edit,
+  save() {
+    return null;
+  },
+};

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

@@ -0,0 +1,45 @@
+import React from 'react';
+import {
+  Panel,
+  PanelBody,
+  TextareaControl,
+} from '@wordpress/components';
+import { InspectorControls } from '@wordpress/block-editor';
+import PropTypes from 'prop-types';
+import MailPoet from 'mailpoet';
+
+const CustomHtmlEdit = ({ attributes, setAttributes }) => {
+  const inspectorControls = (
+    <InspectorControls>
+      <Panel>
+        <PanelBody title={MailPoet.I18n.t('formSettings')} initialOpen>
+          <TextareaControl
+            label={MailPoet.I18n.t('blockCustomHtmlContentLabel')}
+            value={attributes.content}
+            data-automation-id="settings_custom_html_content"
+            rows={4}
+            onChange={(content) => setAttributes({ content })}
+          />
+        </PanelBody>
+      </Panel>
+
+    </InspectorControls>
+  );
+  return (
+    <>
+      {inspectorControls}
+      <div>
+        {attributes.content}
+      </div>
+    </>
+  );
+};
+
+CustomHtmlEdit.propTypes = {
+  attributes: PropTypes.shape({
+    content: PropTypes.string.isRequired,
+  }).isRequired,
+  setAttributes: PropTypes.func.isRequired,
+};
+
+export default CustomHtmlEdit;

assets/js/src/form_editor/blocks/custom_html/icon.jsx

@@ -0,0 +1,8 @@
+import React from 'react';
+import { SVG, Path } from '@wordpress/components';
+
+export default (
+  <SVG viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+    <Path d="M4.5,11h-2V9H1v6h1.5v-2.5h2V15H6V9H4.5V11z M7,10.5h1.5V15H10v-4.5h1.5V9H7V10.5z M14.5,10l-1-1H12v6h1.5v-3.9  l1,1l1-1V15H17V9h-1.5L14.5,10z M19.5,13.5V9H18v6h5v-1.5H19.5z" />
+  </SVG>
+);

views/form/editor.html

@@ -59,7 +59,11 @@
   'missingObligatoryBlock': __('Email input or submit is missing. Try reloading the form editor.'),
   'label': _x('Label', 'settings for a label of an input'),
   'displayLabelWithinInput': __('Display label within input'),
-  'blockDivider': __('Divider')
+  'blockDivider': __('Divider'),
+  'blockCustomHtml' : __('Custom text or HTML'),
+  'blockCustomHtmlDescription': __('Display custom text or HTML code in your form.'),
+  'blockCustomHtmlDefault': __('Subscribe to our newsletter and join [mailpoet_subscribers_count] other subscribers.'),
+  'blockCustomHtmlContentLabel': _x('Custom text', 'Textarea label')
 }) %>
 <% endblock %>