From d85a6ecbd2f60384731f906b24dec1079f91f369 Mon Sep 17 00:00:00 2001
From: Luigi Teschio <gigitux@gmail.com>
Date: Fri, 2 Jun 2023 16:16:20 +0200
Subject: [PATCH] Blockified Single Product Template: add product-classes via
 `wc_get_product_class`
 (https://github.com/woocommerce/woocommerce-blocks/pull/9697)

* Blockified Single Product Template: add product-classes via wc_get_product_class

* Update src/BlockTemplatesController.php

Co-authored-by: Karol Manijak <karol.manijak@automattic.com>

---------

Co-authored-by: Karol Manijak <karol.manijak@automattic.com>
---
 .../src/BlockTemplatesController.php          |  8 +++
 .../tests/e2e-pw/playwright.config.ts         |  2 +-
 ...ingle-product-template.block_theme.spec.ts | 57 +++++++++++++++++++
 3 files changed, 66 insertions(+), 1 deletion(-)
 create mode 100644 plugins/woocommerce-blocks/tests/e2e-pw/tests/single-product-template/single-product-template.block_theme.spec.ts

diff --git a/plugins/woocommerce-blocks/src/BlockTemplatesController.php b/plugins/woocommerce-blocks/src/BlockTemplatesController.php
index e0904954735..4b90430d393 100644
--- a/plugins/woocommerce-blocks/src/BlockTemplatesController.php
+++ b/plugins/woocommerce-blocks/src/BlockTemplatesController.php
@@ -328,6 +328,14 @@ class BlockTemplatesController {
 					// The second condition is necessary to not apply the compatibility layer on the REST API. Gutenberg uses the REST API to clone the template.
 					// More details: https://github.com/woocommerce/woocommerce-blocks/issues/9662.
 					if ( ( ! is_admin() && ! ( defined( 'REST_REQUEST' ) && REST_REQUEST ) ) && ! BlockTemplateUtils::template_has_legacy_template_block( $template ) ) {
+						// Add the product class to the body. We should move this to a more appropriate place.
+						add_filter(
+							'body_class',
+							function( $classes ) {
+								return array_merge( $classes, wc_get_product_class() );
+							}
+						);
+
 						$new_content       = SingleProductTemplateCompatibility::add_compatibility_layer( $template->content );
 						$template->content = $new_content;
 					}
diff --git a/plugins/woocommerce-blocks/tests/e2e-pw/playwright.config.ts b/plugins/woocommerce-blocks/tests/e2e-pw/playwright.config.ts
index db83ef4d4d0..d81ecf006e4 100644
--- a/plugins/woocommerce-blocks/tests/e2e-pw/playwright.config.ts
+++ b/plugins/woocommerce-blocks/tests/e2e-pw/playwright.config.ts
@@ -35,7 +35,7 @@ const config: ExtendedPlaywrightTestConfig = {
 	use: {
 		baseURL: BASE_URL,
 		screenshot: 'only-on-failure',
-		stateDir: './tests/e2e-pw/test-results/storage/',
+		stateDir: 'tests/e2e-pw/test-results/storage/',
 		trace: 'retain-on-failure',
 		video: 'on-first-retry',
 		viewport: { width: 1280, height: 720 },
diff --git a/plugins/woocommerce-blocks/tests/e2e-pw/tests/single-product-template/single-product-template.block_theme.spec.ts b/plugins/woocommerce-blocks/tests/e2e-pw/tests/single-product-template/single-product-template.block_theme.spec.ts
new file mode 100644
index 00000000000..4d6bdf727d2
--- /dev/null
+++ b/plugins/woocommerce-blocks/tests/e2e-pw/tests/single-product-template/single-product-template.block_theme.spec.ts
@@ -0,0 +1,57 @@
+/**
+ * External dependencies
+ */
+import { test, expect } from '@woocommerce/e2e-playwright-utils';
+
+const products = [
+	{
+		product: 'Album',
+		// Copy-pasted by WooCommerce Core Legacy Template.
+		classes: [
+			'product',
+			'type-product',
+			'status-publish',
+			'instock',
+			'product_cat-music',
+			'has-post-thumbnail',
+			'downloadable',
+			'virtual',
+			'purchasable',
+			'product-type-simple',
+		],
+		frontendPage: '/product/album/',
+	},
+	{
+		product: 'Hoodie',
+		// Copy-pasted by WooCommerce Core Legacy Template.
+		classes: [
+			'product',
+			'type-product',
+			'status-publish',
+			'instock',
+			'product_cat-hoodies',
+			'has-post-thumbnail',
+			'sale',
+			'shipping-taxable',
+			'purchasable',
+			'product-type-variable',
+		],
+		frontendPage: '/product/hoodie/',
+	},
+];
+
+for ( const { classes, product, frontendPage } of products ) {
+	test.describe( `The Single Product page of the ${ product }`, () =>
+		test( 'add product specific classes to the body', async ( {
+			page,
+		} ) => {
+			await page.goto( frontendPage );
+			const body = await page.locator( 'body' );
+			const bodyClasses = await body.getAttribute( 'class' );
+
+			classes.forEach( ( className ) => {
+				expect( bodyClasses?.split( ' ' ) ).toContain( className );
+			} );
+		} )
+	);
+}