Automattic / Automattic/jetpack

Enhancement for Jetpack Search: Improve UX for Search when Blog pages show at most is not 10

Open
#34,545 0 comments 0 reactions 0 assignees View on GitHub
[Feature] Search [Plugin] Search [Pri] Low Enhancement Instant Search
Dominant language
PHP
Stars
1.8k
Forks
898
Avg merge
1d 18h
Merged PRs (30d)
774

Description

### Impacted plugin

Search

### What

Do not modify the number of loaded search results if user sets **WP Admin > Settings > Reading > Blog pages show at most** different than 10.

### How

When a site is configured to display a custom number of posts (**WP Admin > Settings > Reading > Blog pages show at most** is different than default 10) it may create a bad experience.
If the screen is not high enough, the scroll trigger/load more button is not visible and there are empty slots that suggest no more items. See image:

Markup 2023-11-29 at 09 19 32

Could we keep the number of search items aligned with the layout, always 10? Or adapt the layout?

Thank you!

---

Workarounds:

- Switch back settings to 10 in **WP Admin > Settings > Reading > Blog pages show at most** or adding this snippet:
- Custom CSS like this one that applies for 12 posts:

```
@media(min-width: 1400px) {
li.jetpack-instant-search__search-result.jetpack-instant-search__search-result-product {
width:calc(16.666% - 16px);
}
}
```

Contributor guide

Open the contributing guide

Research direction

Start by locating Jetpack Search's result layout and load-more/scroll-trigger behavior, then trace how the WordPress “Blog pages show at most” setting affects the number of results. Reproduce the reported empty slots and hidden load-more control with a non-default setting; done means search results remain aligned with the layout and users can continue loading results.

Written by the indexing model from the issue text.

Assessment

Tech stack
php, react, wordpress
Domain
frontend, search
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
38/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.