Add wide and full alignment support for legacy template block (#5433)

* add align wide and full support for legacy template block

* fix PHP warning

* add a comment on get_markup_with_classes_by_attributes

* rename function

* add align wide and full support for legacy template block

* fix PHP warning

* add a comment on get_markup_with_classes_by_attributes

* rename function

* fix regex

* update regex

* update regex

* fix code styling

assets/js/blocks/legacy-template/index.tsx

@@ -82,7 +82,7 @@ registerBlockType( 'woocommerce/legacy-template', {
 		'woo-gutenberg-products-block'
 	),
 	supports: {
-		align: false,
+		align: [ 'wide', 'full' ],
 		html: false,
 		multiple: false,
 		reusable: false,

src/BlockTypes/LegacyTemplate.php

@@ -1,6 +1,8 @@
 <?php
 namespace Automattic\WooCommerce\Blocks\BlockTypes;
 
+use Automattic\WooCommerce\Blocks\Utils\StyleAttributesUtils;
+
 /**
  * Legacy Single Product class
  *
@@ -21,6 +23,14 @@ class LegacyTemplate extends AbstractDynamicBlock {
 	 */
 	protected $api_version = '2';
 
+	/**
+	 * Initialize this block.
+	 */
+	protected function initialize() {
+		parent::initialize();
+		add_filter( 'render_block', array( $this, 'add_alignment_class_to_wrapper' ), 10, 2 );
+	}
+
 	/**
 	 * Render method for the Legacy Template block. This method will determine which template to render.
 	 *
@@ -192,4 +202,43 @@ protected function render_archive_product() {
 		wp_reset_postdata();
 		return ob_get_clean();
 	}
+
+	/**
+	 * Get HTML markup with the right classes by attributes.
+	 * This function appends the classname at the first element that have the class attribute.
+	 * Based on the experience, all the wrapper elements have a class attribute.
+	 *
+	 * @param string $content Block content.
+	 * @param array  $block Parsed block data.
+	 * @return string Rendered block type output.
+	 */
+	public function add_alignment_class_to_wrapper( string $content, array $block ) {
+		if ( ( 'woocommerce/' . $this->block_name ) !== $block['blockName'] ) {
+			return $content;
+		}
+
+		$attributes            = (array) $block['attrs'];
+		$align_class_and_style = StyleAttributesUtils::get_align_class_and_style( $attributes );
+
+		if ( ! isset( $align_class_and_style['class'] ) ) {
+			return $content;
+		}
+
+		// Find the first tag.
+		$first_tag = '<[^<>]+>';
+		$matches   = array();
+		preg_match( $first_tag, $content, $matches );
+
+		// If there is a tag, but it doesn't have a class attribute, add the class attribute.
+		if ( isset( $matches[0] ) && strpos( $matches[0], ' class=' ) === false ) {
+			$pattern_before_tag_closing = '/.+?(?=>)/';
+			return preg_replace( $pattern_before_tag_closing, '$0 class="' . $align_class_and_style['class'] . '"', $content, 1 );
+		}
+
+		// If there is a tag, and it has a class already, add the class attribute.
+		$pattern_get_class = '/(?<=class=\"|\')[^"|\']+(?=\"|\')/';
+		return preg_replace( $pattern_get_class, '$0 ' . $align_class_and_style['class'], $content, 1 );
+	}
+
+
 }

src/Utils/StyleAttributesUtils.php

@@ -154,6 +154,59 @@ public static function get_background_color_class_and_style( $attributes ) {
 		return null;
 	}
 
+	/**
+	 * Get class and style for align from attributes.
+	 *
+	 * @param array $attributes Block attributes.
+	 *
+	 * @return (array | null)
+	 */
+	public static function get_align_class_and_style( $attributes ) {
+
+		$align_attribute = isset( $attributes['align'] ) ? $attributes['align'] : null;
+
+		if ( ! $align_attribute ) {
+			return null;
+		};
+
+		if ( 'wide' === $align_attribute ) {
+			return array(
+				'class' => 'alignwide',
+				'style' => null,
+			);
+		}
+
+		if ( 'full' === $align_attribute ) {
+			return array(
+				'class' => 'alignfull',
+				'style' => null,
+			);
+		}
+
+		if ( 'left' === $align_attribute ) {
+			return array(
+				'class' => 'alignleft',
+				'style' => null,
+			);
+		}
+
+		if ( 'right' === $align_attribute ) {
+			return array(
+				'class' => 'alignright',
+				'style' => null,
+			);
+		}
+
+		if ( 'center' === $align_attribute ) {
+			return array(
+				'class' => 'aligncenter',
+				'style' => null,
+			);
+		}
+
+		return null;
+	}
+
 	/**
 	 * Get classes and styles from attributes.
 	 *