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 = diff --git a/assets/js/blocks/product-collection/block.json b/assets/js/blocks/product-collection/block.json index 6c81a9f55a2..12bbea73722 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..62b9df69dcd 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 @@ -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 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; 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-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, } ); } 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 b980dc8e481..419874e5b65 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, }, @@ -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 index e2febc8d81e..e5559a88e56 100644 --- 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 index a75eb90bac8..3cbed409cb6 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[] = 'ProductGalleryPager';