Create a Filter

The filter block is able to filter anything inside a query block.

The filter block is usually inserted into a parent block.

Toggle on Frontend Rendering

Select the Query in the navigator.
In the Primary tab of the block Inspector open the Settings tab.
Toggle on Frontend Rendering.

The filter block will only work with a queryblock that has the front end rendering property toggled on.

Set up Filter

Select Query in the Navigator.
In the Primary Tab of the Block Inspector, open the Query Editor.
Open "Taxonomy Query".

Open

Click the "+" icon to add a new Taxonomy Query.
Click to open.

Rename

You can give you taxonomy filter a suitable name.

Find the Name field.
Input a suitable name.

Set Taxonomy Filter

In order to target Categories, you need to filter a Taxonomy, such as Categories, Tags, Navigation Menus, Link Categories, Formats, Themes, Tenplate Part Areas etc.

In this example, we wish to target Categories.

Set Taxonomy to "Categories - Post".

Dynamic Toggle

In order to filter dynamic data, you need to toggle on the Dynamic icon.

Find Terms.
Toggle on the "Dynamic" icon.

Source

Set Source to "WordPress".

The Filter block adds or removes a parameter that the Query then uses to modify the information that it displays.

Set Wordpress to "URL Parameter".

Key

You need to input the filter target name, in this example "Category".

Input "Category" as Key.

Field

By default, the filter returns taxonomy slugs. If required, you can set it to another parameter such as term_id, name, term-taxonomy_id. In this example we wish to return "slugs".

Select "slug" as Field in the Dropdown.

Copy Query ID

You need to copy the query ID so that the Filter can attach to the Query.

Find Query ID.
Copy using keyboard shortcuts.

Add Filter

Now we need to add our Filter. You can place it where you need it as required.

In this example we will place it above the Query.

Select the block into which you want to insert the Filter.
Add a Cwicly Filter block using the Quick Inserter or the Block Inserter.

You should see a placeholder with "Select Filter Properties...".

Click to open the Filter Editor from the Primary tab.

Connect Filter to Query

First we need to connect the Filter to the Query using the Query ID.

Query ID

In the Query Editor modal, input the ID of the Query to which you wish to attach the filter.

You can find the Query ID in the Query Editor.

Select the Query to which you want to attach the Filter.
In the Primary tab, open the Query Editor.
Copy the Query ID.

Input the required Target, in this example "category".

Target

The Target is in fact the key that you chose when you set up the Query. You will find it in the Taxonomy Query tab of the Query Editor.

Select the Query.
Open the Query Editor.
Open the Taxonomy Query tab.
Click the required Query, in this example the "Travel Query".

Key

Copy the Key, in this example "category" and input it into the Target field of the Filter Editor.

Filter Type

Select the Filter Type you require in the dropdown, in this example "Button Single".

Button Single allows you to choose only one Button at a time as opposed to "Button Multiple".

Data Source

Select required Data Source in the dropdown in the Filter Editor.
In this example, Dynamic as we want our data to be dynamic.

Data Type

Select required Data Type, in this example Taxonomy.

Taxonomy

Choose required taxonomy type in the dropdown, In this example want to target Categories as our Taxonomy type.

In the Taxonomy dropdown select required taxonomy type, in this example Categories.

In this example we want to exclude Uncategorised posts and only include those we previously set up in the Dashboard.

In the Taxonomy section of the Filter modal, select items to exclude in the Exclude dropdown.
In this example, "Uncategorised".

In this example we do not want to display terms that do not contain any posts.

In the Taxonomy section of the Filter modal, toggle on "Hide Empty" as required.

Filter categories

Now we want to be able to visualise and style the filter categories we have created.

With the Filter block selected, add a Paragraph.

Connect dynamic data

We need to connect our dynamic data.

Select the Paragraph and open Dynamic Values from the toolbar.
Select Filter as Source.

We want the Category names to appear.

Set Filter to Name.

Now you can visualise the three Categories we set up.

Layout

Let's turn our attention to the Layout of our Filter.

In the Primary tab, open the Layout tab.
Set Flex display, Row direction, Wrap (so that if there are multiple categories, they will display on the next line) and Align centre.

To add spacing around the filter items:

Set a Row Gap and a Column gap or !8px.

To Space the Filter items from the Query:

In the Margin and Padding tab, set a bottom Margin of 50px.

Style

Now we need to Style the Filter Titles.

In the Typography tab of the Primary tab, set an appropriate font size and weight.

In the Design tab, open the Borders tab and the Radius and Border tab.
Set a 40px equal Radius or as required to give a suitable oval look.
Set an appropriate Border colour, in this example dark grey.
Set a solid border Style with an equal 1px Width.

Set an appropriate Padding to allow the items to breathe.

In the Design tab, open the Margin and Padding tab and set an upper and lower 10px Padding and a 30px right and left Padding or as required.

Relative Styling for button selection

Now we have fully set up the Filter buttons but to make it easier for the User, we can add a colour change to the current button to let them know what category is selected.