Commit 754bbe7ab1e for woocommerce
commit 754bbe7ab1e0af66a3d47550e93c84abf27891db
Author: Allison Levine <1689238+allilevine@users.noreply.github.com>
Date: Mon Apr 6 11:09:05 2026 -0400
Email Editor: Add full-width alignment support for product image (#63839)
* Email Editor: Add full-width alignment support for product image and fix invalid align attributes
Enable wide/full alignment options in the email editor settings and add
full-width alignment support for the product image block. Fix invalid
align="full" HTML attribute values in both the core image and product
image renderers by mapping them to valid CSS/HTML alignment values.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
* Address PR review: remove redundant wideSize and add full alignment test
Remove wideSize from theme.json since it equals contentSize (660px),
making wide alignment redundant. Add integration test verifying that
full alignment is correctly mapped to center in rendered HTML.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
* Handle optional wideSize after removal from theme.json
Add fallback to contentSize where wideSize was referenced, and make
wideSize optional in docblocks and get_layout() since it's no longer
defined in theme.json.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---------
Co-authored-by: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
diff --git a/packages/js/email-editor/changelog/add-product-image-full-width-alignment b/packages/js/email-editor/changelog/add-product-image-full-width-alignment
new file mode 100644
index 00000000000..ee8109caea0
--- /dev/null
+++ b/packages/js/email-editor/changelog/add-product-image-full-width-alignment
@@ -0,0 +1,4 @@
+Significance: minor
+Type: add
+
+Add full-width alignment support for product image block
diff --git a/packages/js/email-editor/src/blocks/index.ts b/packages/js/email-editor/src/blocks/index.ts
index 835a6095084..7a1318b3939 100644
--- a/packages/js/email-editor/src/blocks/index.ts
+++ b/packages/js/email-editor/src/blocks/index.ts
@@ -28,6 +28,7 @@ import { enhanceQuoteBlock } from './core/quote';
import { filterSetUrlAttribute } from './core/block-edit';
import { enhanceSocialLinksBlock } from './core/social-links';
import { enhanceSiteLogoBlock } from './core/site-logo';
+import { enableProductImageAlignment } from './woocommerce/product-image';
export { getAllowedBlockNames } from './utils';
@@ -52,5 +53,6 @@ export function initBlocks() {
alterSupportConfiguration();
enhanceSocialLinksBlock();
enhanceSiteLogoBlock();
+ enableProductImageAlignment();
removeBlockStylesFromAllBlocks();
}
diff --git a/packages/js/email-editor/src/blocks/woocommerce/product-image.ts b/packages/js/email-editor/src/blocks/woocommerce/product-image.ts
new file mode 100644
index 00000000000..f93d0982548
--- /dev/null
+++ b/packages/js/email-editor/src/blocks/woocommerce/product-image.ts
@@ -0,0 +1,19 @@
+/**
+ * Internal dependencies
+ */
+import { updateBlockSettings } from '../../config-tools/block-config';
+
+/**
+ * Enable alignment support for the product image block.
+ */
+function enableProductImageAlignment() {
+ updateBlockSettings( 'woocommerce/product-image', ( current ) => ( {
+ ...current,
+ supports: {
+ ...( current.supports || {} ),
+ align: [ 'full' ],
+ },
+ } ) );
+}
+
+export { enableProductImageAlignment };
diff --git a/packages/php/email-editor/changelog/add-product-image-full-width-alignment b/packages/php/email-editor/changelog/add-product-image-full-width-alignment
new file mode 100644
index 00000000000..bf97fc3bcff
--- /dev/null
+++ b/packages/php/email-editor/changelog/add-product-image-full-width-alignment
@@ -0,0 +1,4 @@
+Significance: minor
+Type: add
+
+Add full-width alignment support for product image block, enable wide/full alignment options in editor settings, and fix invalid align="full" HTML attribute in image renderers
diff --git a/packages/php/email-editor/src/Engine/Renderer/ContentRenderer/class-content-renderer.php b/packages/php/email-editor/src/Engine/Renderer/ContentRenderer/class-content-renderer.php
index 43211c763e9..c6478e2c109 100644
--- a/packages/php/email-editor/src/Engine/Renderer/ContentRenderer/class-content-renderer.php
+++ b/packages/php/email-editor/src/Engine/Renderer/ContentRenderer/class-content-renderer.php
@@ -572,7 +572,7 @@ class Content_Renderer {
}
',
$layout['contentSize'],
- $layout['wideSize']
+ $layout['wideSize'] ?? $layout['contentSize']
);
// Get styles from theme.
diff --git a/packages/php/email-editor/src/Engine/class-settings-controller.php b/packages/php/email-editor/src/Engine/class-settings-controller.php
index 224c5305ec6..2579ca02586 100644
--- a/packages/php/email-editor/src/Engine/class-settings-controller.php
+++ b/packages/php/email-editor/src/Engine/class-settings-controller.php
@@ -78,21 +78,25 @@ class Settings_Controller {
$settings['__experimentalFeatures'] = $theme_settings;
// Controls which alignment options are available for blocks.
$settings['supportsLayout'] = true; // Allow using default layouts.
- $settings['__unstableIsBlockBasedTheme'] = true; // For default setting this to true disables wide and full alignments.
+ $settings['alignWide'] = true; // Enable wide and full alignment options.
+ $settings['__unstableIsBlockBasedTheme'] = false; // Setting to true disables wide and full alignments in flow layouts.
return $settings;
}
/**
* Returns the layout settings for the email editor.
*
- * @return array{contentSize: string, wideSize: string}
+ * @return array{contentSize: string, wideSize?: string}
*/
public function get_layout(): array {
$layout_settings = $this->theme_controller->get_layout_settings();
- return array(
+ $layout = array(
'contentSize' => $layout_settings['contentSize'],
- 'wideSize' => $layout_settings['wideSize'],
);
+ if ( isset( $layout_settings['wideSize'] ) ) {
+ $layout['wideSize'] = $layout_settings['wideSize'];
+ }
+ return $layout;
}
/**
diff --git a/packages/php/email-editor/src/Engine/class-theme-controller.php b/packages/php/email-editor/src/Engine/class-theme-controller.php
index 38da1a1b1ac..af6b20005a0 100644
--- a/packages/php/email-editor/src/Engine/class-theme-controller.php
+++ b/packages/php/email-editor/src/Engine/class-theme-controller.php
@@ -175,7 +175,7 @@ class Theme_Controller {
/**
* Get layout settings from the theme.
*
- * @return array{contentSize: string, wideSize: string, allowEditing?: bool, allowCustomContentAndWideSize?: bool}
+ * @return array{contentSize: string, wideSize?: string, allowEditing?: bool, allowCustomContentAndWideSize?: bool}
*/
public function get_layout_settings(): array {
return $this->get_theme()->get_settings()['layout'];
diff --git a/packages/php/email-editor/src/Engine/theme.json b/packages/php/email-editor/src/Engine/theme.json
index a04f3a60d4a..9d71d7e3057 100644
--- a/packages/php/email-editor/src/Engine/theme.json
+++ b/packages/php/email-editor/src/Engine/theme.json
@@ -14,7 +14,6 @@
},
"layout": {
"contentSize": "660px",
- "wideSize": "",
"allowEditing": false,
"allowCustomContentAndWideSize": false
},
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 1075b519507..5adf601a91d 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
@@ -243,8 +243,9 @@ class Image extends Abstract_Block_Renderer {
private function get_caption_styles( Rendering_Context $rendering_context, array $parsed_block ): string {
$theme_data = $rendering_context->get_theme_json()->get_data();
+ $align = $parsed_block['attrs']['align'] ?? '';
$styles = array(
- 'text-align' => isset( $parsed_block['attrs']['align'] ) ? 'center' : 'left',
+ 'text-align' => $align ? 'center' : 'left',
);
$styles['font-size'] = $parsed_block['email_attrs']['font-size'] ?? $theme_data['styles']['typography']['fontSize'];
@@ -299,13 +300,17 @@ class Image extends Abstract_Block_Renderer {
$styles['width'] = '100%';
$align = $parsed_block['attrs']['align'] ?? 'left';
+ // Map block alignment to valid HTML/CSS alignment values.
+ // "full" and "wide" are not valid text-align or table align values.
+ $css_align = in_array( $align, array( 'full', 'wide' ), true ) ? 'center' : $align;
+
$table_attrs = array(
'style' => \WP_Style_Engine::compile_css( $styles, '' ),
'width' => '100%',
);
$cell_attrs = array(
- 'align' => $align,
+ 'align' => $css_align,
);
$image_table_attrs = array(
@@ -317,7 +322,7 @@ class Image extends Abstract_Block_Renderer {
$image_cell_attrs = array(
'class' => 'email-image-cell',
'style' => 'overflow: hidden;',
- 'align' => $align,
+ 'align' => $css_align,
);
$image_content = '{image_content}';
diff --git a/packages/php/email-editor/src/Integrations/WooCommerce/Renderer/Blocks/class-product-image.php b/packages/php/email-editor/src/Integrations/WooCommerce/Renderer/Blocks/class-product-image.php
index 2d479c73e01..7dc847f1af0 100644
--- a/packages/php/email-editor/src/Integrations/WooCommerce/Renderer/Blocks/class-product-image.php
+++ b/packages/php/email-editor/src/Integrations/WooCommerce/Renderer/Blocks/class-product-image.php
@@ -266,6 +266,15 @@ class Product_Image extends Abstract_Product_Block_Renderer {
return $parsed_block;
}
+ $align = $parsed_block['attrs']['align'] ?? '';
+
+ // For full-width alignment, use the full layout content size (ignoring padding).
+ if ( 'full' === $align ) {
+ $layout_settings = $rendering_context->get_theme_settings()['layout'] ?? array();
+ $parsed_block['attrs']['width'] = $layout_settings['contentSize'] ?? '100%';
+ return $parsed_block;
+ }
+
if ( ! isset( $parsed_block['email_attrs']['width'] ) ) {
$parsed_block['attrs']['width'] = '100%';
return $parsed_block;
@@ -420,9 +429,15 @@ class Product_Image extends Abstract_Product_Block_Renderer {
*/
private function apply_email_wrapper( string $image_html, array $parsed_block, Rendering_Context $rendering_context ): string {
$width = $parsed_block['attrs']['width'] ?? '';
- $wrapper_width = ( $width && '100%' !== $width ) ? $width : 'auto';
+ $align = $parsed_block['attrs']['align'] ?? '';
+ $is_full = 'full' === $align;
+ $wrapper_width = $is_full ? '100%' : ( ( $width && '100%' !== $width ) ? $width : 'auto' );
$image_height = $this->extract_image_height( $image_html ) . 'px';
+ // Map block alignment to valid HTML/CSS alignment values.
+ // "full" is not a valid text-align or table align value.
+ $css_align = $is_full ? 'center' : ( $align ? $align : 'left' );
+
$wrapper_styles = array(
'border-collapse' => 'separate',
'width' => $wrapper_width,
@@ -439,8 +454,7 @@ class Product_Image extends Abstract_Product_Block_Renderer {
$cell_styles = array_merge( $cell_styles, $padding_styles['declarations'] );
}
- $align = $parsed_block['attrs']['align'] ?? 'left';
- $cell_styles['text-align'] = $align;
+ $cell_styles['text-align'] = $css_align;
$outer_table_attrs = array(
'style' => \WP_Style_Engine::compile_css(
@@ -456,7 +470,7 @@ class Product_Image extends Abstract_Product_Block_Renderer {
);
$outer_cell_attrs = array(
- 'align' => $align,
+ 'align' => $css_align,
);
$inner_table_attrs = array(
diff --git a/packages/php/email-editor/src/Integrations/WooCommerce/class-initializer.php b/packages/php/email-editor/src/Integrations/WooCommerce/class-initializer.php
index 988d67d3629..014b11f1728 100644
--- a/packages/php/email-editor/src/Integrations/WooCommerce/class-initializer.php
+++ b/packages/php/email-editor/src/Integrations/WooCommerce/class-initializer.php
@@ -52,6 +52,11 @@ class Initializer {
$settings['render_email_callback'] = array( $this, 'render_block' );
}
+ // Enable full-width alignment support for the product image block.
+ if ( 'woocommerce/product-image' === $settings['name'] ) {
+ $settings['supports']['align'] = array( 'full' );
+ }
+
return $settings;
}
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 b40cf4f2766..b76e118fbbf 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
@@ -150,6 +150,31 @@ class Image_Test extends \Email_Editor_Integration_Test_Case {
$this->assertEquals( 'center', $html->get_attribute( 'align' ) );
}
+ /**
+ * Test it renders full alignment as center
+ */
+ public function testItRendersFullAlignmentAsCenter(): void {
+ $image_content = str_replace( 'alignleft', 'alignfull', $this->image_content );
+ $parsed_image = $this->parsed_image;
+ $parsed_image['attrs']['align'] = 'full';
+ $parsed_image['attrs']['width'] = '640px';
+ $parsed_image['innerHTML'] = $image_content;
+
+ $rendered = $this->image_renderer->render( $image_content, $parsed_image, $this->rendering_context );
+
+ // "full" is not a valid HTML align value, so it should be mapped to "center".
+ $this->assertStringNotContainsString( 'align="full"', $rendered );
+
+ $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' ) );
+ }
+
/**
* Test it renders image with borders
*/