Add default Single Product HTML template

assets/js/atomic/blocks/product-elements/add-to-cart-form/style.scss

@@ -3,4 +3,5 @@
 	.woocommerce-grouped-product-list-item__price del {
 		font-size: var(--wp--preset--font-size--large);
 	}
+	width: unset;
 }

assets/js/atomic/blocks/product-elements/product-details/block.json

@@ -6,8 +6,9 @@
 	"description": "A block that allows your customers to see details and reviews about the product.",
 	"category": "woocommerce",
 	"keywords": [ "WooCommerce" ],
-	"supports": {},
-	"attributes": {},
+	"supports": {
+		"align": true
+	},
 	"textdomain": "woo-gutenberg-products-block",
 	"apiVersion": 2,
 	"$schema": "https://schemas.wp.org/trunk/block.json"

assets/js/atomic/blocks/product-elements/product-image-gallery/block.json

@@ -9,6 +9,7 @@
 		"align": true,
 		"multiple": false
 	},
+	"attributes": {},
 	"keywords": [ "WooCommerce" ],
 	"usesContext": [ "postId", "postType", "queryId" ],
 	"textdomain": "woo-gutenberg-products-block",

assets/js/atomic/blocks/product-elements/product-image-gallery/style.scss

@@ -1,13 +1,13 @@
 .woocommerce .wp-block-woocommerce-product-image-gallery {
 	position: relative;
 
-	div.images {
-		width: unset !important;
-	}
-
 	span.onsale {
 		right: unset;
 		z-index: 1;
 		left: -1rem;
 	}
 }
+
+.woocommerce .wp-block-woocommerce-product-image-gallery .woocommerce-product-gallery.images {
+	width: initial;
+}

src/BlockTypes/ProductDetails.php

@@ -1,7 +1,8 @@
 <?php
-
 namespace Automattic\WooCommerce\Blocks\BlockTypes;
 
+use Automattic\WooCommerce\Blocks\Utils\StyleAttributesUtils;
+
 /**
  * ProductDetails class.
  */
@@ -34,10 +35,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
 		);

templates/templates/blockified/single-product.html

@@ -1,8 +1,64 @@
 <!-- wp:template-part {"slug":"header"} /-->
-<!-- wp:group {"layout":{"inherit":true}} -->
-<div class="wp-block-group">
-	<!-- wp:paragraph -->
-	<p>Single product blockified</p>
-	<!-- /wp:paragraph --></div>
+
+<!-- wp:group {"layout":{"inherit":true,"type":"constrained"}} -->
+<div class="wp-block-group"><!-- wp:woocommerce/breadcrumbs /-->
+
+	<!-- 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:woocommerce/product-price {"isDescendentOfSingleProductTemplate":true, "fontSize":"large"} /-->
+
+			<!-- wp:post-excerpt {"__woocommerceNamespace":"woocommerce/product-query/product-summary"} /-->
+
+			<!-- wp:woocommerce/add-to-cart-form /-->
+
+			<!-- wp:woocommerce/product-meta -->
+			<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:post-terms {"term":"product_cat","prefix":"Category: "} /-->
+
+					<!-- wp:post-terms {"term":"product_tag","prefix":"Tags: "} /-->
+				</div>
+				<!-- /wp:group -->
+			</div>
+			<!-- /wp:woocommerce/product-meta -->
+		</div>
+		<!-- /wp:column -->
+	</div>
+	<!-- /wp:columns -->
+
+	<!-- 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 {"__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 -->
+</div>
 <!-- /wp:group -->
-<!-- wp:template-part {"slug":"footer"} /-->
+
+<!-- wp:template-part {"slug":"footer"} /-->