Repeater Builder

This kind of block is similar to Query Loop Builder but it’s used to retrieve values from repeatable blocks and related items from post itself rather than making loop of post items.

Here are just few examples where it can be used

  1. Attaching repeatable offers to Product pages
  2. Attaching related items from other post types (accessories, reviews)
  3. Attaching related items from the same post type
  4. Making cross links between different post types
  5. Listing repeatable items or attached Groups from custom fields
  6. Rendering data from ACF repeater fields and repeater field types of third party plugins
  7. Rendering Relationship type of fields
  8. Making custom Taxonomy archives
  9. Making custom offer templates for Content Egg plugin
  10. Building custom taxonomy archive templates
  11. Building Comment listings
  12. Building User listings
  13. Building loops from external files and services

This block supports Arrays, multi-dimensional arrays of data, arrays of post objects and single post object. Next types are available for data storage

  1. ACF Repeater field
  2. ACPT Repeater field
  3. Arrays that are saved in custom fields from other plugins (repeater, groups)
  4. Relationship Post objects (for example, ACF-related posts which are saved as post objects
  5. Relationship Post Ids (for example, ACF-related posts which are saved as post ids)
  6. Taxonomy
  7. JSON Format file saved in custom field
  8. External JSON file

Design options from Query Builder are also supported. You can set column numbers, merge, span columns, add borders, shadows, spacing, colors, etc.

You can also convert repeatable items to slider.

The principles of work for repeater builder are very simple. You select the field where you store your repeater data, then, click to edit your grid and add/map your blocks with auto-detected data from fields.

Inside the repeater builder, you can use any blocks, but there are some dynamic blocks that support retrieving repeated values

  1. Dynamic Title (for titles)
  2. Dynamic Image (for image)
  3. Meta getter (universal block for getting different kinds of data. It also has support for custom prefixes, postfixes, icons, and data conversion to different formats).
  4. Progress bar (in scenarios if you want to format data as lines, circle bars, etc)
  5. Video block
  6. Gallery Block
  7. Repeater builder (for nested repeater fields)
  8. Dynamic option Element block or dynamic attributes

This block can also be used inside Query Builder to make nested loops inside your items.

It’s important to know that when you construct an inner item in the repeater, the latest item will be used. Ensure the latest item has all the data you want to show in the repeater. For example, if you build users listing and you want to show user meta data, make sure that latest user in your repeater data has this user meta.

Check video

Nested Repeaters

Repeater builder also supports different kinds of nested and cross repeaters.

If your data has inner arrays, simply put repeater inside another repeater to retrieve such data. Use Repeater Field type in Repeater to get nested data from parent repeater

Nested data can be not only as array but also post ids or objects. This can be useful, for example, when you use Repeater field in ACF and inside repeater field you use relationship field

Cross repeaters

Cross repeaters allow retrieval of specific data based on another repeater. Currently, this is available in the Taxonomy and User types of repeaters. Examples of when it’s useful

  1. You want to show featured categories and in each category card, you want to show latest posts.
  2. You want to show featured users and the latest 5 products for each user

Cross repeaters use just one database request. So, if you have 10 users in repeater, it doesn’t fetch 10 database requests to get products for each user. It has only one request.

How to use Cross repeaters?

Enable specific options in the parent repeater

Take attention that limit of items in cross repeater is controlled from parent and not inside nested repeater.

Now, put another repeater inside and select to use “crossposts” as source

Now, inside this nested repeater you can show details of latest items. All regular fields are available: title, image, permalink, etc.

As results, you can show something like this – Featured vendors with their latest products. This can be also latest Brands, featured categories, etc

Vanilla Repeater block

Repeater option is available in Element block. You can use it if you need full control over structure of repeaters. This can be useful, for example, when you build Dynamic repeatable Table

Copy this post’s content
<!-- wp:paragraph -->
<p>This kind of block is similar to <a href="https://greenshiftwp.com/query-builder/" data-type="post" data-id="2253">Query Loop Builder</a> but it's used to retrieve values from repeatable blocks and related items from post itself rather than making loop of post items.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Here are just few examples where it can be used</p>
<!-- /wp:paragraph -->

<!-- wp:list {"ordered":true} -->
<ol><!-- wp:list-item -->
<li>Attaching repeatable offers to Product pages</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>Attaching related items from other post types (accessories, reviews)</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>Attaching related items from the same post type</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>Making cross links between different post types</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>Listing repeatable items or attached Groups from custom fields</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>Rendering data from ACF repeater fields and repeater field types of third party plugins</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>Rendering Relationship type of fields</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>Making custom Taxonomy archives</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>Making custom offer templates for Content Egg plugin</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>Building custom taxonomy archive templates</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>Building Comment listings</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>Building User listings</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>Building loops from external files and services</li>
<!-- /wp:list-item --></ol>
<!-- /wp:list -->

<!-- wp:paragraph -->
<p>This block supports Arrays, multi-dimensional arrays of data, arrays of post objects and single post object. Next types are available for data storage</p>
<!-- /wp:paragraph -->

<!-- wp:list {"ordered":true} -->
<ol><!-- wp:list-item -->
<li>ACF Repeater field</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>ACPT Repeater field</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>Arrays that are saved in custom fields from other plugins (repeater, groups)</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>Relationship Post objects (for example, ACF-related posts which are saved as post objects</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>Relationship Post Ids (for example, ACF-related posts which are saved as post ids)</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>Taxonomy</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>JSON Format file saved in custom field</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>External JSON file</li>
<!-- /wp:list-item --></ol>
<!-- /wp:list -->

<!-- wp:paragraph -->
<p>Design options from Query Builder are also supported. You can set column numbers, merge, span columns, add borders, shadows, spacing, colors, etc.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>You can also convert repeatable items to slider.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>The principles of work for repeater builder are very simple. You select the field where you store your repeater data, then, click to edit your grid and add/map your blocks with auto-detected data from fields.</p>
<!-- /wp:paragraph -->

<!-- wp:greenshift-blocks/video {"id":"gsbp-fe95348b-f5db","videoid":2716,"src":"https://greenshiftwp.com/wp-content/uploads/2023/03/repeater.mp4","provider":"video","postDate":"2023-03-15T15:45:13+00:00"} -->
<div class="wp-block-greenshift-blocks-video gs-video video gspb_video-id-gsbp-fe95348b-f5db" id="gs-video-gsbp-fe95348b-f5db"><div class="gs-video-wrapper" itemscope><div class="gs-video-element" data-src="https://greenshiftwp.com/wp-content/uploads/2023/03/repeater.mp4" data-autoplay="false" data-playsinline="false" data-controls="true" data-loop="false" data-mute="false" data-poster="" data-provider="video" data-overlay="false" data-lightbox="false"></div></div></div>
<!-- /wp:greenshift-blocks/video -->

<!-- wp:paragraph -->
<p>Inside the repeater builder, you can use any blocks, but there are some dynamic blocks that support retrieving repeated values</p>
<!-- /wp:paragraph -->

<!-- wp:list {"ordered":true} -->
<ol><!-- wp:list-item -->
<li>Dynamic Title (for titles)</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>Dynamic Image (for image)</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>Meta getter (universal block for getting different kinds of data. It also has support for custom prefixes, postfixes, icons, and data conversion to different formats). </li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>Progress bar (in scenarios if you want to format data as lines, circle bars, etc)</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>Video block</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>Gallery Block</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>Repeater builder (for nested repeater fields)</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>Dynamic option Element block or <a href="https://greenshiftwp.com/dynamic-attributes/" data-type="post" data-id="5067">dynamic attributes</a></li>
<!-- /wp:list-item --></ol>
<!-- /wp:list -->

<!-- wp:greenshift-blocks/infobox {"id":"gsbp-086fb344-bb7e"} -->
<div class="wp-block-greenshift-blocks-infobox gspb_infoBox gspb_infoBox-id-gsbp-086fb344-bb7e" id="gspb_infoBox-id-gsbp-086fb344-bb7e"><div class="gs-box info_type icon_type"><div class="gs-box-icon"><svg x="0px" y="0px" viewBox="0 0 512 512"> <g><g> <path d="M256,0C114.497,0,0,114.507,0,256c0,141.503,114.507,256,256,256c141.503,0,256-114.507,256-256 C512,114.497,397.492,0,256,0z M256,472c-119.393,0-216-96.615-216-216c0-119.393,96.615-216,216-216 c119.393,0,216,96.615,216,216C472,375.393,375.384,472,256,472z"></path> </g> </g> <g> <g> <path d="M256,214.33c-11.046,0-20,8.954-20,20v128.793c0,11.046,8.954,20,20,20s20-8.955,20-20.001V234.33 C276,223.284,267.046,214.33,256,214.33z"></path> </g> </g> <g> <g> <circle cx="256" cy="162.84" r="27"></circle> </g> </g> </svg></div><div class="gs-box-text"><!-- wp:paragraph -->
<p>This block can also be used inside Query Builder to make nested loops inside your items.</p>
<!-- /wp:paragraph --></div></div></div>
<!-- /wp:greenshift-blocks/infobox -->

<!-- wp:greenshift-blocks/infobox {"id":"gsbp-1fd5a97","type":"notice"} -->
<div class="wp-block-greenshift-blocks-infobox gspb_infoBox gspb_infoBox-id-gsbp-1fd5a97" id="gspb_infoBox-id-gsbp-1fd5a97"><div class="gs-box notice_type icon_type"><div class="gs-box-icon"><svg x="0px" y="0px" viewBox="0 0 486.463 486.463"> <g> <g> <path d="M243.225,333.382c-13.6,0-25,11.4-25,25s11.4,25,25,25c13.1,0,25-11.4,24.4-24.4 C268.225,344.682,256.925,333.382,243.225,333.382z"></path> <path d="M474.625,421.982c15.7-27.1,15.8-59.4,0.2-86.4l-156.6-271.2c-15.5-27.3-43.5-43.5-74.9-43.5s-59.4,16.3-74.9,43.4 l-156.8,271.5c-15.6,27.3-15.5,59.8,0.3,86.9c15.6,26.8,43.5,42.9,74.7,42.9h312.8 C430.725,465.582,458.825,449.282,474.625,421.982z M440.625,402.382c-8.7,15-24.1,23.9-41.3,23.9h-312.8 c-17,0-32.3-8.7-40.8-23.4c-8.6-14.9-8.7-32.7-0.1-47.7l156.8-271.4c8.5-14.9,23.7-23.7,40.9-23.7c17.1,0,32.4,8.9,40.9,23.8 l156.7,271.4C449.325,369.882,449.225,387.482,440.625,402.382z"></path> <path d="M237.025,157.882c-11.9,3.4-19.3,14.2-19.3,27.3c0.6,7.9,1.1,15.9,1.7,23.8c1.7,30.1,3.4,59.6,5.1,89.7 c0.6,10.2,8.5,17.6,18.7,17.6c10.2,0,18.2-7.9,18.7-18.2c0-6.2,0-11.9,0.6-18.2c1.1-19.3,2.3-38.6,3.4-57.9 c0.6-12.5,1.7-25,2.3-37.5c0-4.5-0.6-8.5-2.3-12.5C260.825,160.782,248.925,155.082,237.025,157.882z"></path> </g> </g> </svg></div><div class="gs-box-text"><!-- wp:paragraph -->
<p>It's important to know that when you construct an inner item in the repeater, the latest item will be used. Ensure the latest item has all the data you want to show in the repeater. For example, if you build users listing and you want to show user meta data, make sure that latest user in your repeater data has this user meta. </p>
<!-- /wp:paragraph --></div></div></div>
<!-- /wp:greenshift-blocks/infobox -->

<!-- wp:paragraph -->
<p>Check video </p>
<!-- /wp:paragraph -->

<!-- wp:embed {"url":"https://youtu.be/K62P8EjsQlo","type":"video","providerNameSlug":"youtube","responsive":true,"className":"wp-embed-aspect-16-9 wp-has-aspect-ratio"} -->
<figure class="wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio"><div class="wp-block-embed__wrapper">
https://youtu.be/K62P8EjsQlo
</div></figure>
<!-- /wp:embed -->

<!-- wp:heading -->
<h2 class="wp-block-heading" id="nested-repeaters">Nested  Repeaters</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Repeater builder also supports different kinds of nested and cross repeaters. </p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>If your data has inner arrays, simply put repeater inside another repeater to retrieve such data. Use Repeater Field type in Repeater to get nested data from parent repeater</p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":4822,"width":263,"height":713,"sizeSlug":"full","linkDestination":"none"} -->
<figure class="wp-block-image size-full is-resized"><img src="https://greenshiftwp.com/wp-content/uploads/2024/05/nestedrepeater.jpg" alt="" class="wp-image-4822" width="263" height="713"/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>Nested data can be not only as array but also post ids or objects. This can be useful, for example, when you use Repeater field in ACF and inside repeater field you use relationship field</p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2 class="wp-block-heading" id="cross-repeaters">Cross repeaters</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Cross repeaters allow retrieval of specific data based on another repeater. Currently, this is available in the Taxonomy and User types of repeaters. Examples of when it's useful</p>
<!-- /wp:paragraph -->

<!-- wp:list {"ordered":true} -->
<ol><!-- wp:list-item -->
<li>You want to show featured categories and in each category card, you want to show latest posts.</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>You want to show featured users and the latest 5 products for each user</li>
<!-- /wp:list-item --></ol>
<!-- /wp:list -->

<!-- wp:paragraph -->
<p>Cross repeaters use just one database request. So, if you have 10 users in repeater, it doesn't fetch 10 database requests to get products for each user. It has only one request.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><strong>How to use Cross repeaters</strong>?</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Enable specific options in the parent repeater</p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":4823,"width":274,"height":325,"sizeSlug":"full","linkDestination":"none"} -->
<figure class="wp-block-image size-full is-resized"><img src="https://greenshiftwp.com/wp-content/uploads/2023/03/repeatercross.jpg" alt="" class="wp-image-4823" width="274" height="325"/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>Take attention that limit of items in cross repeater is controlled from parent and not inside nested repeater.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Now, put another repeater inside and select to use "crossposts" as source</p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":4824,"width":273,"height":671,"sizeSlug":"full","linkDestination":"none"} -->
<figure class="wp-block-image size-full is-resized"><img src="https://greenshiftwp.com/wp-content/uploads/2023/03/crossposts.jpg" alt="" class="wp-image-4824" width="273" height="671"/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>Now, inside this nested repeater you can show details of latest items. All regular fields are available: title, image, permalink, etc. </p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>As results, you can show something like this - Featured vendors with their latest products. This can be also latest Brands, featured categories, etc</p>
<!-- /wp:paragraph -->

<!-- wp:greenshift-blocks/image {"id":"gsbp-29cc105","originalWidth":1956,"originalHeight":556,"mediaurl":"https://greenshiftwp.com/wp-content/uploads/2024/05/latestvendors.jpg","mediaid":4827,"alt":""} -->
<div class="wp-block-greenshift-blocks-image gspb_image gspb_image-id-gsbp-29cc105" id="gspb_image-id-gsbp-29cc105"><img src="https://greenshiftwp.com/wp-content/uploads/2024/05/latestvendors.jpg" data-src="" alt="" loading="lazy" width="1956" height="556"/></div>
<!-- /wp:greenshift-blocks/image -->

<!-- wp:heading -->
<h2 class="wp-block-heading" id="vanilla-repeater-block">Vanilla Repeater block</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Repeater option is available in <a href="https://greenshiftwp.com/element-tag-block/" data-type="post" data-id="4576">Element block</a>. You can use it if you need full control over structure of repeaters. This can be useful, for example, when you build Dynamic repeatable Table</p>
<!-- /wp:paragraph -->
«
»