[Blockifying Product Archive Templates]: Implement the blockified template conversion for the Classic Template Block.

assets/js/blocks/catalog-sorting/style.scss

@@ -1,6 +1,7 @@
 .woocommerce.wc-block-catalog-sorting {
 	form {
 		float: none;
+		margin: 0;
 	}
 
 	select {

assets/js/blocks/classic-template/archive-product.ts

@@ -0,0 +1,112 @@
+/**
+ * External dependencies
+ */
+import {
+	createBlock,
+	createBlocksFromInnerBlocksTemplate,
+	type BlockInstance,
+} from '@wordpress/blocks';
+import { isWpVersion } from '@woocommerce/settings';
+import { __, sprintf } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import {
+	INNER_BLOCKS_TEMPLATE as productsInnerBlocksTemplate,
+	QUERY_DEFAULT_ATTRIBUTES as productsQueryDefaultAttributes,
+} from '../product-query/constants';
+import { VARIATION_NAME as productsVariationName } from '../product-query/variations/product-query';
+import { createArchiveTitleBlock, createRowBlock } from './utils';
+import { type InheritedAttributes } from './types';
+
+const createProductsBlock = ( inheritedAttributes: InheritedAttributes ) =>
+	createBlock(
+		'core/query',
+		{
+			...productsQueryDefaultAttributes,
+			...inheritedAttributes,
+			namespace: productsVariationName,
+			query: {
+				...productsQueryDefaultAttributes.query,
+				inherit: true,
+			},
+		},
+		createBlocksFromInnerBlocksTemplate( productsInnerBlocksTemplate )
+	);
+
+const getBlockifiedTemplate = (
+	inheritedAttributes: InheritedAttributes,
+	withTermDescription = false
+) =>
+	[
+		createBlock( 'woocommerce/breadcrumbs', inheritedAttributes ),
+		createArchiveTitleBlock( 'archive-title', inheritedAttributes ),
+		withTermDescription
+			? createBlock( 'core/term-description', inheritedAttributes )
+			: null,
+		createBlock( 'woocommerce/store-notices', inheritedAttributes ),
+		createRowBlock(
+			[
+				createBlock( 'woocommerce/product-results-count' ),
+				createBlock( 'woocommerce/catalog-sorting' ),
+			],
+			inheritedAttributes
+		),
+		createProductsBlock( inheritedAttributes ),
+	].filter( Boolean ) as BlockInstance[];
+
+const getBlockifiedTemplateWithTermDescription = (
+	inheritedAttributes: InheritedAttributes
+) => getBlockifiedTemplate( inheritedAttributes, true );
+
+const isConversionPossible = () => {
+	// Blockification is possible for the WP version 6.1 and above,
+	// which are the versions the Products block supports.
+	return isWpVersion( '6.1', '>=' );
+};
+
+const getDescriptionAllowingConversion = ( templateTitle: string ) =>
+	sprintf(
+		/* translators: %s is the template title */
+		__(
+			"This block serves as a placeholder for your %s. We recommend upgrading to the Products block for more features to edit your products visually. Don't worry, you can always revert back.",
+			'woo-gutenberg-products-block'
+		),
+		templateTitle
+	);
+
+const getDescriptionDisallowingConversion = ( templateTitle: string ) =>
+	sprintf(
+		/* translators: %s is the template title */
+		__(
+			'This block serves as a placeholder for your %s. It will display the actual product image, title, price in your store. You can move this placeholder around and add more blocks around to customize the template.',
+			'woo-gutenberg-products-block'
+		),
+		templateTitle
+	);
+
+const getDescription = ( templateTitle: string, canConvert: boolean ) => {
+	if ( canConvert ) {
+		return getDescriptionAllowingConversion( templateTitle );
+	}
+
+	return getDescriptionDisallowingConversion( templateTitle );
+};
+
+const getButtonLabel = () =>
+	__( 'Upgrade to Products block', 'woo-gutenberg-products-block' );
+
+export const blockifiedProductCatalogConfig = {
+	getBlockifiedTemplate,
+	isConversionPossible,
+	getDescription,
+	getButtonLabel,
+};
+
+export const blockifiedProductsByConfig = {
+	getBlockifiedTemplate: getBlockifiedTemplateWithTermDescription,
+	isConversionPossible,
+	getDescription,
+	getButtonLabel,
+};

assets/js/blocks/classic-template/constants.ts

@@ -2,54 +2,71 @@
  * External dependencies
  */
 import { __ } from '@wordpress/i18n';
-export const BLOCK_SLUG = 'woocommerce/legacy-template';
 
 /**
  * Internal dependencies
  */
 import { TemplateDetails } from './types';
 
+export const BLOCK_SLUG = 'woocommerce/legacy-template';
+export const TYPES = {
+	singleProduct: 'single-product',
+	productCatalog: 'product-catalog',
+	productsBy: 'products-by',
+	productSearchResults: 'product-search-results',
+};
+export const PLACEHOLDERS = {
+	singleProduct: 'single-product',
+	archiveProduct: 'archive-product',
+};
+
 export const TEMPLATES: TemplateDetails = {
 	'single-product': {
+		type: TYPES.singleProduct,
 		title: __(
 			'WooCommerce Single Product Block',
 			'woo-gutenberg-products-block'
 		),
-		placeholder: 'single-product',
+		placeholder: PLACEHOLDERS.singleProduct,
 	},
 	'archive-product': {
+		type: TYPES.productCatalog,
 		title: __(
 			'WooCommerce Product Grid Block',
 			'woo-gutenberg-products-block'
 		),
-		placeholder: 'archive-product',
+		placeholder: PLACEHOLDERS.archiveProduct,
 	},
 	'taxonomy-product_cat': {
+		type: TYPES.productsBy,
 		title: __(
 			'WooCommerce Product Taxonomy Block',
 			'woo-gutenberg-products-block'
 		),
-		placeholder: 'archive-product',
+		placeholder: PLACEHOLDERS.archiveProduct,
 	},
 	'taxonomy-product_tag': {
+		type: TYPES.productsBy,
 		title: __(
 			'WooCommerce Product Tag Block',
 			'woo-gutenberg-products-block'
 		),
-		placeholder: 'archive-product',
+		placeholder: PLACEHOLDERS.archiveProduct,
 	},
 	'taxonomy-product_attribute': {
+		type: TYPES.productsBy,
 		title: __(
 			'WooCommerce Product Attribute Block',
 			'woo-gutenberg-products-block'
 		),
-		placeholder: 'archive-product',
+		placeholder: PLACEHOLDERS.archiveProduct,
 	},
 	'product-search-results': {
+		type: TYPES.productSearchResults,
 		title: __(
 			'WooCommerce Product Search Results Block',
 			'woo-gutenberg-products-block'
 		),
-		placeholder: 'archive-product',
+		placeholder: PLACEHOLDERS.archiveProduct,
 	},
 };

assets/js/blocks/classic-template/index.tsx

@@ -2,7 +2,6 @@
  * External dependencies
  */
 import {
-	createBlock,
 	getBlockType,
 	registerBlockType,
 	unregisterBlockType,
@@ -14,7 +13,7 @@ import {
 } from '@woocommerce/block-settings';
 import { useBlockProps } from '@wordpress/block-editor';
 import { Button, Placeholder } from '@wordpress/components';
-import { __, sprintf } from '@wordpress/i18n';
+import { __ } from '@wordpress/i18n';
 import { box, Icon } from '@wordpress/icons';
 import { select, useDispatch, subscribe } from '@wordpress/data';
 import { useEffect } from '@wordpress/element';
@@ -24,18 +23,40 @@ import { useEffect } from '@wordpress/element';
  */
 import './editor.scss';
 import './style.scss';
-import { BLOCK_SLUG, TEMPLATES } from './constants';
+import { BLOCK_SLUG, TEMPLATES, TYPES } from './constants';
 import {
 	isClassicTemplateBlockRegisteredWithAnotherTitle,
 	hasTemplateSupportForClassicTemplateBlock,
 	getTemplateDetailsBySlug,
 } from './utils';
+import {
+	blockifiedProductCatalogConfig,
+	blockifiedProductsByConfig,
+} from './archive-product';
+import * as blockifiedSingleProduct from './single-product';
+import * as blockifiedProductSearchResults from './product-search-results';
+import type { BlockifiedTemplateConfig } from './types';
 
 type Attributes = {
 	template: string;
 	align: string;
 };
 
+const blockifiedFallbackConfig = {
+	isConversionPossible: () => false,
+	getBlockifiedTemplate: () => [],
+	getDescription: () => '',
+	getButtonLabel: () => '',
+};
+
+const conversionConfig: { [ key: string ]: BlockifiedTemplateConfig } = {
+	[ TYPES.productCatalog ]: blockifiedProductCatalogConfig,
+	[ TYPES.productsBy ]: blockifiedProductsByConfig,
+	[ TYPES.singleProduct ]: blockifiedSingleProduct,
+	[ TYPES.productSearchResults ]: blockifiedProductSearchResults,
+	fallback: blockifiedFallbackConfig,
+};
+
 const Edit = ( {
 	clientId,
 	attributes,
@@ -50,6 +71,7 @@ const Edit = ( {
 	);
 	const templateTitle = templateDetails?.title ?? attributes.template;
 	const templatePlaceholder = templateDetails?.placeholder ?? 'fallback';
+	const templateType = templateDetails?.type ?? 'fallback';
 
 	useEffect(
 		() =>
@@ -60,6 +82,16 @@ const Edit = ( {
 		[ attributes.align, attributes.template, setAttributes ]
 	);
 
+	const {
+		getBlockifiedTemplate,
+		isConversionPossible,
+		getDescription,
+		getButtonLabel,
+	} = conversionConfig[ templateType ];
+
+	const canConvert = isConversionPossible();
+	const placeholderDescription = getDescription( templateTitle, canConvert );
+
 	return (
 		<div { ...blockProps }>
 			<Placeholder
@@ -68,48 +100,20 @@ const Edit = ( {
 				className="wp-block-woocommerce-classic-template__placeholder"
 			>
 				<div className="wp-block-woocommerce-classic-template__placeholder-copy">
-					<p className="wp-block-woocommerce-classic-template__placeholder-warning">
-						<strong>
-							{ __(
-								'Do not remove this block!',
-								'woo-gutenberg-products-block'
-							) }
-						</strong>{ ' ' }
-						{ __(
-							'Removing this will cause unintended effects on your store.',
-							'woo-gutenberg-products-block'
-						) }
-					</p>
-					<p>
-						{ sprintf(
-							/* translators: %s is the template title */
-							__(
-								'This is a placeholder for the %s. In your store it will display the actual product image, title, price, etc. You can move this placeholder around and add more blocks around it to customize the template.',
-								'woo-gutenberg-products-block'
-							),
-							templateTitle
-						) }
-					</p>
+					<p>{ placeholderDescription }</p>
 				</div>
 				<div className="wp-block-woocommerce-classic-template__placeholder-wireframe">
-					{ isExperimentalBuild() && (
+					{ canConvert && (
 						<div className="wp-block-woocommerce-classic-template__placeholder-migration-button-container">
 							<Button
 								isPrimary
 								onClick={ () => {
 									replaceBlock(
 										clientId,
-										// TODO: Replace with the blockified version of the Product Grid Block when it will be available.
-										createBlock( 'core/paragraph', {
-											content:
-												'Instead of this block, the new Product Grid Block will be rendered',
-										} )
+										getBlockifiedTemplate( attributes )
 									);
 								} }
-								text={ __(
-									'Use the blockified Product Grid Block',
-									'woo-gutenberg-products-block'
-								) }
+								text={ getButtonLabel() }
 							/>
 						</div>
 					) }