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

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;

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

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',
 	} );

plugins/woocommerce/changelog/fix-deprectated_single_product_block_save

@@ -0,0 +1,4 @@
+Significance: minor
+Type: fix
+
+Deprecate single product block save #51153

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,