Product Collection - Fix undefined layout attribute issue in migration (https://github.com/woocommerce/woocommerce-blocks/pull/11196)

This commit addresses an issue where layout attributes could become undefined during the block migration process. Alongside this fix, several updates were made to align the migration logic with the new `ProductCollectionDisplayLayout` types:

- Added logic to handle `undefined` layout attributes, defaulting to `DEFAULT_ATTRIBUTES.displayLayout`.
- Removed `ProductGridLayout` and `ProductGridLayoutTypes` from the types file.
- Imported `LayoutOptions` and `ProductCollectionDisplayLayout` from the product-collection module.
- Updated the `mapLayoutType` and `mapLayoutPropertiesFrom...` functions to use the new layout types.
- Updated transformation functions like `transformProductTemplate` and `transformPostSummary` to use the new types.

These changes not only resolve the issue with undefined layout attributes but also align the codebase with the new layout options, enhancing code maintainability.

plugins/woocommerce-blocks/assets/js/blocks/migration-products-to-product-collection/migration-from-product-collection-to-products.ts

@@ -17,11 +17,13 @@ import {
 import type {
 	TransformBlock,
 	IsBlockType,
-	ProductGridLayout,
-	ProductGridLayoutTypes,
 	PostTemplateLayout,
 	PostTemplateLayoutTypes,
 } from './types';
+import {
+	LayoutOptions,
+	ProductCollectionDisplayLayout,
+} from '../product-collection/types';
 
 const VARIATION_NAME = 'woocommerce/product-query';
 
@@ -77,9 +79,7 @@ const isPostSummary: IsBlockType = ( { name, attributes } ) =>
 	attributes.__woocommerceNamespace ===
 		'woocommerce/product-collection/product-summary';
 
-const mapLayoutType = (
+const mapLayoutType = ( type: LayoutOptions ): PostTemplateLayoutTypes => {
-	type: ProductGridLayoutTypes
-): PostTemplateLayoutTypes => {
 	if ( type === 'flex' ) {
 		return 'grid';
 	}
@@ -90,7 +90,7 @@ const mapLayoutType = (
 };
 
 const mapLayoutPropertiesFromProductCollectionToPostTemplate = (
-	layout: ProductGridLayout
+	layout: ProductCollectionDisplayLayout
 ): PostTemplateLayout => {
 	const { type, columns } = layout;
 
@@ -103,7 +103,7 @@ const mapLayoutPropertiesFromProductCollectionToPostTemplate = (
 const transformProductTemplate: TransformBlock = (
 	block,
 	innerBlocks,
-	displayLayout?: ProductGridLayout
+	displayLayout?: ProductCollectionDisplayLayout
 ) => {
 	return createBlock(
 		'core/post-template',
@@ -111,7 +111,7 @@ const transformProductTemplate: TransformBlock = (
 			className: 'products-block-post-template',
 			layout: postTemplateHasSupportForGridView
 				? mapLayoutPropertiesFromProductCollectionToPostTemplate(
-						displayLayout as ProductGridLayout
+						displayLayout as ProductCollectionDisplayLayout
 				  )
 				: undefined,
 			__woocommerceNamespace:
@@ -150,7 +150,7 @@ const transformPostSummary: TransformBlock = ( block, innerBlocks ) => {
 
 const mapInnerBlocks = (
 	innerBlocks: BlockInstance[],
-	displayLayout?: ProductGridLayout
+	displayLayout?: ProductCollectionDisplayLayout
 ): BlockInstance[] => {
 	const mappedInnerBlocks = innerBlocks.map( ( innerBlock ) => {
 		const { name, attributes } = innerBlock;

plugins/woocommerce-blocks/assets/js/blocks/migration-products-to-product-collection/migration-from-products-to-product-collection.ts

@@ -22,11 +22,14 @@ import {
 import type {
 	TransformBlock,
 	IsBlockType,
-	ProductGridLayout,
-	ProductGridLayoutTypes,
 	PostTemplateLayout,
 	PostTemplateLayoutTypes,
 } from './types';
+import { DEFAULT_ATTRIBUTES } from '../product-collection/constants';
+import {
+	LayoutOptions,
+	ProductCollectionDisplayLayout,
+} from '../product-collection/types';
 
 const mapAttributes = ( attributes: Record< string, unknown > ) => {
 	const { query, namespace, ...restAttributes } = attributes;
@@ -106,21 +109,23 @@ const transformPostSummary: TransformBlock = ( block, innerBlocks ) => {
 	);
 };
 
-const mapLayoutType = (
+const mapLayoutType = ( type: PostTemplateLayoutTypes ): LayoutOptions => {
-	type: PostTemplateLayoutTypes
-): ProductGridLayoutTypes => {
 	if ( type === 'grid' ) {
-		return 'flex';
+		return LayoutOptions.GRID;
 	}
 	if ( type === 'default' ) {
-		return 'list';
+		return LayoutOptions.STACK;
 	}
-	return 'flex';
+	return LayoutOptions.GRID;
 };
 
 const mapLayoutPropertiesFromPostTemplateToProductCollection = (
 	layout: PostTemplateLayout
-): ProductGridLayout => {
+): ProductCollectionDisplayLayout => {
+	if ( layout === undefined ) {
+		return DEFAULT_ATTRIBUTES.displayLayout as ProductCollectionDisplayLayout;
+	}
+
 	const { type, columnCount } = layout;
 
 	return {
@@ -132,7 +137,7 @@ const mapLayoutPropertiesFromPostTemplateToProductCollection = (
 const getLayoutAttribute = (
 	attributes,
 	innerBlocks: BlockInstance[]
-): ProductGridLayout => {
+): ProductCollectionDisplayLayout => {
 	// Starting from GB 16, it's not Query Loop that keeps the layout, but the Post Template block.
 	// We need to account for that and in that case, move the layout properties
 	// from Post Template to Product Collection.

plugins/woocommerce-blocks/assets/js/blocks/migration-products-to-product-collection/types.ts

@@ -9,14 +9,8 @@ export type TransformBlock = (
 	block: BlockInstance,
 	innerBlock: BlockInstance[]
 ) => BlockInstance;
-export type ProductGridLayoutTypes = 'flex' | 'list';
 export type PostTemplateLayoutTypes = 'grid' | 'default';
 
-export type ProductGridLayout = {
-	type: ProductGridLayoutTypes;
-	columns: number;
-};
-
 export type PostTemplateLayout = {
 	type: PostTemplateLayoutTypes;
 	columnCount: number;