limit the number of inner block to 2

assets/js/blocks/filter-wrapper/edit.tsx

@@ -1,24 +1,51 @@
 /**
  * External dependencies
  */
-import { useInnerBlocksProps, useBlockProps } from '@wordpress/block-editor';
+import { useBlockProps, InnerBlocks } from '@wordpress/block-editor';
+import { useSelect } from '@wordpress/data';
+import type { BlockEditProps } from '@wordpress/blocks';
 
-const Edit = ( { attributes } ) => {
+/**
+ * Internal dependencies
+ */
+import { Attributes } from './types';
+
+const Edit = ( { attributes, clientId }: BlockEditProps< Attributes > ) => {
 	const blockProps = useBlockProps();
-	const innerBlocksProps = useInnerBlocksProps( blockProps, {
-		allowedBlocks: [ 'core/heading' ],
-		template: [
-			[ 'core/heading', { level: 3, content: attributes.heading || '' } ],
-			[
-				`woocommerce/${ attributes.filterType }`,
-				{
-					heading: '',
-				},
-			],
-		],
+
+	const innerBlockCount = useSelect( ( select ) => {
+		const currentBlock = select( 'core/block-editor' ).getBlock( clientId );
+		if ( ! currentBlock ) {
+			return 0;
+		}
+		return currentBlock.innerBlocks.length;
 	} );
 
-	return <div { ...innerBlocksProps } />;
+	return (
+		<div { ...blockProps }>
+			<InnerBlocks
+				allowedBlocks={ [ 'core/heading' ] }
+				template={ [
+					[
+						'core/heading',
+						{ level: 3, content: attributes.heading || '' },
+					],
+					[
+						`woocommerce/${ attributes.filterType }`,
+						{
+							heading: '',
+						},
+					],
+				] }
+				renderAppender={ () => {
+					if ( innerBlockCount < 2 ) {
+						return <InnerBlocks.ButtonBlockAppender />;
+					}
+					return null;
+				} }
+			/>
+		</div>
+	);
 };
 
 export default Edit;

assets/js/blocks/filter-wrapper/types.ts

@@ -0,0 +1,4 @@
+export interface Attributes {
+	heading: string;
+	filterType: string;
+}