diff --git a/assets/js/blocks/classic-template/archive-product.ts b/assets/js/blocks/classic-template/archive-product.ts
index 47656ea41c9..998e5ba0a33 100644
--- 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
index aa0f9161408..5b83ad72a59 100644
--- 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 = ( {