Product Collection: Make sure all variations are taken into account when choosing collection

[kmanijak]

Submission Review Guidelines:

• I have followed the WooCommerce Contributing Guidelines and the WordPress Coding Standards.
• I have checked to ensure there aren't other open Pull Requests for the same update/change.
• I have reviewed my code for security best practices.
• Following the above guidelines will result in quick merges and clear and detailed feedback when appropriate.

Changes proposed in this Pull Request:

Product Collection offers a set of Core collections. If 3PD registers their own variation/collection, it appears as a choice in the Product Collection placeholder but when clicked, there was an error.

This PR enables to apply any 3PD variation/collection.

Closes #43214

How to test the changes in this Pull Request:

Using the WooCommerce Testing Instructions Guide, include your detailed testing instructions:

1. Go to Editor
2. Open developer tools in browsers and paste the following code in the console

const attributes = {
	tagName: 'div',
	displayLayout: {
		type: 'flex',
		columns: 3,
		shrinkColumns: true,
	},
	query: {
		perPage: 9,
		pages: 0,
		offset: 0,
		postType: 'product',
		order: 'asc',
		orderBy: 'title',
		search: '',
		exclude: [],
		taxQuery: {},
		isProductCollectionBlock: true,
		featured: false,
		woocommerceOnSale: false,
		woocommerceStockStatus: [],
		woocommerceAttributes: [],
		woocommerceHandPickedProducts: [],
		timeFrame: undefined,
		priceRange: undefined,
		inherit: false,
	},
	collection: 'woocommerce/product-collection/custom-collection',
};

const innerBlocks = [
	[
		'woocommerce/product-template',
		{},
		[
			[ 'woocommerce/product-image' ],
			[
				'core/post-title',
				{
					textAlign: 'center',
					level: 3,
					fontSize: 'medium',
					style: {
						spacing: {
							margin: {
								bottom: '0.75rem',
								top: '0',
							},
						},
					},
					isLink: true,
					__woocommerceNamespace:
						'woocommerce/product-collection/product-title',
				},
			],
			[
				'woocommerce/product-price',
				{
					textAlign: 'center',
					fontSize: 'small',
				},
			],
			[
				'woocommerce/product-button',
				{
					textAlign: 'center',
					fontSize: 'small',
				},
			],
		],
	],
];

wp.blocks.registerBlockVariation( 'woocommerce/product-collection', {
	name: 'woocommerce/product-collection/custom-collection',
	title: '3PD collection',
	description:
		'3PD collection description. It appears in placeholder and can be chosen',
        isActive: (blockAttrs, variationAttributes) => {
			return blockAttrs.collection === variationAttributes.collection
	},
	attributes,
	innerBlocks,
} );

3. Add Product Collection block
4. 3PD collection should appear in the Product Collection placeholder
5. Click 3PD collection
6. Product grid is rendered, there's no error and block appears as 3PD collection

Changelog entry

• Automatically create a changelog entry from the details below.

Significance

• Patch
• Minor
• Major

Type

• Fix - Fixes an existing bug
• Add - Adds functionality
• Update - Update existing functionality
• Dev - Development related task
• Tweak - A minor adjustment to the codebase
• Performance - Address performance issues
• Enhancement - Improvement to existing functionality

Message

Comment

[github-actions]

Test Results Summary

Commit SHA: 491c438

Test 🧪	Passed ✅	Failed 🚨	Broken 🚧	Skipped ⏭️	Unknown ❔	Total 📊	Duration ⏱️
API Tests	259	0	0	2	0	261	0m 37s
E2E Tests	258	0	0	3	0	261	15m 1s

---

To view the full API test report, click here.
To view the full E2E test report, click here.
To view all test reports, visit the WooCommerce Test Reports Dashboard.

[github-actions]

Hi @xristos3490, @Aljullu,

Apart from reviewing the code changes, please make sure to review the testing instructions as well.

You can follow this guide to find out what good testing instructions should look like:
https://github.com/woocommerce/woocommerce/wiki/Writing-high-quality-testing-instructions

[xristos3490]

Nice work, @kmanijak! Tested with a custom collection and it works as expected! 👌

[Aljullu]

This is testing well and code looks good to me. 🚢