Settings: Show empty state when search returns no matching settings by nerrad · Pull Request #48102 · Automattic/jetpack

nerrad · 2026-04-15T13:51:29Z

Proposed changes

Typing into the Settings search bar could leave a completely blank screen when the term matched no settings — no message, no feedback. This PR surfaces a proper empty state so users get clear guidance instead of a blank canvas.

Reliably show an empty-state message when the Jetpack Settings search returns no matches. Previously a .jp-no-results div was always rendered and its visibility was governed by a display: none + :last-of-type CSS trick that is fragile (:last-of-type is tag-based, not class-based) and in practice left the settings area blank.
Drive visibility from Redux state via a new hasAnyMatchingModule selector in state/search, reusing the existing isModuleFound + getModules selectors.
Render the empty state with the Gutenberg EmptyState compound component from @wordpress/ui (search icon + title + description), wrapped in a Stack for horizontal centering.
Add @wordpress/ui@0.10.0 to plugins/jetpack — one minor ahead of the 0.9.0 used elsewhere in the monorepo, because EmptyState was first exported in 0.10.0.
Remove the obsolete .jp-no-results CSS block.

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

No.

Testing instructions

Open Jetpack → Settings in wp-admin.
Click the search icon in the settings header and enter a term that matches nothing, e.g. asdfqwerty.
Verify the empty-state card renders horizontally centered beneath the search bar, with the magnifying-glass icon, a No matching settings title, and a No search results found for asdfqwerty description.
Clear the search. Verify the normal settings sections return and no stray empty-state is shown.
Enter a term that matches at least one setting (e.g. backup, sharing). Verify the matching sections render and the empty state does not.
Confirm there is no visual regression on the non-search view of the settings screen.

github-actions · 2026-04-15T14:10:58Z

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 fix/JPPROD-105-show-empty-state-message-on-settings-screen branch.
To test on Simple, run the following command on your sandbox:

bin/jetpack-downloader test jetpack fix/JPPROD-105-show-empty-state-message-on-settings-screen

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

jp-launch-control · 2026-04-15T14:29:03Z

Code Coverage Summary

Coverage changed in 2 files.

File	Coverage	Δ%	Δ Uncovered
projects/plugins/jetpack/_inc/client/settings/index.jsx	0/9 (0.00%)	0.00%	1 ❤️‍🩹
projects/plugins/jetpack/_inc/client/state/search/reducer.js	18/18 (100.00%)	7.14%	-1 💚

Full summary · PHP report · JS report

github-actions · 2026-04-16T07:37:53Z

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:

Ensure all required checks appearing at the bottom of this PR are passing.
Make sure to test your changes on all platforms that it applies to. You're responsible for the quality of the code you ship.
You can use GitHub's Reviewers functionality to request a review.
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!

Jetpack plugin:

The Jetpack plugin has different release cadences depending on the platform:

WordPress.com Simple releases happen as soon as you deploy your changes after merging this PR (PCYsg-Jjm-p2).
WoA releases happen weekly.
Releases to self-hosted sites happen monthly:
- Scheduled release: May 5, 2026
- Code freeze: May 4, 2026

If you have any questions about the release process, please ask in the #jetpack-releases channel on Slack.

Aggregate selector that returns true when searchTerm is set and at least one module matches via isModuleFound. This will drive empty-state rendering on the settings screen.

Drive empty-state visibility from Redux state (via hasAnyMatchingModule) instead of the previous display: none + :last-of-type CSS hack, which did not reliably show or hide the message. Render the empty state as an h2 using the existing jp-settings__section-title treatment plus a new --centered BEM modifier, so it visually matches the main settings heading. Removes the obsolete .jp-no-results block.

Replace the ad-hoc h2 with the Gutenberg EmptyState compound component (icon + title + description) wrapped in a Stack for horizontal centering, matching the Jetpack settings treatment and the Gutenberg storybook default. Reset h2/p margins inside the wrapper because the component's built-in margin: 0 lives in @layer wp-ui-components and loses to unlayered admin styles.

Cover the four key cases: empty search term, unloaded modules state, at least one matching module, and no matching modules.

nerrad · 2026-04-16T14:13:16Z

@ilonagl would be nice to get your eyes on this too and see if the design implementation is okay here.

simison · 2026-04-17T10:51:14Z

+		// take precedence and reintroduce h2/p margins. Reset them here so the
+		// component renders with its intended tight spacing.
+		h2,
+		p {
+			margin: 0;
 		}


This is fixed in the next @wordpress/ui version with WordPress/gutenberg#76970

I pinged renovate to open a new PR to update bundled WP deps. Once that's merged, these lines can be removed.

simison

Haven't tested but code looks good!

ilonagl · 2026-04-17T20:33:03Z

Thank you for the ping, @nerrad!

It looks good. I'd tweak the copy a bit to make it more actionable/visible:

