Block building without JavaScript: Testing ACF, Block Lab, and Lazy Blocks

Not everyone is able or willing to build blocks in JavaScript just yet, and sometimes you have to install three or four block collections until you find the blocks you would like.

There is a third way: plugins that create the blocks for you from a set of specific custom fields, with a template to control the frontend display of the blocks. The three most popular options for doing this include: Block Lab, ACF (Advanced Custom Fields) and Lazy Blocks.

My use case for this test is a small task I set out to accomplish with each of the plugins – to create a block for team members of a company that includes the following fields: first name, last name, headshot, bio, phone number, and email address and use the block on a page in a two-column display with two team members.

For each plugin I will demonstrate

• how to create the Fieldgroup,
• how to create the template for the frontend and
• how to use the blocks to create a team page.

I used Local by Flywheel as my local development tool. The test site ran on WordPress 5.1.1, Gutenberg 5.4 and the Business Theme from WordPress.com

After reading this post you will be able to select the plugin that fits your needs.

Creating a Team Block with Block Lab

Members of the  XWP team built Block Lab and it is available as a free plugin with a commercial version. I used Block Lab first, installed the plugin and then started a new block.

Here is the video on how to set-up the fields.

The next step is setting up the block template

When I looked at the expected location, the template will be made part of the theme directory in a subfolder called /blocks/ That’s something a developer needs to remember, as there is some content lock-in when switching themes.

To create the template, I opened my code editor, created the file block-team-member.php, and added the HTML + and minimal PHP to reference the fields.

<h2>
<?php block_field( 'first-name' );?> 
<?php block_field( 'last-name' );?>
</h2>
<p><img class="teamphoto" src="<?php block_field( 'picture' ); ?>"
 alt="<?php block_field( 'first-name' );?> 
<?php block_field( 'last-name' );?> " width="150" style="float:left;padding:4px;margin;2px;"/>
<?php block_field( 'short-bio' ); ?></p>

<p><em>You can reach <?php block_field( 'first-name' );?></em> 
<br/>via email <span><a href="mailto:<?php block_field( 'email-address' ); ?>">
<?php block_field( 'email-address' ); ?></a></span>
 or <br/>
via phone: <span><?php block_field( 'extension' ); ?></span></p>

In the last step, I finished the configuration of this block with the Block Properties

• I set the icon to a person,
• selected the “Layout Elements” as Category and
• added “team member, team” as keywords

All this is necessary for the Block inserter in the editor.

Let’s see how it works.

I added a new Page called Meet our Block Lab Team and added the team members, using the Block “Team Member”.

For now, I decided to have all the information filled within the block editor boundaries. During setup of the fieldgroup, I had also the choice to display form controls in the Block Options tab in the sidebar. For the moment, I have determined that’s it’s just personal preference. Once you click outside the block, the form disappears and the block is rendered similar to its frontend representation.

Now that I have the block finalized, I can add more team members to the page. I decided, I’d like them in a column block with two columns.

So far, so good. I was not thrilled that the location of the template points to the theme folder.

When I want to switch out the theme, I still would like to keep the block and the layout for the block with my site, so I would need to make sure to copy the blocks folder to the new theme’s directory. Another way is outlined in the  documentation for Blocklab on Github. It offers two filters to change the default location of the template:

“To use a different template inside your theme, use the block_lab_override_theme_template( $theme_template ) filter. To use a different template outside your theme (for example, in a plugin), use the block_lab_template_path( $template_path ) filter.”

This was fairly easy to set up, even if you are not a PHP developer, you can probably use the one PHP function block-field() and make sure to reference the right field names.

Block Lab, in essence, provides you with a method to create the fields and configure the block properties in one screen, and then you need to add the corresponding block template to a folder /blocks/ in your theme’s directory.  It’s fairly straight forward.

Creating a Team Block with ACF 5.8

ACF (Advanced Custom Fields) version 5.8 came out with a block builder (only available in the Pro version). For my test I used ACF 5.8 RC 1. The final release is available now.  Elliot Condon is the plugin’s author and the first version was released in 2011. The plugin has grown into a hugely popular developer tool for freelancers and agencies alike and has over 1 million installs.

Its success and versatility make the creation of the field group a more involved process compared to the other two plugins. The Pro version 5.8 contains the first release of its block building tool.

This is the admin view of the Field group “Team Member”.

Now how do I make this into a block? The documentation is comprehensive enough.  Note: In this test I went in a slightly different order…

I started with the Field Group and I needed to get back to that admin screen after I registered the block (see below) .

I  used two files. First, I needed to register the block in the functions.php of my theme. For the template/block rendering code I used content-block-team-member.php also to be stored in the active theme’s folder.

You will see how those two fit together in a second. The rest of the work is done by the plugin in the back end.

So let’s write the Block Code in PHP

The first snippet is the block registration. I gave it a name, title, a description, point to the render template, give it a category, an icon and some keywords, under which the content producer can find the block in the Block Inserter. I scrolled all the way to the end of my theme’s functions.php and added this snippet:

function register_acf_blocks() {
   // register a team member block.
   acf_register_block(array(
       'name'              => 'acf-team-member',
       'title'             => __('ACF Team Member'),
       'description'       => __('A custom team member block created via ACF 5.8'),
       'render_template'   => 'content-block-team-member.php',
       'category'          => 'formatting',
       'icon'              => 'admin-comments',
       'keywords'          => array( 'team member', 'team' ),
   ));
}
// Check if function exists and hook into setup.
if( function_exists('acf_register_block') ) {
   add_action('acf/init', 'register_acf_blocks');
}

