Repeater Field Magic with a Custom Logo Bar Block

Welcome back to the Lab!

Block Lab Pro was released 2 weeks ago and it came with what must be the most requested feature of all time. The Repeater field! In this tutorial, I’m going to show you how to use it.

So heads up, this tutorial requires an active Block Lab Pro license.

We’ll do some fancier tutorials in the future, but for this one, let’s keep things niiiice and simple.

This is what we’re building:

Use case for this block is for when you want to show off some of the “logos” you work with. These could be clients or customers of repute that you know others of your target audience will be impressed by. I’ve built these before without the repeater quite easily with a handful of image fields, but that meant I had a fixed amount of logos for the block. The repeater shines when you don’t know how many logos you’ll add. Sometimes you might have 3, others 7. You might add or remove logos over time. The repeater helps keep the block dynamic and means we don’t have to go in and mess around with our template files.

This repeater magic, plus some simple controls for colours means the block can even look like this:

Or like this:

Sound good? Let’s do this!

1. Add and Configure the Block

With Block Lab installed and active and with our Pro license validated, let’s go to the WordPress Admin and add a new block.

Let’s give it a title, icon, and a few tags.

Now let’s figure out our fields:

Field NameField TypeParent FieldLocation
LogosRepeaterEditor
LogoImageLogos
Background ColorColorInspector
Logo ColorSelect
(Native, Black, White)
Inspector

Ok, so if it’s not clear in the above. We’re going to add a Repeater field called Logos and then add a single sub-field called Logo.

Our two final fields are going to handle our styling and live in the Inspector. The select field has the three options of native, black, and white.

Let’s now add them in the Block Builder:

Hit Publish, and our block is now registered and ready to template.

2. Templating

Over in our text editor of choice, we’re going to add our template files. Now as Block Lab has grown over the past 6 months, we’ve introduced a number of options for how and where you can add your template files. For this block, we’re going to add our normal blocks folder to our theme (child theme actually), and then add a folder within it called logo-bar. In previous tutorials we’ve added our template files up in the parent blocks folder, but this extra layer helps add a bit more structure to our files and folders. Helpful on sites where you build multiple blocks.

Template files file structure

So in our logo-bar folder, we’re going to add a block.php file and a block.css file.

In our block.php we’re going to work with a few of functions we’ve not seen before in our tutorials and are specific to the repeater field.

These functions are:

Click on the links above to see the docs for each.

These new functions allow us to loop through the repeater field and interact with the sub fields.

So our code (without CSS classes) in our block.php template file looks like this:

<div>
    <div>
    <?php
    while ( block_rows( 'logos' ) ) : 
        block_row( 'logos' ); 
        ?>
        <img src="<?php block_sub_field( 'logo' ); ?>">
    <?php
    endwhile;
    reset_block_rows( 'logos' );
    ?>
    </div>
</div>

The things going on here:

  • We use a while loop to loop through each row
  • We output an image with the src set to the image added in the logo sub field
  • We reset the loop

There are a couple of new concepts to understand if this the first time you’ve used the repeater:

  • A repeater has “rows”. When you add the block in the Editor and click the add (+) button for a repeater field, you are adding a row
  • Fields within a repeater field are actually called “sub fields”

If you need to further dig in to these concepts and the related functions, check out those docs linked further up.

Let’s now add our CSS classes to our template:

<div class="block-logo-bar alignfull">
    <div class="block-logo-bar__container">
    <?php
    while ( block_rows( 'logos' ) ) : 
        block_row( 'logos' ); 
        ?>
        <img class="block-logo-bar__logo" src="<?php block_sub_field( 'logo' ); ?>">
    <?php
    endwhile;
    reset_block_rows( 'logos' );
    ?>
    </div>
</div>

Note that we’ve added the alignfull class to the parent div. This is a class from our theme that sets the block to the full width of the screen.

The final additions to our PHP template file handle our colour styling. To handle this we are going to:

  • Set a PHP variable to pick up our logo colors and then echo it in the img
  • Use simple inline CSS for the background color of the parent div

The additions to the template file look like this:

<?php 
$logo_color_class = 'block-logo-bar--logo-color--' . block_value( 'logo-color' );
?>

<div class="block-logo-bar alignfull" style="background-color: <?php block_field( 'background-color' ); ?>">
    <div class="block-logo-bar__container">
    <?php
    while ( block_rows( 'logos' ) ) : 
        block_row( 'logos' ); 
        ?>
        <img class="block-logo-bar__logo <?php echo $logo_color_class; ?>" src="<?php block_sub_field( 'logo' ); ?>">
    <?php
    endwhile;
    reset_block_rows( 'logos' );
    ?>
    </div>
</div>

That’s it for our PHP file. Let’s jump to our CSS file:

.block-logo-bar {
    padding: 40px;
}
.block-logo-bar__container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    max-width: 1070px;
    margin: auto;
}
.block-logo-bar .block-logo-bar__logo {
    max-height: 50px;
    width: auto;
    margin: 12px;
}
.block-logo-bar--logo-color--white {
    filter: brightness(100);
}
.block-logo-bar--logo-color--black {
    filter: brightness(0);
}

The things going on in our CSS are:

  • Adding some padding for the block. This is needed for when there is a background color
  • We’re using flex to handle how our logos are laid out horizontally
  • A max-width is set for the logos container
  • A max-height for the logo images
  • 2 final classes that use the CSS filter property to turn the logos black/white

That’s it!

Let’s check this out. In the editor we see:

Hmm. We can see that the block in the editor isn’t going fullwidth with our alignfull class. This is actually a current limitation in the Editor. But guess what! We’re working on this feature right now, so the native block alignment controls will be available for custom blocks very soon. 🙂

However, over on the frontend, things look great!

Perfect! A fully dynamic, and responsive, custom logo bar block.

I hope you’ve learned something. If you build something with the repeater, we’d love to see it!

Until next time, happy block building.

New Kid on the Block?

Subscribe, stay connected, and keep up to date with the latest.

  • This field is for validation purposes and should be left unchanged.

2 comments

  1. Hey Block Labs team – just spotted a *minor typing error:

    Under the CSS file code block –> In the “The things going on in our CSS are:” section –> in the second bullet point, “laid our horizontally” is typed when I am sure “out” was the intention. I hope this was helpful – I want your docs clean! Love what you guys do. Best wishes.

Leave a Reply

Your email address will not be published. Required fields are marked *