Preparing themes for Gutenberg with the Block Unit Test

There’s no better time to start exploring how each of our WordPress themes will interface with Gutenberg. So to help folks level-up their themes to support the new WordPress block editor, I built the Block Unit Test WordPress plugin.

Testing every core block within Gutenberg — and every variation of every block — is no small task. As a founder of a pretty awesome WordPress theme shop with over 20 active themes, I needed to employ a fast-paced methodology to testing, preparing my WordPress themes for Gutenberg.

The Block Unit Test WordPress Plugin is built just for that purpose: to easily prepare WordPress themes for Gutenberg.

Installing the Block Unit Test plugin

If you’re familiar with the WordPress Theme Unit Test, the Block Unit Test plugin is essentially the same kind of test — but for Gutenberg core blocks.

To start, you will need to install Gutenberg — at least until the new block editor is merged with core. Then, simply install the Block Unit Test plugin from the official WordPress.org Plugin Directory.

The Block Unit Test page, created upon plugin installation.

Once downloaded and installed, the plugin will create a new page with every core block added. The test will also include different block alignment settings, variable columns, and nearly every variation of each Gutenberg block.

Running the Block Unit Test

A good place to start is to compare each block within Gutenberg to what your WordPress theme is rendering on the front-end. Check for alignment issues, spacing, columns — the whole lot.

And if you have custom WordPress theme styles loaded within the Gutenberg editor (which you should!), you’ll need to ensure every block displays the same within Gutenberg and on the theme’s front-end.

I wrote a primer all about adding custom WordPress theme styling to Gutenberg, if you need a refresher.

Sure, it’s a lot of work to add WordPress theme styling to Gutenberg and to ensure blocks are displaying correctly on the front-end, but it really pays off when you, or your users, enjoy a seamless content-creation experience. And with the Block Unit Test plugin, it’s really not that bad. ?

Contribute to the project

Extensible, adaptable, and open source — the Block Unit Test WordPress plugin source code can be found on GitHub.

If you find a new Gutenberg block that needs to be added to the test, or discover it’s missing a block variation of sorts — let me know by opening up an issue on GitHub.

Let’s work together to make more WordPress themes ready for Gutenberg, and therefore empower more folks to create beautiful content.

Enjoy!