Search 3.0: add Compact Search block pattern with filter + sort popovers

[adamwoodnz]

Fixes RSM-1071

Proposed changes

Adds a Compact Search Jetpack Search block pattern — a single-row toolbar (search + filter popover + sort popover) over a dense result list, inspired by the WordPress Dataview list layout.

• New block: jetpack/filter-popover — a container for filter-checkbox + active-filters inner blocks, surfaced as an icon trigger with an active-filter count badge; opens a role="dialog" panel.
• Existing blocks extended:
  • jetpack/search-results now supports layout: "card" | "compact". Compact mode hides the breadcrumb path and image, renders title + date + author on one line, and uses tighter spacing.
  • jetpack/sort-control now supports display: "select" | "popover". Popover mode renders an icon trigger → role="menu" with menuitemradio options.
• Interactivity store: adds isFilterPopoverOpen / isSortPopoverOpen state, toggleFilterPopover / toggleSortPopover / closeAllPopovers / selectSortOrder actions, onWindowClickClosePopovers / onEscapeClosePopovers window handlers for Dataview-style outside-click + Esc close, plus activeFilterCount and isSortByRelevance / isSortByNewest / isSortByOldest derived getters.
• Data: normalizeResult now surfaces author from the v1.3 author.name field (accepts both string and array shapes).
• Pattern: new compact-search.php composes search-input + filter-popover (with category / tag / post-type filter-checkbox children) + sort-control[display=popover] + results-count + search-results[layout=compact] + no-results + load-more.

All new styles use currentColor / color-mix / var(--wp--preset--color--background) so they inherit the active theme palette (extending the pattern established by the base branch).

Related product discussion/links

• Linear: RSM-1071
• Based on branch: cursor/search-blocks-theme-adaptive-colors-8486 (theme-adaptive block colors — not yet merged)

Does this pull request change what data or activity we track or use?

No.

Testing instructions

Requires the Jetpack Search blocks feature flag to be enabled.

1. In a wp-env (or any WP site with this package mounted), create a new page.
2. Open the block inserter → Patterns → Jetpack Search → insert Compact Search.
3. Save and view the page.

Golden path:

• You see a single row containing: a search input on the left, and a filter icon + sort icon on the right.
• Results render below as a compact list — each item one line with title, date, and author, no excerpt/image, tight vertical rhythm.

Filter popover:

• Click the filter icon. A popover opens containing the Active Filters summary plus Category, Tag, and Post Type checkbox lists (each with live aggregation counts).
• Tick one or more checkboxes — results update, the popover stays open, and a numeric badge appears on the filter trigger showing the total count of selected values across all dimensions.
• Close the popover. Re-open. State is preserved.

Sort popover:

• Click the sort icon. A menu opens with Relevance, Newest, Oldest. The currently selected option shows a ✓.
• Pick a different option — the list resorts and the popover closes.

Accessibility / Dataview parity:

• Tab order reaches search input → filter trigger → sort trigger.
• Open a popover: the trigger's aria-expanded flips to true.
• Press Escape — the open popover closes.
• Click outside an open popover — it closes.
• Opening the filter popover while the sort popover is open should close the sort popover (and vice versa).

Theme inheritance:

• Switch the active theme to one with a dark background (or change the enclosing Group block's palette).
• All new UI (trigger borders, hover backgrounds, panel backgrounds, badge) should remain legible — nothing hardcoded to grey.

Regression check:

• Insert the original Blog Search Page pattern on another page. It should still render its full sidebar layout with the native <select> for sort and the same search-results "card" layout as before.

Screenshots (from the issue, for reference)

Target initial UI, filter-open state, and filter-applied state are documented on RSM-1071 — the one deliberate departure from Dataview is using a sort icon where Dataview uses a gear.

🤖 Generated with Claude Code

[github-actions]

Are you an Automattician? Please test your changes on all WordPress.com environments to help mitigate accidental explosions.

• To test on WoA, go to the Plugins menu on a WoA dev site. Click on the "Upload" button and follow the upgrade flow to be able to upload, install, and activate the Jetpack Beta plugin. Once the plugin is active, go to Jetpack > Jetpack Beta, select your plugin (Jetpack), and enable the rsm-1071-search-30-compact-search-pattern branch.
• To test on Simple, run the following command on your sandbox:

bin/jetpack-downloader test jetpack rsm-1071-search-30-compact-search-pattern

Interested in more tips and information?

• In your local development environment, use the jetpack rsync command to sync your changes to a WoA dev blog.
• Read more about our development workflow here: PCYsg-eg0-p2
• Figure out when your changes will be shipped to customers here: PCYsg-eg5-p2

[github-actions]

Thank you for your PR!

When contributing to Jetpack, we have a few suggestions that can help us test and review your patch:

• ✅ Include a description of your PR changes.
  
• ✅ Add a "[Status]" label (In Progress, Needs Review, ...).
  
• ✅ Add testing instructions.
  
• ✅ Specify whether this PR includes any changes to data or privacy.
  
• ✅ Add changelog entries to affected projects
  

This comment will be updated as you work on your PR and make changes. If you think that some of those checks are not needed for your PR, please explain why you think so. Thanks for cooperation 🤖

---

Follow this PR Review Process:

1. Ensure all required checks appearing at the bottom of this PR are passing.
2. Make sure to test your changes on all platforms that it applies to. You're responsible for the quality of the code you ship.
3. You can use GitHub's Reviewers functionality to request a review.
4. When it's reviewed and merged, you will be pinged in Slack to deploy the changes to WordPress.com simple once the build is done.

If you have questions about anything, reach out in #jetpack-developers for guidance!

[jp-launch-control]

Code Coverage Summary

Coverage changed in 6 files. Only the first 5 are listed here.

File	Coverage	Δ%	Δ Uncovered
projects/packages/search/src/search-blocks/blocks/sort-control/render.php	0/63 (0.00%)	0.00%	50 💔
projects/packages/search/src/search-blocks/store/index.js	0/111 (0.00%)	0.00%	39 💔
projects/packages/search/src/search-blocks/blocks/search-results/render.php	0/81 (0.00%)	0.00%	17 💔
projects/packages/search/src/search-blocks/blocks/sort-control/edit.js	0/7 (0.00%)	0.00%	4 💔
projects/packages/search/src/search-blocks/blocks/search-results/edit.js	0/6 (0.00%)	0.00%	2 ❤️‍🩹

4 files are newly checked for coverage.

File	Coverage
projects/packages/search/src/search-blocks/blocks/filter-popover/edit.js	0/5 (0.00%) 💔
projects/packages/search/src/search-blocks/blocks/filter-popover/render.php	0/21 (0.00%) 💔
projects/packages/search/src/search-blocks/patterns/compact-search.php	0/16 (0.00%) 💔
projects/packages/search/src/search-blocks/blocks/filter-popover/view.js	0/0 (—%) 🤷

Full summary · PHP report · JS report

_{If appropriate, add one of these labels to override the failing coverage check: Covered by non-unit tests Use to ignore the Code coverage requirement check when E2Es or other non-unit tests cover the code Coverage tests to be added later Use to ignore the Code coverage requirement check when tests will be added in a follow-up PR I don't care about code coverage for this PR Use this label to ignore the check for insufficient code coveage.}