New InnerBlocks Component – how to use

Hi Claudia,

You must add in the block output code/template. From the beginning, InnerBlocks control was like a hacky solution. But Gutenberg adds more and more features to this component, and it is impossible to keep using it as a control anymore.

This is why we decided to move it inside the block content as it already does the ACF plugin. It will sometimes be frustrating, but overall, it will significantly boost advanced custom blocks.

Regards,
Nikita.

Hi Nikita,

at first I thought what the hell, I still do not understand how to get nesting blocks in the editor without the control “innerblocks”.
But after testing and researching and so on it clicked. Maybe it took so long, cause in my testblock the preview was inactive.

It’s so simple, I was thinking too complicated like women do sometimes ??

Thanks
Claudia

Hi Claudia,

I’m glad that everything is resolved ??

The problem is in the bad documentation and lack of examples of how to properly migrate from the control to the component. We will try to improve it!

Regards,
Nikita.

Hi How do you use <InnerBlocks />?inside the theme template php file? Any documentation is greatly appreciated.

Hi Nikita,
I can’t seem to understand how the new InnerBlocks component work. At first there is no documentation how to parse out InnerBlocks in your ‘theme template’ instead of ‘html + handlebars’. Then I tried just using the ‘html + handlebars’ but i do not see the innerblock option inside my page editor.
My code is fairly straightforward for testing
<h1>{{title}}</h1>
<div><InnerBlocks /></div>
Again I can see my option for h1 but nothing for innerblocks
Any advise is appreciated. Thanks

Hi,

if you use PHP and put <InnerBlocks /> in your template, you should also activate the preview (Code output in editor: Display always). Because only then you have the possibility to fill this area with other blocks!

And when you expand the code like the following, with a placeholder, then it’s clearly more visible:

<InnerBlocks
template="[
     [ 'core/paragraph', { content: 'Here goes the content...' } ],
]"
/>

Suppose when you use HTML + Handlebars, it would be {{InnerBlocks}} instead of <InnerBlocks/>, but haven’t testet it.

Thanks Claudia! I was able to figure out shortly i posted yesterday. I thought it would be more complicated but it wasn’t. But thank you for the additional code for displaying preset message.
To use php you just have to use
<InnerBlocks /> (do not require to use echo or print)
For the html + handlebars the reason why i wasn’t seeing it in the page editor was because i didn’t add <InnerBlocks /> code in the ‘editor’ tab.
For html + handlebars you still use <InnerBlocks />