Avant-Garde is an experimental block theme with well-designed designs – WP Tavern

Block themes keep pouring into the WordPress theme directory. Classic design bids still outpace them by margins that make it seem like the blocks aren’t even in the running yet. However, some designers seek to be the pioneers of this still foreign space.

Brian Gardner is not new to this. His latest theme, Avant-Garde, plays on the strengths of the block system without forcing it into something it is not yet capable of. It also doesn’t hurt that Gardner leans into minimalism with his designs. The simplicity of the block system also plays to its strengths.

Reading the code and browsing the design elements of Avant-Garde almost feels like taking a master class in block theme development. Other than a typo where “Primary” is misspelled in the color palette (fixed in v1.0.2), it seems to do everything right. It’s up for my coveted favorite theme of the 2022 award, but we still have nearly 10 full months to go before the end of the year. A lot can happen during this time. However, Avant-Garde raises the bar for those who follow.

There’s one thing I don’t like, so let’s leave that aside. The content area for individual posts and pages is divided into two columns. The title and meta are aligned on the left with the content on the right.

Single blog post.  The title, author and date are on the left.  An image and textual content on the right.
Single post view.

I love the will to break out of the mold – it’s titled Avant-garde, after all. However, I never felt comfortable with right-aligned content, even after tinkering with the theme for a week. Centered or left-aligned is more natural.

I know this will sound like a broken record, but that’s why I love using the site editor. If I find a theme that covers 80% of what I want, I can customize it. Even as a designer and developer, this was often more trouble than it was worth with classic themes. Each theme developer had their internal design system to understand. Blocks always follow the same standard. Moving a column here or putting the post title there just induces less headache.

So I made some minor edits to the individual posts. Not serious. I erased my only dislike for the theme in a few moments through the site editor, and all was well with the world.

WordPress site editor open to a single two-column post template.
Customize single post template layout.

Where Avant-Garde succeeds is in its models. It has 14 in total, and one is from the homepage design of the demo. Users do not have to reconstruct it; just insert and customize. This is the main reason I’ve requested a separate full-page template feature in the past.

My favorite block template in the theme is for creating a portfolio:

Three by three grid of square images in a portfolio style layout.
Portfolio model.

It’s just a heading, a paragraph, and a three-by-three grid of Image Blocks. It looks like something everyone should be able to build, but the simple elegance combined with the point spacing is sometimes more complex than it looks.

I’m also preparing for the list-style query pattern as someone who likes to write once in a while and doesn’t want to worry about finding the perfect featured image:

List of blog posts.  Each article is divided into three columns with the date on the left, the title and excerpt in the center, and the tags on the right.
List-style query template.

Avant-Garde includes a few alternative query templates for a grid and a one-column post list for those who prefer something different.

I rarely get to point to footer design as a positive attribute of themes. Far too often, this section is added as if it had no right to be there in the first place. However, Avant-Garde has not one but two footers that say, “Hey, do I have your attention?”

The first is the default, which includes the text “Design with courage”. in large print:

Black footer with white text.  Wide spacing at the top.  On the left, the text reads
Default footer design.

The alternative is a user-friendly full-width entry for visitors to contact the site owner:

Hero style full width black footer with white text.  It has a button to contact the site owner.
Contact style footer.

Avant-Garde has a short template for displaying copyright text and links for those who prefer a footer that requires less attention.

The theme does not include many custom block styles. A few fill and stroke type button options can be overridden when the kernel supports borders on the block. A “borderless” style for paragraphs handles a missing WordPress feature.

Its most unique options include shadow and full-height styles for the Group block. It also offers framed images, which are featured in the portfolio template.

Overall, I want to see more topics like Vanguard Land in the directory. The design doesn’t push all the boundaries – although it experiments a lot. What makes it a solid choice is the attention to detail. The little things matter, like selecting the right photos for the demo and not leaving the footer design as an afterthought.

Comments are closed.