Skip to content

Fix sidebar free upsell color on problematic admin color schemes#47903

Merged
simison merged 13 commits intotrunkfrom
fix/sidebar-free-upsell-color
Apr 2, 2026
Merged

Fix sidebar free upsell color on problematic admin color schemes#47903
simison merged 13 commits intotrunkfrom
fix/sidebar-free-upsell-color

Conversation

@simison
Copy link
Copy Markdown
Member

@simison simison commented Apr 2, 2026 •
edited
Loading

Follow-up to #47418

Proposed changes

  • Moves styles (that were slightly larger) to a CSS file, which then gets cached across admin page loads instead of being inlined. The logic of CSS building from variables is a bit easier to reason about in SASS rather than PHP (which I tested).
  • Continues to apply Jetpack green color to admin color schemes: fresh, light, modern
  • Applies custom color on following color schemes: coffee, ectoplasm, midnight
  • All other color schemes (sunrise, ocean, blue and any custom ones) continue get their regular menu color, but the item is still set to font-weight 600.

Alternatively, we could pull the colour scheme user-option and output styles only for active colour scheme, but then switching from one colour scheme to another wouldn't work, logic would all be in PHP, etc. And now the CSS gets cached anyway.

Before

Some color schemes had issues like these:

image

After

Jetpack green : fresh, light, modern

Screenshot 2026-04-02 at 15 33 30 Screenshot 2026-04-02 at 15 33 45 Screenshot 2026-04-02 at 15 33 38

Custom color: coffee, ectoplasm, midnight

Screenshot 2026-04-02 at 15 34 15 Screenshot 2026-04-02 at 15 34 07 Screenshot 2026-04-02 at 15 33 59

Other color schemes: sunrise, ocean, blue

Screenshot 2026-04-02 at 15 34 30 Screenshot 2026-04-02 at 15 34 22 Screenshot 2026-04-02 at 15 33 52

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

  • Test site with plan and without plan; you can see the menu and CSS stylesheet load only when on the free plan.
  • Go to Users → Profile: test all color schemes and see the Jetpack menu.
  • Save one of the color schemes and see how color continues to apply across different pages.

@simison simison requested review from a team, DevinWalker and keoshi April 2, 2026 12:36
@simison simison added Bug When a feature is broken and / or not performing as intended [Status] Needs Review This PR is ready for review. labels Apr 2, 2026
@simison simison changed the title Fix/sidebar free upsell color Fix sidebar free upsell color on problematic admin color schemes Apr 2, 2026
@github-actions
Copy link
Copy Markdown
Contributor

github-actions bot commented Apr 2, 2026 •
edited
Loading

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 fix/sidebar-free-upsell-color branch.
  • To test on Simple, run the following command on your sandbox:
bin/jetpack-downloader test jetpack fix/sidebar-free-upsell-color

bin/jetpack-downloader test jetpack-mu-wpcom-plugin fix/sidebar-free-upsell-color

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

@simison simison mentioned this pull request Apr 2, 2026
Merged
4 tasks
@github-actions
Copy link
Copy Markdown
Contributor

github-actions bot commented Apr 2, 2026 •
edited
Loading

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.

@github-actions github-actions bot added [Status] Needs Author Reply We need more details from you. This label will be auto-added until the PR meets all requirements. and removed [Status] Needs Review This PR is ready for review. labels Apr 2, 2026
@simison
Copy link
Copy Markdown
Member Author

simison commented Apr 2, 2026

@keoshi lemme know if you'd have colors for sunrise, ocean, and blue; very easy to apply! For others problematic ones, I used one of the actual colors from those schemes.

@jp-launch-control
Copy link
Copy Markdown

jp-launch-control bot commented Apr 2, 2026 •
edited
Loading

Code Coverage Summary

Coverage changed in 1 file.

File Coverage Δ% Δ Uncovered
projects/packages/admin-ui/src/class-admin-menu.php 103/127 (81.10%) 0.77% 0 💚

Full summary · PHP report · JS report

CGastrell and others added 2 commits April 2, 2026 12:21
@CGastrell @claude
Add build-development and build-production composer scripts for admin-ui
ec35a3c 
Without these, jetpack build packages/admin-ui skips the webpack build
and the CSS asset is never generated, causing a 404 at runtime.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
@CGastrell @claude
Add changelog for admin-ui sidebar color fix
40ce22e 
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
CGastrell
CGastrell previously approved these changes Apr 2, 2026
View reviewed changes
Copy link
Copy Markdown
Contributor

@CGastrell CGastrell left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is a nice follow up! At first I couldn't make it work, I added ec35a3c so the package is built alongside the others, let me know if this wasn't the intention for some reason.

