Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
CGastrell merged 3 commits into from
Jun 2, 2026
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
d6daf3d
Hello Dolly: normalize centrally, drop per-page duplicates
CGastrell May 2, 2026
af3f788
Stylelint: replace empty // comment with blank line
CGastrell May 4, 2026
b360c03
Hello Dolly: use WPDS tokens, drop properties Hello Dolly already sets
CGastrell May 4, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions projects/js-packages/components/changelog/normalize-hello-dolly-styling
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
Significance: patch
Type: changed

AdminPage: expand the Hello Dolly normalize rule (was a single `background-color`) to cover the full visual treatment (italic, gray text, white background, right-aligned, hidden under 660px) so individual plugins don't need their own per-page overrides. No position/offsets are set so per-page `position: absolute` overrides (e.g. My Jetpack) keep working.
30 changes: 28 additions & 2 deletions projects/js-packages/components/components/admin-page/style.module.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -84,7 +84,33 @@
}
}

// Make Hello Dolly background white for Jetpack admin pages.
// Normalize Hello Dolly across Jetpack admin pages. The plugin renders
// `<p id="dolly">` early inside `#wpbody-content`, OUTSIDE our React
// mount — so we anchor on the `jetpack-admin-page` body class added
// server-side by Jetpack's admin menu registration, not on the React
// wrapper's `.jp-admin-page` class. Any Jetpack admin page gets the
// normalized look for free. Per-page overrides can still layer on top
// via higher-specificity selectors (see e.g. My Jetpack).

// 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
Copy link
Copy Markdown
Member

@simison simison May 4, 2026

Choose a reason for hiding this comment

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

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

Copy link
Copy Markdown
Contributor Author

@CGastrell CGastrell May 4, 2026

Choose a reason for hiding this comment

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

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

// container's full width and pin to top — which covers the page title.
// `float: none` alone is enough to break out of Hello Dolly's default
// `float: right`; pages that need different positioning add their own
// position rule on top.
:global(.jetpack-admin-page #dolly) {
background-color: #fff;
// Hello Dolly already ships `padding: 5px 10px; margin: 0; font-size: 12px;
// line-height: 1.6666;` — see https://github.com/WordPress/WordPress/blob/trunk/wp-content/plugins/hello.php
// We override only the bits that need to differ from those defaults.
float: none;
text-align: right;
background: var(--wpds-color-bg-surface-neutral-strong, #fff);
font-style: italic;
color: var(--wpds-color-fg-content-neutral-weak, #87a6bc);
border-bottom: none;

@media (max-width: 659px) {
display: none;
}
}
4 changes: 4 additions & 0 deletions projects/packages/newsletter/changelog/normalize-hello-dolly-styling
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
Significance: patch
Type: changed

Remove the per-page Hello Dolly rule; its content is now covered by the centralized normalize rule shipped with `@automattic/jetpack-components`'s AdminPage component.
5 changes: 0 additions & 5 deletions projects/packages/newsletter/src/settings/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,11 +19,6 @@ body.jetpack_page_jetpack-newsletter {
box-sizing: border-box;
}

.jetpack_page_jetpack-newsletter #dolly {
width: 100%;
text-align: right;
}

.newsletter-jitm-card {

.jitm-card {
Expand Down
4 changes: 0 additions & 4 deletions projects/plugins/boost/app/assets/src/css/main/wp-admin.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -90,7 +90,3 @@ p {
.jetpack_page_jetpack-boost #jb-admin-settings {
background: #fff;
}

.jetpack_page_jetpack-boost #dolly {
background: #fff;
}
4 changes: 4 additions & 0 deletions projects/plugins/boost/changelog/normalize-hello-dolly-styling
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
Significance: patch
Type: changed

Remove the per-page Hello Dolly rule; its content is now covered by the centralized normalize rule shipped with `@automattic/jetpack-components`'s AdminPage component.
Loading