Skip to content

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

Open
@fabiankaegy

Description

@fabiankaegy
opened on Jul 12, 2022 ยท edited by gziolo

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.

Activity

added
[Feature] Nested / Inner BlocksAnything related to the experience of nested/inner blocks inside a larger container, like Group or P
[Type] New APINew API to be used by plugin developers or package users.
on Jul 12, 2022
SebastianZ

SebastianZ commented on Jan 25, 2023

@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

Jrope21 commented on Apr 3, 2023

@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

rustypaul commented on Apr 25, 2023

@rustypaul

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

warudin

warudin commented on May 3, 2023

@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

aurooba commented on May 3, 2023

@aurooba
Member

+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

Honkitonkie commented on May 8, 2023

@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

ermenm commented on Apr 18, 2024

@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

jg314 commented on Jun 21, 2024

@jg314
Contributor

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Assignees

No one assigned

    Labels

    [Feature] Block APIAPI that allows to express the block paradigm.[Feature] Nested / Inner BlocksAnything related to the experience of nested/inner blocks inside a larger container, like Group or P[Type] EnhancementA suggestion for improvement.[Type] New APINew API to be used by plugin developers or package users.

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

      Participants

      @gziolo@SebastianZ@jg314@warudin@aurooba

      Issue actions

        Add ability to limit the number of items within an Inner Blocks area ยท Issue #42342 ยท WordPress/gutenberg