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>

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;
 					}

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 },

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 );
+			} );
+		} )
+	);
+}