Hello Dolly: normalize centrally, drop per-page duplicates by CGastrell · Pull Request #48472 · Automattic/jetpack

CGastrell · 2026-05-02T18:53:18Z

Part of #49285.

Rebased on trunk. The two PRs this was stacked behind — #48410 (admin-ui 2.0.0) and companion #48471 (AI page mixin) — have both merged, so this is ready for review.

Proposed changes

The AdminPage mixin already shipped a partial Hello Dolly normalize rule (just background-color: #fff, anchored on the jetpack-admin-page body class added server-side by Jetpack's admin menu registration). This PR expands it to the full visual treatment so individual plugin dashboards no longer need per-page overrides.

js-packages/components/components/admin-page/style.module.scss: expand :global(.jetpack-admin-page #dolly) from one line (background-color: #fff) to the full normalize set:
- float: none (break out of Hello Dolly's default float: right)
- padding: 10px, background: #fff
- italic, color: #87a6bc, text-align: right
- border-bottom: none
- hidden at <660px
plugins/boost/app/assets/src/css/main/wp-admin.scss: remove .jetpack_page_jetpack-boost #dolly { background: #fff } (covered by the central rule now).
packages/newsletter/src/settings/style.scss: remove .jetpack_page_jetpack-newsletter #dolly { width: 100%; text-align: right } (covered by the central rule now).

The broad rules in plugins/jetpack/_inc/client/scss/shared/_main.scss (.jetpack-pagestyles #dolly) and admin-static.scss (.wp-admin #dolly) are intentionally left in place — they cover pages that load Jetpack's main admin CSS bundle but not the AdminPage component CSS (e.g. the React Settings/Dashboard pages via wrap_ui).

Why no `position` / `top` / `left` / `right` in the central rule

Inert offsets like position: relative; left: 0; right: 0; top: 0; on a normal-flow <p> element do nothing visible. But they become active on any per-page rule that flips Dolly to position: absolute (e.g. My Jetpack's body.jetpack_page_my-jetpack p#dolly { position: absolute; inset-inline-end: 0; z-index: 2 }). Combined with the offsets, Dolly stretches to the full container width and pins to top, covering the page title. We tested this — see screenshots. The central rule deliberately omits those properties so My Jetpack's absolute-position rule composes cleanly.

Related product discussion/links

Update Admin UI package and adapt to use visual prop for Jetpack logo #48410 (admin-ui 2.0.0) — merged. This PR was stacked behind it.
Companion PR AI page: adopt jetpack-admin-page-layout mixin #48471 (AI page mixin) — merged — addressed a related concern: the AI page didn't include the layout mixin, which exposed the Dolly strip as a visible separator.

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

No

Testing instructions

Hard-refresh wp-admin and visit:

My Jetpack (?page=my-jetpack): Dolly should appear at top-right corner via My Jetpack's position: absolute rule, not as a full-width strip covering the page title.
Boost (?page=jetpack-boost): Dolly normalized — italic, gray, right-aligned, white bg.
Newsletter (?page=jetpack-newsletter): same — italic, gray, right-aligned, white bg.
AI (?page=ai): Dolly normalized.
Mobile (<660px): Dolly hidden everywhere.

Screenshots

This branch

🤖 Generated with Claude Code

github-actions · 2026-05-02T18:53:54Z

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/normalize-hello-dolly-styling branch.
To test on Simple, run the following command on your sandbox:

bin/jetpack-downloader test jetpack update/normalize-hello-dolly-styling

bin/jetpack-downloader test jetpack-mu-wpcom-plugin update/normalize-hello-dolly-styling

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 · 2026-05-02T18:54:21Z

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!

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.

jp-launch-control · 2026-05-02T19:08:07Z

Code Coverage Summary

This PR did not change code coverage!

That could be good or bad, depending on the situation. Everything covered before, and still is? Great! Nothing was covered before? Not so great. 🤷

Full summary · PHP report · JS report

simison · 2026-05-04T10:17:30Z

+
+// We deliberately do NOT set `position`/`top`/`left`/`right` here:
+// those would become active on any per-page rule that flips Dolly to
+// `position: absolute` (e.g. My Jetpack), causing it to stretch to its


Do we necessarily need those My Jetpack custom styles for this or can it also share what we have here?

It's indended, My Jetpack page is gonna be either migrated to use AdminPage (and the mixin) or deleted, but it's a follow up I'll be dealing with next

simison · 2026-05-04T10:18:05Z

+	float: none;
+	padding: 10px;
+	text-align: right;
+	background: #fff;


Let's use the color variable of the header here?

simison · 2026-05-04T10:19:06Z

+	font-size: 12px;
+	font-style: italic;


These seem reduntant as they're already in Hello Dolly.

simison · 2026-05-04T10:19:23Z

+	background: #fff;
+	font-size: 12px;
+	font-style: italic;
+	color: #87a6bc;


Good to use DS token here too

The AdminPage mixin already shipped a partial Hello Dolly normalize rule (`background-color: #fff` only, anchored on the `jetpack-admin-page` body class). Expand it to the full visual treatment so individual plugin dashboards don't need their own per-page overrides. What's covered by the centralized rule now: - float: none (break out of Hello Dolly's default float: right) - padding 10px, white background - italic, gray text (#87a6bc), right-aligned - border-bottom: none - hidden under 660px We deliberately do NOT set position/top/left/right offsets in the central rule — those would become active on any per-page rule that flips Dolly to position: absolute (e.g. My Jetpack), causing it to stretch full-width and pin to top, covering the page title. Per-page rules removed (their content is a subset of the central rule): - plugins/boost: `.jetpack_page_jetpack-boost #dolly { background: #fff }` - packages/newsletter: `.jetpack_page_jetpack-newsletter #dolly { width: 100%; text-align: right }` The broad rules in `plugins/jetpack/_inc/client/scss/shared/_main.scss` (`.jetpack-pagestyles #dolly`) and `admin-static.scss` (`.wp-admin #dolly`) are intentionally left in place — they cover pages that load Jetpack's main admin CSS bundle but not the AdminPage component CSS (e.g. the React Settings/Dashboard via wrap_ui). My Jetpack's own `position: absolute` rule is unaffected; it composes cleanly with the central rule now that no inert position offsets are set.

Address review feedback on the centralized normalize rule: - Drop `font-size: 12px` and `padding: 10px` — Hello Dolly already sets `font-size: 12px` and `padding: 5px 10px` (close enough to ours). Letting Hello Dolly's defaults stand keeps our rule focused on the bits we actually need to differ. - Switch hardcoded `#fff` and `#87a6bc` to WPDS design tokens (`--wpds-color-bg-surface-neutral-strong` and `--wpds-color-fg-content-neutral-weak`) with the original hex as `var()` fallback. Falls back to the previous look until the tokens resolve at body level (admin-ui's ThemeProvider scope), then auto- tracks the surrounding page chrome. Italic stays — not in Hello Dolly defaults, but a Jetpack-side decoration for the song-lyric vibe. Out-of-scope per the review.

github-actions Bot added [JS Package] Components [Package] Newsletter [Plugin] Boost A feature to speed up the site and improve performance. [Status] In Progress RNA labels May 2, 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 May 2, 2026

CGastrell self-assigned this May 4, 2026

CGastrell added [Status] Needs Review This PR is ready for review. and 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 May 4, 2026

CGastrell marked this pull request as ready for review May 4, 2026 03:56

github-actions Bot added the [Status] In Progress label May 4, 2026

simison reviewed May 4, 2026

View reviewed changes

simison mentioned this pull request May 4, 2026

AI: fix menu slug conflict and translated product name #48483

Merged

This was referenced May 4, 2026

My Jetpack: migrate interstitial Buttons to @wordpress/ui #48489

Merged

My Jetpack: adopt jetpack-admin-page-layout mixin on the main page #48503

Merged

CGastrell added 3 commits May 29, 2026 16:32

Stylelint: replace empty // comment with blank line

af3f788

CGastrell force-pushed the update/normalize-hello-dolly-styling branch from 982830a to b360c03 Compare May 29, 2026 20:17

CGastrell mentioned this pull request May 29, 2026

Normalize Hello Dolly across Jetpack admin pages + consistent WPDS token loading #49285

Closed

6 tasks

CGastrell merged commit a9bae73 into trunk Jun 2, 2026
95 checks passed

CGastrell deleted the update/normalize-hello-dolly-styling branch June 2, 2026 12:42

github-actions Bot removed the [Status] In Progress label Jun 2, 2026

github-actions Bot removed the [Status] Needs Review This PR is ready for review. label Jun 2, 2026

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Hello Dolly: normalize centrally, drop per-page duplicates#48472

Hello Dolly: normalize centrally, drop per-page duplicates#48472
CGastrell merged 3 commits into
trunkfrom
update/normalize-hello-dolly-styling

CGastrell commented May 2, 2026 •

edited

Loading

Uh oh!

github-actions Bot commented May 2, 2026 •

edited

Loading

Uh oh!

github-actions Bot commented May 2, 2026 •

edited

Loading

Uh oh!

jp-launch-control Bot commented May 2, 2026 •

edited

Loading

Uh oh!

simison May 4, 2026

Uh oh!

CGastrell May 4, 2026

Uh oh!

simison May 4, 2026

Uh oh!

simison May 4, 2026

Uh oh!

simison May 4, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Conversation

CGastrell commented May 2, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Proposed changes

Why no position / top / left / right in the central rule

Related product discussion/links

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

Testing instructions

Screenshots

Uh oh!

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

Uh oh!

Uh oh!

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

Uh oh!

Uh oh!

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

Uh oh!

Code Coverage Summary

Uh oh!

simison May 4, 2026

Choose a reason for hiding this comment

Uh oh!

CGastrell May 4, 2026

Choose a reason for hiding this comment

Uh oh!

simison May 4, 2026

Choose a reason for hiding this comment

Uh oh!

simison May 4, 2026

Choose a reason for hiding this comment

Uh oh!

simison May 4, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

CGastrell commented May 2, 2026 •

edited

Loading

Why no `position` / `top` / `left` / `right` in the central rule

github-actions Bot commented May 2, 2026 •

edited

Loading

github-actions Bot commented May 2, 2026 •

edited

Loading

jp-launch-control Bot commented May 2, 2026 •

edited

Loading