From e4f03589abdfa794454766b8eff1bded4498a546 Mon Sep 17 00:00:00 2001
From: Fernando Marichal <fernando.marichal@automattic.com>
Date: Wed, 11 Sep 2024 09:54:43 -0300
Subject: [PATCH] Deprecate single product block save (#51153)

* Add deprecated save

* Fix button styles

* Add changelog

* Add attributes to deprecated prop

* Add supports prop to deprecated obj

* Add code comment
---
 .../js/blocks/single-product/deprecated.tsx   | 28 +++++++++++++++++++
 .../assets/js/blocks/single-product/index.tsx |  2 ++
 .../assets/js/blocks/single-product/save.tsx  |  1 +
 .../fix-deprectated_single_product_block_save |  4 +++
 .../client/legacy/css/woocommerce.scss        |  5 +++-
 5 files changed, 39 insertions(+), 1 deletion(-)
 create mode 100644 plugins/woocommerce-blocks/assets/js/blocks/single-product/deprecated.tsx
 create mode 100644 plugins/woocommerce/changelog/fix-deprectated_single_product_block_save

diff --git a/plugins/woocommerce-blocks/assets/js/blocks/single-product/deprecated.tsx b/plugins/woocommerce-blocks/assets/js/blocks/single-product/deprecated.tsx
new file mode 100644
index 00000000000..6b34e7e0532
--- /dev/null
+++ b/plugins/woocommerce-blocks/assets/js/blocks/single-product/deprecated.tsx
@@ -0,0 +1,28 @@
+/**
+ * External dependencies
+ */
+import { InnerBlocks, useBlockProps } from '@wordpress/block-editor';
+
+/**
+ * Internal dependencies
+ */
+import metadata from './block.json';
+
+const v1 = {
+	attributes: metadata.attributes,
+	supports: metadata.supports,
+	save: () => {
+		const blockProps = useBlockProps.save();
+
+		return (
+			<div { ...blockProps }>
+				{ /* @ts-expect-error: `InnerBlocks.Content` is a component that is typed in WordPress core*/ }
+				<InnerBlocks.Content />
+			</div>
+		);
+	},
+};
+
+const deprecated = [ v1 ];
+
+export default deprecated;
diff --git a/plugins/woocommerce-blocks/assets/js/blocks/single-product/index.tsx b/plugins/woocommerce-blocks/assets/js/blocks/single-product/index.tsx
index 2aa3556604d..a2f9363ef2b 100644
--- a/plugins/woocommerce-blocks/assets/js/blocks/single-product/index.tsx
+++ b/plugins/woocommerce-blocks/assets/js/blocks/single-product/index.tsx
@@ -10,10 +10,12 @@ import { BLOCK_ICON } from './constants';
 import metadata from './block.json';
 import edit from './edit';
 import save from './save';
+import deprecated from './deprecated';
 
 // @ts-expect-error: `registerBlockType` is a function that is typed in WordPress core.
 registerBlockType( metadata, {
 	icon: BLOCK_ICON,
 	edit,
 	save,
+	deprecated,
 } );
diff --git a/plugins/woocommerce-blocks/assets/js/blocks/single-product/save.tsx b/plugins/woocommerce-blocks/assets/js/blocks/single-product/save.tsx
index 4c8f4ef2973..d856b438b9a 100644
--- a/plugins/woocommerce-blocks/assets/js/blocks/single-product/save.tsx
+++ b/plugins/woocommerce-blocks/assets/js/blocks/single-product/save.tsx
@@ -4,6 +4,7 @@
 import { InnerBlocks, useBlockProps } from '@wordpress/block-editor';
 
 const Save = () => {
+	// We add the `woocommerce` class to the wrapper to apply WooCommerce styles to the block.
 	const blockProps = useBlockProps.save( {
 		className: 'woocommerce',
 	} );
diff --git a/plugins/woocommerce/changelog/fix-deprectated_single_product_block_save b/plugins/woocommerce/changelog/fix-deprectated_single_product_block_save
new file mode 100644
index 00000000000..f6ce0f16e03
--- /dev/null
+++ b/plugins/woocommerce/changelog/fix-deprectated_single_product_block_save
@@ -0,0 +1,4 @@
+Significance: minor
+Type: fix
+
+Deprecate single product block save #51153
diff --git a/plugins/woocommerce/client/legacy/css/woocommerce.scss b/plugins/woocommerce/client/legacy/css/woocommerce.scss
index 8c97759bf97..46c0d0405e4 100644
--- a/plugins/woocommerce/client/legacy/css/woocommerce.scss
+++ b/plugins/woocommerce/client/legacy/css/woocommerce.scss
@@ -1699,7 +1699,10 @@ p.demo_store,
  * Buttons
  */
 .woocommerce:where(body:not(.woocommerce-block-theme-has-button-styles)),
-:where(body:not(.woocommerce-block-theme-has-button-styles)) .woocommerce {
+:where(body:not(.woocommerce-block-theme-has-button-styles)):where(
+		:not(.edit-post-visual-editor *)
+	)
+	.woocommerce {
 	a.button,
 	button.button,
 	input.button,