How to add alignment options to the Gravity Forms block

By default the Gravity Forms ‘Form’ block doesn’t have any alignment options (wide, full, etc). This article shows you how to add those options to the block.

OOOOPS!

Before reading/sharing this post, please note that, although the block alignment UI is added, the appropriate classes are not, and therefore this technique is useless (for the Gravity Forms ‘Form’ block).

However, it DOES work for core blocks and blocks built with ACF, so hopefully the technique is still useful.

I’m going to look into getting the GF block to output the core block classes.

My sincere apologies,

Keith

Setting up your editor.js file

First up, we’ll need somewhere to put our Javascript (if there’s a way to do this with PHP I’d love to know!).

Somewhere in your theme directory (I use /assets/js/) create a file called editor.js.

Now we need to enqueue that file when we’re in the editor. We do that like so:

/**
 * Enqueue the correct scripts for the Gutenberg block editor.
 */
function hd_gutenberg_scripts() {

	// enqueue the editor js for the starter theme/
	wp_enqueue_script(
		'hd_editor',
		get_stylesheet_directory_uri() . '/assets/js/editor.js',
		array(
			'wp-blocks',
			'wp-dom'
		),
		filemtime( get_stylesheet_directory() . '/assets/js/editor.js' ),
		true
	);

}

add_action( 'enqueue_block_editor_assets', 'hd_gutenberg_scripts' );

The above code can sit in any PHP file that you are loading in your theme. We use block-editor.php but it could easily be in your functions.php file if you’re more comfortable with that.

Adding alignment options to blocks

Now to the good stuff. inside your editor.js file add the following:

// set alignment options for Gravity Forms 'form' block.
wp.hooks.addFilter(
    'blocks.registerBlockType',
    'hd-theme/hd-theme',
    function( settings, name ) {
        if ( name === 'gravityforms/form' ) {
            return lodash.assign( {}, settings, {
                supports: lodash.assign( {}, settings.supports, {
                    // disable the align-UI completely ...
                    //align: false, 
                    // ... or only allow specific alignments
                    align: ['full', 'wide'], 
                } ),
            } );
        }
        return settings;
    }
);

You’ll probably want to replace hd-theme/hd-theme with your own theme namespace.

WordPress editor showing Gravity Forms 'forms' block with alignment options

Adding more blocks

The beauty of this technique is that you can add more blocks to the if statement. Here, I’m also adding alignment options to the core paragraph and heading blocks:

// set alignment options for paragraph, heading and form blocks.
wp.hooks.addFilter(
    'blocks.registerBlockType',
    'hd-theme/hd-theme',
    function( settings, name ) {
        if ( name === 'core/paragraph' || name === 'core/heading' || name === 'gravityforms/form' ) {
            return lodash.assign( {}, settings, {
                supports: lodash.assign( {}, settings.supports, {
                    // disable the align-UI completely ...
                    //align: false, 
                    // ... or only allow specific alignments
                    align: ['full', 'wide'], 
                } ),
            } );
        }
        return settings;
    }
);

And that’s it!

Reload your editor and those blocks should now have alignment options.

About the author

Co-founder and lead front-end developer at Highrise Digital. Keith has a passion for building beautiful, fast and usable websites.