Feature Request: Nested block control type

[jcklpe]

The ability to nest custom blocks inside of a custom block would be pretty dang useful I imagine yeah?

[lukecarbis]

What’s the use case?

[jcklpe]

Could create a layout type block that can contain a repeater array in several columns maybe? I know nested blocks are part of the gutenburg spec but I have to admit I haven't dug super deep yet into their use cases outside layout stuff.

I used nesting with ACF a good bit though. I made a thing that was a nested repeater inside of a repeater so that I could more dynamically choose multiple media types in a masonry gallery.

[lukecarbis]

To be honest I'm still having trouble understanding. Is this idea similar to "grouping" block fields together? Or putting the fields from one block in another? I'm not sure I get it.

[RobStino]

Hey @jcklpe If you're able, would love to have some more details on what you're describing.

[jcklpe]

@RobStino

Since posting this I've started getting my hands dirty and I think my original wording here is probably a little off. I actually did a tutorial for making nested blocks and while conceptually it's similar I think the more accurate term I would be a repeater control type. Some kind of control in which multiple other controls could be grouped inside as a unit. This is similar to how an InnerBlock component in Gutenberg can take multiple sub blocks.

But ya'll already have a repeater control type so I think this can just be considered a null issue. I opened this originally not having a sharp division in my mind between how the innerBlock component worked and how a repeater worked, but upon further thought I've realized that the difference between the two is in such that it basically renders the InnerBlock redundant.

[paulkirspuu]

I believe Gutenberg native block Column is what one would imagine when talking about nested blocks. Illustrative image of usage, https://i.snag.gy/cmx3Hw.jpg.

This kind of block type would be useful to have in Block Lab to build layout elements easily.

[rolandso]

I have the same problem, i want to create layout components to create a grid. Simple example is described here:

I believe Gutenberg native block Column is what one would imagine when talking about nested blocks. Illustrative image of usage, https://i.snag.gy/cmx3Hw.jpg.

This kind of block type would be useful to have in Block Lab to build layout elements easily.

[davidallenlewis]

Create a 1 column Gutenberg “Columns” block and then give it a class in the “Advanced” settings for stying purposes.

Also I built a site with ACF blocks recently and started off with one field as a repeater (an accordion) but then later decided to make it a single block (no repeater... one block = one accordion panel/toggle) since Gutenberg already has the ability to add as many blocks as you need. I think it’s more in keeping with the Gutenberg approach to break your design into its smallest individual components than to have one monolithic block with repeating field groups within it.

[AlessandroFerrariFood]

If I understand correctly this ticket suggest to support Guttemberg InnerBlocks. It would be awesome!! I already have an use case that currently I can't solve with block-lab. I have a "fancy box" block. It support various stylings, colors, borders, optional title, etc. but I need to place inside not only text (richtext) but blocks too.

[paulkirspuu]

@lukecarbis hey. thanks for reopening this issue. is this matter in queue for development? if yes, can you give a rough estimate on when to expect updates?

[lukecarbis]

@paulkirspuu We've got other priorities right now, including a post control, taxonomy control, rich text control, and repeater. Partly, this is because we want to give Gutenberg some time to mature in this area before we try to extend it too much.

[Tarka-Dhal]

@lukecarbis I think that this feature is really needed. It let you create more complex blocks. This project will be perfect with this feature!

[lukecarbis]

This might help a lot of use cases: https://wptavern.com/gutenberg-5-5-adds-new-group-block-for-nesting-child-blocks

[robertsass]

Maybe I don't understand what the Repeater can do, but my use case would be to create custom blocks with Block Lab, which all act as a container, but may differ from each other in their template source. That way I could offer the clients/authors a easy way to create a layout, without knowing which CSS framework is used and having to teach them how to nest native column blocks inside each other and which classes they have to give. (Also if migrating somewhen to another theme or CSS framework I could easily change the template files without having to go through all the content and change all those given classes.)

[torian257x]

@lukecarbis big fan of block lab so far. I wish more freedom in defining sub folders for my block templates... but its not really so important, and maybe there even is a way, I just havent looked really yet (as my project is still considerably small).

That nesting is not supported? absolute killer. I started looking for different solutions, even though it would be a real shame. Looks like your competition already offers something, even though they only support 1 level https://lazyblocks.com/documentation/blocks-controls/inner-blocks/

The question "what is the use case" anything that is nested is a use case. Gutenberg at the end of the day, is nothing else than a page builder. Just look at any page builder, divi, enfold... all the big names have page builders and they all make heavy use of nesting.

