Add `useRenderAppenderWithLimit` hook

[ncoetzer]

Is your enhancement related to a problem? Please describe.

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 useRenderAppenderWithLimits custom hook comes in. With a single line of code, it gives us an easy way to enforce a maximum number of inner blocks.

For example:

import { useRenderAppenderWithLimits } from '@10up/block-components';

const myLimitedAppender = useRenderAppenderWithLimits(4);

We can then apply it like this:

const useInnerBlockProps = (
  {},
  {
    ...
    renderAppender: myLimitedAppender,
  }
);

And that’s it!

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.

Designs

No response

Describe alternatives you've considered

No response

Code of Conduct

• [x] I agree to follow this project's Code of Conduct