Commit 2aa45e2b915 for woocommerce

commit 2aa45e2b915ec884c9a4249ae03db92794c79075
Author: Tung Du <dinhtungdu@gmail.com>
Date:   Mon Aug 10 12:36:10 2026 +0700

    Product Details: Support padding, margin, background, and border (#67409)

    * add: support Product Details block styles

    * test: remove Product Details style E2E coverage

    * docs: update Product Details block reference

diff --git a/docs/block-development/reference/block-references.md b/docs/block-development/reference/block-references.md
index c4d9af106c2..7e7a4c0b1e4 100644
--- a/docs/block-development/reference/block-references.md
+++ b/docs/block-development/reference/block-references.md
@@ -1230,7 +1230,7 @@ Display a product's description, attributes, and reviews

 - **Name:** woocommerce/product-details
 - **Category:** woocommerce
-- **Supports:** align (full, wide), interactivity (clientNavigation)
+- **Supports:** align (full, wide), color (background, ~~text~~), interactivity (clientNavigation), spacing (margin, padding)
 - **Attributes:** align, hideTabTitle

 ## Product Filters - woocommerce/product-filters
diff --git a/plugins/woocommerce/changelog/add-product-details-style-supports b/plugins/woocommerce/changelog/add-product-details-style-supports
new file mode 100644
index 00000000000..e9f8032dba7
--- /dev/null
+++ b/plugins/woocommerce/changelog/add-product-details-style-supports
@@ -0,0 +1,4 @@
+Significance: minor
+Type: enhancement
+
+Add background, spacing, and border style controls to the Product Details block.
diff --git a/plugins/woocommerce/client/blocks/assets/js/blocks/product-details/block.json b/plugins/woocommerce/client/blocks/assets/js/blocks/product-details/block.json
index 4eb818278eb..18a06360e45 100644
--- a/plugins/woocommerce/client/blocks/assets/js/blocks/product-details/block.json
+++ b/plugins/woocommerce/client/blocks/assets/js/blocks/product-details/block.json
@@ -10,7 +10,21 @@
 		"interactivity": {
 			"clientNavigation": true
 		},
-		"align": [ "wide", "full" ]
+		"align": [ "wide", "full" ],
+		"color": {
+			"background": true,
+			"text": false
+		},
+		"spacing": {
+			"margin": true,
+			"padding": true
+		},
+		"__experimentalBorder": {
+			"color": true,
+			"radius": true,
+			"style": true,
+			"width": true
+		}
 	},
 	"attributes": {
 		"align": {
diff --git a/plugins/woocommerce/client/blocks/assets/js/blocks/product-details/test/block.tsx b/plugins/woocommerce/client/blocks/assets/js/blocks/product-details/test/block.tsx
index b1c27c78b6c..6b6390fdd8b 100644
--- a/plugins/woocommerce/client/blocks/assets/js/blocks/product-details/test/block.tsx
+++ b/plugins/woocommerce/client/blocks/assets/js/blocks/product-details/test/block.tsx
@@ -3,7 +3,8 @@
  */
 import '@testing-library/jest-dom';
 import { screen, waitFor, within } from '@testing-library/react';
-import { createBlock, type BlockAttributes } from '@wordpress/blocks';
+import { createBlock, getBlockType, serialize } from '@wordpress/blocks';
+import type { BlockAttributes } from '@wordpress/blocks';
 import { http, HttpResponse } from 'msw';
 import { setupServer } from 'msw/node';
 import { useSelect } from '@wordpress/data';
@@ -60,6 +61,74 @@ jest.mock( '@woocommerce/settings', () => ( {
 } ) );

 describe( 'Product Details block', () => {
+	test( 'registers only the approved style supports', () => {
+		expect(
+			getBlockType( 'woocommerce/product-details' )?.supports
+		).toEqual( {
+			interactivity: { clientNavigation: true },
+			align: [ 'wide', 'full' ],
+			color: { background: true, text: false },
+			spacing: { margin: true, padding: true },
+			__experimentalBorder: {
+				color: true,
+				radius: true,
+				style: true,
+				width: true,
+			},
+		} );
+	} );
+
+	test( 'preserves unstyled serialization', () => {
+		expect(
+			serialize( createBlock( 'woocommerce/product-details' ) )
+		).toBe(
+			'<!-- wp:woocommerce/product-details -->\n<div class="wp-block-woocommerce-product-details alignwide"></div>\n<!-- /wp:woocommerce/product-details -->'
+		);
+	} );
+
+	test( 'serializes preset and custom styles without text color', () => {
+		const content = serialize(
+			createBlock( 'woocommerce/product-details', {
+				backgroundColor: 'contrast',
+				borderColor: 'accent-1',
+				style: {
+					border: { radius: '4px', style: 'solid', width: '2px' },
+					spacing: {
+						margin: { top: 'var:preset|spacing|20', right: '0' },
+						padding: { bottom: '1rem', left: '1rem' },
+					},
+				},
+			} )
+		);
+
+		expect( content ).toContain(
+			'has-accent-1-border-color has-contrast-background-color has-background'
+		);
+		expect( content ).toContain(
+			'border-style:solid;border-width:2px;border-radius:4px;margin-top:var(--wp--preset--spacing--20);margin-right:0;padding-bottom:1rem;padding-left:1rem'
+		);
+		expect( content ).not.toContain( 'has-text-color' );
+	} );
+
+	test( 'distinguishes explicit zero styles from reset styles', () => {
+		const zero = serialize(
+			createBlock( 'woocommerce/product-details', {
+				style: {
+					border: { radius: '0', width: '0' },
+					spacing: { margin: { top: '0' }, padding: { bottom: '0' } },
+				},
+			} )
+		);
+		expect( zero ).toContain(
+			'style="border-width:0;border-radius:0;margin-top:0;padding-bottom:0"'
+		);
+		expect(
+			serialize(
+				createBlock( 'woocommerce/product-details', { style: {} } )
+			)
+		).not.toContain( 'style=' );
+	} );
+
 	describe( 'Single Product block', () => {
 		const server = setupServer(
 			http.get( '/wc-admin/options', ( { request } ) => {