Provide a way to switch to the blockified Single Product Template

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

@@ -2,14 +2,66 @@
  * External dependencies
  */
 import { __, sprintf } from '@wordpress/i18n';
+import { isWpVersion } from '@woocommerce/settings';
+import { BlockInstance, createBlock } from '@wordpress/blocks';
+import { VARIATION_NAME as PRODUCT_TITLE_VARIATION_NAME } from '@woocommerce/blocks/product-query/variations/elements/product-title';
+import { VARIATION_NAME as PRODUCT_SUMMARY_VARIATION_NAME } from '@woocommerce/blocks/product-query/variations/elements/product-summary';
 
-// TODO: Provide the blockified template for the single product page and adjust
-// other functions accordingly.
-const getBlockifiedTemplate = () => [];
+const getBlockifiedTemplate = () =>
+	[
+		createBlock( 'woocommerce/breadcrumbs' ),
+		createBlock(
+			'core/columns',
+			{
+				align: 'wide',
+			},
+			[
+				createBlock(
+					'core/column',
+					{
+						type: 'constrained',
+						justifyContent: 'right',
+					},
+					[ createBlock( 'woocommerce/product-image-gallery' ) ]
+				),
+				createBlock( 'core/column', {}, [
+					createBlock( 'core/post-title', {
+						__woocommerceNamespace: PRODUCT_TITLE_VARIATION_NAME,
+					} ),
+					createBlock( 'woocommerce/product-price', {
+						fontSize: 'large',
+					} ),
+					createBlock( 'core/post-excerpt', {
+						__woocommerceNamespace: PRODUCT_SUMMARY_VARIATION_NAME,
+					} ),
+					createBlock( 'woocommerce/add-to-cart-form' ),
+					createBlock( 'woocommerce/product-meta' ),
+				] ),
+			]
+		),
+		createBlock( 'woocommerce/product-details', {
+			align: 'wide',
+		} ),
+		createBlock( 'woocommerce/related-products', {
+			align: 'wide',
+		} ),
+	].filter( Boolean ) as BlockInstance[];
 
-const isConversionPossible = () => false;
+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 = () => '';
+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 Single 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(
@@ -23,13 +75,17 @@ const getDescriptionDisallowingConversion = ( templateTitle: string ) =>
 
 const getDescription = ( templateTitle: string, canConvert: boolean ) => {
 	if ( canConvert ) {
-		return getDescriptionAllowingConversion();
+		return getDescriptionAllowingConversion( templateTitle );
 	}
 
 	return getDescriptionDisallowingConversion( templateTitle );
 };
 
-const getButtonLabel = () => '';
+const getButtonLabel = () =>
+	__(
+		'Upgrade to Blockified Single Product template',
+		'woo-gutenberg-products-block'
+	);
 
 export {
 	getBlockifiedTemplate,

assets/js/blocks/product-query/variations/related-products.tsx

@@ -52,7 +52,7 @@ export const INNER_BLOCKS_TEMPLATE: InnerBlockTemplate[] = [
 		'core/heading',
 		{
 			level: 2,
-			content: __( 'Related products.', 'woo-gutenberg-products-block' ),
+			content: __( 'Related products', 'woo-gutenberg-products-block' ),
 		},
 	],
 	[