Add deprecation rules

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

@@ -81,10 +81,10 @@ const blockSettings = {
  */
 registerBlockType( 'woocommerce/all-products', {
 	...blockSettings,
-	/**
-	 * Deprecation rule to handle the previous default rows which was 1 instead of 3.
-	 */
 	deprecated: [
+		/**
+		 * Deprecation rule to handle the previous default rows which was 1 instead of 3.
+		 */
 		{
 			attributes: Object.assign( {}, blockSettings.attributes, {
 				rows: { type: 'number', default: 1 },
@@ -106,5 +106,33 @@ registerBlockType( 'woocommerce/all-products', {
 				);
 			},
 		},
+		/**
+		 * Deprecation rule to handle the block without the 'is-loading' class.
+		 */
+		{
+			attributes: blockSettings.attributes,
+			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>
+				);
+			},
+		},
 	],
 } );

assets/js/blocks/reviews/all-reviews/edit.js

@@ -62,7 +62,6 @@ const AllReviewsEditor = ( { attributes, setAttributes } ) => {
 			{ getInspectorControls() }
 			<EditorContainerBlock
 				attributes={ attributes }
-				className="wc-block-all-reviews"
 				icon={
 					<Icon
 						icon={ discussion }

assets/js/blocks/reviews/all-reviews/index.js

@@ -12,8 +12,20 @@ import '../editor.scss';
 import Editor from './edit';
 import sharedAttributes from '../attributes';
 import save from '../save.js';
+import getDeprecatedProperty from '../deprecated.js';
 import { example } from '../example';
 
+const attributes = {
+	...sharedAttributes,
+	/**
+	 * Show the product name.
+	 */
+	showProductName: {
+		type: 'boolean',
+		default: true,
+	},
+};
+
 /**
  * Register and run the "All Reviews" block.
  * This block lists all product reviews.
@@ -40,16 +52,7 @@ registerBlockType( 'woocommerce/all-reviews', {
 			showProductName: true,
 		},
 	},
-	attributes: {
-		...sharedAttributes,
-		/**
-		 * Show the product name.
-		 */
-		showProductName: {
-			type: 'boolean',
-			default: true,
-		},
-	},
+	attributes,
 
 	/**
 	 * Renders and manages the block.
@@ -64,4 +67,6 @@ registerBlockType( 'woocommerce/all-reviews', {
 	 * Save the props to post content.
 	 */
 	save,
+
+	deprecated: getDeprecatedProperty( attributes ),
 } );

assets/js/blocks/reviews/deprecated.js

@@ -0,0 +1,23 @@
+/**
+ * Internal dependencies
+ */
+import { getBlockClassName, getDataAttrs } from './utils.js';
+
+export default function getDeprecatedPropert( atts ) {
+	return [
+		/**
+		 * Deprecation rule to handle the block without the 'is-loading' class.
+		 */
+		{
+			attributes: atts,
+			save( { attributes } ) {
+				return (
+					<div
+						className={ getBlockClassName( attributes ) }
+						{ ...getDataAttrs( attributes ) }
+					/>
+				);
+			},
+		},
+	];
+}

assets/js/blocks/reviews/editor-container-block.js

