From 96b9cbf0c6560add64b3190d34569a660d054708 Mon Sep 17 00:00:00 2001
From: Luigi Teschio <gigitux@gmail.com>
Date: Mon, 6 Jun 2022 16:49:19 +0200
Subject: [PATCH] Add the button to migrate to the blockified version of the
 Product Grid Block woocommerce/woocommerce-blocks#6483
 (https://github.com/woocommerce/woocommerce-blocks/pull/6485)

Add the button to migrate to the blockified version of the Product Grid Block
---
 .../js/blocks/classic-template/editor.scss    | 12 +++++++
 .../js/blocks/classic-template/index.tsx      | 36 ++++++++++++++++---
 2 files changed, 44 insertions(+), 4 deletions(-)

diff --git a/plugins/woocommerce-blocks/assets/js/blocks/classic-template/editor.scss b/plugins/woocommerce-blocks/assets/js/blocks/classic-template/editor.scss
index 7b8987a4f3a..9ff1b017c70 100644
--- a/plugins/woocommerce-blocks/assets/js/blocks/classic-template/editor.scss
+++ b/plugins/woocommerce-blocks/assets/js/blocks/classic-template/editor.scss
@@ -34,3 +34,15 @@
 		display: block;
 	}
 }
+
+
+.wp-block-woocommerce-classic-template__placeholder-wireframe {
+	display: flex;
+	flex-direction: column;
+}
+
+.wp-block-woocommerce-classic-template__placeholder-migration-button-container {
+	justify-content: center;
+	align-items: center;
+	margin: 0 auto;
+}
diff --git a/plugins/woocommerce-blocks/assets/js/blocks/classic-template/index.tsx b/plugins/woocommerce-blocks/assets/js/blocks/classic-template/index.tsx
index 4ac5d7acae9..75ce26ebaeb 100644
--- a/plugins/woocommerce-blocks/assets/js/blocks/classic-template/index.tsx
+++ b/plugins/woocommerce-blocks/assets/js/blocks/classic-template/index.tsx
@@ -1,12 +1,16 @@
 /**
  * External dependencies
  */
-import { registerBlockType } from '@wordpress/blocks';
-import { WC_BLOCKS_IMAGE_URL } from '@woocommerce/block-settings';
+import { createBlock, registerBlockType } from '@wordpress/blocks';
+import {
+	isExperimentalBuild,
+	WC_BLOCKS_IMAGE_URL,
+} from '@woocommerce/block-settings';
 import { useBlockProps } from '@wordpress/block-editor';
-import { Placeholder } from '@wordpress/components';
+import { Button, Placeholder } from '@wordpress/components';
 import { __, sprintf } from '@wordpress/i18n';
 import { box, Icon } from '@wordpress/icons';
+import { useDispatch } from '@wordpress/data';
 
 /**
  * Internal dependencies
@@ -20,9 +24,12 @@ interface Props {
 		template: string;
 		align: string;
 	};
+	clientId: string;
 }
 
-const Edit = ( { attributes }: Props ) => {
+const Edit = ( { clientId, attributes }: Props ) => {
+	const { replaceBlock } = useDispatch( 'core/block-editor' );
+
 	const blockProps = useBlockProps();
 	const templateTitle =
 		TEMPLATES[ attributes.template ]?.title ?? attributes.template;
@@ -60,6 +67,27 @@ const Edit = ( { attributes }: Props ) => {
 					</p>
 				</div>
 				<div className="wp-block-woocommerce-classic-template__placeholder-wireframe">
+					{ isExperimentalBuild() && (
+						<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',
+										} )
+									);
+								} }
+								text={ __(
+									'Use the blockified Product Grid Block',
+									'woo-gutenberg-products-block'
+								) }
+							/>
+						</div>
+					) }
 					<img
 						className="wp-block-woocommerce-classic-template__placeholder-image"
 						src={ `${ WC_BLOCKS_IMAGE_URL }template-placeholders/${ templatePlaceholder }.svg` }