Cancel

Justin Tadlock

Avant-Garde Is an Experimental Block Theme With Well-Designed Patterns

Block themes continue to trickle into the WordPress theme directory. Classic design submissions still outpace them by margins that make it look like blocks are not even in the race yet. However, some designers seek to pioneer this still-foreign space.

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

Homepage screenshot of WordPress theme with a logo, title, and menu in the header. It has a large intro section with the words "Chicago, Innovative WordPress Design."

Reading through the code and browsing Avant-Garde’s design elements 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 version 1.0.2), it seems to be doing everything right. It is vying for my coveted favorite theme of 2022 award, but we still have nearly a full 10 months left before the year is out. A lot can happen in that time. However, Avant-Garde raises the bar for those that follow.

There is one thing I am not fond of, so let us get this out of the way. The content area of single posts and pages is split into two columns. The title and meta are aligned left with the content to the right.

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

I like the willingness to break from the mold — it is titled Avant-Garde, after all. However, I never felt comfortable with the right-aligned content, even after tinkering with the theme for a week. Center or left-aligned is more natural.

I know I will sound like a broken record, but this is why I enjoy 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. Every theme developer had their in-house design system to figure out. Blocks always follow the same standard. Moving a column here or putting the post title over there simply induces fewer headaches.

So, I made a couple of minor changes to single posts. No big deal. I erased my single dislike about the theme in mere moments via the site editor, and all was right with the world.

WordPress site editor opened to a two-column single post template.
Customizing the layout of the single post template.

Where Avant-Garde gets things right is its patterns. It bundles 14 in total, and one is of the homepage design from the demo. Users do not have to piece it together; just insert and customize. This is the primary reason I have called for a separate full-page pattern feature in the past.

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

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

It is merely a Heading, Paragraph, and a three-by-three grid of Image blocks. It feels like something anyone should be capable of building, but the simple elegance combined with on-point spacing is sometimes more complex than it looks.

I am also warming up to the list-style Query pattern as someone who enjoys writing from time to time and does not want to worry about finding the perfect featured image:

List of blog posts. Each post is broken into three columns with the date on the left, the title and excerpt in the center, and tags on the right.
List-style Query pattern.

Avant-Garde includes a couple of alternative Query patterns 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 tacked on as if it had no right being 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 lettering:

Black footer with white text. Large spacing at the top. On the left, text reads "Design with courage." On the right, there are links.
Default footer design.

The alternative is a business-friendly, full-width lead-in 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 pattern for displaying copyright text and links for those who prefer a footer that seeks less attention.

The theme does not include many custom block styles. A few fill-type and outline Button options can be replaced when core supports borders on the block. A “no margin” style for Paragraphs handles a missing WordPress feature.

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

Overall, I want to see more themes like Avant-Garde land in the directory. The design does not push against every boundary — though it does experiment plenty. What makes it a solid choice is the attention to detail. The little things matter, such as selecting the right photos for the demo and not leaving the footer design as an afterthought.

Category: , ,
Tags:
11

11 responses to “Avant-Garde Is an Experimental Block Theme With Well-Designed Patterns”

  2. Justin, thanks so much for the review and, of course, the kind words. I appreciate that you have picked up on the subtle—and not so subtle—decisions that I made while designing the theme. I believe so much in the block editor’s possibilities, and I tried to step outside of expected behavior with this theme. Hence the name Avant-Garde. While it’s fun and encouraging to see the theme active on 200+ sites, I’m more hopeful that designers and developers use it (as I did with TT2) as a learning resource to build their own.

    Create forum topic from comment

    • Like most things, it depends. For the most part, users do not need to create child themes to overwrite things from the parent theme.

      When using the site editor, you are essentially creating a child of the active theme. So, the hierarchy basically goes like this:

      1. User templates and styles
      2. Child theme (if active)
      3. Parent theme

      If you are overwriting or creating custom templates, you can do this straight from the editor. If you want to change global styles, this is also possible via the editor. These will take precedence over the active theme.

      With that said, there are still some things that are simply not possible from the site editor. If you have a lot of custom CSS that is not configurable via the global styles panel, you might need to create a child theme. With WordPress 5.9 (should be fixed in 6.0), it is not possible to create a full range of custom templates. For example, if you want to separate your “Business” category template, there’s no way of creating a taxonomy-category-business.html template via the editor yet. So, you’d have to add that via a child theme.

      There are many small things that could require creating a child theme. But, in general, you shouldn’t need to.

      If you’re just concerned about protecting customizations from parent theme updates, what you save via the site editor will still be in place.

      Create forum topic from comment

  5. I could see this as a good theme for a news outlet with a lot of text and few pictures. The black and white color scheme reminds me heavily of traditional daily newspapers we used to have here. As someone else pointed out, elegant and minimalistic. Straight to the point with information, as news should be.

    Create forum topic from comment

  7. While I love the theme and its simplicity…I don’t know if the title fits. Avante-Garde: pushes limits, is loud, in your face. Sure FSE is experimental…but nothing about this is radical or unorthdox. An image search of the word explains my mixed feelings quite well That being said, I’ve been learning a lot from you work, Brain Gardner. I’ve been taking apart Frost, and genesis blocks for a month now and your simplicity, and restraint is really beautiful.

    Create forum topic from comment

You may also like

Newsletter

Subscribe Via Email

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