Header: "No settings found for “adave”"
Subtitle: "Try searching for a feature name, like ads, sharing, or newsletter."

Also, is there a way to make the empty size height flexible, so the footer stays at the bottom of the screen vs moving in the middle?

Nice to have: I'd also put actions directly in the empty state:

"Clear search" as secondary, and "Browse all settings" that closes the search and opens the first tab from in settings.

simison · 2026-04-17T20:34:49Z

Making the footer sticky at the bottom of the viewport is solved in this PR:

Admin pages: unify layout under jetpack-admin-page-layout mixin #48109

simison · 2026-04-17T20:35:22Z

I'll deploy this as-is now to get trunk fixed and we can do any improvements in follow-ups :-)

nerrad added the Bug When a feature is broken and / or not performing as intended label Apr 15, 2026

nerrad self-assigned this Apr 15, 2026

nerrad force-pushed the fix/JPPROD-105-show-empty-state-message-on-settings-screen branch from 69c1bbd to 7a0393e Compare April 15, 2026 14:10

github-actions Bot added [Plugin] Jetpack Issues about the Jetpack plugin. https://wordpress.org/plugins/jetpack/ [Status] In Progress [Tests] Includes Tests Admin Page React-powered dashboard under the Jetpack menu labels Apr 16, 2026

github-actions Bot added the [Status] Needs Author Reply We need more details from you. This label will be auto-added until the PR meets all requirements. label Apr 16, 2026

nerrad marked this pull request as ready for review April 16, 2026 09:59

nerrad marked this pull request as draft April 16, 2026 10:00

nerrad added 4 commits April 16, 2026 11:01

Settings: Add hasAnyMatchingModule selector for search state

b7ad8a8

Aggregate selector that returns true when searchTerm is set and at least one module matches via isModuleFound. This will drive empty-state rendering on the settings screen.

Settings: Add tests for hasAnyMatchingModule selector

ff59f4e

Cover the four key cases: empty search term, unloaded modules state, at least one matching module, and no matching modules.

nerrad force-pushed the fix/JPPROD-105-show-empty-state-message-on-settings-screen branch from 984f03a to ff59f4e Compare April 16, 2026 10:02

nerrad marked this pull request as ready for review April 16, 2026 14:11

nerrad requested review from CGastrell and simison April 16, 2026 14:11

simison reviewed Apr 17, 2026

View reviewed changes

simison approved these changes Apr 17, 2026

View reviewed changes

simison requested a review from keoshi April 17, 2026 10:55

simison merged commit 8c976ec into trunk Apr 17, 2026
75 checks passed

simison deleted the fix/JPPROD-105-show-empty-state-message-on-settings-screen branch April 17, 2026 20:35

github-actions Bot added this to the jetpack/15.8 milestone Apr 17, 2026

github-actions Bot removed [Status] Needs Author Reply We need more details from you. This label will be auto-added until the PR meets all requirements. [Status] In Progress labels Apr 17, 2026

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Settings: Show empty state when search returns no matching settings#48102

Settings: Show empty state when search returns no matching settings#48102
simison merged 4 commits into
trunkfrom
fix/JPPROD-105-show-empty-state-message-on-settings-screen

nerrad commented Apr 15, 2026 •

edited

Loading

Uh oh!

github-actions Bot commented Apr 15, 2026 •

edited

Loading

Uh oh!

jp-launch-control Bot commented Apr 15, 2026 •

edited

Loading

Uh oh!

github-actions Bot commented Apr 16, 2026 •

edited

Loading

Uh oh!

nerrad commented Apr 16, 2026

Uh oh!

simison Apr 17, 2026

Uh oh!

simison Apr 17, 2026

Uh oh!

simison left a comment

Uh oh!

ilonagl commented Apr 17, 2026

Uh oh!

simison commented Apr 17, 2026

Uh oh!

simison commented Apr 17, 2026 •

edited

Loading

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Conversation

nerrad commented Apr 15, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Proposed changes

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

Testing instructions

Uh oh!

github-actions Bot commented Apr 15, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

jp-launch-control Bot commented Apr 15, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Code Coverage Summary

Uh oh!

github-actions Bot commented Apr 16, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

nerrad commented Apr 16, 2026

Uh oh!

simison Apr 17, 2026

Choose a reason for hiding this comment

Uh oh!

simison Apr 17, 2026

Choose a reason for hiding this comment

Uh oh!

simison left a comment

Choose a reason for hiding this comment

Uh oh!

ilonagl commented Apr 17, 2026

Uh oh!

simison commented Apr 17, 2026

Uh oh!

simison commented Apr 17, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

nerrad commented Apr 15, 2026 •

edited

Loading

github-actions Bot commented Apr 15, 2026 •

edited

Loading

jp-launch-control Bot commented Apr 15, 2026 •

edited

Loading

github-actions Bot commented Apr 16, 2026 •

edited

Loading

simison commented Apr 17, 2026 •

edited

Loading