Meta Filter Block

The Meta Filter Block turns your ACF fields into filterable options. Display as checkboxes or in a select box.

Block Renders

Meta Filter block settings in Gutenberg.
Checkbox rendering as a row.

Block Options

Style (style)

Rendering style choice. Options include “Checkboxes”, “Select”, “Radio”. Default option: “Checkboxes”.

Comparison (comparison)

The comparison operator used to compare the filter selection by the user to the meta field. Options include “=” for exact matching, “>” greater than, and “<” less than.

Example Usage

As an example image you have a post type “recipe” for a food site. There is a field group for this custom post type that contains the field “calories_per_serving” as shown below.

Calories Per Serving field for a Recipe post type.

In Gutenberg we drop in our Meta Filter block. We set the Meta Key option to “calories_per_serving”, the same name as our ACF field. This tells the Meta Filter block to compare the user’s filter selection to this numeric field. We then choose less than ( < ) as our comparison operator, this allows us to have options like “less than 200 calories per serving”.

Meta Filter options where we setup the Meta Key to match the ACF field name, choose the rendering style (checkboxes) and comparison operator (less than <).

Adding Filter Options

What makes the Meta Filter block a bit more challenging to setup compared to the Taxonomy Filter is that we do need to make the list of options manually. This takes a bit of work, but the upside is we have extraordinary flexibility to choose the most useful options to render for our users. As shown below, in this example we choose a range of common calories per serving options. The value is numeric, allowing for comparison to our recipes, and then the text is descriptive, making it easy for users to understand their options such as “Less than 200”.

Adding options to the Meta Filter block in Gutenberg.

Preview and Testing

Having saved our Meta Filter options, we can now preview the result and test to confirm the filter is working as expected. Here is what we see on the front-end for our calories per serving filter:

ACF Engine Meta Filter for filtering by calories per serving.

In order to test a Meta Filter make sure you have a good number of testing posts created, and that they have a range of values for the filtering field. In this case we had 20 recipe test posts, and most of them had a value set for the Calories Per Serving (calories_per_serving) field. The values we entered for testing purposes ranged from 150 – 700 in order to test both inclusion and exclusion from the filter results.