GutenTour: Spectra Blocks

Let’s check out some more WordPress blocks. Third-party blocks.

On our last outing we looked at blocks that work together for a specialized purpose—JetFormBuilder, which is a forms package that builds forms using a block for each field.  

The people that make the widely used Astra theme have built (and continue to expand) a set of blocks that help you build fancier, prettier pages than you can if you restrict yourself solely to the blocks that are native to WordPress. Initially, this set of blocks was called Ultimate Addons for Gutenberg (or UAG), but now it’s been renamed as Spectra.

By my count, there are presently 30 blocks in the package. Some of them are blocks that duplicate blocks in other third party collections (not surprisingly), but there are quite a few that are pretty interesting and that I haven’t yet seen elsewhere.

The time of your life

One block that lets you get a something pretty onto a page that would otherwise take a lot of work is the timeline block. I found it a tiny bit quirky, but it works just fine on the page. You add each date over in the context sidebar and then directly type your descriptive text within the block. You wind up with a series of stacked blocks connected by a vertical rule that fills with color as you scroll down through the timeline. It’s nice, and all the colors and backgrounds are configurable.

The Spectra timeline. The green line shows that we’re mid-scroll. Not sure it really adds any information, but it’s kind of cool.

There’s a “search” block that inserts exactly what you think it would, except that it’s a somewhat different design than the native block – it seems clear that an important aspect of many third-party blocks is going to be that they duplicate the basic function of a native block, but with some desirable design differences.

Heads up

Another block that I like a lot and that shows, I think, how blocks will add “behind the scenes” functionality without a lot of fuss and bother is the “Inline Notice” block. At one level, it’s just a design element that let’s you visually identify things like warnings and notices. And just for that it’s pretty useful and highly configurable. But an additional touch is that you can allow users to dismiss the notice by clicking on an X icon, plus you can cause this action to set a cookie to track how many days have passed since the notice was dismissed. If you set it for, say, three days, then the notice will reappear after three days. So you can let a user effectively say, sure, I got that, but when they come back six months later, you may think it’s prudent to show them the notice again as a reminder.

A table of contents block generates a box that contains links to all the header tags on the page (though you can set it to pay attention only to higher-level headers, H1 through H3, for example). You can configure the table to initial display collapsed, which is how I’d be inclined to use it. I’ve had to implement this sort of thing with plugins in the past and this certainly seems easier to drop where I want it without a fuss.

Schema

A final thing I want to mention is that there are three blocks that facilitate the addition of structured data to your pages. There’s a FAQ block that lets you build an accordion of the sort one sees everywhere, but it also adds structured data to the page meta as you build. I’m still going to charge extra for that, of course.

Another block lets you build a “How To” page that adds the structured data Google will be looking for—this is really a nice thing for those creating content that can take advantage of it. A similar block for product reviews makes sure you’ve added all the necessary schema components like SKU and brand and that you’ve included a product picture. If you’re bothering to do reviews, you should bother to do this. Which suddenly makes me think that these walkthroughs are, frankly, reviews. So I should use this block.

Mix and match

One thing I’d forgotten and been reminded of as I’ve started my world tour of the block-a-verse is that one of the big points of Gutenberg was to create a standard way for third-parties to create interoperable blocks. And I mention this to say that in this new era, it will be totally normal for website creators to decide to use a few blocks from this set, plus another block over here, and so on. And a nice feature that a couple of the blocksets out there have added (including this one) is the ability to turn off the blocks you don’t want to use. Love it.

Final point: this group of blocks is put together by the people who make the Astra theme. They’ve sort of built on this by creating a direct interface to drop in fully designed page templates from the block editor. The world up there in the top bar of the editor may well become hopelessly cluttered over time, but I still kind of like that you can grab a page so effortlessly, then make all the changes you want to make it yours. That’s one of the things that I’ve liked about the Divi page builder—I like it here too.

Pressing the Templates button gives you the below interface for importing page designs and block patterns…