Add manual path to upgrade Products block (https://github.com/woocommerce/woocommerce-blocks/pull/10268)

* Add option to manually update Products block to Product Collection

* Disable manual upgrade of Products yet

* Manual update flag doesn't have to be dependant on auto update

* Removed commented out console info logs

* Disable option to upgrade Products block

* Change the way to bold text in Upgrade Notices so it's translatable

* Change the way UpgradeNotice is rendered conditionally

plugins/woocommerce-blocks/assets/js/blocks/product-collection/inspector-controls/upgrade-notice.tsx

@@ -4,34 +4,34 @@
 import { __ } from '@wordpress/i18n';
 import { Notice, Button } from '@wordpress/components';
 import { BlockEditProps } from '@wordpress/blocks';
+import { createInterpolateElement } from '@wordpress/element';
 
 /**
  * Internal dependencies
  */
 import { ProductCollectionAttributes } from '../types';
 
-const FormattedNotice = ( { notice }: { notice: string } ) => {
-	const strongText = 'Product Collection';
-	const [ before, after ] = notice.split( strongText );
-
-	return (
-		<>
-			{ before }
-			<strong>{ strongText }</strong>
-			{ after }
-		</>
-	);
-};
-
 const UpgradeNotice = (
 	props: BlockEditProps< ProductCollectionAttributes > & {
 		revertMigration: () => void;
 	}
 ) => {
 	const { displayUpgradeNotice } = props.attributes;
-	const notice = __(
+	const notice = createInterpolateElement(
-		'Products (Beta) block was upgraded to Product Collection, an updated version with new features and simplified settings.',
+		__(
+			'Products (Beta) block was upgraded to <strongText />, an updated version with new features and simplified settings.',
 			'woo-gutenberg-products-block'
+		),
+		{
+			strongText: (
+				<strong>
+					{ __(
+						`Product Collection`,
+						'woo-gutenberg-products-block'
+					) }
+				</strong>
+			),
+		}
 	);
 
 	const buttonLabel = __(
@@ -53,7 +53,7 @@ const UpgradeNotice = (
 
 	return displayUpgradeNotice ? (
 		<Notice onRemove={ handleRemove }>
-			<FormattedNotice notice={ notice } />
+			<>{ notice } </>
 			<br />
 			<br />
 			<Button variant="link" onClick={ handleClick }>

plugins/woocommerce-blocks/assets/js/blocks/product-query/constants.ts

@@ -13,7 +13,8 @@ import { VARIATION_NAME as PRODUCT_TITLE_ID } from './variations/elements/produc
 import { VARIATION_NAME as PRODUCT_TEMPLATE_ID } from './variations/elements/product-template';
 import { ImageSizing } from '../../atomic/blocks/product-elements/image/types';
 
-export const REPLACE_PRODUCTS_WITH_PRODUCT_COLLECTION = false;
+export const AUTO_REPLACE_PRODUCTS_WITH_PRODUCT_COLLECTION = false;
+export const MANUAL_REPLACE_PRODUCTS_WITH_PRODUCT_COLLECTION = false;
 
 export const EDIT_ATTRIBUTES_URL =
 	'/wp-admin/edit.php?post_type=product&page=product_attributes';

plugins/woocommerce-blocks/assets/js/blocks/product-query/inspector-controls.tsx

@@ -38,11 +38,13 @@ import {
 	QUERY_DEFAULT_ATTRIBUTES,
 	QUERY_LOOP_ID,
 	STOCK_STATUS_OPTIONS,
-	REPLACE_PRODUCTS_WITH_PRODUCT_COLLECTION,
+	AUTO_REPLACE_PRODUCTS_WITH_PRODUCT_COLLECTION,
+	MANUAL_REPLACE_PRODUCTS_WITH_PRODUCT_COLLECTION,
 } from './constants';
 import { AttributesFilter } from './inspector-controls/attributes-filter';
 import { PopularPresets } from './inspector-controls/popular-presets';
 import { ProductSelector } from './inspector-controls/product-selector';
+import { UpgradeNotice } from './inspector-controls/upgrade-notice';
 import { replaceProductsWithProductCollection } from '../shared/scripts';
 
 import './editor.scss';
@@ -221,6 +223,11 @@ const ProductQueryControls = ( props: ProductQueryBlock ) => {
 	return (
 		<>
 			<InspectorControls>
+				{ MANUAL_REPLACE_PRODUCTS_WITH_PRODUCT_COLLECTION && (
+					<UpgradeNotice
+						upgradeBlock={ replaceProductsWithProductCollection }
+					/>
+				) }
 				{ allowedControls?.includes( 'presets' ) && (
 					<PopularPresets { ...props } />
 				) }
@@ -272,13 +279,9 @@ addFilter( 'editor.BlockEdit', QUERY_LOOP_ID, withProductQueryControls );
 
 if ( isWpVersion( '6.1', '>=' ) ) {
 	let unsubscribe: ( () => void ) | undefined;
-	if ( REPLACE_PRODUCTS_WITH_PRODUCT_COLLECTION && ! unsubscribe ) {
+	if ( AUTO_REPLACE_PRODUCTS_WITH_PRODUCT_COLLECTION && ! unsubscribe ) {
-		// console.info( 'Subscribed to allow Products block migration' );
 		unsubscribe = subscribe( () => {
 			replaceProductsWithProductCollection( () => {
-				// console.info(
-				// 	'Unsubscribed and disallow further Products block migration'
-				// );
 				if ( unsubscribe ) {
 					unsubscribe();
 				}

plugins/woocommerce-blocks/assets/js/blocks/product-query/inspector-controls/upgrade-notice.tsx

@@ -0,0 +1,45 @@
+/**
+ * External dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { Notice, Button } from '@wordpress/components';
+import { createInterpolateElement } from '@wordpress/element';
+
+export const UpgradeNotice = ( props: { upgradeBlock: () => void } ) => {
+	const notice = createInterpolateElement(
+		__(
+			'Upgrade all Products (Beta) blocks on this page to <strongText /> for more features!',
+			'woo-gutenberg-products-block'
+		),
+		{
+			strongText: (
+				<strong>
+					{ __(
+						`Product Collection`,
+						'woo-gutenberg-products-block'
+					) }
+				</strong>
+			),
+		}
+	);
+
+	const buttonLabel = __(
+		'Upgrade to Product Collection',
+		'woo-gutenberg-products-block'
+	);
+
+	const handleClick = () => {
+		props.upgradeBlock();
+	};
+
+	return (
+		<Notice isDismissible={ false }>
+			<>{ notice }</>
+			<br />
+			<br />
+			<Button variant="link" onClick={ handleClick }>
+				{ buttonLabel }
+			</Button>
+		</Notice>
+	);
+};

plugins/woocommerce-blocks/assets/js/blocks/shared/scripts/migration-from-products-to-product-collection.tsx

@@ -195,7 +195,7 @@ const replaceProductsBlocks = ( productsBlockClientIds: string[] ) => {
 };
 
 export const replaceProductsWithProductCollection = (
-	unsubscribe: () => void
+	unsubscribe?: () => void
 ) => {
 	const queryBlocksCount =
 		select( 'core/block-editor' ).getGlobalBlockCount( 'core/query' );
@@ -213,7 +213,7 @@ export const replaceProductsWithProductCollection = (
 
 	const replaced = replaceProductsBlocks( productsBlockClientIds );
 
-	if ( replaced ) {
+	if ( unsubscribe && replaced ) {
 		// @todo: unsubscribe on user reverting migration
 		unsubscribe();
 	}