Learn how to build a fully customizable search experience using Jetpack Search blocks. These composable blocks replace the floating overlay modal and render search results directly within your theme using the block editor.
What are Jetpack Search blocks
Jetpack Search 3.0 introduces a set of blocks you can combine in the Site Editor or Page Editor to build a search experience that matches your theme. Instead of a floating overlay modal, search results appear on a dedicated page that inherits your theme’s fonts, colors, and spacing. All blocks update results instantly as visitors type or apply filters, with no page reload required.
Search blocks are built on the WordPress Interactivity API and work on both block-based themes and classic themes.
Getting started
Before Search blocks can return results, a few things need to be in place.
- Activate the Jetpack plugin and connect the site to a WordPress.com account.
- Go to Jetpack → Search in WP Admin and enable Jetpack Search. Let the initial content index complete.
- In the Settings tab, select Embedded search from the experience selector.
This feature requires an active Jetpack Search plan, either free or paid. To learn about the differences between the free and paid plan, see the Jetpack Search Product Billing page. For more on how Jetpack filters work, see our developer documentation.
The blocks themselves can be inserted before the index is ready, but the front end will show empty result lists until indexing finishes.
For a full overview of all available search experiences, see Jetpack Search.
The Jetpack Search template
When embedded search is enabled, a jetpack-search page template is automatically registered. Your site’s normal search URL (for example, yourjetpack.blog/?s=query) renders this template instead of triggering the overlay.
Customizing the template
- Go to Appearance → Editor WP Admin
- Click Templates.
- Select the Jetpack Search template.
- Edit the template using the block editor. All standard block editing applies.
Resetting the template
If you want to return to the default layout, open the Jetpack Search template in the Site Editor and use the Reset option. This removes your customizations and restores the default block arrangement.
Where to find the blocks
All Search blocks are grouped under a Jetpack Search category in the block inserter. Click the + button in the editor toolbar, scroll to Jetpack Search, and the full set is listed there.
How to build a search page
- Create a new page, or open your search template in the Site Editor.
- Add the Search Input block where you want the search box to appear.
- Add the Search Results block below it. This automatically includes a results list, count, sort control, load more button, and attribution.
- Optionally, add a Filters block in a sidebar column to let visitors narrow results by category, tag, date, author, or post type.
Search shell blocks
These blocks make up the search query input and results display area.
| Block | What it does |
|---|---|
| Search Input | The search box where visitors type their query. |
| Search Results | Container for the results area — comes pre-built with count, sort, list, load more, and attribution. |
| Results List | Displays the actual search results. Choose between compact, expanded, or product layouts. |
| Results Count | Shows how many results were found. |
| Sort By | Lets visitors change the order of results (relevance, newest, oldest, and more). |
| Load More | A button that loads the next page of results without a page reload. |
| Powered by Jetpack | Attribution link — required on the free Jetpack Search plan. |
For detailed settings and usage instructions for each block, see Jetpack Search blocks: search and results.
Filtering blocks
These blocks let visitors narrow search results.
Containers
| Block | What it does |
|---|---|
| Filters | A vertical sidebar-style panel that holds filter blocks. |
| Collapsible Filters | A compact button that opens a filter panel — ideal for search bars in headers or tight layouts. |
Filter controls
| Block | What it does |
|---|---|
| Active Filters | Shows the currently applied filters as dismissible pills. |
| Clear Filters | A button that removes all active filters at once. |
For detailed settings and usage instructions for containers and controls, see Jetpack Search blocks: filter containers.
Filter types
| Block | What it does |
|---|---|
| Filter by Category | Filter by built-in WordPress categories. |
| Filter by Tag | Filter by built-in WordPress tags. |
| Filter by Post Type | Visitor-facing post type picker (Post, Page, custom types). |
| Filter by Author | Filter by post author. |
| Filter by Product Category | WooCommerce product categories. |
| Filter by Product Tag | WooCommerce product tags. |
| Filter by Product Brand | WooCommerce product brands (only appears when a product_brand taxonomy is registered). |
| Filter by Custom Taxonomy | Any other registered taxonomy — pick the slug after inserting. |
| Filter by Date | Lets visitors narrow results to a specific year or month. |
| Post Type Scope | Silently limits search results to specific post types — no visible UI for visitors. |
For detailed settings and usage instructions for each filter type, see Jetpack Search blocks: filter types.
Choosing a filter layout
Use Filters when you have a sidebar layout and want filters always visible alongside results.
Use Collapsible Filters when you have a compact layout, such as a header search bar, and want filters available without permanently taking up space.
Both layouts support the same checkbox filter variations. The Filter by Date block is only available inside the Filters block, not inside Collapsible Filters. If you need date filtering, use the sidebar Filters layout.
Free plan vs paid plan
Jetpack Search has both free and paid tiers. Two things to know when using Search blocks:
- On the free plan, the Powered by Jetpack attribution is required. If you remove it from a Search Results container, it will be added back automatically when the page renders. On a paid plan, you can remove it freely.
- Result limits and indexing speed differ between tiers. The blocks themselves work the same way, but the underlying search service may apply caps. See the Jetpack Search pricing and billing page for details.
Theming and styling
All blocks expose the standard WordPress block style controls (color, typography, spacing, border) through the editor sidebar. Blocks that contain other blocks, such as Search Results, Filters, and Collapsible Filters, style their wrapper and let each inner block be styled individually.
On block-based themes, the auto-generated search template integrates natively with the theme’s layout. Fonts, colors, and spacing are inherited automatically and no custom CSS is needed in most cases. On classic themes, the template renders within the theme wrapper but may need minor styling adjustments.
WooCommerce search features
WooCommerce-specific search features — including price filters, stock status filters, star rating filters, and product attribute filters — are provided by WooCommerce and are not covered in this documentation. For help with those features, refer to the WooCommerce documentation.
Jetpack Search does support filtering by product categories, product tags, and product brands, since these are standard taxonomy filters. Those are covered in the filter types documentation.
Still need help?
Please contact support. We’re happy to advise.