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.
This commit is contained in:
Manish Menaria 2023-10-11 11:00:26 +05:30 committed by GitHub
parent 75bac91787
commit e88fa94026
3 changed files with 24 additions and 25 deletions

View File

@ -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;

View File

@ -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.

View File

@ -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;