Today in our series on building custom blocks we’re going to be looking at 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
or
{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.
With everything set, we can now add our block to a post.
Our review block shows in the text section of the block inserter based off of our settings.
Once added we are presented with a form of our fields.
Once that form is completed and we click out of the block we have our preview.
And finally our block is now displayed on the post.
Creating a block with GCB has been a breeze. I would use GCB on a clients site and I think it would be a great tool for your toolbox as well.