Jetpack Search blocks
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, complete the following steps.
- 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.
You can insert the blocks before the index is ready, but the front end shows 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
To edit the Jetpack Search template, follow these steps.
- Go to Appearance → Editor in 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
To assemble a search page, add the input, results, and filter blocks in the following order.
- 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.
The No Results block
The No Results block controls what visitors see when a search returns no matches (the empty state). It replaces the plain-text no-results message setting that was previously available in the Results List block, and it lets you place rich content in the empty state instead of a single line of text.
Inside the No Results block, you can add links, images, buttons, and other blocks. Use it to point visitors toward popular content, suggest alternative search terms, or link to a contact page when a search comes up empty.
The no-results message setting in the Results List block is deprecated in favor of the No Results block. Existing no-results messages continue to render, so current pages are unaffected, but use the No Results block for new pages and going forward. There is no automatic migration path: to move an existing message into the No Results block, add the block and re-enter the content manually.
Filtering blocks
These blocks let visitors narrow search results.
Containers
These blocks hold the individual filter controls.
| 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
These blocks display and manage the filters a visitor has applied.
| 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
These blocks let visitors filter results by a specific attribute, such as category, tag, author, or date.
| 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 Product 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.