How to package up your custom blocks in a plugin (Part 2)

Part 2 – Moving the code out of the theme and in to a plugin.

In part 1 of this 2-part tutorial I walked you through how to programmatically register and configure your custom blocks. If you haven’t checked that one out yet, go have a look as what it covers is important to what we do next.

Now that we have our custom block working, we want to bring it into a standalone plugin.

To do this we will:

1. Scaffold the plugin
2. Move the register / configure code for our custom block to the plugin
3. Move the template files
4. Change where (custom file path) Genesis Custom Blocks goes looking for our template files

Let’s do this!

1. Scaffold the plugin

We’re going to keep this as simple as possible. Our plugin folder and file structure looks like this:

my-teammate-block/
    my-teammate-block.php
    blocks/
        block-teammate.php
        block-teammate.css

We do need to follow the typical folder / file structure of Genesis Custom Blocks. We can tell the plugin to look in our plugin for the templates, but within there it needs to follow the supported hierarchies.

2. Move the register / configure code for our custom block to the plugin

In our my-teammate-block.php file we will add the required WordPress plugin comment block for setting out the details of our plugin as well as the code for registering and configuring our custom block. This looks like:

<?php
/**
 * Plugin Name: My Teammate Block
 * Plugin URI: https://wpengine.com/genesis/
 * Description: A plugin that extends Genesis Custom Blocks to add a custom teammate block
 * Version: 1.0.0
 * Author: WP Engine
 * Author URI: https://wpengine.com/genesis/
 * Text Domain: gcb
 * Domain Path: /i18n/languages/
 * Requires at least: 5.5
 * Requires PHP: 7.0
 */

use function Genesis\CustomBlocks\add_block;

function add_my_teammate_block() {
    
    // One long array with lots defined. 
    add_block(
        'teammate', 
        array( 
            'title'    => 'Teammate', 
            'category' => 'common', 
            'icon'     => 'account_circle', 
            'keywords' => array( 'teammate', 'person', 'user' ), 
            'fields'   => array( 
                'name' => array( 
                    'label'   => __( 'Name', ‘gcb’ ), 
                    'control' => 'text', 
                    'width'   => '50', 
                ), 
                'role' => array( 
                    'label'   => 'Role', 
                    'control' => 'text', 
                    'width'   => '50', 
                ), 
                'twitter-handle' => array( 
                    'label'   => 'Twitter Handle',  
                    'control' => 'text', 
                    'width'   => '50', 
                ), 
                'photo' => array( 
                    'label'   => 'Photo', 
                    'control' => 'image', 
                    'width'   => '100', 
                ),
            ), 
        ) 
    ); 
}
add_action( 'genesis_custom_blocks_add_blocks', 'add_my_teammate_block');

All the code below that comment block is the same code we added to our themes function.php file in the previous post.

3. Move the template files

In our block-teammate.php and block-teammate.css files we simply drop in our blocks template code. Other tutorials (here and here) go over templating with Genesis Custom Blocks. We are simply moving them from our theme folder over to our new plugin folder.

Final step is…

4. Change where Genesis Custom Blocks goes looking for our template files

By default, Genesis Custom Blocks looks in the active theme for template files. But we can change this easily with the genesis_custom_blocks_template_path filter.

We do this by adding the following to our plugins my-teammate-block.php file.

function teammate_block_get_alternate_template_path( $path ) {
        unset( $path );
        return __DIR__;
}

add_filter( 'genesis_custom_blocks_template_path', 'teammate_block_get_alternate_template_path' );

With that done, we’re all finished! We can install and activate this plugin on any WordPress site that has Genesis Custom Blocks installed and our custom teammate block will be ready to go! Click this link here if you’d like to download the plugin and play around.

Custom blocks with Genesis are incredibly powerful in the normal context, but this approach unlocks some pretty interesting ideas.

If you build and package up your custom blocks like this, please shoot me a message! I’d love to check them out!

Until next time, happy block building!