@@ -31,7 +31,7 @@ class EditorContainerBlock extends Component {
 	}
 
 	render() {
-		const { attributes, className, noReviewsPlaceholder } = this.props;
+		const { attributes, noReviewsPlaceholder } = this.props;
 		const {
 			categoryIds,
 			productId,
@@ -57,7 +57,7 @@ class EditorContainerBlock extends Component {
 		}
 
 		return (
-			<div className={ getBlockClassName( className, attributes ) }>
+			<div className={ getBlockClassName( attributes ) }>
 				<EditorBlock
 					attributes={ attributes }
 					categoryIds={ categoryIds }

assets/js/blocks/reviews/reviews-by-category/edit.js

@@ -174,7 +174,6 @@ const ReviewsByCategoryEditor = ( {
 			{ getInspectorControls() }
 			<EditorContainerBlock
 				attributes={ attributes }
-				className="wc-block-reviews-by-category"
 				icon={
 					<Icon
 						srcElement={ review }

assets/js/blocks/reviews/reviews-by-category/index.js

@@ -12,8 +12,27 @@ import '../editor.scss';
 import Editor from './edit';
 import sharedAttributes from '../attributes';
 import save from '../save.js';
+import getDeprecatedProperty from '../deprecated.js';
 import { example } from '../example';
 
+const attributes = {
+	...sharedAttributes,
+	/**
+	 * The ids of the categories to load reviews for.
+	 */
+	categoryIds: {
+		type: 'array',
+		default: [],
+	},
+	/**
+	 * Show the product name.
+	 */
+	showProductName: {
+		type: 'boolean',
+		default: true,
+	},
+};
+
 /**
  * Register and run the "Reviews by category" block.
  */
@@ -40,23 +59,7 @@ registerBlockType( 'woocommerce/reviews-by-category', {
 			showProductName: true,
 		},
 	},
-	attributes: {
-		...sharedAttributes,
-		/**
-		 * The ids of the categories to load reviews for.
-		 */
-		categoryIds: {
-			type: 'array',
-			default: [],
-		},
-		/**
-		 * Show the product name.
-		 */
-		showProductName: {
-			type: 'boolean',
-			default: true,
-		},
-	},
+	attributes,
 
 	/**
 	 * Renders and manages the block.
@@ -71,4 +74,6 @@ registerBlockType( 'woocommerce/reviews-by-category', {
 	 * Save the props to post content.
 	 */
 	save,
+
+	deprecated: getDeprecatedProperty( attributes ),
 } );

assets/js/blocks/reviews/reviews-by-product/edit.js

@@ -162,7 +162,6 @@ const ReviewsByProductEditor = ( {
 			{ getInspectorControls() }
 			<EditorContainerBlock
 				attributes={ attributes }
-				className="wc-block-reviews-by-product"
 				icon={
 					<Icon
 						icon={ comment }

assets/js/blocks/reviews/reviews-by-product/index.js

@@ -11,8 +11,19 @@ import '../editor.scss';
 import Editor from './edit';
 import sharedAttributes from '../attributes';
 import save from '../save.js';
+import getDeprecatedProperty from '../deprecated.js';
 import { example } from '../example';
 
+const attributes = {
+	...sharedAttributes,
+	/**
+	 * The id of the product to load reviews for.
+	 */
+	productId: {
+		type: 'number',
+	},
+};
+
 /**
  * Register and run the "Reviews by Product" block.
  */
@@ -38,15 +49,7 @@ registerBlockType( 'woocommerce/reviews-by-product', {
 			productId: 1,
 		},
 	},
-	attributes: {
-		...sharedAttributes,
-		/**
-		 * The id of the product to load reviews for.
-		 */
-		productId: {
-			type: 'number',
-		},
-	},
+	attributes,
 
 	/**
 	 * Renders and manages the block.
@@ -61,4 +64,6 @@ registerBlockType( 'woocommerce/reviews-by-product', {
 	 * Save the props to post content.
 	 */
 	save,
+
+	deprecated: getDeprecatedProperty( attributes ),
 } );

assets/js/blocks/reviews/save.js

@@ -7,47 +7,16 @@ import classNames from 'classnames';
  * Internal dependencies
  */
 import './editor.scss';
-import { getBlockClassName } from './utils.js';
+import { getBlockClassName, getDataAttrs } from './utils.js';
 
 export default ( { attributes } ) => {
-	const {
-		categoryIds,
-		imageType,
-		orderby,
-		productId,
-		reviewsOnPageLoad,
-		reviewsOnLoadMore,
-		showLoadMore,
-		showOrderby,
-	} = attributes;
-
-	const data = {
-		'data-image-type': imageType,
-		'data-orderby': orderby,
-		'data-reviews-on-page-load': reviewsOnPageLoad,
-		'data-reviews-on-load-more': reviewsOnLoadMore,
-		'data-show-load-more': showLoadMore,
-		'data-show-orderby': showOrderby,
-	};
-	let className = 'wc-block-all-reviews';
-
-	if ( productId ) {
-		data[ 'data-product-id' ] = productId;
-		className = 'wc-block-reviews-by-product';
-	}
-
-	if ( Array.isArray( categoryIds ) ) {
-		data[ 'data-category-ids' ] = categoryIds.join( ',' );
-		className = 'wc-block-reviews-by-category';
-	}
-
 	return (
 		<div
 			className={ classNames(
 				'is-loading',
-				getBlockClassName( className, attributes )
+				getBlockClassName( attributes )
 			) }
-			{ ...data }
+			{ ...getDataAttrs( attributes ) }
 		/>
 	);
 };

assets/js/blocks/reviews/utils.js

@@ -46,9 +46,11 @@ export const getReviews = ( args ) => {
 	} );
 };
 
-export const getBlockClassName = ( blockClassName, attributes ) => {
+export const getBlockClassName = ( attributes ) => {
 	const {
 		className,
+		categoryIds,
+		productId,
 		showReviewDate,
 		showReviewerName,
 		showReviewContent,
@@ -57,6 +59,16 @@ export const getBlockClassName = ( blockClassName, attributes ) => {
 		showReviewRating,
 	} = attributes;
 
+	let blockClassName = 'wc-block-all-reviews';
+
+	if ( productId ) {
+		blockClassName = 'wc-block-reviews-by-product';
+	}
+
+	if ( Array.isArray( categoryIds ) ) {
+		blockClassName = 'wc-block-reviews-by-category';
+	}
+
 	return classNames( blockClassName, className, {
 		'has-image': showReviewImage,
 		'has-name': showReviewerName,
@@ -66,3 +78,35 @@ export const getBlockClassName = ( blockClassName, attributes ) => {
 		'has-product-name': showProductName,
 	} );
 };
+
+export const getDataAttrs = ( attributes ) => {
+	const {
+		categoryIds,
+		imageType,
+		orderby,
+		productId,
+		reviewsOnPageLoad,
+		reviewsOnLoadMore,
+		showLoadMore,
+		showOrderby,
+	} = attributes;
+
+	const data = {
+		'data-image-type': imageType,
+		'data-orderby': orderby,
+		'data-reviews-on-page-load': reviewsOnPageLoad,
+		'data-reviews-on-load-more': reviewsOnLoadMore,
+		'data-show-load-more': showLoadMore,
+		'data-show-orderby': showOrderby,
+	};
+
+	if ( productId ) {
+		data[ 'data-product-id' ] = productId;
+	}
+
+	if ( Array.isArray( categoryIds ) ) {
+		data[ 'data-category-ids' ] = categoryIds.join( ',' );
+	}
+
+	return data;
+};