[Tarka-Dhal]

@Jossnaz I have to agree with you. Nesting is most wanted feature. I stopped using BlockLab because I needed this feature too.

[torian257x]

@Tarka-Dhal what are you using now? hand coding the blocks is so tedious

[Tarka-Dhal]

I'm using ACF with PHP importing. For nesting support I have to hard code (I have only some containers, wrappers, etc.).

[lukecarbis]

@Tarka-Dhal @Jossnaz just wanted to chime in to say I absolutely hear you. I'm still not convinced that nesting isn't something that Gutenberg should do by default… but I also think I just don't understand what it is you're trying to achieve.

Could you post how you've been able to create what you wanted with ACF or Lazy Blocks?

[robertsass]

In contrast to BlockLab, Lazy Blocks goes much more in the direction of Ultimate Blocks - a collection of almost completely styled blocks as a complete product. BlockLab is lightyears ahead and way more advanced and flexible. Just the fact that the template files are PHP files (as known from WordPress themes & with all the consequences regarding the programming possibilities but also the facts that they can be put under version control or just copied around into other projects) is brilliant! It opens up tons of millions of possibilities.

The Gutenberg-native Columns are (and always will remain) cripled: they bring their ugly code and require the loading of extra resources and they are very limited. You can't build complex structures in the background and make them to the editor easy to use.

Every single CSS framework in the world knows something like .container with which you can for example build a section with colored background over the whole window width, while the content in it remains in the grid and always has a certain maximum width. This is something you could do with nesting. With Gutenberg-native or Lazy Blocks you have to assign the additional class everywhere in the backend. And what if you want to change something? Adjust the classes again everywhere. In BlockLab this would be much easier: just edit the template file centrally once. Or the latest hot post-Flexbox-shit that will be released in Bootstrap v8 Alpha, or just usage of any other fancy CSS framework - and all in an consistent design & technique, without those WordPress stylesheets added for the Gutenberg-native blocks.

Regarding the clients which BlockLab targets I really don‘t understand how it’s possible to refer to native Gutenberg. BlockLab is what makes Gutenberg ready for professional use. Imagine all those possibilities that would result, when being able to add a Nesting-Area to your Blocks! Being able to build a Section-Block for example, and put in a select which e.g. defines alignment, an text input field to define background color, and an Nesting-Area to allow the Block to nest other Blocks there (the content of that colored fullscreen section). And then defining another Block and putting it inside of that section: lets say a more advanced Columns-Block based on the possibilities that our CSS Framework we‘re already using in our project/theme offers.

I think Nesting is the most needed feature for BlockLab and would become kind of a Booster-Rocket for BlockLab.

[torian257x]

@lukecarbis "I'm still not convinced that nesting isn't something that Gutenberg should do by default…" so you are convinced? double negative... I'll just assume you are not convinced.

gutenberg will implement group blocks, at least it seems like: https://core.trac.wordpress.org/search?q=group+block so you not being convinced, seems like you are the only one. But maybe I just don't understand what a group block really does. Afaik from reading, it doesn't really look like it would solve our concerns.

An example of nesting, i'll just pick one. Say you create a "submit free trial form" block. So on product page XYZ I have a little intro text and on the right side, I would put my free trial form.

But I have a popup block as well, so when the user leaves the page I want to display a popup, with the free trial form. In the case of block lab, now I have to create a "popup free trial" block that somehow makes use of the free trial form block code and loads it as well loads the popup block, not even sure how that would be done, and then puts it together into a popup free trial block.

lets continue you have a slider, the slider has as content some "product xyz" "product abc" and "free trial". Now the slider once is in a section surrounded by a fancy border that requires special tinkering. And once it is surrounded by a normal section, but with extra spacing and a different header. And once it is in a very special section that is divided in 2, one section with some text 'efg' left, and the other with the slider right. I now create blocks called slider-xyz-abc-freetrial-in-fancy-section slider-xyz-abc-freetrial-in-normal-section slider-xyz-abc-freetrial-in-doublesection-with-text-efg-left

instead I want to have blocks:

• fancy-section
  • slider (can be made reusable?)
    • xyz
    • abc
    • free trial
• normal-section
  • slider (can be made reusable?)
    • xyz
    • abc
    • free trial
• doublesection
  • text
  • slider (can be made reusable?)
    • xyz
    • abc
    • free trial

e.g. each line in the list, as separate block

[lukecarbis]

