From c040c2ec5a86cf5213853eb337a347cf9e4b3661 Mon Sep 17 00:00:00 2001 From: Karol Manijak <20098064+kmanijak@users.noreply.github.com> Date: Thu, 10 Aug 2023 11:34:57 +0200 Subject: [PATCH 1/4] Enable Product Collection as a core feature --- assets/js/blocks/product-collection/block.json | 2 +- assets/js/blocks/product-collection/index.tsx | 13 +++++-------- .../blocks/product-collection/variations/index.ts | 4 ++-- assets/js/blocks/product-template/index.tsx | 10 +++------- bin/webpack-entries.js | 8 ++------ .../feature-flags-and-experimental-interfaces.md | 2 -- src/BlockTypesController.php | 4 ++-- 7 files changed, 15 insertions(+), 28 deletions(-) diff --git a/assets/js/blocks/product-collection/block.json b/assets/js/blocks/product-collection/block.json index bf82ceb9b10..272a2cc89ac 100644 --- 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 index 2f69aefe80c..28a0a1f0e3a 100644 --- 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 @@ -13,10 +12,8 @@ import save from './save'; import icon from './icon'; import './variations'; -if ( isExperimentalBuild() ) { - registerBlockType( metadata, { - icon, - edit, - save, - } ); -} +registerBlockType( metadata, { + icon, + edit, + save, +} ); diff --git a/assets/js/blocks/product-collection/variations/index.ts b/assets/js/blocks/product-collection/variations/index.ts index 73ca39027b2..3bf39c577bb 100644 --- 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-template/index.tsx b/assets/js/blocks/product-template/index.tsx index 6fc7771cc96..18f20fc2072 100644 --- 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 index 52dff1b8072..e7d0f748454 100644 --- 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, }, @@ -66,6 +67,7 @@ const blocks = { 'product-results-count': {}, 'product-search': {}, 'product-tag': {}, + 'product-template': {}, 'product-top-rated': {}, 'products-by-attribute': {}, 'rating-filter': {}, @@ -80,12 +82,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 index be627273db2..201b58d981c 100644 --- a/docs/internal-developers/blocks/feature-flags-and-experimental-interfaces.md +++ b/docs/internal-developers/blocks/feature-flags-and-experimental-interfaces.md @@ -35,10 +35,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 index 21d1a062335..9b57503da51 100644 --- 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[] = 'ProductGalleryThumbnails'; From aac7b17b65ff2481f421e22366765cea4cd8bc4f Mon Sep 17 00:00:00 2001 From: Karol Manijak <20098064+kmanijak@users.noreply.github.com> Date: Wed, 16 Aug 2023 13:46:07 +0200 Subject: [PATCH 2/4] 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 --- .../variations/elements/product-summary.tsx | 1 + .../variations/elements/product-template.tsx | 1 + .../variations/elements/product-title.tsx | 1 + .../product-query/variations/elements/utils.tsx | 16 +++++++++++++--- 4 files changed, 16 insertions(+), 3 deletions(-) diff --git a/assets/js/blocks/product-query/variations/elements/product-summary.tsx b/assets/js/blocks/product-query/variations/elements/product-summary.tsx index 6103789356f..398fa16eb5b 100644 --- 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: , 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 index e234c006a9f..52d419416f8 100644 --- 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: , 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 index 40bab90a607..16a4c1471d8 100644 --- 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: , 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 index 6a7f1420f1b..9081a6841c0 100644 --- 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, } ); } From 19a7a5d76cc95cf4c306ba6bccafd972b038c60c Mon Sep 17 00:00:00 2001 From: Karol Manijak <20098064+kmanijak@users.noreply.github.com> Date: Tue, 22 Aug 2023 08:25:33 +0200 Subject: [PATCH 3/4] Enable manual migration of Products to Product Collection (#10655) --- .../migration-products-to-product-collection/constants.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/assets/js/blocks/migration-products-to-product-collection/constants.ts b/assets/js/blocks/migration-products-to-product-collection/constants.ts index 2f68b429ecf..08ad37e0784 100644 --- 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 = From bb9d6d3f35888e97095f04e10cbe78aa5b8f799a Mon Sep 17 00:00:00 2001 From: Manish Menaria Date: Thu, 24 Aug 2023 14:33:24 +0530 Subject: [PATCH 4/4] 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. --- assets/js/blocks/product-collection/index.tsx | 5 ++++- .../variations/elements/product-summary.tsx | 16 ++++++++++------ .../variations/elements/product-title.tsx | 16 ++++++++++------ 3 files changed, 24 insertions(+), 13 deletions(-) diff --git a/assets/js/blocks/product-collection/index.tsx b/assets/js/blocks/product-collection/index.tsx index 28a0a1f0e3a..62b9df69dcd 100644 --- a/assets/js/blocks/product-collection/index.tsx +++ b/assets/js/blocks/product-collection/index.tsx @@ -10,10 +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'; 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 index bb79cb8da95..a4effd6b393 100644 --- 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: , - blockTitle: BLOCK_TITLE, - variationName: VARIATION_NAME, -} ); +const registerProductSummary = () => { + registerElementVariation( CORE_NAME, { + blockDescription: BLOCK_DESCRIPTION, + blockIcon: , + 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 index f7baca10d6d..e863cee1a3e 100644 --- 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: , - blockTitle: BLOCK_TITLE, - variationName: VARIATION_NAME, -} ); +const registerProductTitle = () => { + registerElementVariation( CORE_NAME, { + blockDescription: BLOCK_DESCRIPTION, + blockIcon: , + blockTitle: BLOCK_TITLE, + variationName: VARIATION_NAME, + } ); +}; + +export default registerProductTitle;