Add automatic nl2br switch to custom html settings

[MAILPOET-2462]

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

@@ -14,6 +14,10 @@ export const settings = {
       type: 'string',
       default: MailPoet.I18n.t('blockCustomHtmlDefault'),
     },
+    nl2br: {
+      type: 'boolean',
+      default: true,
+    },
   },
   supports: {
     html: false,

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

@@ -3,6 +3,7 @@ import {
   Panel,
   PanelBody,
   TextareaControl,
+  ToggleControl,
 } from '@wordpress/components';
 import { InspectorControls } from '@wordpress/block-editor';
 import PropTypes from 'prop-types';
@@ -20,6 +21,11 @@ const CustomHtmlEdit = ({ attributes, setAttributes }) => {
             rows={4}
             onChange={(content) => setAttributes({ content })}
           />
+          <ToggleControl
+            label={MailPoet.I18n.t('blockCustomHtmlNl2br')}
+            checked={attributes.nl2br}
+            onChange={(nl2br) => (setAttributes({ nl2br }))}
+          />
         </PanelBody>
       </Panel>
 

assets/js/src/form_editor/store/blocks_to_form_body.jsx

@@ -92,6 +92,7 @@ export default (blocks) => {
           static: '0',
           params: {
             text: block.attributes && block.attributes.content ? block.attributes.content : '',
+            nl2br: block.attributes && block.attributes.nl2br ? '1' : '0',
           },
         };
       default:

assets/js/src/form_editor/store/form_body_to_blocks.jsx

@@ -75,6 +75,7 @@ export default (data) => {
           name: 'mailpoet-form/custom-html',
           attributes: {
             content: item.params && item.params.text ? item.params.text : '',
+            nl2br: item.params && item.params.nl2br ? !!item.params.nl2br : false,
           },
         };
       default:

tests/javascript/form_editor/store/blocks_to_form_body.spec.js

@@ -74,6 +74,7 @@ const customHtmlBlock = {
   name: 'mailpoet-form/custom-html',
   attributes: {
     content: 'HTML content',
+    nl2br: true,
   },
 };
 
@@ -222,6 +223,7 @@ describe('Blocks to Form Body', () => {
     expect(html.unique).to.be.equal('0');
     expect(html.static).to.be.equal('0');
     expect(html.params.text).to.be.equal('HTML content');
+    expect(html.params.nl2br).to.be.equal('1');
   });
 
   it('Should map multiple blocks at once', () => {

tests/javascript/form_editor/store/form_body_to_blocks.spec.js

@@ -90,6 +90,7 @@ const customHtml = {
   static: '0',
   params: {
     text: 'test',
+    nl2br: '1',
   },
   position: null,
 };
@@ -210,17 +211,19 @@ describe('Form Body To Blocks', () => {
 
   it('Should map custom html to blocks', () => {
     const [block1, block2] = formBodyToBlocks([
-      { ...customHtml, position: '1', params: { text: '123' } },
+      { ...customHtml, position: '1', params: { text: '123', nl2br: '1' } },
       { ...customHtml, position: '2', params: { text: 'nice one' } },
     ]);
     checkBlockBasics(block1);
     expect(block1.clientId).to.be.equal('html_0');
     expect(block1.name).to.be.equal('mailpoet-form/custom-html');
     expect(block1.attributes.content).to.be.equal('123');
+    expect(block1.attributes.nl2br).to.be.true;
     checkBlockBasics(block2);
     expect(block2.clientId).to.be.equal('html_1');
     expect(block2.name).to.be.equal('mailpoet-form/custom-html');
     expect(block2.attributes.content).to.be.equal('nice one');
+    expect(block2.attributes.nl2br).to.be.false;
   });
 
   it('Should ignore unknown input type', () => {

views/form/editor.html

@@ -63,7 +63,8 @@
   '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')
+  'blockCustomHtmlContentLabel': _x('Custom text', 'Textarea label'),
+  'blockCustomHtmlNl2br': __('Automatically add paragraphs')
 }) %>
 <% endblock %>