Sidebar upsell nudge: update visually

[simison]

Follow-up to #47903

Desktop

Mobile

Proposed changes

• Update design for the upsell nudge in the sidebar.

Before

Desktop

Mobile

Other information

• Generate changelog entries for this PR (using AI).

Related product discussion/links

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

Testing instructions

• jetpack build packages/admin-ui or jetpack watch packages/admin-ui if you wanna tweak CSS.
• Site without a plan, or in should_show_upgrade_menu() just return true and don't commit ;-)
• See the sidebar; test the heck out of it in different screen sizes, admin color schemes, etc
• You can swap color schemes from Users -> Profile

[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 or WordPress.com Site Helper), and enable the update/sidebar-upsell-visual-update branch.
• To test on Simple, run the following command on your sandbox:

bin/jetpack-downloader test jetpack update/sidebar-upsell-visual-update

bin/jetpack-downloader test jetpack-mu-wpcom-plugin update/sidebar-upsell-visual-update

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!

---

Beta plugin:

No scheduled milestone found for this plugin.

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

---

Jetpack plugin:

No scheduled milestone found for this plugin.

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

---

Backup plugin:

No scheduled milestone found for this plugin.

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

---

Boost plugin:

No scheduled milestone found for this plugin.

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

---

Search plugin:

No scheduled milestone found for this plugin.

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

---

Social plugin:

No scheduled milestone found for this plugin.

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

---

Starter Plugin plugin:

No scheduled milestone found for this plugin.

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

---

Protect plugin:

No scheduled milestone found for this plugin.

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

---

Videopress plugin:

No scheduled milestone found for this plugin.

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

---

Mu Wpcom plugin:

• Next scheduled release: WordPress.com Simple releases happen semi-continuously (PCYsg-Jjm-p2)

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

---

Inspect plugin:

No scheduled milestone found for this plugin.

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

---

Wpcomsh plugin:

• Next scheduled release: Atomic deploys happen twice daily on weekdays (p9o2xV-2EN-p2)

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

---

Automattic For agencies client plugin:

No scheduled milestone found for this plugin.

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

---

Classic Theme helper plugin plugin:

No scheduled milestone found for this plugin.

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

---

Paypal Payment buttons plugin:

No scheduled milestone found for this plugin.

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

---

Wpcloud Sso plugin:

No scheduled milestone found for this plugin.

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

[simison]

@keoshi, current state, not bad! I added some hover too.

Screen.Recording.2026-04-02.at.22.17.02.mov

I didn't refine the font weight/size/spacing exactly like in your design yet.

Couple of issues:

When in submenu, and I suppose when translated to longer text, banner becomes two rows:

Blue color scheme still doesn't look amazing but others look much better:

[simison]

Aight, pushed some changes:

• No bold font
• Gave more space above, took some space from the sides
• Enforced single line, cuts with … but can be pretty long before it happens, so very unlikely.

[keoshi]

Looks great already! Thanks so much for this, @simison.

Do you think we should lose the external icon? A button already implies an action.

If we do that we could also center the text on the button.

[jp-launch-control]

Code Coverage Summary

Coverage changed in 1 file.

File	Coverage	Δ%	Δ Uncovered
projects/packages/admin-ui/src/class-admin-menu.php	102/126 (80.95%)	-0.15%	0 💚

Full summary · PHP report · JS report

[simison]

No strong opinion about the ↗ but I centered the text anyway:

[simison]

Here's "Upgrade Jetpack" in different languages (via):

Locale	Translation
ar	ترقية Jetpack
de	Jetpack-Upgrade durchführen
el	Αναβάθμιση Jetpack
fr	Mettre Jetpack à niveau
he	שדרוג Jetpack
id	Upgrade Jetpack
it	Aggiorna Jetpack
ja	Jetpack をアップグレード
ko	젯팩 업그레이드
nb	Oppgradering av Jetpack
nl	Jetpack upgraden
pl	Zaktualizuj Jetpack
pt-br	Fazer upgrade do Jetpack
ro	Actualizează Jetpack
ru	Обновить Jetpack
skr	جیٹ پیک اپ گریڈ کرو
sq	Përmirësojeni Jetpack-un
sv	Uppgradera Jetpack
th	อัปเกรด Jetpack
tr	Jetpack'i yükselt
vi	Nâng cấp Jetpack
zh-cn	升级 Jetpack
zh-tw	升級 Jetpack

Some screenshot examples:

So I took one-line forcing off (but added text-wrap: pretty):

I'd just like to avoid this, which either requires removing the arrow or doing something else, not sure what yet:

[simison]

Text-wrap "balance" instead of "pretty" works pretty well (and is also supported by Firefox unlike "pretty").

These look better now:

[keoshi]

That looks solid, @simison. I think I'd still lean on no character, but I'm ok with it. (A reminder that the external icon is generally used in buttons, not the character)

I'm spotting a stay 1 next to Upgrade (Upgrade1), is that intended for testing purposes?

[simison]

I'm spotting a stay 1 next to Upgrade (Upgrade1), is that intended for testing purposes?

Yep, just to mock a situation where the character length of the translated copy just so happens to bump only ↗ to the next line.

[simison]

@keoshi I removed the arrow:

Let's merge? :-)

[anomiex]

@simison requested a review from Automattic/jetpack-monorepo as a code owner 2 hours ago

Looks fine from a monorepo perspective. I'll tweak that codeowners setting, GitHub really didn't need to ping us just for composer.lock. 😀

Visually, I personally think this looks better than the previous from the screenshots. 🙂

I do note one oddity though (which may be an issue for a separate PR): If I have only Jetpack Beta Tester installed, the "Upgrade" button still shows up. Since that plugin itself doesn't need a Jetpack plan at all, the upgrade button seems a bit out of place. I don't know if any of our other plugins are in the same situation; I do confirm that Automattic for Agencies Client and Classic Theme Helper Plugin on their own don't add a Jetpack menu in the first place, so no out-of-place button for them.

[simison]

Mobile version screenshot:

[keoshi]

Looks good! Thanks for including these changes, @simison — appreciate you!