Shinobi Blocks WordPress Plugin Adds How-To and FAQ Blocks

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

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

Screenshot of the Shinobi Blocks FAQ block's front end output.
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.


9 responses to “Shinobi Blocks WordPress Plugin Adds How-To and FAQ Blocks”

  1. Hi Justin,

    I can grasp the benefit for a standalone block plugin from a user’s perspective, and I would actually prefer that as well myself, but could you explain to us, maybe through an article, what are the benefits or what could be the motivation, altruism put aside, from a developer’s/author’s perspective?

    Cordially, M.

    • I think that is definitely something worth exploring. It’s a completely new thing that is not even officially supported in core WordPress at the moment, and I can see why plugin authors may be hesitant to go down that road. Currently, the proven success stories are through collections/libraries.

      In general, I see standalone blocks as the future of WordPress. I envision that more and more users will begin searching for these individual blocks to install the features that they need on the fly. Of course, much of this hinges on the block directory being an integral part of core and the discovery of these blocks made easy.

      Eventually, the big question will center on monetization. I don’t have a clear picture of what that will look like or whether it will remain a pretty permanent barrier to plugin authors going that route.

      • Something like the App store for blocks would be cool. E.g. “Pay $2.99 one-time for this single block you need”.

        I just had this idea off-the-top of my head so I haven’t really thought it through though :)

    • Cool. I haven’t fired up WordPress SEO in a long while. I didn’t know it had such blocks. It’d be cool to see the Yoast team make them available as standalone plugins too.

  2. How does the How-To block differ from the built-in media & text block?

    Single blocks -v- block collections is an interesting point for me. It’s the JetPack Effect: in order to get the one or two functions you want you have to download lots you don’t. Imaging going into your Plugins menu and finding every single plugin pre-downloaded for you…

    In an (my) ideal world block collections would be a single plugin which allowed you to download, install and activate only those blocks you wanted. That way you don’t end up with half a dozen accordion or tabs blocks, having to turn them all off when you didn’t want them in the first place!

    • You could get away with using the Media & Text, Columns, or even a Heading and Image block to create something like the How-To block in this plugin. A theme author could create a pattern with the existing core blocks and do something similar. Basically, there are many paths that can get you to the same place or at least close enough to it. The big difference from a user point of view is going to be the design and options to customize the “dot type” the plugin offers.

      Agreed on the half a dozen tabs note. I have so many plugins in my test installs that all these various blocks are overlapping. The early prototypes of the blocks management screen look promising. A single block collection plugin may do it better. We’ll see where things go.

  3. But there are still many structures needed, now I use plugin (UAG) Ultimate Addons for Gutenberg. It think is the best How to structure.


Subscribe Via Email

Enter your email address to subscribe to this blog and receive notifications of new posts by email.

%d bloggers like this: