Building with Blocks

  • How To Build Coupon Cards With WordPress Blocks

    How To Build Coupon Cards With WordPress Blocks

    Last year, I designed several patterns for showcasing coupon codes on a site. They were part of a larger theme project that I never finished. However, I had a ton of fun playing around with variations. Disliking them withering away on my laptop’s hard drive, I thought I would share them with the Tavern audience.…

  • Building a “Polaroid” Image Block Style

    Building a “Polaroid” Image Block Style

    I am a child of the late ’80s and ’90s. Before we all had cameras built into our mobile phones—well, before mobile phones took off, really—families would lug around Polaroid cameras to capture those special moments. Even though I hated posing for awkward photos with my siblings, I am still nostalgic about the magic of…

  • How to Align a Nested, Partial-Width Group Block via the WordPress Editor

    How to Align a Nested, Partial-Width Group Block via the WordPress Editor

    I was slightly frustrated last week when sharing a tutorial on a hero-style post header. I had planned to create a layout with a left-aligned Group with a maximum width, as shown in the following screenshot: This would allow the focal point of the background image to shine through on the right. However, neither of…

  • How To Build a Timeline Page With Blocks

    How To Build a Timeline Page With Blocks

    Up next in our Building with Blocks series is a quick tutorial on how to build a timeline page. Timelines give brands and organizations a visual way to introduce themselves and feature highlights from their histories. The block editor makes creating a timeline easier than it ever was with legacy plugins. For this example, I…

  • Making an Impression: How To Build a Post Hero Header With Blocks

    Making an Impression: How To Build a Post Hero Header With Blocks

    I have been obsessed with art direction on the web for as long as I can remember. The term is often used to describe the act of designing individual pages around the content itself. This is the opposite of how most users typically operate when writing posts. The template or design is disconnected from the…

  • How To Build Book and Book Review Cards with WordPress Blocks

    How To Build Book and Book Review Cards with WordPress Blocks

    I was neck-deep into the block system during the months leading up to its debut in 2018. This also just happened to coincide with the first November I had ever completed National Novel Writing Month, a 30-day challenge to write a 50,000-word first draft of a novel. I have since won a second time in…

  • How To Build a Two-Column Single Post Header with the WordPress Site Editor

    How To Build a Two-Column Single Post Header with the WordPress Site Editor

    One of the features I liked about Automattic’s Archeo theme that I reviewed earlier this week was its split-screen single post header. I loved that an author was doing a little something different with the Featured Image block, giving users some variety. The design was simple. It is a two-column section with an image on…

  • How to Build a Single-Product Sales Page with Blocks

    How to Build a Single-Product Sales Page with Blocks

    In today’s edition of our Building with Blocks series, we’re going to explore one example of building a single-product sales page. There is by no means one approach for building something like this. This particular example aims to demonstrate a fast way to start selling a single product online, while using free plugins and themes…

  • How To Build a Recipe Card via the WordPress Block Editor

    How To Build a Recipe Card via the WordPress Block Editor

    Last summer, I was on a pattern-creating bender. In two months, I had designed just shy of 100 block patterns. Outside of work and necessary household duties, I spent every waking moment building things with the block editor for fun. I had complete creative freedom, no need to roll out a commercial product, and no…

  • Recreating Onia: Building Brushstroke Backgrounds With WordPress Blocks

    Recreating Onia: Building Brushstroke Backgrounds With WordPress Blocks

    As I was looking over the latest releases from the WordPress theme directory this week, I came across one that caught my eye. Onia was clean and minimal while reserving its flourishes to bring attention to just a few elements across the page. Could this be one of those diamonds in the rough I am…

  • How to Build a vCard Website with a Video Background

    How to Build a vCard Website with a Video Background

    Today we are continuing on with our new Building with Blocks series, where we demonstrate some fun things you can create with blocks. In this tutorial I am going to show you how to build a simple vCard website with a video background in under five minutes. I wanted to build a website like this…

  • Building a “Scotch Tape” Image Block Style

    Building a “Scotch Tape” Image Block Style

    In today’s post, Tavern readers are in for something a little different than our regular stream of news and opinion. Welcome to the Building with Blocks series. It is a new type of post we are trying out to show people some of the fun, unique, or creative things they can do with WordPress blocks.…