Add ability to limit the number of items within an Inner Blocks area

[fabiankaegy]

What problem does this address?

Part of #41236.

When you have a custom tabs block for example you can build that to work similar to the core columns block. You have one wrapping block that contains individual tab item or column blocks that intern allow editors to place other blocks inside of them. The issue however is that you may want to restrict the ability of editors to add more than 5 tabs which currently isn't possible.
Tabs are just an example here. This applies to all kinds of blocks that follow the parent/child block relationship. Even the Core Columns block doesn't really support more than 6 columns. But editors can still select an individual column block and duplicate it.

As a workaround, you can define a custom renderAppender function for the area of the inner block and only render the custom block appended whenever there are fewer than the max number of items in the area of the inner block. But that still doesn't solve the root issue because editors can still duplicate a block to create more than should be possible.

What is your proposed solution?

Add a new optional prop to the InnerBlocks props that allows developers to set a max number of items. It could also be achieved by introducing a new level of templateLock which would prevent adding more items whilst still not locking down any of the already existing items.

[SebastianZ]

Reusing templateLock initially seemed ok to me to reuse for that purpose, though it focuses on the templates instead of the allowed blocks.

A flexible approach would be to provide individual control over whether blocks can be added, moved or removed.

As @fabiankaegy mentioned, it probably requires a new prop. One way to achieve that would be an allowedActions prop, that takes different actions as an array similar to the allowedBlocks prop, or an object. Actions would then be add, move and remove. This approach also allows future extensions.

add = Controls whether new blocks can be added.
remove = Controls whether existing blocks can be removed.
move = Controls whether existing blocks can be moved.

Sebastian

[Jrope21]

Would love to see this get added!

Have tons of use-cases for this...
especially when trying to curate / limit the editor experience around a design system.

Here's a few in support:

• I have a difficult design that always requires a wrapper "section" block for handling the spacing & very unique background adjustments. This block needs to only be allowed 1 child to help stay in line with a design system. (the block essentially acts as a selector w/ options)
• Within a design... a card list component is required to only ever show a maximum of 3 cards before moving on to the next "section".

Not sure what the solution would be, but like the idea of expanding on the "templateLock" prop as a start.

[rustypaul]

We'd really appreciate this too. Max inner blocks would be really helpful

[warudin]

This is much needed for us as well.

A use case:
We want the client to be able to insert a maximum amount of two buttons in an innerBlock. But the client should be able to insert one or zero buttons as well. Therefore we can't use the current implementation of the templateLock.

If anyone has any ideas ideas in the mean time, that would be much appreciated.

[aurooba]

+1. I would appreciate both the ability to set a minimum and a maximum within an InnerBlocks area.

For example, I recently created a custom block that allows you to feature posts from another custom post type but the design directive explicitly asked us to not allow more than 6, but less than 6 was okay. If the templateLock featured had a max property, that would make it pretty simple.

In cases where this is part of a larger template, it would also be super helpful to be able to set a minimum so that people wouldn't leave the block empty, for example.

In plugins like ACF, the Repeater block lets you do this very easily and it makes sense to have these two properties as part of the templateLock feature.

[Honkitonkie]

Followed a tutorial https://ryanwelcher.com/2020/10/limiting-the-block-count-for-innerblocks/ for this but still had problems limiting the inserter on core blocks with parent/child relations as stated by fabiankaegy.

I think proposed solutions can really help with getting more control over the innerBlocks.

[ermenm]

+1.
We have the same situation where we we want to limit the amount of added Innerblocks for our client that specifically requested this feature. For now, we will be building the logic ourselves, but the feature would be highly appreciated!

[jg314]

I also followed the approach noted in https://ryanwelcher.com/2020/10/09/limiting-the-block-count-for-innerblocks/. I set up the code within useInnerBlocksProps() to look like this:

renderAppender: ( numInnerBlocks < maxInnerBlocks ) ? InnerBlocks.DefaultBlockAppender : false,

This worked for the default appender, but the in-between appender still displays when hovering between innerblocks. You can also add more innerblocks using the block inserter.

Given there isn't a great way to fully limit the number of innerblocks added, we'd love a more standardized approach.

[Mgrmjp]

Given there isn't a great way to fully limit the number of innerblocks added, we'd love a more standardized approach.

This 🎅🏻