Cavemanon/piratepoet
8
Fork 0
Code Pull Requests Actions Releases 16 Activity

Add border support to the image renderer

Browse Source 
This commit fixes how the border is applied in an image block.
- the border is applied to the wrapping table cell instead of the image
- we need to move classes related to border styles to the cell so that related styles are inlined in the proper place
- the caption is put in an additional table so that it doesn't extend the border when it is longer than the image
- rounded image styles are now applied to the wrapper and the image
[MAILPOET-6280]
This commit is contained in:
Rostislav Wolny
2024-11-01 15:12:49 +01:00
committed by Pavel Dohnal
parent 10ad46239d
commit 9829c96caa
2 changed files with 91 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
packages/php/email-editor/tests/integration/Integrations/Core/Renderer/Blocks/ImageTest.php
View File

@@ -96,4 +96,45 @@ class ImageTest extends \MailPoetTest {
$this->assertStringContainsString('height:300px;', $rendered);
$this->assertStringContainsString('width:400px;', $rendered);
}
public function testItRendersBorders(): void {
$imageContent = $this->imageContent;
$parsedImage = $this->parsedImage;
$parsedImage['attrs']['style']['border'] = [
'width' => '10px',
'color' => '#000001',
'radius' => '20px',
];
$rendered = $this->imageRenderer->render($imageContent, $parsedImage, $this->settingsController);
$html = new \WP_HTML_Tag_Processor($rendered);
// Border is rendered on the wrapping table cell
$html->next_tag(['tag_name' => 'td', 'class_name' => 'email-image-cell']);
$tableCellStyle = $html->get_attribute('style');
$this->assertStringContainsString('border-color:#000001', $tableCellStyle);
$this->assertStringContainsString('border-radius:20px', $tableCellStyle);
$this->assertStringContainsString('border-style:solid;', $tableCellStyle);
$html->next_tag(['tag_name' => 'img']);
$imgStyle = $html->get_attribute('style');
$this->assertStringNotContainsString('border', $imgStyle);
}
public function testItMovesBorderRelatedClasses(): void {
$imageContent = str_replace('<img', '<img class="custom-class has-border-color has-border-red-color"',$this->imageContent);
$parsedImage = $this->parsedImage;
$parsedImage['attrs']['style']['border'] = [
'width' => '10px',
'color' => '#000001',
'radius' => '20px',
];
$rendered = $this->imageRenderer->render($imageContent, $parsedImage, $this->settingsController);
$html = new \WP_HTML_Tag_Processor($rendered);
// Border is rendered on the wrapping table cell and the border classes are moved to the wrapping table cell
$html->next_tag(['tag_name' => 'td', 'class_name' => 'email-image-cell']);
$tableCellClass = $html->get_attribute('class');
$this->assertStringContainsString('has-border-red-color', $tableCellClass);
$this->assertStringContainsString('has-border-color', $tableCellClass);
$this->assertStringNotContainsString('custom-class', $tableCellClass);
}
}