improve logic

woocommerce · May 8, 2023 · f78e0e5 · f78e0e5
1 parent 9964d30
commit f78e0e5
Show file tree

Hide file tree

Showing 6 changed files with 78 additions and 33 deletions.
diff --git a/assets/js/blocks/classic-template/archive-product.ts b/assets/js/blocks/classic-template/archive-product.ts
@@ -101,18 +101,11 @@ const getButtonLabel = () =>
 const onClickCallback = ( {
 	clientId,
 	attributes,
-	getBlocks,
+	blocks,
 	replaceBlock,
 	selectBlock,
-}: {
-	clientId: string;
-	attributes: Record< string, unknown >;
-	getBlocks: () => BlockInstance[];
-	replaceBlock: ( clientId: string, blocks: BlockInstance[] ) => void;
-	selectBlock: ( clientId: string ) => void;
-} ) => {
+}: OnClickCallbackParameter ) => {
 	replaceBlock( clientId, getBlockifiedTemplate( attributes ) );
-	const blocks = getBlocks();
 
 	const groupBlock = blocks.find(
 		( block ) =>
@@ -131,12 +124,11 @@ const onClickCallback = ( {
 const onClickCallbackWithTermDescription = ( {
 	clientId,
 	attributes,
-	getBlocks,
+	blocks,
 	replaceBlock,
 	selectBlock,
 }: OnClickCallbackParameter ) => {
 	replaceBlock( clientId, getBlockifiedTemplate( attributes, true ) );
-	const blocks = getBlocks();
 
 	const groupBlock = blocks.find(
 		( block ) =>

diff --git a/assets/js/blocks/classic-template/index.tsx b/assets/js/blocks/classic-template/index.tsx
@@ -2,6 +2,7 @@
  * External dependencies
  */
 import {
+	createBlock,
 	getBlockType,
 	registerBlockType,
 	unregisterBlockType,
@@ -16,11 +17,14 @@ import {
 	BlockPreview,
 	store as blockEditorStore,
 } from '@wordpress/block-editor';
+import { store as editSiteStore } from '@wordpress/edit-site';
 import { Button, Placeholder, Popover } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { box, Icon } from '@wordpress/icons';
 import { useDispatch, subscribe, useSelect, select } from '@wordpress/data';
-import { useEffect, useState } from '@wordpress/element';
+import { useEffect, useMemo, useState } from '@wordpress/element';
+import { store as noticesStore } from '@wordpress/notices';
+import { useEntityRecord } from '@wordpress/core-data';
 
 /**
  * Internal dependencies
@@ -62,19 +66,33 @@ const conversionConfig: { [ key: string ]: BlockifiedTemplateConfig } = {
 	fallback: blockifiedFallbackConfig,
 };
 
+const pickBlockClientIds = ( blocks: Array< BlockInstance > ) =>
+	blocks.reduce< Array< string > >( ( acc, block ) => {
+		if ( block.name === 'core/template-part' ) {
+			return acc;
+		}
+
+		return [ ...acc, block.clientId ];
+	}, [] );
+
 const Edit = ( {
 	clientId,
 	attributes,
 	setAttributes,
 }: BlockEditProps< Attributes > ) => {
-	const { replaceBlock, selectBlock } = useDispatch( blockEditorStore );
+	const { replaceBlock, selectBlock, replaceBlocks } =
+		useDispatch( blockEditorStore );
 
-	const { getBlocks } = useSelect( ( sel ) => {
+	const { blocks } = useSelect( ( sel ) => {
 		return {
-			getBlocks: sel( blockEditorStore ).getBlocks,
+			blocks: sel( blockEditorStore ).getBlocks(),
 		};
 	}, [] );
 
+	const { createInfoNotice } = useDispatch( noticesStore );
+
+	const clientIds = useMemo( () => pickBlockClientIds( blocks ), [ blocks ] );
+
 	const blockProps = useBlockProps();
 	const templateDetails = getTemplateDetailsBySlug(
 		attributes.template,
@@ -124,15 +142,56 @@ const Edit = ( {
 							<div className="wp-block-woocommerce-classic-template__placeholder-migration-button-container">
 								<Button
 									isPrimary
-									onClick={ () =>
+									onClick={ () => {
 										onClickCallback( {
 											clientId,
-											getBlocks,
+											blocks,
 											attributes,
 											replaceBlock,
 											selectBlock,
-										} )
-									}
+										} );
+										createInfoNotice(
+											__(
+												'Template transformed into blocks!',
+												'woo-gutenberg-products-block'
+											),
+											{
+												actions: [
+													{
+														label: __(
+															'Undo',
+															'woo-gutenberg-products-block'
+														),
+														onClick: () => {
+															replaceBlocks(
+																clientIds,
+																createBlock(
+																	'core/group',
+																	{
+																		layout: {
+																			inherit:
+																				true,
+																			type: 'constrained',
+																		},
+																	},
+																	[
+																		createBlock(
+																			'woocommerce/legacy-template',
+																			{
+																				template:
+																					attributes.template,
+																			}
+																		),
+																	]
+																)
+															);
+														},
+													},
+												],
+												type: 'snackbar',
+											}
+										);
+									} }
 									onMouseEnter={ () =>
 										setIsPopoverOpen( true )
 									}

diff --git a/assets/js/blocks/classic-template/product-search-results.ts b/assets/js/blocks/classic-template/product-search-results.ts
@@ -145,12 +145,11 @@ const getDescription = ( templateTitle: string, canConvert: boolean ) => {
 const onClickCallback = ( {
 	clientId,
 	attributes,
-	getBlocks,
+	blocks,
 	replaceBlock,
 	selectBlock,
 }: OnClickCallbackParameter ) => {
 	replaceBlock( clientId, getBlockifiedTemplate( attributes ) );
-	const blocks = getBlocks();
 
 	const groupBlock = blocks.find(
 		( block ) =>

diff --git a/assets/js/blocks/classic-template/single-product.ts b/assets/js/blocks/classic-template/single-product.ts
@@ -6,6 +6,7 @@ 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';
+import { OnClickCallbackParameter } from './types';
 
 const getBlockifiedTemplate = () =>
 	[
@@ -83,17 +84,11 @@ const getButtonLabel = () =>
 
 const onClickCallback = ( {
 	clientId,
-	getBlocks,
+	blocks,
 	replaceBlock,
 	selectBlock,
-}: {
-	clientId: string;
-	getBlocks: () => BlockInstance[];
-	replaceBlock: ( clientId: string, blocks: BlockInstance[] ) => void;
-	selectBlock: ( clientId: string ) => void;
-} ) => {
+}: OnClickCallbackParameter ) => {
 	replaceBlock( clientId, getBlockifiedTemplate() );
-	const blocks = getBlocks();
 
 	const groupBlock = blocks.find(
 		( block ) =>

diff --git a/assets/js/blocks/classic-template/types.ts b/assets/js/blocks/classic-template/types.ts
@@ -12,7 +12,7 @@ export type InheritedAttributes = {
 export type OnClickCallbackParameter = {
 	clientId: string;
 	attributes: Record< string, unknown >;
-	getBlocks: () => BlockInstance[];
+	blocks: BlockInstance[];
 	replaceBlock: ( clientId: string, blocks: BlockInstance[] ) => void;
 	selectBlock: ( clientId: string ) => void;
 };

diff --git a/assets/js/templates/revert-button/index.tsx b/assets/js/templates/revert-button/index.tsx
@@ -38,10 +38,10 @@ const pickBlockClientIds = ( blocks: Array< BlockInstance > ) =>
 	}, [] );
 
 const RevertClassicTemplateButton = () => {
-	const { blocks, getEditedPostId } = useSelect( ( sel ) => {
+	const { blocks, editedPostId } = useSelect( ( sel ) => {
 		return {
 			blocks: sel( blockEditorStore ).getBlocks(),
-			getEditedPostId: sel( 'core/edit-site' ).getEditedPostId(),
+			editedPostId: sel( 'core/edit-site' ).getEditedPostId(),
 		};
 	}, [] );
 
@@ -53,7 +53,7 @@ const RevertClassicTemplateButton = () => {
 			rendered?: string;
 			row: string;
 		};
-	} >( 'postType', 'wp_template', getEditedPostId );
+	} >( 'postType', 'wp_template', editedPostId );
 
 	const isLegacyTemplateBlockAdded = useMemo(
 		() => hasLegacyTemplateBlock( blocks ),