Enable Product Collection as a core feature (#10524)

* Enable Product Collection as a core feature * Fix: disable product query title and summary variations from inserter in favour of Product Collection ones (#10548) * Limit the scope of Product Query's Product Title and Product Summary * Add missing piece after refactoring * Enable manual migration of Products to Product Collection (#10655) * Refactor block variation registration in product-collection (#10701) This commit refactors the product-collection block's variation registration. Changes: - The `product-summary` and `product-title` variations have been encapsulated within their own respective functions: `registerProductSummaryVariation` and `registerProductTitleVariation`. - Imported and invoked these new functions in the main `index.tsx` of the product-collection block, ensuring the variations are registered. --------- Co-authored-by: Manish Menaria <the.manish.menaria@gmail.com>
woocommerce · Aug 25, 2023 · a40395d · a40395d
1 parent 3f0c0fe
commit a40395d
Show file tree

Hide file tree

Showing 14 changed files with 56 additions and 45 deletions.
diff --git a/assets/js/blocks/migration-products-to-product-collection/constants.ts b/assets/js/blocks/migration-products-to-product-collection/constants.ts
@@ -4,7 +4,7 @@
 import type { UpgradeNoticeStatus, UpgradeNoticeStatuses } from './types';
 
 export const AUTO_REPLACE_PRODUCTS_WITH_PRODUCT_COLLECTION = false;
-export const MANUAL_REPLACE_PRODUCTS_WITH_PRODUCT_COLLECTION = false;
+export const MANUAL_REPLACE_PRODUCTS_WITH_PRODUCT_COLLECTION = true;
 export const HOURS_TO_DISPLAY_UPGRADE_NOTICE = 72;
 export const UPGRADE_NOTICE_DISPLAY_COUNT_THRESHOLD = 4;
 export const MIGRATION_STATUS_LS_KEY =

diff --git a/assets/js/blocks/product-collection/block.json b/assets/js/blocks/product-collection/block.json
@@ -3,7 +3,7 @@
     "apiVersion": 2,
     "name": "woocommerce/product-collection",
     "version": "1.0.0",
-    "title": "Product Collection",
+    "title": "Product Collection (Beta)",
     "description": "Display a collection of products from your store.",
     "category": "woocommerce",
     "keywords": [ "WooCommerce", "Products (Beta)" ],

diff --git a/assets/js/blocks/product-collection/index.tsx b/assets/js/blocks/product-collection/index.tsx
@@ -2,7 +2,6 @@
  * External dependencies
  */
 import { registerBlockType } from '@wordpress/blocks';
-import { isExperimentalBuild } from '@woocommerce/block-settings';
 
 /**
  * Internal dependencies
@@ -11,12 +10,13 @@ import metadata from './block.json';
 import edit from './edit';
 import save from './save';
 import icon from './icon';
-import './variations';
+import registerProductSummaryVariation from './variations/elements/product-summary';
+import registerProductTitleVariation from './variations/elements/product-title';
 
-if ( isExperimentalBuild() ) {
-	registerBlockType( metadata, {
-		icon,
-		edit,
-		save,
-	} );
-}
+registerBlockType( metadata, {
+	icon,
+	edit,
+	save,
+} );
+registerProductSummaryVariation();
+registerProductTitleVariation();
diff --git a/assets/js/blocks/product-collection/variations/elements/product-summary.tsx b/assets/js/blocks/product-collection/variations/elements/product-summary.tsx
@@ -16,9 +16,13 @@ import {
 export const CORE_NAME = 'core/post-excerpt';
 export const VARIATION_NAME = 'woocommerce/product-collection/product-summary';
 
-registerElementVariation( CORE_NAME, {
-	blockDescription: BLOCK_DESCRIPTION,
-	blockIcon: <Icon icon={ page } />,
-	blockTitle: BLOCK_TITLE,
-	variationName: VARIATION_NAME,
-} );
+const registerProductSummary = () => {
+	registerElementVariation( CORE_NAME, {
+		blockDescription: BLOCK_DESCRIPTION,
+		blockIcon: <Icon icon={ page } />,
+		blockTitle: BLOCK_TITLE,
+		variationName: VARIATION_NAME,
+	} );
+};
+
+export default registerProductSummary;
diff --git a/assets/js/blocks/product-collection/variations/elements/product-title.tsx b/assets/js/blocks/product-collection/variations/elements/product-title.tsx
@@ -16,9 +16,13 @@ import {
 export const CORE_NAME = 'core/post-title';
 export const VARIATION_NAME = 'woocommerce/product-collection/product-title';
 
-registerElementVariation( CORE_NAME, {
-	blockDescription: BLOCK_DESCRIPTION,
-	blockIcon: <Icon icon={ heading } />,
-	blockTitle: BLOCK_TITLE,
-	variationName: VARIATION_NAME,
-} );
+const registerProductTitle = () => {
+	registerElementVariation( CORE_NAME, {
+		blockDescription: BLOCK_DESCRIPTION,
+		blockIcon: <Icon icon={ heading } />,
+		blockTitle: BLOCK_TITLE,
+		variationName: VARIATION_NAME,
+	} );
+};
+
+export default registerProductTitle;
diff --git a/assets/js/blocks/product-collection/variations/index.ts b/assets/js/blocks/product-collection/variations/index.ts
@@ -13,7 +13,7 @@ import { CORE_NAME as PRODUCT_SUMMARY_ID } from './elements/product-summary';
 
 const EXTENDED_CORE_ELEMENTS = [ PRODUCT_SUMMARY_ID, PRODUCT_TITLE_ID ];
 
-function registerProductQueryElementsNamespace(
+function registerProductCollectionElementsNamespace(
 	props: Block,
 	blockName: string
 ) {
@@ -36,6 +36,6 @@ if ( isWpVersion( '6.1', '>=' ) ) {
 	addFilter(
 		'blocks.registerBlockType',
 		'core/custom-class-name/attribute',
-		registerProductQueryElementsNamespace
+		registerProductCollectionElementsNamespace
 	);
 }
diff --git a/assets/js/blocks/product-query/variations/elements/product-summary.tsx b/assets/js/blocks/product-query/variations/elements/product-summary.tsx
@@ -21,4 +21,5 @@ registerElementVariation( CORE_NAME, {
 	blockIcon: <Icon icon={ page } />,
 	blockTitle: BLOCK_TITLE,
 	variationName: VARIATION_NAME,
+	scope: [ 'block' ],
 } );
diff --git a/assets/js/blocks/product-query/variations/elements/product-template.tsx b/assets/js/blocks/product-query/variations/elements/product-template.tsx
@@ -21,4 +21,5 @@ registerElementVariation( CORE_NAME, {
 	blockIcon: <Icon icon={ layout } />,
 	blockTitle: __( 'Product template', 'woo-gutenberg-products-block' ),
 	variationName: VARIATION_NAME,
+	scope: [ 'block', 'inserter' ],
 } );
diff --git a/assets/js/blocks/product-query/variations/elements/product-title.tsx b/assets/js/blocks/product-query/variations/elements/product-title.tsx
@@ -21,4 +21,5 @@ registerElementVariation( CORE_NAME, {
 	blockIcon: <Icon icon={ heading } />,
 	blockTitle: BLOCK_TITLE,
 	variationName: VARIATION_NAME,
+	scope: [ 'block' ],
 } );
diff --git a/assets/js/blocks/product-query/variations/elements/utils.tsx b/assets/js/blocks/product-query/variations/elements/utils.tsx
@@ -1,18 +1,28 @@
 /**
  * External dependencies
  */
-import { registerBlockVariation } from '@wordpress/blocks';
+import {
+	registerBlockVariation,
+	type BlockVariationScope,
+} from '@wordpress/blocks';
 
 interface VariationDetails {
 	blockDescription: string;
 	blockIcon: JSX.Element;
 	blockTitle: string;
 	variationName: string;
+	scope: BlockVariationScope[];
 }
 
 export function registerElementVariation(
 	coreName: string,
-	{ blockDescription, blockIcon, blockTitle, variationName }: VariationDetails
+	{
+		blockDescription,
+		blockIcon,
+		blockTitle,
+		variationName,
+		scope,
+	}: VariationDetails
 ) {
 	registerBlockVariation( coreName, {
 		description: blockDescription,
@@ -26,6 +36,6 @@ export function registerElementVariation(
 		attributes: {
 			__woocommerceNamespace: variationName,
 		},
-		scope: [ 'block', 'inserter' ],
+		scope,
 	} );
 }
diff --git a/assets/js/blocks/product-template/index.tsx b/assets/js/blocks/product-template/index.tsx
@@ -1,8 +1,7 @@
 /**
  * External dependencies
  */
-import { BlockConfiguration } from '@wordpress/blocks';
-import { registerExperimentalBlockType } from '@woocommerce/block-settings';
+import { registerBlockType } from '@wordpress/blocks';
 
 /**
  * Internal dependencies
@@ -13,11 +12,8 @@ import save from './save';
 import icon from './icon';
 import './style.scss';
 
-const blockConfig: BlockConfiguration = {
-	...metadata,
+registerBlockType( metadata, {
 	icon,
 	edit,
 	save,
-};
-
-registerExperimentalBlockType( metadata.name, blockConfig );
+} );
diff --git a/bin/webpack-entries.js b/bin/webpack-entries.js
@@ -47,6 +47,7 @@ const blocks = {
 	'product-best-sellers': {},
 	'product-category': {},
 	'product-categories': {},
+	'product-collection': {},
 	'product-gallery': {
 		isExperimental: true,
 	},
@@ -70,6 +71,7 @@ const blocks = {
 	'product-results-count': {},
 	'product-search': {},
 	'product-tag': {},
+	'product-template': {},
 	'product-top-rated': {},
 	'products-by-attribute': {},
 	'rating-filter': {},
@@ -84,12 +86,6 @@ const blocks = {
 	},
 	'single-product': {},
 	'stock-filter': {},
-	'product-collection': {
-		isExperimental: true,
-	},
-	'product-template': {
-		isExperimental: true,
-	},
 };
 
 // Returns the entries for each block given a relative path (ie: `index.js`,

diff --git a/docs/internal-developers/blocks/feature-flags-and-experimental-interfaces.md b/docs/internal-developers/blocks/feature-flags-and-experimental-interfaces.md
@@ -34,10 +34,8 @@ The majority of our feature flagging is blocks, this is a list of them:
 
 ### Experimental flag
 
--   Product Collection ([PHP flag](https://github.com/woocommerce/woocommerce-blocks/blob/17007169ea5f61e36903d7ca79902794cbb45100/src/BlockTypesController.php#L228) | [webpack flag](https://github.com/woocommerce/woocommerce-blocks/blob/17007169ea5f61e36903d7ca79902794cbb45100/bin/webpack-entries.js#L71-L73)).
 -   Product Gallery ([PHP flag](https://github.com/woocommerce/woocommerce-blocks/blob/e3fe996251b270d45ecc73207ea4ad587c2dbc78/src/BlockTypesController.php#L232) | [webpack flag](https://github.com/woocommerce/woocommerce-blocks/blob/e3fe996251b270d45ecc73207ea4ad587c2dbc78/bin/webpack-entries.js#L50-L52C3)).
 -   Product Gallery Thumbnails ([PHP flag](https://github.com/woocommerce/woocommerce-blocks/blob/04af396b9aec5a915ad98188eded53e723a051d3/src/BlockTypesController.php#L234) | [webpack flag](https://github.com/woocommerce/woocommerce-blocks/blob/04af396b9aec5a915ad98188eded53e723a051d3/bin/webpack-entries.js#L57-L60)).
--   Product Template ([PHP flag](https://github.com/woocommerce/woocommerce-blocks/blob/17007169ea5f61e36903d7ca79902794cbb45100/src/BlockTypesController.php#L229) | [webpack flag](https://github.com/woocommerce/woocommerce-blocks/blob/17007169ea5f61e36903d7ca79902794cbb45100/bin/webpack-entries.js#L74-L76)).
 -   Product Average Rating ([PHP flag](https://github.com/woocommerce/woocommerce-blocks/blob/1111e2fb9d6f5074df96a444b99e2fc00e4eb8d1/src/BlockTypesController.php#L229) | [webpack flag](https://github.com/woocommerce/woocommerce-blocks/blob/1111e2fb9d6f5074df96a444b99e2fc00e4eb8d1/bin/webpack-entries.js#L68-L70))
 -   Product Rating Stars ([PHP flag](https://github.com/woocommerce/woocommerce-blocks/blob/trunk/src/BlockTypesController.php#L230) | [webpack flag](https://github.com/woocommerce/woocommerce-blocks/blob/trunk/bin/webpack-entries.js#L68-L70))
 -   Product Rating Counter ([PHP flag](https://github.com/woocommerce/woocommerce-blocks/blob/trunk/src/BlockTypesController.php#L229) | [webpack flag](https://github.com/woocommerce/woocommerce-blocks/blob/trunk/bin/webpack-entries.js#L71-L73))

diff --git a/src/BlockTypesController.php b/src/BlockTypesController.php
@@ -189,11 +189,13 @@ protected function get_block_types() {
 			'ProductButton',
 			'ProductCategories',
 			'ProductCategory',
+			'ProductCollection',
 			'ProductImage',
 			'ProductImageGallery',
 			'ProductNew',
 			'ProductOnSale',
 			'ProductPrice',
+			'ProductTemplate',
 			'ProductQuery',
 			'ProductAverageRating',
 			'ProductRating',
@@ -227,8 +229,6 @@ protected function get_block_types() {
 		);
 
 		if ( Package::feature()->is_experimental_build() ) {
-			$block_types[] = 'ProductCollection';
-			$block_types[] = 'ProductTemplate';
 			$block_types[] = 'ProductGallery';
 			$block_types[] = 'ProductGalleryLargeImage';
 			$block_types[] = 'ProductGalleryPager';