This code is straight from the documentation and I just changed a few values.

In the next section I created the block rendering template. The file name needs to match the “render_template” attribute in the above text, which is “content-block-team-member.php”

I also just followed along ACF’s documentation and only changed a few values and updated the display code.

<?php
// create id attribute for specific styling
$id = 'team-member' . $block['id'];

// create align class ("alignwide") from block setting ("wide")
$align_class = $block['align'] ? 'align' . $block['align'] : '';

// Load values and asigning defaults for the block fields.
$short_bio = get_field('short_bio') ?: 'the short bio goes here... ';
$first_name = get_field('first_name') ?: 'First Name';
$last_name = get_field('last_name') ?: 'Last Name';
$image = get_field('picture');
$email_address = get_field('email_address');
$extension = get_field('extension');
?>

" class="team-member ">
       
 
   

   " alt="" alt="  " width="150" style="float:left;padding:4px;margin;2px;"/>
       
       

       

       
       
   

As I started with the Fieldgroup, I needed to go back and make sure that the group is associated with the block I just registered.  Below the Fieldgroup screen I created a rule for the Location: It needs to read: “Show this field group if the Block is equal to ACF Team Member.  

Now let’s see how this works in the Block editor when I add two members.

It was an interesting experience. You can use the form in the editor section to enter the data. Another option is to enter the data in the form fields available in the the sidebar and you see the block update in real time. You can toggle between the two methods but clicking on the Button “Switch to Edit” or “Switch to Preview” depending which method you are using right now.

The block editor UI works well. It’s worth going through the more elaborate setup and code necessary.

Creating a Team Block with Lazy Blocks

The third plugin in this test is called “Lazy Blocks” by Nikita of nkdev.info, the same team that also published the GhostKit block collection.

It not only allows me to store information in post_content but I also get a choice to store it in the post_meta table.

Here is a video of using the interface to create the fields.

As this admin screen is focused on getting all the information to create the blocks, on the left I created my fields and in the sidebar.  I filled in the information needed to register a block with the editor.

Underneath,  I was able to add the HTML for frontend and backend. The syntax is even easier than Block Lab, and of course much easier than ACF’s  templating.

I didn’t need to add any code to my theme’s functions.php nor did I need to create additional files with my template code.

You can add it all right here, aided by syntax highlighting and merge tags rather than function calls.  The documentation shows multiple ways to write your template code. I am definitely a fan of Handlebars (semantic templating) as it is in this context much closer to other systems’ merge tags.

I copy/pasted the same code into the “Editor HTML” tab, so I could see the frontend display below the form fields.

Let’s use it.

This seems to work. It was little bit awkward that the form didn’t disappear when I unselect the block. It takes up a lot of real estate in the editor. Although, I wanted to have the team members in a two-column block, I did not succeed in dragging and dropping the two blocks into a Column Block. I mentioned this in my support topic and nK answered: “…hiding controls when the block is not selected is a good feature, that already added in ACF Blocks and will be added in Lazy Blocks soon.” Here you have it – all in due time.

Conclusion: Complex, Evolved, or Easy.  

ACF 5.8  has a very robust block building feature, and every one who has been using the plugin to build sites will be very happy to be able and create dynamic blocks for their customers. It’s well thought through, and developers of all skill sets will get up and running quickly.

Someone, who is not well versed in PHP will have her fair share of trial and error to get it all going. It will get even more complicated when the requirements for the blocks get more involved and beyond this test’s use case. This is not a tool for WordPress beginners or DIY site implementers who don’t write a lot of code themselves.  

For now, only the ACF 5.8 Pro version comes with the block builder feature. Condon is contemplating making it a stand alone plugin. (See what the Twitteratti think about the idea… )

Block Lab is in its early stages of development. It succeeds in abstracting most of the block architecture and reduces the amount of code that needs to be written. The documentation is very helpful. The template is stored in a separate file, and needs to be maintained with the rest of the theme files. If we at my company would use it for any of our projects, we would store the template file with one of our helper plugins, so our customers are able to switch themes without losing the content and display of the blocks built with Block Lab.

The Pro version boasts additional features, such as repeater fields, import/export of blocks, user object fields, map field and many more block features.

XWP is an agency working with enterprise clients on the WordPress.com VIP hosting and other corporations. Their team members are contributing to other big ideas in the WordPress space, including the Customizer,  AMP and Tide. I expect the plugin to stay around and grow with Gutenberg Phase 2 into a robust system for site implementers, agencies, and theme developers.

Lazy Blocks is a delight to set up and as mentioned, I am a fan of the Handelbars templating syntax. It’s easy to learn even for beginners, and with a little practice, a site owner would be able to create specific Gutenberg blocks for their site. The block handling in the editor although functioning, is a little clunky, as the display doesn’t switch between block select state and unselect state at the moment.

If there is a requirement of having additional fields for a page or a section of a post, Lazy Blocks is a great tool to prototype and get quickly from idea to proof of concept.

The only caveat: I was not able to find out who the people are behind nkdev.info and the name Nikita. The website only reveals that it is a young company but nothing more. If you use the plugin, make sure you have Plan B in place just in case the developers abandon the plugin before it takes off.

ACF 5.8 is quite complex; Block Lab is a very flexible and only semi-complex; and Lazy Blocks is adequately named and the easiest to use. None of them lets you get away without writing code, as each block needs some display output in HTML.

Let me know what you think about these three block generating plugins. Also, if you found another plugin that allows you to build blocks without getting into Javascript, I want to know about it! Please share your thoughts and discoveries in the comments!