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..73aceb0ddc6 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, @@ -20,7 +21,8 @@ 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'; /** * Internal dependencies @@ -62,19 +64,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 +140,56 @@ const Edit = ( {