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 <github-actions@github.com>

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',

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();

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 ],
+				};
+			}
+		);
+	}
+};

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