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;