Remove data attributes from being saved in html of All products block (…

…#10032)

* Remove data attributes from being saved in html of All products block

* added old save in deprecated

* Addressed review comments

---------

Co-authored-by: Tung Du <dinhtungdu@gmail.com>
Co-authored-by: Roy Ho <roykho77@gmail.com>

assets/js/blocks/products/all-products/deprecated.js

@@ -33,4 +33,32 @@ const v1 = {
 	},
 };
 
-export default [ v1 ];
+const v2 = {
+	attributes: Object.assign( {}, attributeDefinitions, {
+		rows: { type: 'number', default: 1 },
+	} ),
+	save( { attributes } ) {
+		const dataAttributes = {};
+		Object.keys( attributes )
+			.sort()
+			.forEach( ( key ) => {
+				dataAttributes[ key ] = attributes[ key ];
+			} );
+		const data = {
+			'data-attributes': JSON.stringify( dataAttributes ),
+		};
+		return (
+			<div
+				className={ getBlockClassName(
+					'wc-block-all-products',
+					attributes
+				) }
+				{ ...data }
+			>
+				<InnerBlocks.Content />
+			</div>
+		);
+	},
+};
+
+export default [ v2, v1 ];

assets/js/blocks/products/all-products/save.js

@@ -9,22 +9,12 @@ import { InnerBlocks } from '@wordpress/block-editor';
 import { getBlockClassName } from '../utils.js';
 
 export default function save( { attributes } ) {
-	const dataAttributes = {};
-	Object.keys( attributes )
-		.sort()
-		.forEach( ( key ) => {
-			dataAttributes[ key ] = attributes[ key ];
-		} );
-	const data = {
-		'data-attributes': JSON.stringify( dataAttributes ),
-	};
 	return (
 		<div
 			className={ getBlockClassName(
 				'wc-block-all-products',
 				attributes
 			) }
-			{ ...data }
 		>
 			<InnerBlocks.Content />
 		</div>