Translate Related Products heading in Single Product template (#11693)

* Create Related Products pattern reused in the Single Product template

That's needed in order to make the Related Products string translatable

* Add margin to Related Products heading

* Add margin to Related Products transformed from classic template

* Simplify the translation

* Change string capitalization so it's the same as the other one and can be transklated

assets/js/blocks/product-query/variations/related-products.tsx

@@ -57,6 +57,7 @@ export const INNER_BLOCKS_TEMPLATE: InnerBlockTemplate[] = [
 		{
 			level: 2,
 			content: __( 'Related products', 'woo-gutenberg-products-block' ),
+			style: { spacing: { margin: { top: '1rem', bottom: '1rem' } } },
 		},
 	],
 	[

patterns/related-products.php

@@ -0,0 +1,37 @@
+<?php
+/**
+ * Title: Related Products
+ * Slug: woocommerce-blocks/related-products
+ * Categories: WooCommerce
+ * Inserter: false
+ */
+?>
+
+<!-- wp:woocommerce/related-products {"align":"wide"} -->
+<div class="wp-block-woocommerce-related-products alignwide">
+		<!-- wp:query {"queryId":0,"query":{"perPage":5,"pages":0,"offset":0,"postType":"product","order":"asc","orderBy":"title","author":"","search":"","exclude":[],"sticky":"","inherit":false},"displayLayout":{"type":"flex","columns":5},"namespace":"woocommerce/related-products","lock":{"remove":true,"move":true}} -->
+		<div class="wp-block-query">
+			<!-- wp:heading {"style":{"spacing":{"margin":{"top":"var:preset|spacing|30","bottom":"var:preset|spacing|30"}}}} -->
+			<h2 class="wp-block-heading" style="margin-top:var(--wp--preset--spacing--30);margin-bottom:var(--wp--preset--spacing--30)">
+				<?php
+					echo esc_html__(
+						'Related products',
+						'woo-gutenberg-products-block'
+					)
+					?>
+			</h2>
+			<!-- /wp:heading -->
+
+			<!-- wp:post-template {"className":"products-block-post-template","__woocommerceNamespace":"woocommerce/product-query/product-template"} -->
+			<!-- wp:woocommerce/product-image {"isDescendentOfQueryLoop":true} /-->
+
+			<!-- wp:post-title {"textAlign":"center","level":3,"fontSize":"medium","__woocommerceNamespace":"woocommerce/product-query/product-title"} /-->
+
+			<!-- wp:woocommerce/product-price {"isDescendentOfQueryLoop":true,"textAlign":"center","fontSize":"small","style":{"spacing":{"margin":{"bottom":"1rem"}}}} /-->
+
+			<!-- wp:woocommerce/product-button {"isDescendentOfQueryLoop":true,"textAlign":"center","fontSize":"small","style":{"spacing":{"margin":{"bottom":"1rem"}}}} /-->
+			<!-- /wp:post-template -->
+		</div>
+		<!-- /wp:query -->
+	</div>
+	<!-- /wp:woocommerce/related-products -->

templates/templates/blockified/single-product.html

@@ -45,27 +45,7 @@
 
 	<!-- wp:woocommerce/product-details {"align":"wide"} /-->
 
-	<!-- wp:woocommerce/related-products {"align":"wide"} -->
-	<div class="wp-block-woocommerce-related-products alignwide">
-		<!-- wp:query {"queryId":0,"query":{"perPage":5,"pages":0,"offset":0,"postType":"product","order":"asc","orderBy":"title","author":"","search":"","exclude":[],"sticky":"","inherit":false},"displayLayout":{"type":"flex","columns":5},"namespace":"woocommerce/related-products","lock":{"remove":true,"move":true}} -->
-		<div class="wp-block-query">
-			<!-- wp:heading -->
-			<h2 class="wp-block-heading">Related products</h2>
-			<!-- /wp:heading -->
-
-			<!-- wp:post-template {"className":"products-block-post-template","__woocommerceNamespace":"woocommerce/product-query/product-template"} -->
-			<!-- wp:woocommerce/product-image {"isDescendentOfQueryLoop":true} /-->
-
-			<!-- wp:post-title {"textAlign":"center","level":3,"fontSize":"medium","__woocommerceNamespace":"woocommerce/product-query/product-title"} /-->
-
-			<!-- wp:woocommerce/product-price {"isDescendentOfQueryLoop":true,"textAlign":"center","fontSize":"small","style":{"spacing":{"margin":{"bottom":"1rem"}}}} /-->
-
-			<!-- wp:woocommerce/product-button {"isDescendentOfQueryLoop":true,"textAlign":"center","fontSize":"small","style":{"spacing":{"margin":{"bottom":"1rem"}}}} /-->
-			<!-- /wp:post-template -->
-		</div>
-		<!-- /wp:query -->
-	</div>
-	<!-- /wp:woocommerce/related-products -->
+	<!-- wp:pattern {"slug":"woocommerce-blocks/related-products"} /-->
 </div>
 <!-- /wp:group -->