Add inner block limit example block

Author: ncoetzer

example/src/blocks/inner-blocks-limit/block.json

@@ -0,0 +1,17 @@
+{
+  "name": "example/inner-block-limit",
+  "apiVersion": 3,
+  "title": "Inner Block Limit - Example",
+  "description": "Example Block to show the usage of the useRenderAppenderWithLimit hook",
+  "icon": "smiley",
+  "category": "common",
+  "example": {},
+  "supports": {
+    "html": false
+  },
+  "attributes": {},
+  "allowedBlocks": [
+    "example/hello-world"
+  ],
+  "editorScript": "file:./index.ts"
+}

example/src/blocks/inner-blocks-limit/edit.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import { useBlockProps, useInnerBlocksProps } from '@wordpress/block-editor';
+import { useRenderAppenderWithLimit } from '@10up/block-components';
+
+const TEMPLATE = [
+	[
+		'example/hello-world',
+		{},
+	],
+];
+
+export const BlockEdit = () => {
+	const renderAppender = useRenderAppenderWithLimit(4);
+	const blockProps = useBlockProps();
+
+	const innerBlocksProps = useInnerBlocksProps(
+		{},
+		{
+			template: TEMPLATE,
+			renderAppender,
+		},
+	);
+
+	return (
+		<div {...blockProps}>
+			<div {...innerBlocksProps} />
+		</div>
+	);
+};

example/src/blocks/inner-blocks-limit/index.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import { registerBlockType } from '@wordpress/blocks';
+import { InnerBlocks } from '@wordpress/block-editor';
+import { __ } from '@wordpress/i18n';
+
+import { BlockEdit } from './edit';
+import metadata from './block.json';
+
+registerBlockType(metadata, {
+	edit: BlockEdit,
+	save: () => <InnerBlocks.Content />
+});