How to Add Wide and Full Align Buttons to Block Lab

Are you using the Block Lab WordPress plugin, but need the Wide and Full align buttons on your custom Gutenberg blocks? These code snippets will add this missing feature.

The Big Missing Feature in Block Lab

When I started my last WordPress project, I was going the route of creating custom Gutenberg blocks. I first settled on the plugin called Block Lab.

Block Lab worked great at first, allowing me to easily create new blocks within WordPress and then I would create the corresponding block PHP file for each one which would be used to render it.

Then, I ran into a problem. I noticed a big missing feature in the Block Lab plugin.

Block Lab was missing the align buttons to make the block justify to the left, center, right, or stretch to wide or full width.

For this project, this feature was a must-have and a deal-breaker.

So, because I wanted to avoid having to redo all my blocks using a different plugin, I did a lot of research to figure out if I could customize it to add the feature.

After much research and trial & error, I finally came to a solution!

I implemented this solution in the form of a plugin, so go ahead and make a new plugin. If you haven’t done it before, don’t worry, it’s not hard.

Let’s Fix It With a Custom Plugin

Note: You will need to have access to the files on your website. So, if you’re not a developer who already has a killer local WordPress development setup, then you’ll need to use FTP or a file manager in your hosting company’s control panel.

Create a new folder under /wp-content/plugins/ and name it something like block-lab-wide-full-align.

Inside the folder, create a PHP file and name it using the same name as the folder, like block-lab-wide-full-align.php. Copy and paste the following code into it…

<?php
/*
Plugin Name: Block Lab - Add Wide and Full Align
*/
function my_blocks_filter_enqueue() {
    wp_enqueue_script(
        'my-blocks-filter-script',
        plugins_url( 'block_lab_align_filter.js', __FILE__ ),
        array( 'wp-blocks' )
    );
}
add_action( 'enqueue_block_editor_assets', 'my_blocks_filter_enqueue' );

Now, create a javascript file in that same folder and name it block_lab_align_filter.js. Copy and paste the following code into it…

wp.hooks.addFilter(
    'blocks.registerBlockType',
    'my-theme/namespace',
    function( settings, name ) {
        if ( name.search('block-lab/') !== -1 ) {
            return lodash.assign( {}, settings, {
                supports: lodash.assign( {}, settings.supports, {
                    // Enable the align-UI with all options...
                    align: true, 
                    // ... or only allow specific alignments
                    // align: ['center,'full'], 
                } ),
            } );
        }
        return settings;
    }
);

With both of those files saved in your new plugin folder, visit the Plugins page in your WordPress admin area, and you should see a new plugin called Block Lab – Add Wide and Full Align.

Activate that new plugin. That’s it! You should now see the wide and full align buttons on your custom Block Lab blocks!