Many sites have a need to filter content. For example, finding alpaca wool sweaters based on your favorite color, or finding a digital agency based on the services they provide.
From a technical point of view, filtering can be created in many ways, like building a React App or using Vanilla JavaScript connecting with WordPress REST API.
But what if we could power the filtering by using WordPress native APIs and blocks?
WordPress agency Human Made have an answer! They have created WordPress Query Loop Filter plugin, which is powered by WordPress’s own Interactivity API.
WordPress Query Loop Filter plugin– A simple yet powerful way to bring dynamic filtering to your WordPress site.
We highly recommend reading Human Made’s article Introducing the WordPress Query Loop Filter before you continue reading. There is also a plugin overview included in the same article as a video.
Code for the filtering can be found in Human Made’s GitHub repo.
What Features Query Loop Filter Has?
Note that these Query Loop Filter blocks only work inside the native WordPress core Query Loop block. The plugin has two custom blocks and a search block to power your filtering:
- Taxonomy filter: Can be any registered taxonomy.
- Post type filter: Can be any registered post type.
- Search: When adding WordPress core Search block inside the same Query Loop block, the search automatically filters results without reloading the page.
Even by using only these three features (taxonomy, post type, search) we can build powerful filtering combinations, especially when using several taxonomy filters.
More Features with Forking
While building our new mainostoimistot.fi site, we noticed a couple of things were missing from the Query Loop Filter plugin. That’s why we forked the original code and added these features ourselves:
- Order block: Filtering results can be sorted for example by date (newest or oldest first). Or in alphabetical order.
- Reset block: It’s good UX to be able to reset all the filters by clicking “Reset filters” button.
- Allow multiple choices: By using checkboxes instead of dropdown (
<select>), user is able to select multiple choices inside the same taxonomy filters. For example filtering by green and blue sweater.
See the code in the forked repo!
Why Use Interactivity API?
The main goal of the Interactivity API is to provide a standard and simple way to handle the frontend interactivity of blocks.
Interactions means modals, filters, toggles, an energy consumption calculator, anything that user interact without reloading the page. All of these features can be built with React, Vue or Vanilla JS.
However, Interactivity API is powered by Preact. At first I was a little bit confused why Preact was chosen, and why even use Interactivity API.
But after reading frequently asked questions about the Interactivity API, it all started to make sense:
- API needs DOM diffing feature
- It’s small enough
- It’s extensible
- It works with PHP and HTML
- Blocks can communicate easier with each other when using the standard
- API is declarative and reactive
- It handles the global state, local context and derived state
- Works with the WordPress translation API
The WordPress Core already uses Interactivity API, for example in the Image and Navigation blocks.
Future will tell if digital agencies or plugin developers will start utilizing the Interactivity API more.
How to Get Started with Interactivity API
These resources are helpful to get started with Interactivity API:
- Interactivity API Reference
- A first look at the Interactivity API
- Building a light/dark toggle with the Interactivity API
- Interactive API Gallery Slider
- Interactivity API showcases
In the next Interactivity API article, I’ll demonstrate how the Interactivity API works. Let us know if you have questions about Interactivity API or have showcases where you have used Interactivity API!