From e88fa940267a5b1ee7053f2ad3e69302b505bee4 Mon Sep 17 00:00:00 2001 From: Manish Menaria Date: Wed, 11 Oct 2023 11:00:26 +0530 Subject: [PATCH] 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. --- ...ion-from-product-collection-to-products.ts | 18 ++++++------- ...ion-from-products-to-product-collection.ts | 25 +++++++++++-------- .../types.ts | 6 ----- 3 files changed, 24 insertions(+), 25 deletions(-) diff --git a/plugins/woocommerce-blocks/assets/js/blocks/migration-products-to-product-collection/migration-from-product-collection-to-products.ts b/plugins/woocommerce-blocks/assets/js/blocks/migration-products-to-product-collection/migration-from-product-collection-to-products.ts index 18444ae11ee..722969f2d59 100644 --- a/plugins/woocommerce-blocks/assets/js/blocks/migration-products-to-product-collection/migration-from-product-collection-to-products.ts +++ b/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 = ( - 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,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; diff --git a/plugins/woocommerce-blocks/assets/js/blocks/migration-products-to-product-collection/migration-from-products-to-product-collection.ts b/plugins/woocommerce-blocks/assets/js/blocks/migration-products-to-product-collection/migration-from-products-to-product-collection.ts index 0de18ef3e08..dca5dd9d6d2 100644 --- a/plugins/woocommerce-blocks/assets/js/blocks/migration-products-to-product-collection/migration-from-products-to-product-collection.ts +++ b/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 = ( - 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. diff --git a/plugins/woocommerce-blocks/assets/js/blocks/migration-products-to-product-collection/types.ts b/plugins/woocommerce-blocks/assets/js/blocks/migration-products-to-product-collection/types.ts index 1fd795a6636..bfb65f1c38a 100644 --- a/plugins/woocommerce-blocks/assets/js/blocks/migration-products-to-product-collection/types.ts +++ b/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;