Unearth Hidden Gems in Wabi WordPress Block Theme – WP Tavern


After being involved in website design for nearly 19 years now, there are some tough days when nothing looks fresh. However, there are also times when you look at another web developer’s approach to problems and feel there’s a whole world of possibilities you haven’t yet entered. And, it’s rarely something complicated. Top developers make it look simple, and Rich Tabor’s Wabi is peppered with these little tricks that make reviewing WordPress block theme code exciting again.

Earlier today, the WordPress theme directory hit 50 block themes. However, I was more interested in what was waiting in the review queue. Tabor had submitted his project less than 24 hours before, but I launched it anyway. I had to see what one of the most prolific writers on block theme development had built. Although he had contributed to GoDaddy’s Go theme before working at Extendify, this was his first personal account theme submission.

I like to dive into themes where I can learn something. That’s the best way to describe Wabi.

It is primarily intended for bloggers and writers. It features the kind of design that those who don’t want to dominate their content would appreciate. However, there’s enough whimsy not to be an entirely boring black-and-white affair.

One of Wabi’s unique features is its per-post accent color picker. The control is located under the “Status & Visibility” panel in the post’s sidebar and allows users to select from the theme’s color palette. This accent is mainly used for the background behind the message header and title area. However, it is dotted around with various other items and blocks.

Open WordPress editor.  In the sidebar there is a
Selecting a post accent color.

I haven’t seen a block theme use custom post metadata yet. This is likely due to the fact that not many developers know how to build the components in the publishing sidebar after relying on the old meta box system over the years. The JavaScript related to theme accents is structured well enough that other themers can tell it apart and create similar functionality in their designs. If this has been a lag in block theme development for anyone, it’s worth taking a deep dive into the 117 lines of JavaScript used to create this feature.

A nice touch that Tabor added to the Global Styles color palette was a custom background for the accent color. Instead of displaying a solid color circle, it’s a conical gradient of all available variations.

WordPress site editor with the global styles panel open to the palette section.  Accent color shows a color wheel instead of just one.
Highlighted color wheel in the palette.

This detail may seem insignificant, but it is a visual clue that this particular color is different from others. Users can always edit it to set the default, but they can also override it for each post.

In a post about creating a custom block style earlier this week, I said the feature is underutilized when creating WordPress themes. Many weren’t pushing it forward with unique design variations for users. Wabi includes just over a dozen custom styles, but I haven’t seen any like the ones it offers for Image and Video Blocks.

The theme saves the Bottom Right, Bottom Left, and Center styles. Each one changes the position of the image in its

container as shown in the following screenshot:

A gallery of three car images, each image is uniquely positioned in a container box at the bottom right, center and left.
Picture box styles and accent color.

The styles are not particularly complex. These are simple twists to offer a bit of a visual punch which can sometimes lack text-heavy blog posts. And, they’re unique, something you couldn’t build with basic design tools. To top it off, the background color behind the media uses the accent color of the theme.

This is the kind of creative thinking around block styles that I expect from theme authors. It’s not that I think others can’t, but building projects with blocks sometimes requires approaching design in new ways.

Wabi also supports global style variations, an upcoming feature that is expected to land in WordPress 6.0. To see it in action, users need to activate the Gutenberg plugin.

The WordPress site editor opens with a dark color scheme.  On the right, four different style cards are selectable.
Dark style variation.

The theme bundles four style variants including the default. Each of them offers alternative color palettes, including a dark scheme.

Wabi also includes 15 patterns. Most of them are variations for headers, footers, and post loops, but in the spirit of keeping things unique, there are also style guide templates.

Large hero header followed by a section that displays six accent colors.  Subsequently, a section displays an alphabet in a typography section.
Wabi style guide templates.

Users can browse the theme’s color scheme and typography by inserting them into a post. They may not be necessary for use on the front-end of most sites, but they provide a quick overview of the theme’s overall style.

The theme works quite well for blogs. The content of the post is readable with it, and it makes generous use of white space. He will not receive any complaints from me in this department.

I just wonder what other little treasures Wabi holds that I haven’t discovered yet.

Add Comment