Wow! First of all, thanks so much for taking the time to post all this. There's clearly some passion here, that frankly, is a bit of a surprise!

Here's what I can promise: Once we finish the repeater field, I'll speak with @RobStino and @kienstra about very seriously considering nested blocks as our next major focus, putting off other things such as conditional fields. We'll read through everything in this thread together.

Suppose we do move in this direction – I'm still struggling to picture in my mind what that looks like in the admin. I mean, I can picture a setting which allows a block to be a container… but what does it look like once it's inserted into the Gutenberg editor?

[robertsass]

@lukecarbis it could look like the native Column block. Or, if you want to go deeper and not just create a container block but leave the option to put the container field together with all those already existing other fields into the same block, I would suggest to just style it like a dropzone known from file uploads. Just a bordered or indented area.

[torian257x]

@robertsass I think the problem is that the column block itself looks crap. Just nest a couple column layouts into itself, it quickly becomes unusable. @lukecarbis there is energy around for this, because block lab block builder can indeed be the next big thing for professionals to build, and then for the normal users to consume. I am currently using the builder for email templates, that use html tables (ugly yes, but thats what works for emails). If it were for a proper page, I would already be screwed for lack of nesting (or the non programmer users wanting to use the blocks I created for them).
At this point I would probably reach out and look for a discussion with the wordpress devs I fear. Or search their tracker. Maybe reddit. If you can do whatever you want with nested blocks, I guess you could try popups. I dont see a different solution honestly, otherwise everything gets squashed together like the column block demonstrates very clearly. Conditional blocks? I dont even see a use case for that honestly. You can put a little checkbox anyway or do it in the code very quickly. But maybe i'm ignorant.

[robertsass]

@Jossnaz That's right, but consider that native Columns block is designed for end users. It's good enough to put text into columns like it's known from printed magazines. Of course it's not designed to be used to implement complete ambitious layouts. But that's not what we're talking about. We're not talking about another Grid block, but about nesting. The only thing I meant to suggest by referring to the native Columns block was that the interface could look like that; as I wrote more concrete: nested content in that block could be bordered or indented.

You're absolutely right, that BlockLab has the potential to become the next big thing for professionals (and regarding the price it's the intended audience). It has so much potential to replace that heavy page builders and themes with easy to use and very customized project-specific backends.

Having that targeted audience in mind, it's easy to imagine a more thoughtful (and a bit more complex) interface than that rustic native Columns block. Whether it's with popups (I personally don't think that's a good way, as it would result in multiple overlaying popups, when nesting more nested blocks into another) or just the conventional design of BlockLab that lines up each input field (that way you could of course also implement a grid by assigning each nested block the needed class (e.g. row or col) while the nested blocks (columns) align below each other in the backend). Anyway it would therefore allow complex layouts. But that clearly also leads to conditional blocks or some repeating loop functionality. You're pretty sure not ignorant, no one can imagine the projects, challenges and creativity of all these many geniuses out there. But thinking of a grid built with our imagined Nesting block it's obvious that it would make it significantly easier to setup a block one for all that offers a select or input field to provide a number how many columns that row should have. Just my 2 cents of a spontaneous outline for the benefit of conditional fields.

[lukecarbis]

Just to add to the conversation here, @RobStino and I caught up to chat about this, and came up with a great use case for nested blocks: A Slider Block.

Imagine being able to insert a "slider" block, and within it, insert an image, an embedded video, a quote, and maybe even another custom block.

This couldn't really work in the conventional Gutenberg "columns" sense.

(We should keep discussion on the usefulness of conditional blocks / fields to #278 and #279)

[pcfreak30]

@lukecarbis @RobStino

I would consider this the next killer thing after repeaters. I'm building a custom theme with a CSS framework, and if I could get a block to render with the CSS classes I want (without adding manually every time, as I have dequeued the wp-blocks CSS), i could easily build blocks that use fields and such to render layout blocks more rapidly. Combine that with the API, and you could make an addon plugin to deliver blocks for example bootstrap, foundation, or in my case, bulma.

It should render the markup server-side and combine it with the child blocks.

For clients, this could mean more easily making custom themes and just dropping layout elements in without a lot of hassle, as honestly, the core column block is poop.

[kienstra]

Nice, thanks a lot for sharing your use cases and how this would help.

[yurifpinto]

@lukecarbis I was actually searching for a way to build a Bootstrap 4-compatible slider block using Block Lab when I found this thread. So yeah, I think that would be indeed one of the more useful use cases. Looking forward to see this implemented.