Limit amount of Innerblocks to x number

• VincentH

• August 11, 2021 at 7:43 am

I’m creating my own columns block so I can have a little more flexibility when it comes to the content.

However I’ve ran into a problem I don’t want the customer to add unlimited columns. Only 1 or 2.

Now to have maximum flexibility I want the appender to hide when 2 blocks are added. However with my limited JS knowledge I can’t figure it out.

I ran across this post: https://ryanwelcher.com/2020/10/limiting-the-block-count-for-innerblocks/ and was wondering if someone could help me get this done with ACF.

• heerko

• December 26, 2022 at 9:41 am

Ever managed to solve this? I have the same problem and found the same article, but have no idea how to apply this to ACF blocks.

• miquel.adell

• December 28, 2022 at 3:57 am

Hey, @heerko if you ever get it to work please post it here as I’m exactly in the same spot.

Thanks a lot!

• Theness

• January 9, 2023 at 11:08 pm

@heerko @duck life
First, you need to create a counter variable that keeps track of the number of blocks that have been added. You can do this by creating a variable count that is initialized to 0.

Next, you will need to create a function that increments the count variable each time a new block is added. You can do this by creating a function addBlock that increments the count variable by 1 each time it is called.

Then, you will need to bind the addBlock function to the appender so that it is called each time a new block is added.

Finally, you can use an if statement to check the value of count and hide the appender if count is equal to 2.

Here is some example code that demonstrates how you could implement this:

let count = 0;

function addBlock() {
  count += 1;
  if (count === 2) {
    // hide the appender here
  }
}

// bind the addBlock function to the appender
document.getElementById("appender").addEventListener("click", addBlock);