From ba585ab3f1ed37a9dd79b32c7d9469f3c971d9eb Mon Sep 17 00:00:00 2001
From: Luigi <gigitux@gmail.com>
Date: Wed, 22 Mar 2023 11:46:30 +0100
Subject: [PATCH] improve layout

---
 .../product-details/block.json                |  4 ++-
 src/BlockTypes/ProductDetails.php             |  9 +++--
 .../templates/blockified/single-product.html  | 34 +++++++++----------
 3 files changed, 27 insertions(+), 20 deletions(-)

diff --git a/assets/js/atomic/blocks/product-elements/product-details/block.json b/assets/js/atomic/blocks/product-elements/product-details/block.json
index cbecc16fec3..c5133768f27 100644
--- a/assets/js/atomic/blocks/product-elements/product-details/block.json
+++ b/assets/js/atomic/blocks/product-elements/product-details/block.json
@@ -6,7 +6,9 @@
 	"description": "A block that allows your customers to see details and reviews about the product.",
 	"category": "woocommerce",
 	"keywords": [ "WooCommerce" ],
-	"supports": {},
+	"supports": {
+		"align": true
+	},
 	"textdomain": "woo-gutenberg-products-block",
 	"apiVersion": 2,
 	"$schema": "https://schemas.wp.org/trunk/block.json"
diff --git a/src/BlockTypes/ProductDetails.php b/src/BlockTypes/ProductDetails.php
index 3a1795279e5..68ff6fc1463 100644
--- a/src/BlockTypes/ProductDetails.php
+++ b/src/BlockTypes/ProductDetails.php
@@ -1,6 +1,8 @@
 <?php
 
 namespace Automattic\WooCommerce\Blocks\BlockTypes;
+use Automattic\WooCommerce\Blocks\Utils\StyleAttributesUtils;
+
 
 /**
  * ProductDetails class.
@@ -34,10 +36,13 @@ protected function render( $attributes, $content, $block ) {
 
 		$classname = $attributes['className'] ?? '';
 
+		$classes_and_styles = StyleAttributesUtils::get_classes_and_styles_by_attributes( $attributes );
+
 		return sprintf(
-			'<div class="wp-block-woocommerce-product-details %1$s">
-				%2$s
+			'<div class="wp-block-woocommerce-product-details %1$s %2$s">
+				%3$s
 			</div>',
+			esc_attr( $classes_and_styles['classes'] ),
 			esc_attr( $classname ),
 			$tabs
 		);
diff --git a/templates/templates/blockified/single-product.html b/templates/templates/blockified/single-product.html
index 35034b89062..f0629944710 100644
--- a/templates/templates/blockified/single-product.html
+++ b/templates/templates/blockified/single-product.html
@@ -1,23 +1,20 @@
-<!-- wp:template-part {"slug":"header","tagName":"header"} /-->
+<!-- wp:template-part {"slug":"header","theme":"twentytwentythree","tagName":"header"} /-->
 
-<!-- wp:group {"layout":{"type":"constrained","contentSize":"1000px"}} -->
+<!-- wp:group {"layout":{"inherit":true,"type":"constrained"}} -->
 <div class="wp-block-group"><!-- wp:woocommerce/breadcrumbs /-->
 
-	<!-- wp:columns -->
-	<div class="wp-block-columns">
-		<!-- wp:column {"style":{"spacing":{"padding":{"top":"0","right":"0","bottom":"0","left":"0"}}},"layout":{"type":"constrained","justifyContent":"right"}} -->
-		<div class="wp-block-column" style="padding-top:0;padding-right:0;padding-bottom:0;padding-left:0">
-			<!-- wp:woocommerce/product-image-gallery /-->
-		</div>
+	<!-- wp:columns {"align":"wide"} -->
+	<div class="wp-block-columns alignwide"><!-- wp:column -->
+		<div class="wp-block-column"><!-- wp:woocommerce/product-image-gallery /--></div>
 		<!-- /wp:column -->
 
 		<!-- wp:column -->
 		<div class="wp-block-column">
 			<!-- wp:post-title {"__woocommerceNamespace":"woocommerce/product-query/product-title"} /-->
 
-			<!-- wp:post-excerpt {"__woocommerceNamespace":"woocommerce/product-query/product-summary"} /-->
+			<!-- wp:woocommerce/product-price {"isDescendentOfSingleProductTemplate":true, "fontSize":"large"} /-->
 
-			<!-- wp:woocommerce/product-price /-->
+			<!-- wp:post-excerpt {"__woocommerceNamespace":"woocommerce/product-query/product-summary"} /-->
 
 			<!-- wp:woocommerce/add-to-cart-form /-->
 
@@ -25,7 +22,7 @@
 			<div class="wp-block-woocommerce-product-meta">
 				<!-- wp:group {"layout":{"type":"flex","flexWrap":"nowrap"}} -->
 				<div class="wp-block-group">
-					<!-- wp:woocommerce/product-sku {"isDescendentOfSingleProductTemplate": true} /-->
+					<!-- wp:woocommerce/product-sku {"isDescendentOfSingleProductTemplate":true} /-->
 
 					<!-- wp:post-terms {"term":"product_cat","prefix":"Category: "} /-->
 
@@ -39,12 +36,15 @@
 	</div>
 	<!-- /wp:columns -->
 
-	<!-- wp:woocommerce/product-details /-->
+	<!-- 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:woocommerce/related-products -->
-	<div class="wp-block-woocommerce-related-products">
-		<!-- wp:query {"queryId":2,"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:post-template {"__woocommerceNamespace":"woocommerce/product-query/product-template"} -->
 			<!-- wp:woocommerce/product-image {"isDescendentOfQueryLoop":true} /-->
 
@@ -61,4 +61,4 @@
 </div>
 <!-- /wp:group -->
 
-<!-- wp:template-part {"slug":"footer","tagName":"footer"} /-->
+<!-- wp:template-part {"slug":"footer","theme":"twentytwentythree","tagName":"footer"} /-->
\ No newline at end of file