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


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.

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”.

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”.

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:

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.