Block Unit Test Plugin Helps WordPress Theme Developers Prepare for Gutenberg

ThemeBeans founder Rich Tabor has released a new plugin called Block Unit Test for Gutenberg that helps theme authors test their themes for Gutenberg-readiness. It is similar to the Theme Unit Test but is limited to testing Gutenberg blocks.

After installing and activating both Gutenberg and sBlock Unit Test, the plugin creates a new page as a draft with an example of every core Gutenblock. This makes it easy to see how the blocks will appear on the frontend of any theme. Block Unit Test also includes variations on the core blocks with different alignment and column settings applied.

Tabor said he knew it would be advantageous to start using/writing in Gutenberg daily to better understand what he needed to do to make his products at ThemeBeans compatible.

“I added initial support for Gutenberg in my Tabor WordPress theme, as I use it on my own personal blog with Gutenberg,” he said. “I needed a way to easily test each of the core Gutenberg blocks (and eventually third-party blocks) without having to manually add them every time I wanted to test something. As Gutenberg blocks get more dynamic and complicated, it’s a bit trickier to test for – as many blocks have different variations/styles/columns/grids/etc.”

Tabor took inspiration from the Theme Unit Test and created Block Unit Test with Gutenblock variations included. He is using the plugin while preparing the 20+ themes in his ThemeBeans catalog to support Gutenberg. He wrote the plugin to be extensible and made it open source on GitHub for other developers and theme shops to use.

Theme developers can install Block Unit Test as a first step towards making sure the front-end styles match the editor styles. This will be essential to making the transition process easier for new Gutenberg users once WordPress 5.0 ships. Tabor also published a tutorial for adding WordPress Theme Styles to Gutenberg to help others get started.

In getting his first theme compatible, Tabor said he relied heavily on the Gutenberg Handbook, as well as following discussions on the Gutenberg GitHub repository.

“It’s not terribly difficult to add support for Gutenberg, although applying proper theme styles within the Gutenberg editor is a bit of task — there’s so much that can be accidentally overlooked,” Tabor said. “For the theme side of things, there wasn’t much technical leveling-up — though developing blocks is a different story. I did need to raise the bar and dive deeply into the world of Javascript, though looking at the block examples on the GitHub repository really helped me along.”

Tabor said he started “living and breathing all things Gutenberg” after WordCamp US 2017, and began writing development articles while learning the ropes. He created several projects focused on the new editor, including Writy, a Gutenberg-centric writing experience for publishers, and Co-Blocks, a beta suite of Gutenberg blocks for content marketers.

“As a founder of a theme shop it was apparent that I needed to hone in on Gutenberg and level-up my knowledge, technical skills, and consequently my products, in order to compete in a post-Gutenberg era of WordPress,” Tabor said.

“I believe the foundation of the future of WordPress lies in the success of Gutenberg. I use the new editor just about daily now. I know it’s a great move in the right direction and I’m doing my part to make sure folks using my themes can experience everything that Gutenberg has to offer.”

1 Comment


  1. I’m excited for Gutenberg. It’s going to be a great opportunity to clean up our plugin and theme folders :)

    Unit Test for Gutenberg will likely find its way into my testing workflow

    Report

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *