From d6daf3d15b8fff7f0421c0877ca95005b29b4cc0 Mon Sep 17 00:00:00 2001 From: Christian Gastrell Date: Sat, 2 May 2026 15:52:39 -0300 Subject: [PATCH 1/3] Hello Dolly: normalize centrally, drop per-page duplicates MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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. --- .../changelog/normalize-hello-dolly-styling | 4 +++ .../components/admin-page/style.module.scss | 29 +++++++++++++++++-- .../changelog/normalize-hello-dolly-styling | 4 +++ .../newsletter/src/settings/style.scss | 5 ---- .../app/assets/src/css/main/wp-admin.scss | 4 --- .../changelog/normalize-hello-dolly-styling | 4 +++ 6 files changed, 39 insertions(+), 11 deletions(-) create mode 100644 projects/js-packages/components/changelog/normalize-hello-dolly-styling create mode 100644 projects/packages/newsletter/changelog/normalize-hello-dolly-styling create mode 100644 projects/plugins/boost/changelog/normalize-hello-dolly-styling diff --git a/projects/js-packages/components/changelog/normalize-hello-dolly-styling b/projects/js-packages/components/changelog/normalize-hello-dolly-styling new file mode 100644 index 000000000000..1d35c062701e --- /dev/null +++ b/projects/js-packages/components/changelog/normalize-hello-dolly-styling @@ -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. diff --git a/projects/js-packages/components/components/admin-page/style.module.scss b/projects/js-packages/components/components/admin-page/style.module.scss index e94eb9d9b81d..cc92a45bd38a 100644 --- a/projects/js-packages/components/components/admin-page/style.module.scss +++ b/projects/js-packages/components/components/admin-page/style.module.scss @@ -84,7 +84,32 @@ } } -// Make Hello Dolly background white for Jetpack admin pages. +// Normalize Hello Dolly across Jetpack admin pages. The plugin renders +// `

` 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 +// 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; + float: none; + padding: 10px; + text-align: right; + background: #fff; + font-size: 12px; + font-style: italic; + color: #87a6bc; + border-bottom: none; + + @media (max-width: 659px) { + display: none; + } } diff --git a/projects/packages/newsletter/changelog/normalize-hello-dolly-styling b/projects/packages/newsletter/changelog/normalize-hello-dolly-styling new file mode 100644 index 000000000000..c087c6a5d4ea --- /dev/null +++ b/projects/packages/newsletter/changelog/normalize-hello-dolly-styling @@ -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. diff --git a/projects/packages/newsletter/src/settings/style.scss b/projects/packages/newsletter/src/settings/style.scss index b9ce5b078d06..57d00e155209 100644 --- a/projects/packages/newsletter/src/settings/style.scss +++ b/projects/packages/newsletter/src/settings/style.scss @@ -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 { diff --git a/projects/plugins/boost/app/assets/src/css/main/wp-admin.scss b/projects/plugins/boost/app/assets/src/css/main/wp-admin.scss index ebb7803c71e9..d9219e9e634e 100644 --- a/projects/plugins/boost/app/assets/src/css/main/wp-admin.scss +++ b/projects/plugins/boost/app/assets/src/css/main/wp-admin.scss @@ -90,7 +90,3 @@ p { .jetpack_page_jetpack-boost #jb-admin-settings { background: #fff; } - -.jetpack_page_jetpack-boost #dolly { - background: #fff; -} diff --git a/projects/plugins/boost/changelog/normalize-hello-dolly-styling b/projects/plugins/boost/changelog/normalize-hello-dolly-styling new file mode 100644 index 000000000000..c087c6a5d4ea --- /dev/null +++ b/projects/plugins/boost/changelog/normalize-hello-dolly-styling @@ -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. From af3f788cf03b712cc17443e481480535f80a26f8 Mon Sep 17 00:00:00 2001 From: Christian Gastrell Date: Mon, 4 May 2026 01:01:45 -0300 Subject: [PATCH 2/3] Stylelint: replace empty // comment with blank line --- .../components/components/admin-page/style.module.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/projects/js-packages/components/components/admin-page/style.module.scss b/projects/js-packages/components/components/admin-page/style.module.scss index cc92a45bd38a..16bbb4666ad2 100644 --- a/projects/js-packages/components/components/admin-page/style.module.scss +++ b/projects/js-packages/components/components/admin-page/style.module.scss @@ -91,7 +91,7 @@ // 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 From b360c03450d0e331aa6a959ac91235d9d9f8365f Mon Sep 17 00:00:00 2001 From: Christian Gastrell Date: Mon, 4 May 2026 15:27:06 -0300 Subject: [PATCH 3/3] Hello Dolly: use WPDS tokens, drop properties Hello Dolly already sets MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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. --- .../components/components/admin-page/style.module.scss | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/projects/js-packages/components/components/admin-page/style.module.scss b/projects/js-packages/components/components/admin-page/style.module.scss index 16bbb4666ad2..882795fc78be 100644 --- a/projects/js-packages/components/components/admin-page/style.module.scss +++ b/projects/js-packages/components/components/admin-page/style.module.scss @@ -100,13 +100,14 @@ // `float: right`; pages that need different positioning add their own // position rule on top. :global(.jetpack-admin-page #dolly) { + // 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; - padding: 10px; text-align: right; - background: #fff; - font-size: 12px; + background: var(--wpds-color-bg-surface-neutral-strong, #fff); font-style: italic; - color: #87a6bc; + color: var(--wpds-color-fg-content-neutral-weak, #87a6bc); border-bottom: none; @media (max-width: 659px) {