From 1ed5d0872a6c52bcde7aef9e2740c2f8c6c68408 Mon Sep 17 00:00:00 2001 From: Manish Menaria Date: Fri, 29 Dec 2023 15:45:29 +0530 Subject: [PATCH] Fix: Enable Pagination Block Visibility in Product Collection Block (#43132) * Fix: Enable Pagination Block Visibility in Product Collection Block This commit resolves an issue where the Pagination block was not visible in the block insertor within the Product Collection block. - The core query pagination block name, initially hardcoded, is now declared as a constant `coreQueryPaginationBlockName` in `constants.ts`. This change not only improves code readability but also ensures consistency in using the block name across different files. - In `index.tsx`, the `addProductCollectionBlockToParentOfPaginationBlock` utility function from `utils.tsx` is imported and executed. This function plays a crucial role in the fix. It dynamically adds the Product Collection block to the parent array of the Core Pagination block, ensuring the latter's visibility in the insertor when editing the Product Collection block. - The utility function employs WordPress hooks and version checks to gracefully handle different WordPress environments. This careful approach maintains backward compatibility while addressing the current issue. With these changes, merchants can now easily add a Pagination block from the insertor while working on the Product Collection block, enhancing the user experience and functionality. * Add changefile(s) from automation for the following project(s): woocommerce-blocks --------- Co-authored-by: github-actions --- .../js/blocks/product-collection/constants.ts | 3 +- .../js/blocks/product-collection/index.tsx | 2 ++ .../js/blocks/product-collection/utils.tsx | 31 +++++++++++++++++++ ...ow-topbottom-pagination-blocks-to-be-added | 4 +++ 4 files changed, 39 insertions(+), 1 deletion(-) create mode 100644 plugins/woocommerce/changelog/43132-fix-42194-product-collection-block-allow-topbottom-pagination-blocks-to-be-added diff --git a/plugins/woocommerce-blocks/assets/js/blocks/product-collection/constants.ts b/plugins/woocommerce-blocks/assets/js/blocks/product-collection/constants.ts index 34016f6a366..e279cecfec8 100644 --- a/plugins/woocommerce-blocks/assets/js/blocks/product-collection/constants.ts +++ b/plugins/woocommerce-blocks/assets/js/blocks/product-collection/constants.ts @@ -152,8 +152,9 @@ export const INNER_BLOCKS_PRODUCT_TEMPLATE: InnerBlockTemplate = [ ], ]; +export const coreQueryPaginationBlockName = 'core/query-pagination'; export const INNER_BLOCKS_PAGINATION_TEMPLATE: InnerBlockTemplate = [ - 'core/query-pagination', + coreQueryPaginationBlockName, { layout: { type: 'flex', diff --git a/plugins/woocommerce-blocks/assets/js/blocks/product-collection/index.tsx b/plugins/woocommerce-blocks/assets/js/blocks/product-collection/index.tsx index 61d7919ec53..0477153bd17 100644 --- a/plugins/woocommerce-blocks/assets/js/blocks/product-collection/index.tsx +++ b/plugins/woocommerce-blocks/assets/js/blocks/product-collection/index.tsx @@ -13,6 +13,7 @@ import icon from './icon'; import registerProductSummaryVariation from './variations/elements/product-summary'; import registerProductTitleVariation from './variations/elements/product-title'; import registerCollections from './collections'; +import { addProductCollectionBlockToParentOfPaginationBlock } from './utils'; registerBlockType( metadata, { icon, @@ -22,3 +23,4 @@ registerBlockType( metadata, { registerProductSummaryVariation(); registerProductTitleVariation(); registerCollections(); +addProductCollectionBlockToParentOfPaginationBlock(); diff --git a/plugins/woocommerce-blocks/assets/js/blocks/product-collection/utils.tsx b/plugins/woocommerce-blocks/assets/js/blocks/product-collection/utils.tsx index b26426a4c70..471d70f2c30 100644 --- a/plugins/woocommerce-blocks/assets/js/blocks/product-collection/utils.tsx +++ b/plugins/woocommerce-blocks/assets/js/blocks/product-collection/utils.tsx @@ -2,12 +2,17 @@ * External dependencies */ import { BlockEditProps } from '@wordpress/blocks'; +import { addFilter } from '@wordpress/hooks'; import { select } from '@wordpress/data'; +import { isWpVersion } from '@woocommerce/settings'; +import type { Block } from '@wordpress/blocks'; /** * Internal dependencies */ import { ProductCollectionAttributes, ProductCollectionQuery } from './types'; +import { coreQueryPaginationBlockName } from './constants'; +import blockJson from './block.json'; /** * Sets the new query arguments of a Product Query block @@ -51,3 +56,29 @@ export function getDefaultValueOfInheritQueryFromTemplate(): boolean { return initialValue; } + +/** + * Add Product Collection block to the parent array of the Core Pagination block. + * This enhancement allows the Core Pagination block to be available for the Product Collection block. + */ +export const addProductCollectionBlockToParentOfPaginationBlock = () => { + if ( isWpVersion( '6.1', '>=' ) ) { + addFilter( + 'blocks.registerBlockType', + 'woocommerce/add-product-collection-block-to-parent-array-of-pagination-block', + ( blockSettings: Block, blockName: string ) => { + if ( + blockName !== coreQueryPaginationBlockName || + ! blockSettings?.parent + ) { + return blockSettings; + } + + return { + ...blockSettings, + parent: [ ...blockSettings.parent, blockJson.name ], + }; + } + ); + } +}; diff --git a/plugins/woocommerce/changelog/43132-fix-42194-product-collection-block-allow-topbottom-pagination-blocks-to-be-added b/plugins/woocommerce/changelog/43132-fix-42194-product-collection-block-allow-topbottom-pagination-blocks-to-be-added new file mode 100644 index 00000000000..133e14cf0b3 --- /dev/null +++ b/plugins/woocommerce/changelog/43132-fix-42194-product-collection-block-allow-topbottom-pagination-blocks-to-be-added @@ -0,0 +1,4 @@ +Significance: patch +Type: fix + +Fix: Pagination Block Visibility in Product Collection Block \ No newline at end of file