Building a book review site with Block Bindings, part 2: Queries, patterns, and templates

It’s been a little over a month since you and I built a book review site using custom fields together. In Part 1 of this series, we envisioned a client project with constraints that wouldn’t give you the time or resources to create custom blocks. The alternative option was to use custom fields alongside the Block Bindings API.

In the previous post, you learned how to:

Register custom fields and bind them to block attributes.
Add custom block variations to bypass manually coding connected blocks.
Build custom meta input fields.
Along with a few other tips and tricks.

Much of that felt like the “setup” stage where you just get things working. This second part of the tutorial series will build atop that foundation and show you the practical steps for using custom fields in block themes.

Remember that you can always reference the GitHub repository or the Playground demo as you walk through this tutorial.

Table of Contents

Querying posts by meta

Let’s start off with something fun: building a custom Query Loop block variation that lists book reviews by rating. A big part of this is adding a custom Rating selector in the inspector panel, as shown in this screenshot:

One of the first things I did when building the initial code for this tutorial was revisit a tutorial I published in 2022 here on the Developer Blog: Building a book review grid with a Query Loop block variation.

Back then, we didn’t have the Block Bindings API to work with, but the foundational pieces were already there. For this section of the tutorial, I’m mostly just copying and pasting from that previous work—with a few minor changes. I highly recommend giving it a read for a more in-depth dive into this technique.

Before you can query posts by meta, you need a way to select the meta you want to query by. In Part 1 of this series, you registered several meta keys. Here they are as a reminder of what they do:

themeslug_book_author: The book’s author name.
themeslug_book_rating: The user’s star rating for the book.
themeslug_book_length: The number of pages in the book.
themeslug_book_goodreads_url: The URL to the book’s page on Goodreads.com.

You could, of course, query posts by any of those fields. But let’s focus on the themeslug_book_rating meta key for this exercise. You can explore querying by other keys on your own.

First, add this code to your editor.js file in /resources/js to import the empty query.js script:

import './query';

Then open your resources/js/query.js file and import a few necessary dependencies by adding this code:

import { __ } from '@wordpress/i18n';
import { addFilter } from '@wordpress/hooks';
import { InspectorControls } from '@wordpress/block-editor';
import { PanelBody, SelectControl } from '@wordpress/components';

Now let’s build the Book Review panel and Rating control as shown in the above screenshot. To do this, you’ll rely on a couple of built-in WordPress components:

<PanelBody>: A custom panel to house any controls you want to display.
<SelectControl>: A dropdown select field for selecting the book rating.

Add this code to your query.js file:

const BookReviewControls = ( { props: {
	attributes,
	setAttributes
} } ) => {
	const { query } = attributes;

	return (
		<PanelBody title={ __( 'Book Review', 'themeslug' ) }>
			<SelectControl
				label={ __( 'Rating', 'themeslug' ) }
				value={ query?.bookRating

Querying posts by meta

Adding a rating dropdown control