Add support for image block link

[MAILPOET-2750]

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

@@ -203,6 +203,10 @@ export const blocksToFormBodyFactory = (colorDefinitions, fontSizeDefinitions, c
               caption: block.attributes.caption || null,
               link_destination: block.attributes.linkDestination || null,
               link: block.attributes.link || null,
+              href: block.attributes.href || null,
+              link_class: block.attributes.linkClass || null,
+              rel: block.attributes.rel || null,
+              link_target: block.attributes.linkTarget || null,
               id: block.attributes.id || null, // Image id
               size_slug: block.attributes.sizeSlug || null,
               width: block.attributes.width || null,

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

@@ -287,6 +287,10 @@ export const formBodyToBlocksFactory = (
               caption: item.params?.caption,
               linkDestination: item.params?.link_destination,
               link: item.params?.link,
+              href: item.params?.href,
+              linkClass: item.params?.link_class,
+              rel: item.params?.rel,
+              linkTarget: item.params?.link_target,
               id: item.params?.id,
               sizeSlug: item.params?.size_slug,
               width: item.params?.width,

lib/Form/Block/Image.php

@@ -10,7 +10,7 @@ class Image {
     return $this->wrapImage($block['params'], $this->renderImage($block['params']));
   }
 
-  private function renderImage(array $params) {
+  private function renderImage(array $params): string {
     $attributes = [];
     $attributes[] = 'src="' . $params['url'] . '"';
     $attributes[] = $params['alt'] ? 'alt="' . $params['alt'] . '"' : 'alt';
@@ -30,12 +30,16 @@ class Image {
     return '<img ' . implode(' ', $attributes) . '" />';
   }
 
-  private function wrapImage(array $params, string $img) {
+  private function wrapImage(array $params, string $img): string {
     // Figure
     $figureClasses = ['size-' . $params['size_slug']];
     if ($params['align']) {
       $figureClasses[] = 'align' . $params['align'];
     }
+    // Link
+    if ($params['href']) {
+      $img = $this->wrapToLink($params, $img);
+    }
     $caption = $params['caption'] ? "<figcaption>{$params['caption']}</figcaption>" : '';
     $figure = '<figure class="' . implode(' ', $figureClasses) . '">' . $img . $caption . '</figure>';
     // Main wrapper
@@ -45,4 +49,18 @@ class Image {
     }
     return '<div class="' . implode(' ', $divClasses) . '">' . $figure . '</div>';
   }
+
+  private function wrapToLink(array $params, string $img): string {
+    $attributes = ['href="' . $params['href'] . '"'];
+    if ($params['link_class']) {
+      $attributes[] = 'class="' . $params['link_class'] . '"';
+    }
+    if ($params['link_target']) {
+      $attributes[] = 'target="' . $params['link_target'] . '"';
+    }
+    if ($params['rel']) {
+      $attributes[] = 'rel="' . $params['rel'] . '"';
+    }
+    return '<a ' . implode(' ', $attributes) . ' >' . $img . '</a>';
+  }
 }

tests/javascript/form_editor/store/block_to_form_test_data.js

@@ -215,6 +215,10 @@ export const imageBlock = {
     caption: 'Caption',
     linkDestination: 'none',
     link: 'http://example.com',
+    href: 'http://example.com/link',
+    linkClass: 'link-class',
+    rel: 'linkRel',
+    linkTarget: '_blank',
     id: 123,
     sizeSlug: 'medium',
     width: 100,

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

@@ -441,6 +441,10 @@ describe('Blocks to Form Body', () => {
     expect(input.params.caption).to.be.equal('Caption');
     expect(input.params.link_destination).to.be.equal('none');
     expect(input.params.link).to.be.equal('http://example.com');
+    expect(input.params.href).to.be.equal('http://example.com/link');
+    expect(input.params.link_class).to.be.equal('link-class');
+    expect(input.params.rel).to.be.equal('linkRel');
+    expect(input.params.link_target).to.be.equal('_blank');
     expect(input.params.id).to.be.equal(123);
     expect(input.params.size_slug).to.be.equal('medium');
     expect(input.params.width).to.be.equal(100);

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

@@ -629,6 +629,11 @@ describe('Form Body To Blocks', () => {
     expect(block.attributes.title).to.equal('Title');
     expect(block.attributes.caption).to.equal('Caption');
     expect(block.attributes.linkDestination).to.equal('none');
+    expect(block.attributes.link).to.equal('http://example.com');
+    expect(block.attributes.href).to.be.equal('http://example.com/link');
+    expect(block.attributes.linkClass).to.be.equal('link-class');
+    expect(block.attributes.rel).to.be.equal('linkRel');
+    expect(block.attributes.linkTarget).to.be.equal('_blank');
     expect(block.attributes.id).to.equal(123);
     expect(block.attributes.sizeSlug).to.equal('medium');
     expect(block.attributes.width).to.equal(100);

tests/javascript/form_editor/store/form_to_block_test_data.js

@@ -269,6 +269,10 @@ export const image = {
     caption: 'Caption',
     link_destination: 'none',
     link: 'http://example.com',
+    href: 'http://example.com/link',
+    link_class: 'link-class',
+    rel: 'linkRel',
+    link_target: '_blank',
     id: 123,
     size_slug: 'medium',
     width: 100,

tests/unit/Form/Block/ImageTest.php

@@ -24,6 +24,10 @@ class ImageTest extends \MailPoetUnitTest {
       'caption' => 'Caption',
       'link_destination' => 'none',
       'link' => null,
+      'href' => null,
+      'link_class' => null,
+      'link_target' => null,
+      'rel' => null,
       'id' => 123,
       'size_slug' => 'medium',
       'width' => 100,
@@ -66,6 +70,25 @@ class ImageTest extends \MailPoetUnitTest {
     expect($caption->textContent)->equals('Caption');
   }
 
+  public function testItShouldRenderImageBlockWithLink() {
+    $block = $this->block;
+    $block['params']['link_class'] = 'link-class';
+    $block['params']['link_target'] = '_blank';
+    $block['params']['rel'] = 'relrel';
+    $block['params']['href'] = 'http://example.com/';
+    $html = $this->image->render($block);
+    $figure = $this->htmlParser->getElementByXpath($html, '//figure');
+    $link = $this->htmlParser->getChildElement($figure, 'a');
+    $linkHref = $this->htmlParser->getAttribute($link, 'href');
+    expect($linkHref->value)->equals('http://example.com/');
+    $linkTarget = $this->htmlParser->getAttribute($link, 'target');
+    expect($linkTarget->value)->equals('_blank');
+    $linkRel = $this->htmlParser->getAttribute($link, 'rel');
+    expect($linkRel->value)->equals('relrel');
+    $linkClass = $this->htmlParser->getAttribute($link, 'class');
+    expect($linkClass->value)->equals('link-class');
+  }
+
   public function testItRendersNothingWhenUrlIsEmpty() {
     $block = $this->block;
     $block['params']['url'] = null;