Improve transform classic product template UX (#9386)

* improve transform classic product template UX

* improve layout

* not update deps

* improve logic

* add bold

* fix height and width preview on hover

* fix label

* improve logic for revert button

* fix regression

Author: gigitux

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

@@ -19,7 +19,7 @@ import {
 } 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';
+import { OnClickCallbackParameter, type InheritedAttributes } from './types';
 
 const createProductsBlock = ( inheritedAttributes: InheritedAttributes ) =>
 	createBlock(
@@ -71,7 +71,7 @@ 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.",
+			'Transform this template into multiple blocks so you can add, remove, reorder, and customize your %s template.',
 			'woo-gutenberg-products-block'
 		),
 		templateTitle
@@ -96,17 +96,69 @@ const getDescription = ( templateTitle: string, canConvert: boolean ) => {
 };
 
 const getButtonLabel = () =>
-	__( 'Upgrade to Products block', 'woo-gutenberg-products-block' );
+	__( 'Transform into blocks', 'woo-gutenberg-products-block' );
+
+const onClickCallback = ( {
+	clientId,
+	attributes,
+	getBlocks,
+	replaceBlock,
+	selectBlock,
+}: OnClickCallbackParameter ) => {
+	replaceBlock( clientId, getBlockifiedTemplate( attributes ) );
+
+	const blocks = getBlocks();
+
+	const groupBlock = blocks.find(
+		( block ) =>
+			block.name === 'core/group' &&
+			block.innerBlocks.some(
+				( innerBlock ) =>
+					innerBlock.name === 'woocommerce/store-notices'
+			)
+	);
+
+	if ( groupBlock ) {
+		selectBlock( groupBlock.clientId );
+	}
+};
+
+const onClickCallbackWithTermDescription = ( {
+	clientId,
+	attributes,
+	getBlocks,
+	replaceBlock,
+	selectBlock,
+}: OnClickCallbackParameter ) => {
+	replaceBlock( clientId, getBlockifiedTemplate( attributes, true ) );
+
+	const blocks = getBlocks();
+
+	const groupBlock = blocks.find(
+		( block ) =>
+			block.name === 'core/group' &&
+			block.innerBlocks.some(
+				( innerBlock ) =>
+					innerBlock.name === 'woocommerce/store-notices'
+			)
+	);
+
+	if ( groupBlock ) {
+		selectBlock( groupBlock.clientId );
+	}
+};
 
 export const blockifiedProductCatalogConfig = {
 	getBlockifiedTemplate,
 	isConversionPossible,
 	getDescription,
 	getButtonLabel,
+	onClickCallback,
 };
 
 export const blockifiedProductTaxonomyConfig = {
 	getBlockifiedTemplate: getBlockifiedTemplateWithTermDescription,
+	onClickCallback: onClickCallbackWithTermDescription,
 	isConversionPossible,
 	getDescription,
 	getButtonLabel,

assets/js/blocks/classic-template/editor.scss

@@ -1,12 +1,14 @@
 :where(.wp-block-woocommerce-legacy-template) {
 	margin-left: auto;
 	margin-right: auto;
-	max-width: 1000px;
 }
 
 .wp-block-woocommerce-classic-template__placeholder-copy {
+	display: flex;
+	flex-direction: column;
 	max-width: 900px;
-	margin-bottom: 30px;
+	width: 400px;
+	margin: auto;
 }
 
 .wp-block-woocommerce-classic-template__placeholder-warning {
@@ -15,9 +17,12 @@
 }
 
 .wp-block-woocommerce-classic-template__placeholder-wireframe {
-	width: 100%;
 	height: 250px;
 	background: #e5e5e5;
+	display: flex;
+	flex-wrap: wrap;
+	gap: $gap-large;
+	margin: auto;
 
 	@media only screen and (min-width: 768px) {
 		height: auto;
@@ -27,22 +32,26 @@
 
 .wp-block-woocommerce-classic-template__placeholder .wp-block-woocommerce-classic-template__placeholder-image {
 	display: none;
-	width: 100%;
+	width: 400px;
 	height: auto;
 
 	@media only screen and (min-width: 768px) {
 		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;
 }
+
+.wp-block-woocommerce-classic-template__placeholder-copy__icon-container {
+	display: flex;
+	align-items: center;
+	gap: $gap-small;
+
+	span {
+		@include font-size(larger);
+	}
+}