Nested ACF Repeater

[dranzer]

Hi @Louis,

I noticed some work was done in 1.1.8.4 to support nested repeater. Is it still work in progress?

1.1.8.4

Fix: Global Header conditions would not be met in certain circumstances (function run too early) → Visibility conditions bug Fix: Further attention to removing duplicated Custom CSS in repeater content Fix: Relative Styling Border properties applied to main global class instead of RS → Global Classes Relative Styling Border Bug Fix: Navigator duplicated function should now place duplicated block after original block Fix: Custom CSS for Query Template block was not being processed →…

[gusmo]

Nice to see a post about nested repeaters. Just crashed a page with trying to set a repeater in a repeater…

Would love to bring up some ACF things that would be nice to see inside. ACF Repeater in repeater, ACF groups, ACF flexible content. This could solve many issues in terms of client crashing content and design.

[Louis]

Hi @gusmo and @dranzer,

Good point! Might have been left on the side.
We’ll make sure to get this sorted out as soon as possible!

Thanks for bringing it back up @dranzer.

[Louis]

Nested repeaters are now supported in 1.2.8.3.

There might be some adjustments needed in certain cases, and I would be grateful if you could let me know if you run into issues by replying to this thread.

Cheers,

[gusmo]

So i tried the nested repeater. But i guess i am doing something wrong, or understood the “nested” claim wrong.
My nested repeater in backend i want to show:

Editor View:

But if i select the paragraph and try to inserat dynamic data, i can select the nested repeater value, but no option to select its content inside.

Selected nested repeater with no option:

I hope this is somehow understandable

[Louis]

Hi @gusmo,

Could you possibly show me how you’ve set the source for the nested repeater?

Thanks.

[gusmo]

yes, but allways need to create new page - otherwise it loops and ends in a 500 error.

my source repeater:

and my ACF fields:

[Louis]

Can you set the Source field to Repeater (not ACF) for the nested repeater?

[gusmo]

yes! tricky one. up and running! a bit tricky. but i can confirm now its up and running!

on left it needs “repeater” inside the inital ACF repeater - then you can select dynamic fields from nested repeater.

very very nice - really happy this is up and running, big thanks!

[gusmo]

not sure if its a bug. but found some time to play with repeater (as reusable parts maybe relevant) again and tried to setup a grid from repeater field. but even when i put all into a div inside the repeater the grid seems to use the repeater elements. and some layout options also not applied properly, but may also be related to the grid problem.

[Louis]

Hope I’m not misunderstanding, but the Repeater grid editor reflects grid positioning for the Repeater items (seems you have 3 on this post), not their children.
You’d have to insert a Columns block inside the Repeater to modify the layout of nested children.

[Louis]

I will add that I always recommend using Auto Grid for Repeater blocks, especially in a Reusable block context.

[gusmo]

when i add a column inside i get only one grid, and not the repeater as grid.

but when i activate grid on repeater and insert a column it at least makes 2 col layouts i want. but still showing 3 repeater items (guess it should be the way) instead of existing 4 main repeaters inside.

removed reusable block, same behaviour. but for now its working, not 100% as expected, but not really a big problem.

[Louis]

Activating Auto Grid on the Repeater block is the way to go here @gusmo, otherwise you will run into issues.

[Louis]

Hi @ace,

I’m sorry you’re having trouble with this.

@ace

Activating auto-grid sets my repeater loop to 3 columns even through I have it on 2.

This is auto-grid, and you can see there are 3 cols.

As explained in our documentation, you should remove the module that appears in the second row as it is not a valid setup (Auto Grid implies using the first as a pattern).

@ace

I’m having a difficult time grasping what settings apply where, to parent, child, and where the auto-grid is getting it’s rules for layout.

I’m not sure I follow this. Most properties are applied to the same block they’re set on. Where is the issue particularly?

@ace

I expect to be able to set the Repeater element to 50% width and it will display properly in flex-wrap, but it applies the 50% to the parent div. and setting the child div within repeater to 50% also doesn’t do the trick, it doesn’t flex wrap either.

If you are setting 50% to the Div block inside your Repeater element, it will fill 50% of the grid element since you are using Grid CSS. If you’re Repeater is using Flex as display, I recommend using the latest Set Wrapper to Contents property.

@ace

edited: found the setting for height, it was within the child of repeater. But still - the auto-grid showing 3 when set to 2 is difficult to understand.

Explained further up.

[gusmo]

i am still not getting it 100%. its really hard to use and understand for me. especially the auto grid. and yes, i have to admit, bricks solve this in very easy way compared.

[Louis]

Could you possibly explain what is your exact issue with Auto Grid?

[gusmo]

where to place which element and where to set what in repeater element. tried with docu, but very confusing for me. overall autogrid feels strange.

[Louis]

@gusmo

where to place which element

What does this mean exactly?

@gusmo

where to set what in repeater element

Could you possibly shed a bit more light?

[gusmo]

i am out of office the whole day. will try to make a Video or better explanation in the evening