Building a WordPress visual builder with block styles

December 13, 2020 | Reading time 4 minutes

Gutenberg was a revolution for WordPress. At first, I was skeptical of the changes as it felt like WordPress had deteriorated. But I was wrong. It’s never been easier to build customizable themes than it is now.

Automatic added features and improved the product a lot since its initial release. The pace is impressive. One of the key elements in this are Blocks and the way you can use them for building customizable themes. I never was a fan of visual builders like Divi and now I don’t see any reason to use them. Those builders slow your website down and are more complicated for users than WordPress Blocks.

WordPress strikes the right balance in visual builders with WordPress Blocks

There is a large group of people that don’t a clue about building websites. The default WordPress used to be too complicated for them.

With the introduction of Blocks building pages became child’s play. You click the + sign for adding a block and search for and select the desired block to add it. From there you can drag it, add content and more.

WordPress block selector with input field for searching blocks
WordPress block selector

Developers can build custom blocks or add options for custom versions of default blocks.

With WordPress block styles you put power in the users hand and it’s easy to add

I mentioned that WordPress strikes the right balance with Blocks as a visual builder. Giving you users a ton of options confuses them. With Block styles you give them a limited number of options for a block like small, medium and large.

The idea is that users can customize and add elements on a page without thinking about how it works. This makes WordPress a better tool for non-developers.

Add styles to blocks with a few lines of code

It’s that simple. You first create a JavaScript blocks.js file that lets you register blocks.

Next you add the PHP code below to the function file. This looks like how you enqueue other JavaScript files. When you don’t name your JavaScript file blocks.js you need to adjust the name in this code.

// Gutenberg scripts and styles

function be_gutenberg_scripts() {

    wp_enqueue_script(
        'be-editor', 
        get_stylesheet_directory_uri() . '/js/blocks.js', 
        array( 'wp-blocks', 'wp-dom' ), 
        filemtime( get_stylesheet_directory() . '/js/blocks.js' ),
        true
    );
}
add_action( 'enqueue_block_editor_assets', 'be_gutenberg_scripts' );

Define the blocks and styles

Now it’s time to add the block styles.

In this example we create a few groups. Adding this option gives your WordPress theme the feature for playing around with the layout. You can add full width groups, groups with flexbox and more.

For now we add a Default and a Full width group. You define the type of block with core/group an for headings that is core/headings. Go to WordPress for a full list of available blocks.

wp.domReady( () => {

    wp.blocks.registerBlockStyle( 'core/group', [ 
        {
            name: 'group-default',
            label: 'Default',
            isDefault: true,
        },
        {
            name: 'group-full',
            label: 'Full width',
        }
    ]);
} );
  • Name: this is the name of the group and how you use it in CSS for styling.
  • Label: this is the user-friendly name and how users see it in the editor.
  • isDefault: this lets you set a block style as default for that block type.

We now do the same for buttons, but with one more feature. We remove default WordPress options.

wp.domReady( () => {
    wp.blocks.unregisterBlockStyle(
        'core/button',
        [ 'default', 'outline', 'squared', 'fill' ]
    );

    wp.blocks.registerBlockStyle(
        'core/button',
        [
            {
                name: 'default',
                label: 'Default',
                isDefault: true,
            },
            {
                name: 'small',
                label: 'Small',
            }
        ]
    );
} );

By removing the standard WordPress blocks you make the theme more custom.

Give your WordPress blocks your own style

You now have your custom blocks but without a custom style.

Go to you CSS file and add the created blocks. The full name of a block for your css is .is-style-{name}. From here you type your CSS like you always do.

.is-style-group-default {
    margin: 0 auto;
    padding: 40px 20px;
    width: 800px;
}

.is-style-group-full {
        background: #DF5B57;
    padding: 40px 20px;
    width: 100%;
}

That’s all it takes to build your own theme with block styles

A theme that enables people to build their own pages. Easy to use and with a consistent style.

WordPress is heading in an interesting direct that reshuffles the playing field. At first I was sceptical about the Gutenberg direction. Now I’m convinced it’s the right move.

Happy building!