Single Product block: Add wide and full-width alignments support (https://github.com/woocommerce/woocommerce-blocks/pull/8981)

* Add align support to single product block

* Fix block alignment that was not being set on the frontend

* Remove classname prop from the Single Product Edit component

plugins/woocommerce-blocks/assets/js/blocks/single-product/block.json

@@ -6,7 +6,9 @@
 	"description": "Display a single product.",
 	"category": "woocommerce",
 	"keywords": [ "WooCommerce" ],
-	"supports": {},
+	"supports": {
+		"align": [ "wide", "full" ]
+	},
 	"attributes": {
 		"isPreview": {
 		   "type": "boolean",

plugins/woocommerce-blocks/assets/js/blocks/single-product/edit/index.tsx

@@ -40,7 +40,6 @@ interface EditorProps {
 }
 
 const Editor = ( {
-	className,
 	attributes,
 	setAttributes,
 	error,
@@ -69,7 +68,7 @@ const Editor = ( {
 	}
 
 	return (
-		<div className={ className }>
+		<div { ...blockProps }>
 			{ /* eslint-disable-next-line @typescript-eslint/ban-ts-comment */ }
 			{ /* @ts-ignore */ }
 			<BlockErrorBoundary
@@ -105,7 +104,7 @@ const Editor = ( {
 						</div>
 					</Placeholder>
 				) : (
-					<div { ...blockProps }>
+					<div>
 						<InspectorControls>
 							<PanelBody
 								title={ __(

plugins/woocommerce-blocks/src/BlockTypes/SingleProduct.php

@@ -51,12 +51,13 @@ class SingleProduct extends AbstractBlock {
 	 */
 	protected function render( $attributes, $content, $block ) {
 		$classname = $attributes['className'] ?? '';
+		$wrapper_attributes = get_block_wrapper_attributes( array( 'class' => $classname ) );
 
 		$html = sprintf(
-			'<div class="wp-block-woocommerce-single-product %1$s">
+			'<div %1$s>
 				%2$s
 			</div>',
-			esc_attr( $classname ),
+			$wrapper_attributes,
 			$content
 		);