Add loading image blocks from server

[MAILPOET-2750]

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

@@ -274,6 +274,25 @@ export const formBodyToBlocksFactory = (
             },
             name: 'core/paragraph',
           };
+        case 'image':
+          return {
+            ...mapped,
+            name: 'core/image',
+            attributes: {
+              className: item.params?.class_name || '',
+              align: item.params?.align,
+              url: item.params?.url,
+              alt: item.params?.alt,
+              title: item.params?.title,
+              caption: item.params?.caption,
+              linkDestination: item.params?.link_destination,
+              link: item.params?.link,
+              id: item.params?.id,
+              sizeSlug: item.params?.size_slug,
+              width: item.params?.width,
+              height: item.params?.height,
+            },
+          };
         case 'first_name':
           return {
             ...mapped,

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

@@ -18,6 +18,7 @@ import {
   nestedColumns,
   headingInput,
   paragraphInput,
+  image,
 } from './form_to_block_test_data.js';
 
 const colorDefinitions = [{
@@ -617,4 +618,20 @@ describe('Form Body To Blocks', () => {
     expect(block.attributes.anchor).to.be.equal('anchor');
     expect(block.attributes.customTextColor).to.be.equal('#f78da7');
   });
+
+  it('It should map image', () => {
+    const [block] = formBodyToBlocks([image]);
+    expect(block.name).to.equal('core/image');
+    expect(block.attributes.className).to.equal('my-class');
+    expect(block.attributes.align).to.equal('center');
+    expect(block.attributes.url).to.equal('http://example.com/image.jpg');
+    expect(block.attributes.alt).to.equal('Alt text');
+    expect(block.attributes.title).to.equal('Title');
+    expect(block.attributes.caption).to.equal('Caption');
+    expect(block.attributes.linkDestination).to.equal('none');
+    expect(block.attributes.id).to.equal(123);
+    expect(block.attributes.sizeSlug).to.equal('medium');
+    expect(block.attributes.width).to.equal(100);
+    expect(block.attributes.height).to.equal(200);
+  });
 });

tests/javascript/form_editor/store/form_to_block_test_data.js

@@ -256,3 +256,22 @@ export const paragraphInput = {
     class_name: 'class name',
   },
 };
+
+export const image = {
+  type: 'image',
+  id: 'image',
+  params: {
+    class_name: 'my-class',
+    align: 'center',
+    url: 'http://example.com/image.jpg',
+    alt: 'Alt text',
+    title: 'Title',
+    caption: 'Caption',
+    link_destination: 'none',
+    link: 'http://example.com',
+    id: 123,
+    size_slug: 'medium',
+    width: 100,
+    height: 200,
+  },
+};