Now I can’t replace these with InnerBlocks as Innerblocks can only be used once in a block
A HTML tag has this same restriction yet it hasn’t stopped this from being done, the answer is composition.
The core/columns
block has this same problem and solves it by only allowing individual core/column
blocks as its children, so it’s a 2 block system. The individual core/column
blocks are what hold each item.
If we apply this to your block then you would need 3 blocks:
- testimonial block
- testimonial left
- testimonial right
We would then need these restrictions:
- Testimonial blocks can only contain testimonial left/right blocks
= Testimonial blocks contain the left and right blocks as a template when inserted. This template contains locks - testimonial left and right blocks cannot be inserted moved or removed, these are disabled in
block.json
supports - a testimonial left and right block each contain restrictions on the types of blocks they can contain
If you need a multline richtext component then you’ve made a mistake, what you really needed was paragraphs, for which we have paragraph blocks. Likewise don’t try to reinvent lists using components, use a list block.
Even in situations were a custom block is necessary, try to build as much of its internals using core blocks as you can via composition. If you need internal structure, use an internal block if core can’t provide it, and lock things if you’re concerned about users changing them.
A Superior Alternative
Everybody focuses on having to build a custom block for everything, afterall assembling everything from scratch everytime with core blocks is tedious, but there is a much easier solution though, use a block pattern and get rid of your custom blocks completely.
Core blocks could recreate what you needed with group blocks/columns/quotes/paragraphs and custom CSS classes. All that’s needed is for you to create a singular instance, lock the blocks position etc so the user can’t break it, then register it as a pattern with a name and a preview. This eliminates 99% of your code while future proofing things and supporting global styles natively.