Fix: Default values of attributes not saving as serialized block comment

This was happening because of this issue: WordPress/gutenberg#7342

Therefore, I had to use `useEffect` to set the default values of the attributes.

Here is the list of changes I made:
1. Removed default values from `block.json` for `query`, `tagName`, and `displayLayout`.
2. Moved the default values to `constants.ts` and created a new object `DEFAULT_ATTRIBUTES` to store them.
3. Relocated `constants.ts` from `inspector-controls` to the parent directory.
4. Refactored `edit.tsx` to use `DEFAULT_ATTRIBUTES` from `constants.ts` to set default attributes using `useEffect`.
5. Removed the attributes assignment from `registerBlockType` in `index.tsx`.
6. Updated `columns-control.tsx`, `index.tsx`, `order-by-control.tsx`, and `stock-status-control.tsx` to import from the relocated `constants.ts`.
7. Updated `ProductCollectionAttributes` and `ProductCollectionQuery` in `types.ts` to include `tagName` and `isProductCollectionBlock` respectively.
8. Modified `ProductCollection.php` to match the updated `orderBy` key in the query parameter.

This refactor enhances the readability of the code and reduces duplication by keeping all constants and default values in one place.

assets/js/blocks/product-collection/block.json

@@ -13,35 +13,13 @@
 			"type": "number"
 		},
 		"query": {
-			"type": "object",
-			"default": {
-				"perPage": 9,
-				"pages": 0,
-				"offset": 0,
-				"postType": "product",
-				"order": "asc",
-				"orderBy": "title",
-				"author": "",
-				"search": "",
-				"exclude": [],
-				"sticky": "",
-				"inherit": false,
-				"taxQuery": null,
-				"parents": [],
-				"isProductCollectionBlock": true,
-				"woocommerceOnSale": false
-			}
+			"type": "object"
 		},
 		"tagName": {
-			"type": "string",
-			"default": "div"
+			"type": "string"
 		},
 		"displayLayout": {
-			"type": "object",
-			"default": {
-				"type": "flex",
-				"columns": 3
-			}
+			"type": "object"
 		}
 	},
 	"providesContext": {

assets/js/blocks/product-collection/inspector-controls/constants.ts → assets/js/blocks/product-collection/constants.ts

@@ -7,14 +7,13 @@ import { objectOmit } from '@woocommerce/utils';
 /**
  * Internal dependencies
  */
-import blockJson from '../block.json';
 import {
 	ProductCollectionAttributes,
 	TProductCollectionOrder,
 	TProductCollectionOrderBy,
-} from '../types';
-
-const defaultQuery = blockJson.attributes.query.default;
+	ProductCollectionQuery,
+	ProductCollectionDisplayLayout,
+} from './types';
 
 export const STOCK_STATUS_OPTIONS = getSetting< Record< string, string > >(
 	'stockStatusOptions',
@@ -32,20 +31,48 @@ export const getDefaultStockStatuses = () => {
 		: Object.keys( STOCK_STATUS_OPTIONS );
 };
 
-export const DEFAULT_FILTERS = {
-	woocommerceOnSale: defaultQuery.woocommerceOnSale,
-	woocommerceStockStatus: getDefaultStockStatuses(),
+export const DEFAULT_ATTRIBUTES: Partial< ProductCollectionAttributes > = {
+	query: {
+		perPage: 9,
+		pages: 0,
+		offset: 0,
+		postType: 'product',
+		order: 'asc',
+		orderBy: 'title',
+		author: '',
+		search: '',
+		exclude: [],
+		sticky: '',
+		inherit: false,
+		taxQuery: '',
+		parents: [],
+		isProductCollectionBlock: true,
+		woocommerceOnSale: false,
+		woocommerceStockStatus: getDefaultStockStatuses(),
+	},
+	tagName: 'div',
+	displayLayout: {
+		type: 'flex',
+		columns: 3,
+	},
 };
 
 export const getDefaultSettings = (
 	currentAttributes: ProductCollectionAttributes
 ): Partial< ProductCollectionAttributes > => ( {
-	displayLayout: blockJson.attributes.displayLayout.default,
+	displayLayout:
+		DEFAULT_ATTRIBUTES.displayLayout as ProductCollectionDisplayLayout,
 	query: {
 		...currentAttributes.query,
-		orderBy: blockJson.attributes.query.default
+		orderBy: ( DEFAULT_ATTRIBUTES.query as ProductCollectionQuery )
 			.orderBy as TProductCollectionOrderBy,
-		order: blockJson.attributes.query.default
+		order: ( DEFAULT_ATTRIBUTES.query as ProductCollectionQuery )
 			.order as TProductCollectionOrder,
 	},
 } );
+
+export const DEFAULT_FILTERS = {
+	woocommerceOnSale: ( DEFAULT_ATTRIBUTES.query as ProductCollectionQuery )
+		.woocommerceOnSale,
+	woocommerceStockStatus: getDefaultStockStatuses(),
+};

assets/js/blocks/product-collection/edit.tsx

@@ -13,6 +13,7 @@ import { ImageSizing } from '../../atomic/blocks/product-elements/image/types';
 import { ProductCollectionAttributes } from './types';
 import { VARIATION_NAME as PRODUCT_TITLE_ID } from './variations/elements/product-title';
 import InspectorControls from './inspector-controls';
+import { DEFAULT_ATTRIBUTES } from './constants';
 
 export const INNER_BLOCKS_TEMPLATE: InnerBlockTemplate[] = [
 	[
@@ -82,11 +83,19 @@ const Edit = ( props: BlockEditProps< ProductCollectionAttributes > ) => {
 
 	const instanceId = useInstanceId( Edit );
 
+	/**
+	 * Because of issue https://github.com/WordPress/gutenberg/issues/7342,
+	 * We are using this workaround to set default attributes.
+	 */
+	useEffect( () => {
+		setAttributes( { ...DEFAULT_ATTRIBUTES, ...attributes } );
+	}, [ setAttributes ] );
+
 	// We need this for multi-query block pagination.
 	// Query parameters for each block are scoped to their ID.
 	useEffect( () => {
 		if ( ! Number.isFinite( queryId ) ) {
-			setAttributes( { queryId: instanceId } );
+			setAttributes( { queryId: Number( instanceId ) } );
 		}
 	}, [ queryId, instanceId, setAttributes ] );
 

assets/js/blocks/product-collection/index.tsx

@@ -12,21 +12,10 @@ import edit from './edit';
 import save from './save';
 import icon from './icon';
 import './variations';
-import { getDefaultStockStatuses } from './inspector-controls/constants';
 
 if ( isExperimentalBuild() ) {
 	registerBlockType( metadata, {
 		icon,
-		attributes: {
-			...metadata.attributes,
-			query: {
-				...metadata.attributes.query,
-				default: {
-					...metadata.attributes.query.default,
-					woocommerceStockStatus: getDefaultStockStatuses(),
-				},
-			},
-		},
 		edit,
 		save,
 	} );

assets/js/blocks/product-collection/inspector-controls/columns-control.tsx

@@ -17,7 +17,7 @@ import {
 	ProductCollectionAttributes,
 	ProductCollectionDisplayLayout,
 } from '../types';
-import { getDefaultSettings } from './constants';
+import { getDefaultSettings } from '../constants';
 
 const ColumnsControl = (
 	props: BlockEditProps< ProductCollectionAttributes >

assets/js/blocks/product-collection/inspector-controls/index.tsx

@@ -18,7 +18,7 @@ import ColumnsControl from './columns-control';
 import OrderByControl from './order-by-control';
 import OnSaleControl from './on-sale-control';
 import { setQueryAttribute } from './utils';
-import { DEFAULT_FILTERS, getDefaultSettings } from './constants';
+import { DEFAULT_FILTERS, getDefaultSettings } from '../constants';
 import StockStatusControl from './stock-status-control';
 
 const ProductCollectionInspectorControls = (

assets/js/blocks/product-collection/inspector-controls/order-by-control.tsx

@@ -18,7 +18,7 @@ import {
 	TProductCollectionOrder,
 	TProductCollectionOrderBy,
 } from '../types';
-import { getDefaultSettings } from './constants';
+import { getDefaultSettings } from '../constants';
 
 const orderOptions = [
 	{

assets/js/blocks/product-collection/inspector-controls/stock-status-control.tsx

@@ -16,7 +16,7 @@ import {
  */
 import { ProductCollectionAttributes } from '../types';
 import { setQueryAttribute } from './utils';
-import { STOCK_STATUS_OPTIONS, getDefaultStockStatuses } from './constants';
+import { STOCK_STATUS_OPTIONS, getDefaultStockStatuses } from '../constants';
 
 /**
  * Gets the id of a specific stock status from its text label

assets/js/blocks/product-collection/types.ts

@@ -8,6 +8,7 @@ export interface ProductCollectionAttributes {
 	];
 	templateSlug: string;
 	displayLayout: ProductCollectionDisplayLayout;
+	tagName: string;
 }
 
 export interface ProductCollectionDisplayLayout {
@@ -44,6 +45,7 @@ export interface ProductCollectionQuery {
 	 * ```
 	 */
 	woocommerceStockStatus?: string[];
+	isProductCollectionBlock?: boolean;
 }
 
 export type TProductCollectionOrder = 'asc' | 'desc';

src/BlockTypes/ProductCollection.php

@@ -76,7 +76,7 @@ public function update_rest_query( $args, $request ): array {
 			return $args;
 		}
 
-		$orderby      = $request->get_param( 'orderby' );
+		$orderby      = $request->get_param( 'orderBy' );
 		$on_sale      = $request->get_param( 'woocommerceOnSale' ) === 'true';
 		$stock_status = $request->get_param( 'woocommerceStockStatus' );
 
@@ -126,10 +126,9 @@ public function build_query( $query, $block, $page ) {
 
 		$common_query_values = array(
 			'meta_query'     => array(),
-			'posts_per_page' => $query['posts_per_page'],
-			'orderby'        => $query['orderby'],
-			'order'          => $query['order'],
-			'offset'         => $query['offset'],
+			'posts_per_page' => $block_context_query['perPage'],
+			'order'          => $block_context_query['order'],
+			'offset'         => $block_context_query['offset'],
 			'post__in'       => array(),
 			'post_status'    => 'publish',
 			'post_type'      => 'product',
@@ -144,6 +143,7 @@ public function build_query( $query, $block, $page ) {
 			array(
 				'on_sale'      => $is_on_sale,
 				'stock_status' => $block_context_query['woocommerceStockStatus'],
+				'orderby'      => $block_context_query['orderBy'],
 			)
 		);
 	}