Product Collection - Fix undefined layout attribute issue in migration

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 = (
-	type: ProductGridLayoutTypes
-): PostTemplateLayoutTypes => {
+const mapLayoutType = ( type: LayoutOptions ): PostTemplateLayoutTypes => {
 	if ( type === 'flex' ) {
 		return 'grid';
 	}
@@ -90,7 +90,7 @@ const mapLayoutType = (
 };
 
 const mapLayoutPropertiesFromProductCollectionToPostTemplate = (
-	layout: ProductGridLayout
+	layout: ProductCollectionDisplayLayout
 ): PostTemplateLayout => {
 	const { type, columns } = layout;
 
@@ -103,15 +103,15 @@ const mapLayoutPropertiesFromProductCollectionToPostTemplate = (
 const transformProductTemplate: TransformBlock = (
 	block,
 	innerBlocks,
-	displayLayout?: ProductGridLayout
+	displayLayout?: ProductCollectionDisplayLayout
 ) => {
 	return createBlock(
 		'core/post-template',
 		{
 			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;

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 = (
-	type: PostTemplateLayoutTypes
-): ProductGridLayoutTypes => {
+const mapLayoutType = ( type: PostTemplateLayoutTypes ): LayoutOptions => {
 	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.

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;