Shinobi Works, a web development and illustration company based in Japan, released Shinobi Blocks last week. It is the second plugin the team has added to the WordPress plugin directory. The plugin is a block collection that currently has two blocks for creating how-to and FAQ sections on a site.
Overall, the blocks work well. The developers also make sure to only load any scripts or styles on the front end when the blocks are in use, so it should not add any weight to page speed across the site.
The largest downside of the plugin is that neither of its blocks has wide or full alignment options. This is one feature that I am hoping more block developers begin to add support for. It takes minimal code and would make blocks more flexible for end-users. The workaround is to wrap the blocks in a core Group block and add alignment to it.
As a user, I would like to see the How-To block split into its own, single-purpose block. It would be a nice addition to the official WordPress block directory as a standalone solution for users.
Right now, there seems to be a bit of a mad race toward who can build the biggest block collection plugins. It is unclear what the future of Shinobi Blocks holds. Given that it is early in its life as a plugin, I would urge the plugin authors to consider building single-use blocks. This way, users can install only the blocks they need on their sites.
In this particular case, the How-To block would make a good option as a single block plugin. As for the FAQ block, users can find such blocks in several other plugins with more options.
How-To Block
Adding a how-to item.
How-to second step.
Adding step-by-step instructions via the How-To block.
The plugin’s How-To block is what drew me in. Its purpose is to allow end-users to provide step-by-step instructions with both a text block and an image for each step. It is a pattern that is common on sites such as wikiHow and other tutorial websites.
The design of the block is well thought out and easy to use. For more complex tutorials, users can split their how-to into multiple sections, each with their own steps. In tests against several themes, I ran into no issues inputting custom content in the editor and it appearing correctly on the front end.
The plugin provides an option to change the dot type, which is the number for each step. Users can choose between displaying numbers or using an icon for individual steps. The available icons are from the core WordPress Dashicons set. The color of the dot type can also be customized. By default, it displays a gradient, but the user can select a solid color if preferred.
The downside of the available color options is the block does not make use of the active theme’s color palette if registered. Using this would help the block better blend into the user’s current site design.
One option that I would add is to allow the user to input optional, additional text below the image while using the main text as a sort of headline. This would provide more flexibility for how-to instructions that need more information. However, it would also add an extra layer of complexity that may not be desired.
FAQ Block
FAQ block accordion on the front end.
The FAQ block almost feels like an afterthought. It does not have the level of detail that was put into the How-To block. There are no color or other options for changing the design. It is basically a bare-bones tabbed accordion. The block works well enough for what it needs to do. Nevertheless, it still feels like a letdown after tinkering with the plugin’s first block.
Inputting content on the admin side is simple. Both the question and answer inputs are rich text fields, which allow the same formatting as a standard Paragraph block.
Each inner block for the FAQ block offers a single option that allows users to choose whether to display the tab in an open state. One issue I ran into with disabling this option is that it closes the tab in the editor, which essentially disabled editing the answer’s content for the item, at least until I re-ticked the checkbox.
It is not a poorly-designed block. For the most part, I would rather see the How-To and FAQ blocks split into separate, standalone block plugins. They serve two different purposes and would allow users to install just the pieces that they need.
