How to Create Book and Book Review Cards with WordPress Blocks – WP Tavern

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

As a starry-eyed novelist, one of the first things that got me excited about the block system was how writers could show off their books with WordPress. Of course, I had no choice but to create a custom group of blocks to show off the manuscript I managed to write in a month.

Theme homepage design for novelists.

This was the pre-pattern era of WordPress. The interface was clunky. Things seemed to break randomly. Design tools were almost non-existent, but there was a bit of magic in the air. At no time in the history of the platform have users been able to visually create such a simple layout with WordPress. For all its flaws during the beta, that’s when I became a fanboy en bloc.

It wasn’t until months later that I released the theme for novelists – it was a child of another project that had yet to launch.

For this entry in the Building with Blocks series, I wanted to walk readers through creating one of the patterns that inspired me to continue designing and developing with the block system. As a bonus, I’ll also show how to create a book review template.

I use the Archeo theme by Automattic throughout this tutorial. However, it should work with any theme that supports blocks. You will also get more mileage from a block theme.

Reservation card

This card is meant to be a starting point for authors who want to showcase one of their books, but it could be applied to any product. There are thousands of ways to modify this, and I encourage everyone to customize it once they’ve gone through the steps. The end result should look like the following:

Book card design with book cover image on the left and intro + buy button on the right.
Final book map design.

The HTML of the final block is available through Gist. You can copy and paste it into the editor, but I encourage you to try creating the first round from scratch. This series is about learning to build with blocks. The copy-ready code is there just in case you get stuck.

Step 1: Container group (optional)

WordPress post editor with a group block that is padded and has a dark blue background.
Group block with padding and colors.

Almost as a rule, I start with a group block when building models or block sections. I chose to add it this time because I wanted a dark background with padding around the card content. You can unsubscribe if you prefer.

Once the block is in place, add the text color, background color, and padding to the block. I have chosen 2rem for padding because my active theme’s default isn’t consistent on all sides.

Step 2: Add media

WordPress post editor with a Media and text block.  It shows a book cover image on the left.
Media and text block inside a group.

One of my favorite blocks in WordPress is Media & Text. It has so many use cases, and it’s kind of like a mini model on its own. On one side, you place your supports. On the other, you add the content you want.

In the Group block from step 1, insert Media and text. Go ahead and take an image of your choice. the WordPress Photo Directory a lot if you don’t have one on hand.

The only change I made to this block is to set the “Media Width” option to 35 in the block options sidebar. Depending on the dimensions of your image, you may choose another option. Just be sure to leave room for your content.

Step 3: Group (optional)

WordPress Media & Text block in post editor.  Inside the text/content section is another group.
Added an internal group block.

Inside the Media and Text block, I added another group. It allows for consistent spacing, which WordPress does not apply to the “content” area of ​​the Media and Text block for some reason. This is an optional step, but it provides more control over the design.

If you’re not feeling good with your theme’s spacing, you can change the “Block Spacing” option in the block options sidebar. I adjusted this to 2rembut it will depend on the active theme.

By the way, these are details I rarely see mentioned in other tutorials – the “gotchas” and other issues you might run into. I feel like they are useful inclusions but can be a bit annoying. Please let me know in the comments if you want me to continue covering this level of detail.

Step 4: Content of the card

Media and text block in the WordPress post editor.  Inside the content section is a title, a few paragraphs, and a button.
Added Title, Paragraph and Buttons blocks.

The last step in creating the book card should be relatively simple. I included a title, two paragraphs and a button block. I encourage experimentation.

I didn’t make any changes to the Title and Paragraph blocks. However, I selected the “Outline” style for the single button.

And that’s all ! The inclusion of the embedded media and text block made it easier than building with others. Keep reading if you’d rather review books than write and sell them.

book review intro card

This walkthrough will walk you through creating a book review (or review introduction) card. As before, you can hang the full block gist html. The result should look somewhat like the following:

A book review section that includes the cover image on the left and book details on the right, including a quote.
Final book review card introduction design.

With all the fuss over the previous recipe card tutorial, let me preface this section with a quick note. This series of tutorials is about learning how to build with blocks, not creating fleshed-out solutions for every possible scenario.

For those who want more, there are solutions. Donna Peplinskie book review block is an excellent choice. It has ISBN integration, revision scheme, and many other bells and whistles. I even wrote about it in 2020.

It’s for the sometimes book reviewers, people who don’t create a review site, or people who just want to take a tip.

Steps 1-3: Rinse and repeat

A Group block in the WordPress post editor.  A Media and Text block is there with its own nested Group block.
Added group, media and text and another group block.

These steps are literally the same as the book map above: add a group block, add media and text, and nest another group in the content area. The only change I made was to expand the Media section to 40 (it was 35 before).

Feel free to mix that up and try new things. Skip the initial group block if you don’t want the padded background.

Step 4: Content of the card

WordPress post editor with Media & Text block.  A title, list, and quote are nested in its content area.
Added a Title, List and Quote block.

Like the previous book card, add a Title block for the book title. This goes in the nested group inside the Media & Text block.

The next part of the content is where things go. For the “info” book, you must insert a List block. Then, fill in the details that seem relevant to you, like this:

  • ✍️ Written by Justin Tadlock
  • 🔖 Labeled Adult Fiction
  • 📚 Published by Words & Press
  • 📅 Posted May 01, 2099
  • 📃 599 pages
  • ⭐⭐⭐⭐⭐ / 5 stars

I wanted to spice things up with some emoji. If that’s not your thing, there’s no need to include them.

In a real project, I would also include a “markerless” style for the List block, allowing the emoji to act as false fleas. However, the theme I was testing with didn’t have a style for this.

This brings us to the last section. I like to kick off book reviews by including a favorite quote. It makes me want to write about the book and allows me to share something from the author. Therefore, I opted to place a Quote block as the final piece.

An alternative could be a quick summary. You can even just dive straight into the review from there or leave the space blank. It’s your card and you can do whatever you want with it.

Comments are closed.