Riad Benguella released BlockBook, a project that promises to overhaul how developers build blocks and more, on Tuesday. It is a development environment that allows creators to work with blocks in isolation, outside of WordPress. Developers can view individual block properties and test output from a defined block library.
BlockBook is available as an npm package. Developers can also contribute to the project through its GitHub repository.
Benguella got the idea from Storybook, which is an open-source tool for developing UI components for React, Vue, Angular, and other JavaScript libraries in isolation. It is an environment that makes development and testing more efficient for individual components. It also allows end-users the opportunity to test those components before they are brought into a project. The goal for BlockBook is to bring a similar system to WordPress block development.
“If we think about it a little bit, blocks are reusable units that can live on their own outside of any context, they can be edited visually, and they produce markup,” wrote Benguella in the announcement post. “They have in fact a lot in common with React Components. They are super-powered React Components.”
He believes that BlockBook will be able to solve many of the issues around block development by taking the principles of the Storybook application and employing them into an environment specifically for building, testing, documenting, and sharing blocks.
Benguella has a full demo available as a GitHub page. Developers can do the same with their plugins or simply host it as a static site on their own server.
In his post, he identified three major challenges that his project is meeting head-on. The first, and most obvious for anyone who has delved into block development, is creating blocks within the WordPress environment. It is a tedious and inefficient process to develop and test blocks in the WordPress admin. By isolating the block code, developers can bypass many of the routine tasks every time they make a code change to a block.
The second challenge was to figure out a way to make theme testing much easier. For theme authors with one or two themes, testing block styling is relatively easy. However, for businesses, agencies, and others who maintain many themes, there is no good way to quickly see how individual blocks behave for each of the themes. BlockBook allows theme authors to register any number of themes. Essentially, developers add a few lines of code and point to the appropriate stylesheet. Once set up, testing is as simple as switching themes via a dropdown select and moving between individual blocks. All of this happens almost instantly.
The third part of the equation involves end-users. Currently, users have no good way to test blocks without installing a block plugin, heading to their editor, and tinkering around with it. If they do not like the block, they must start the process all over again. With BlockBook, developers can make their blocks available for testing beforehand. They can even allow end-users to beta test blocks and provide feedback without installing a plugin at all.
However, that is still not quite as efficient as Benguella would like. It would rely on individual developers. For the long-term, he hopes the project becomes an official WordPress package. This creates the possibility of WordPress.org automatically building and hosting a BlockBook for plugins and themes, giving users a chance to test before installing.
This is something that could be revolutionary for users if the official WordPress project could take it on and create a solid user experience around it.
