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. The base coupon card looks …
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 the two known techniques seemed …
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 written word. Jason Santa Maria’s …
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 2021. As a starry-eyed, wanna-be …
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 2021. As a starry-eyed, wanna-be …
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 the right and the post …
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 available on WordPress.org. Here’s what …
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 one to please but myself. …
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 always looking for in the …