diff --git a/assets/js/src/form_editor/store/blocks_to_form_body.jsx b/assets/js/src/form_editor/store/blocks_to_form_body.jsx index 3d228cbacf..e8f800934a 100644 --- a/assets/js/src/form_editor/store/blocks_to_form_body.jsx +++ b/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, diff --git a/assets/js/src/form_editor/store/form_body_to_blocks.jsx b/assets/js/src/form_editor/store/form_body_to_blocks.jsx index e98c4a650b..533f75d264 100644 --- a/assets/js/src/form_editor/store/form_body_to_blocks.jsx +++ b/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, diff --git a/lib/Form/Block/Image.php b/lib/Form/Block/Image.php index e48801b6a0..68aee51cf1 100644 --- a/lib/Form/Block/Image.php +++ b/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 ''; } - 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'] ? "
{$params['caption']}
" : ''; $figure = '
' . $img . $caption . '
'; // Main wrapper @@ -45,4 +49,18 @@ class Image { } return '
' . $figure . '
'; } + + 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 '' . $img . ''; + } } diff --git a/tests/javascript/form_editor/store/block_to_form_test_data.js b/tests/javascript/form_editor/store/block_to_form_test_data.js index 05340f5e97..9cae9f05cc 100644 --- a/tests/javascript/form_editor/store/block_to_form_test_data.js +++ b/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, diff --git a/tests/javascript/form_editor/store/blocks_to_form_body.spec.js b/tests/javascript/form_editor/store/blocks_to_form_body.spec.js index d5ce7b4ef3..555ddf87fc 100644 --- a/tests/javascript/form_editor/store/blocks_to_form_body.spec.js +++ b/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); diff --git a/tests/javascript/form_editor/store/form_body_to_blocks.spec.js b/tests/javascript/form_editor/store/form_body_to_blocks.spec.js index c80f0b20ce..19e581b9fd 100644 --- a/tests/javascript/form_editor/store/form_body_to_blocks.spec.js +++ b/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); diff --git a/tests/javascript/form_editor/store/form_to_block_test_data.js b/tests/javascript/form_editor/store/form_to_block_test_data.js index 93efc51a63..b6149879f2 100644 --- a/tests/javascript/form_editor/store/form_to_block_test_data.js +++ b/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, diff --git a/tests/unit/Form/Block/ImageTest.php b/tests/unit/Form/Block/ImageTest.php index 4ec1346932..bd01eba46a 100644 --- a/tests/unit/Form/Block/ImageTest.php +++ b/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;