Commit 1347bca9e5 for woocommerce
commit 1347bca9e5b22fa73734e25934ba17d4aeb87340
Author: Allison Levine <1689238+allilevine@users.noreply.github.com>
Date: Thu Jan 22 11:42:29 2026 -0500
Email Editor image renderer: Add alignment to inner cell and border wrapper (#62899)
* Email Editor image renderer: Add alignment to inner cell to fix alignment on mobile.
* Fix border alignment.
* Add changefile(s) from automation for the following project(s): packages/php/email-editor
---------
Co-authored-by: woocommercebot <woocommercebot@users.noreply.github.com>
diff --git a/packages/php/email-editor/changelog/62899-fix-email-editor-image-center-alignment b/packages/php/email-editor/changelog/62899-fix-email-editor-image-center-alignment
new file mode 100644
index 0000000000..c82cd7e206
--- /dev/null
+++ b/packages/php/email-editor/changelog/62899-fix-email-editor-image-center-alignment
@@ -0,0 +1,4 @@
+Significance: minor
+Type: fix
+
+Fix image alignment by adding alignment to the inner cell when rendered. Fix image border alignment by adding a border wrapper.
\ No newline at end of file
diff --git a/packages/php/email-editor/src/Integrations/Core/Renderer/Blocks/class-image.php b/packages/php/email-editor/src/Integrations/Core/Renderer/Blocks/class-image.php
index 2072f57292..1075b51950 100644
--- a/packages/php/email-editor/src/Integrations/Core/Renderer/Blocks/class-image.php
+++ b/packages/php/email-editor/src/Integrations/Core/Renderer/Blocks/class-image.php
@@ -63,12 +63,12 @@ class Image extends Abstract_Block_Renderer {
// Because the isn't an attribute for definition of rounded style, we have to check the class name.
if ( isset( $parsed_block['attrs']['className'] ) && strpos( $parsed_block['attrs']['className'], 'is-style-rounded' ) !== false ) {
// If the image should be in a circle, we need to set the border-radius to 9999px to make it the same as is in the editor
- // This style is applied to both wrapper and the image.
+ // This style is applied to both the border cell wrapper and the image.
$block_content = $this->remove_style_attribute_from_element(
$block_content,
array(
'tag_name' => 'td',
- 'class_name' => 'email-image-cell',
+ 'class_name' => 'email-image-border-cell',
),
'border-radius'
);
@@ -76,7 +76,7 @@ class Image extends Abstract_Block_Renderer {
$block_content,
array(
'tag_name' => 'td',
- 'class_name' => 'email-image-cell',
+ 'class_name' => 'email-image-border-cell',
),
'border-radius: 9999px;'
);
@@ -174,9 +174,11 @@ class Image extends Abstract_Block_Renderer {
$border_styles['border-style'] = 'solid';
$border_styles['box-sizing'] = 'border-box';
}
+ // Apply border to the dedicated border cell wrapper, not the outer image cell.
+ // This ensures borders stay tight around the image on mobile when the outer wrapper becomes 100% width.
$border_element_tag = array(
'tag_name' => 'td',
- 'class_name' => 'email-image-cell',
+ 'class_name' => 'email-image-border-cell',
);
$content_with_border_styles = $this->add_style_to_element( $block_content, $border_element_tag, \WP_Style_Engine::compile_css( $border_styles, '' ) );
// Remove border styles from the image HTML tag.
@@ -315,6 +317,7 @@ class Image extends Abstract_Block_Renderer {
$image_cell_attrs = array(
'class' => 'email-image-cell',
'style' => 'overflow: hidden;',
+ 'align' => $align,
);
$image_content = '{image_content}';
@@ -329,6 +332,22 @@ class Image extends Abstract_Block_Renderer {
'{image_content}'
);
}
+
+ // Wrap image in a border wrapper table that won't expand to 100% on mobile.
+ // This ensures borders stay tight around the image regardless of screen size.
+ $border_wrapper_styles = array(
+ 'border-collapse' => 'separate',
+ 'border-spacing' => '0px',
+ );
+ $border_wrapper_attrs = array(
+ 'class' => 'email-image-border-wrapper',
+ 'style' => \WP_Style_Engine::compile_css( $border_wrapper_styles, '' ),
+ );
+ $border_cell_attrs = array(
+ 'class' => 'email-image-border-cell',
+ );
+ $image_content = Table_Wrapper_Helper::render_table_wrapper( $image_content, $border_wrapper_attrs, $border_cell_attrs );
+
$image_html = Table_Wrapper_Helper::render_table_wrapper( $image_content, $image_table_attrs, $image_cell_attrs );
$inner_content = $image_html . $caption_html;
diff --git a/packages/php/email-editor/tests/integration/Integrations/Core/Renderer/Blocks/Image_Test.php b/packages/php/email-editor/tests/integration/Integrations/Core/Renderer/Blocks/Image_Test.php
index 8e13f82303..b40cf4f276 100644
--- a/packages/php/email-editor/tests/integration/Integrations/Core/Renderer/Blocks/Image_Test.php
+++ b/packages/php/email-editor/tests/integration/Integrations/Core/Renderer/Blocks/Image_Test.php
@@ -138,6 +138,16 @@ class Image_Test extends \Email_Editor_Integration_Test_Case {
$this->assertStringContainsString( 'height="300"', $rendered );
$this->assertStringContainsString( 'height:300px;', $rendered );
$this->assertStringContainsString( 'width:400px;', $rendered );
+
+ // Verify alignment is also applied to the inner image cell for mobile responsiveness.
+ $html = new \WP_HTML_Tag_Processor( $rendered );
+ $html->next_tag(
+ array(
+ 'tag_name' => 'td',
+ 'class_name' => 'email-image-cell',
+ )
+ );
+ $this->assertEquals( 'center', $html->get_attribute( 'align' ) );
}
/**
@@ -158,11 +168,12 @@ class Image_Test extends \Email_Editor_Integration_Test_Case {
$rendered = $this->image_renderer->render( $image_content, $parsed_image, $this->rendering_context );
$html = new \WP_HTML_Tag_Processor( $rendered );
- // Border is rendered on the wrapping table cell.
+ // Border is rendered on the dedicated border cell wrapper (not the outer image cell).
+ // This ensures borders stay tight around the image on mobile.
$html->next_tag(
array(
'tag_name' => 'td',
- 'class_name' => 'email-image-cell',
+ 'class_name' => 'email-image-border-cell',
)
);
$table_cell_style = $html->get_attribute( 'style' );
@@ -190,11 +201,11 @@ class Image_Test extends \Email_Editor_Integration_Test_Case {
$rendered = $this->image_renderer->render( $image_content, $parsed_image, $this->rendering_context );
$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.
+ // Border is rendered on the dedicated border cell wrapper and the border classes are moved there.
$html->next_tag(
array(
'tag_name' => 'td',
- 'class_name' => 'email-image-cell',
+ 'class_name' => 'email-image-border-cell',
)
);
$table_cell_class = $html->get_attribute( 'class' );