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..882795fc78be 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,33 @@ } } -// 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; + // 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; + } } 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.