ACF repeater fields in Gutenberg blocks

Blocks
1

Hi Guys, does anyone know how to implement repeater fields inside pinegrow new block building? We use the repeater function a lot in websites so I was wondering how Pinegrow supported that?

2

You can do it, Iā€™ve done it myself a few times. It is only possible to do it with the PHP code action, not the ACF field action though.

Here is the procedure:

Make a span around the html elements that you want repeated (technically you donā€™t need the span per se but in my opinion, this makes it easier to implement from a workflow standpoint) and add a PHP code action to it in the wordpress tab. Next, copy the top part of your repeater code into the field labeled ā€œfunction with paramsā€ (for instance: if( have_rows(ā€˜blockā€™) ): while ( have_rows(ā€˜blockā€™) ) : the_row(); , just replace the ā€œblockā€ monicker here with the name of the repeater field) and set the ā€˜replaceā€™ select field to ā€œinsert beforeā€.

Next, add another php code action to the same element and paste the following code into it: endwhile; else : endif;.
And set the ā€˜replaceā€™ select field to ā€œinsert afterā€. What this will do is wrap your chosen html elements into a repeater function. (You could also add the php code actions to the first element and the last element respectively, instead of doing this with a span. It will give exactly the same result but as I said earlier, I prersonally prefer using a span).

Than add a block action to the element encompassing that. (For instance, another span, wrapping the span you used for the php code actions).

Make sure you set the field group location where your repeater field is located to the acf block you registered with the block action.

Let me know whether you get it working.

2 Likes
3

Thanks for the detailed response, wasnā€™t expecting that. Ill try this out. Thank you

4

Did it work for you?

5

Just wanted to say Thank you to Roel for the detailed guide. I followed your guide and It worked :+1:

1 Like
6

@alfan @Roel could you share a working example (pinegrow folder with a simple html file) please? It would be better us to understand.
So much thanks.

7

Is this the most current way to do a repeater?