Add default Single Product HTML template (#8515)

* Add default Single Product HTML template

* Fix style issues when adding blocks inside group/stack/columns blocks

* Add Related Products to the default single product template HTML file

* Remove !important statement from Product Image Gallery block css

* Change width of Product Image Gallery block to initial instead of unset

* Wrap up default single product html template (#8632)

* Add minimum structure for Single Product Details block

* Add Product Image Gallery #8233

Add Product Image Gallery

* Add tests for Single Product Details block

* Add the initial basis for the Add to Cart button

* Trigger the single product add to cart action for each product type.

* wip: create block structure and add initial styles

* Add block details to the SingleProductDetails.php file

* Rename the block from add-to-cart-button to add-to-cart-form

* Update to use the cart icon.

* Implement the skeleton for the editor preview.

* Render tabs title with empty content

* Use woocommerce_output_product_data_tabs function to retrieve tabs data

* Update styles and add Notice for the display in the Editor.

* Update CSS.

* Add base tests for the new Add to Cart Form component.

* Add Product Image Gallery block

* remove support global styles

* remove support global styles

* Update the button CSS.

* Remove customizations for the Single Product Details block

* Update styles for the cart form.

* update td style.

* Update divs and CSS.

* Use conventional input instead of the experimental InputControl

* address CSS feedback

* add support for the custom classname

* remove save function

* Remove unnecessary console.log from the Edit.tsx file

* Remove block classname from block wrapper

* Remove unnecessary WooCommerce tabs filter from the BlockTemplatesController

* Remove attributes property from the block registration

* Remove isExperimental flag for the Single Product Details block

* Remove get_classes_and_styles_by_attributes method from SingleProductDetails block

* Prevent Single Product Details block from apppearing in Pages or Posts

* add second parameter to the subscribe function

* Implement the new design and copy provided for the editor.

* Make the notice compatible with dark themes.

* Some additional CSS tweaks

* adjust the padding for the input

* wrap the Single Product Template in a div with the product class

* Fix PHP Coding Standards warnings

* improve logic and increase coverage of unit test

* improve logic and increase coverage of unit test

* fix test

* format HTML

* fix edge case

* update @types/wordpress__data package

* update placeholder, icon and description

* update tsconfig

* update block name

* fix SCSS linter error

* address feedback

* create SingleProductTemplateCompatibility class

* Add Hooks compatibility

* remove not used file

* remove not used files

* Add compatibility layer for the Single Product template

* fix check

* implement Product meta template header

* Product Price Block: Add support Single Product Template

* fix missing import

* add comment

* return a value

* improve comment

* fix import

* Add Product Meta block

* wrap up default single product html

* fix: related products and grouped products result #8589

* remove classname

* fix crash

* update template

---------

Co-authored-by: Alexandre Lara <[email protected]>
Co-authored-by: Patricia Hillebrandt <[email protected]>

* Fix images width in the Single Product page

* Remove the !important attribute from the Product Image Gallery block

* fix sku block

* improve layout

* fix header and footer template parts declaration

---------

Co-authored-by: Luigi <[email protected]>
Co-authored-by: Patricia Hillebrandt <[email protected]>

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"} /-->