Unearth Hidden Gems in Wabi WordPress Block Theme – WP Tavern
After being involved in website design for nearly 19 years now, there are 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 below the “Status & Visibility” panel in the post’s sidebar and allows users to select from the theme’s color scheme. 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.
A nice touch 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.
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:
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 theme bundles four style variants including the default. Each of them offers alternative color palettes, including a dark scheme.
Wabi also includes 15 designs. 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.
Users can browse the theme’s color palette 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.