Otherwise, good to go! :shipit:

@simison
Copy link
Copy Markdown
Member Author

simison commented Apr 2, 2026

Thanks! Yeah, I was building with jetpack build packages/admin-ui so it went unnoticed to me that this should be added to composer.json.

@simison simison requested a review from a team as a code owner April 2, 2026 16:39
@github-actions github-actions bot added [Plugin] Automattic For Agencies Client [Plugin] Backup A plugin that allows users to save every change and get back online quickly with one-click restores. labels Apr 2, 2026
@github-actions github-actions bot added [Plugin] Beta For serving live branches and the beta versions. https://github.com/automattic/jetpack-beta [Plugin] Boost A feature to speed up the site and improve performance. [Plugin] Classic Theme Helper Plugin [Plugin] Inspect [Plugin] Jetpack Issues about the Jetpack plugin. https://wordpress.org/plugins/jetpack/ [Plugin] mu wpcom jetpack-mu-wpcom plugin [Plugin] Paypal Payment Buttons [Plugin] Protect A plugin with features to protect a site: brute force protection, security scanning, and a WAF. [Plugin] Search A plugin to add an instant search modal to your site to help visitors find content faster. [Plugin] Social Issues about the Jetpack Social plugin [Plugin] Starter Plugin [Plugin] VideoPress A standalone plugin to add high-quality VideoPress videos to your site. [Plugin] Wpcloud Sso [Plugin] Wpcomsh labels Apr 2, 2026
@anomiex
Copy link
Copy Markdown
Contributor

anomiex commented Apr 2, 2026

Looks reasonable from a monorepo perspective; you may want to consider adding production-exclude entries for /webpack.config.js and src/**.scss to projects/packages/admin-ui/.gitattributes though, so they don't needlessly wind up in vendor/ dirs.

(re webpack.config.js, see also #47365 (comment))

anomiex
anomiex reviewed Apr 2, 2026
View reviewed changes
@keoshi
Copy link
Copy Markdown
Contributor

keoshi commented Apr 2, 2026

Looks ok @simison. I apologize for the back and forth on this, but the more I think about this, the more it feels we should push for a more branded solution.

This would allow us to control the appearance of the element better, ensuring proper readability and legibility, regardless of theme. It also unifies the appearance vs adding exceptions for every single theme. By the way, the themes above are the ones that are widely available, but that doesn't mean they fully represent what's out there.

What do you think about this?

image

And feel free to pushback if you think there's good reason to stick to links and optimize their color for each known theme.

@simison
Copy link
Copy Markdown
Member Author

simison commented Apr 2, 2026

@keoshi no problem at all! I'll get this in meanwhile to fix trunk in case this makes it to the release (since it's already next week), and then we can work on the v2 like in your designs right next up!

@simison simison merged commit a81bff1 into trunk Apr 2, 2026
91 checks passed
@simison simison deleted the fix/sidebar-free-upsell-color branch April 2, 2026 18:58
@github-actions github-actions bot removed 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 2, 2026
@simison simison mentioned this pull request Apr 2, 2026
Merged
1 task
@simison
Copy link
Copy Markdown
Member Author

simison commented Apr 2, 2026

@keoshi let's continue refining in #47909

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@anomiex anomiex anomiex left review comments

@CGastrell CGastrell CGastrell left review comments

@keoshi keoshi Awaiting requested review from keoshi

@DevinWalker DevinWalker Awaiting requested review from DevinWalker

Assignees

No one assigned

Labels

Bug When a feature is broken and / or not performing as intended [Package] Admin Ui [Plugin] Automattic For Agencies Client [Plugin] Backup A plugin that allows users to save every change and get back online quickly with one-click restores. [Plugin] Beta For serving live branches and the beta versions. https://github.com/automattic/jetpack-beta [Plugin] Boost A feature to speed up the site and improve performance. [Plugin] Classic Theme Helper Plugin [Plugin] Inspect [Plugin] Jetpack Issues about the Jetpack plugin. https://wordpress.org/plugins/jetpack/ [Plugin] mu wpcom jetpack-mu-wpcom plugin [Plugin] Paypal Payment Buttons [Plugin] Protect A plugin with features to protect a site: brute force protection, security scanning, and a WAF. [Plugin] Search A plugin to add an instant search modal to your site to help visitors find content faster. [Plugin] Social Issues about the Jetpack Social plugin [Plugin] Starter Plugin [Plugin] VideoPress A standalone plugin to add high-quality VideoPress videos to your site. [Plugin] Wpcloud Sso [Plugin] Wpcomsh [Tests] Includes Tests

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

4 participants

@simison @anomiex @keoshi @CGastrell