Getting started with the Search & Filter in the Block Editor couldn’t be easier, choose from 5 types of fields to add as well as the re-usable field block.
There are 5 field types, each with their own block: Search, Choice, Range (Pro), Advanced and Control.
To get started, open the block inserter and search for the block name or scroll to the Search & Filter section.
Create a Field
Add the Search Field block to the page.
Query Integration
This is one of the most important options for any field, this is where you can define which query a field is supposed to affect.
When you first start using Search & Filter you’ll see the message “No queries found, create a query” – clicking create a query will open our query editor modal.
A query (results listing) can be on the current page, or somewhere else completely – use the query editor to configure the location and query parameters.
Once you’ve created your first query you will be able to choose it from the dropdown:
Field Settings
Once you’ve added your block to the page and setup the connected query you can start configuring your field.
There are common options between field types, as well as some unique options that are specific to each field type.
Common Options
Input Type
The type of input field used to for the field. For search fields, this could be text or autocomplete, and for choice fields this could be select, radio or button (there are more options).
Data Type
This setting (and its sub settings) allow you to choose what data source the field is connected to.
For a choice field, you could generate the options from a taxonomy or custom field.
URL Name (Pro)
Customise the URL name for the field – if you entered search-value then the URL would look like:yoursite.com/?search-value=...
Label & Description
Adds a label or description above the field. This needs to be filled in with a relevant label even if you don’t show the label as this is what screen readers will use when it is visually hidden.
Auto Submit (Pro)
Enabling auto submit submits the search or filter field after any user interaction – removing the need for a separate submit button. A delay can be defined to allow a user more time to make changes to the field before the submit is triggered.
Default Value (Pro)
A default value can be set for the field so that it is preselected for your users. Depending on context, it could be dynamically generated ie:
If the field uses the category taxonomy as the data type and was displayed on a category archive, the field could then set the current taxonomy archive location as its default value.
Unique Options
Each field type (search, choice, range, advanced, control) has its own set of options, which can be customised and may reveal further options as you make selections.
There are many settings that are related to the input type, depending on your choice of input type you will be presented with further customisation options.
Styles Tab
The styles tab can be used to override and customise the styles of any field type.
Initially your fields will be displayed using the default styles preset. Use the dropdowns to add overrides and customise the design on a per field basis.
Once you’ve added the overrides you can customise them further:
Creating Presets
While styles can be overridden on an individual block basis, its also possible to create your own presets.
This allows you to create a preset to work across all your fields, providing a consistent design and preventing repetition when building your fields, as well as allowing you to update the styles of all your fields with one-click by setting the default.