Add useRenderAppenderWithLimit hook for controlling inner block limits

Author: ncoetzer

hooks/index.ts

@@ -18,3 +18,4 @@ export { usePostMetaValue } from './use-post-meta-value';
 export { useTaxonomy } from './use-taxonomy';
 export { useIsSupportedMetaField } from './use-is-supported-meta-value';
 export { useFlatInnerBlocks } from './use-flat-inner-blocks';
+export { useRenderAppenderWithLimit } from './use-render-appender-with-limit';

hooks/use-render-appender-with-limit/index.ts

@@ -0,0 +1,24 @@
+import { useSelect } from '@wordpress/data';
+import {
+	store as blockEditorStore,
+	useBlockEditContext,
+	InnerBlocks,
+} from '@wordpress/block-editor';
+
+export function useRenderAppenderWithLimit(limit: number, buttonAppender = false) {
+	const { clientId } = useBlockEditContext();
+	const appenderType = buttonAppender
+		? InnerBlocks.ButtonBlockAppender
+		: InnerBlocks.DefaultBlockAppender;
+
+	return useSelect(
+		(select) => {
+			// @ts-expect-error - TS doesn't know about the block editor store
+			const { innerBlocks } = select(blockEditorStore).getBlock(clientId);
+			const numberOfInnerBlocks = innerBlocks.length;
+			const shouldRenderAppender = numberOfInnerBlocks < limit;
+			return shouldRenderAppender ? appenderType : false;
+		},
+		[clientId, limit],
+	);
+}

hooks/use-render-appender-with-limit/readme.md

@@ -0,0 +1,31 @@
+# `useRenderAppenderWithLimit`
+
+There are times when we need more granular control over how many blocks can be added to a block that supports inner blocks. That’s where the `useRenderAppenderWithLimit` custom hook comes in. With a single line of code, it gives us an easy way to enforce a maximum number of inner blocks.
+
+The hook will return either false or the block appender, depending on the maximum limit you pass in. Behind the scenes, it handles the heavy lifting by fetching and counting the inner blocks for your block, then conditionally returning the appender only when allowed.
+
+## Usage
+
+```js
+import { useBlockProps, useInnerBlockProps } from '@wordpress/block-editor';
+import { useRenderAppenderWithLimit } from '@10up/block-components';
+
+function BlockEdit() {
+	const renderAppender = useRenderAppenderWithLimit(4);
+
+	const blockProps = useBlockProps();
+	const innerBlocksProps = useInnerBlocksProps(
+		{},
+		{
+			...
+			renderAppender,
+		},
+	);
+
+	return (
+		<div {...useBlockProps}>
+			<div {...innerBlocksProps}>
+		</div>
+	);
+}
+```