How To Build A Block - Genesis Custom Blocks

Today in our series on building custom blocks we’re going to be looking at Genesis Custom Blocks.

Genesis Custom Blocks

Like with the other plugins we’ve reviewed there is a free and a pro version. In this case the pro version is not a stand alone plugin, but instead it is bundled in with Genesis Pro. Genesis Pro is more than a pro version of the blocks plugin but a bundle of tools to help you build a WordPress site. For the demo we are creating the free version will be fine.

The Genesis Custom Blocks plugin (GCB) can be downloaded and installed from the WordPress plugin repo.

Once installed and activated you are presented a welcome banner that points you to getting started with a block, or taking a look at their documentation.

By clicking let’s get started you go into a demo block, and viewing the docs takes you here https://developer.wpengine.com/genesis-custom-blocks/

The Build

So let’s get into building a block. First we’ll go to Custom Blocks > Add New in the admin sidebar.

Once we select Add New, we are taken to an add post screen.

We can title our block, begin adding editor and inspector fields, edit and preview our template and customize some of the block settings. Everything we need to create a block is visible right away.

In continuing with our previous examples we will need three fields for our name, review, and stars.

Fields are added in the editor area, and their individual details like name, type, and options are updated in the sidebar inspector.

With our fields added we can add our template. By default templates can be added by clicking the “Template Editor” tab in the top toolbar. Editing a template from here requires html and handlebars to render the fields, for example we could render our review name field like this.

<p>{{review-name}}</p>

This is a great way to output blocks, however because of our stars field we need a loop in our template and we are unable to write a loop in the given template editor. It’s unfortunately not immediately presented as is when using Custom Blocks Constructor but after reviewing the docs we are able to use a php template, so that’s what we are going to do.

Our template must be within our theme and follow one of two naming structures.

{theme directory}/blocks/{block slug}/block.php

{theme directory}/blocks/block-{block-slug}.php

I went with the first one so my theme structure now looks like this.

There are a number of functions we can use in our template from GCB that you can review in their docs, for our simple block we are only going to focus on

block_field( $name, $echo = true );

Within our block.php file are here is our markup

// Create class attribute allowing for custom "className" and "align" values.
$className = 'review';

$name = block_field('review-name', false) ?: 'Reviewer Name....';
$description = block_field('review-description', false) ?: 'Review Description...';
$stars = block_field('stars', false) ?: 5;
?>

<div class="<?php echo esc_attr($className); ?>">
    <blockquote class="review-blockquote">
        <p class="review-description"><?php echo $description; ?></p>
        <p class="review-name"><?php echo $name; ?></p>
        <div class="review-stars">
            <?php for ($x = 1; $x <= $stars; $x++) { ?>
                ★
            <?php } ?>
        </div>
    </blockquote>
</div>

Now, if you’ve been following my series on creating you blocks you may recognize that markup is nearly identical from our ACF block. I was able to take that same template, change up the functions being used from ACF to GCB with a couple other very minor tweaks. The ability to do that can be very very helpful if you decide to change your build tool in a project and something to keep in mind.

Now that we have our php template in place, we no longer have a template editor tab in our toolbar. We can also now see a preview of our block in the preview tab.