SEO: admin-page style tweaks (canvas, preview cards, sticky tabs)#49874
Merged
Conversation
Apply the off-white canvas to every SEO admin tab via the shared page-shell selector, matching the convention adopted by the Newsletter, Social, and VideoPress dashboards. Bound to a named CSS variable, with the three-layer override (body, .jp-admin-page, .jp-admin-page__page) so each tab inherits the canvas without opting out. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Contributor
|
Are you an Automattician? Please test your changes on all WordPress.com environments to help mitigate accidental explosions.
Interested in more tips and information?
|
Contributor
|
Thank you for your PR! When contributing to Jetpack, we have a few suggestions that can help us test and review your patch:
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:
If you have questions about anything, reach out in #jetpack-developers for guidance! |
Code Coverage SummaryThis 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. 🤷 |
Give `.jetpack-seo-preview__card-body` the `bg-surface-neutral-weak` (#f4f4f4) surface instead of `bg-surface-neutral` (#fcfcfc), which now matches the page canvas and read as white on the white card. The preview image keeps the original surface token. Also broadens the canvas changelog entry to cover the page-wide style tweaks. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
angelablake
changed the title
angelablake
force-pushed
the
add/seo-off-white-page-canvas
branch
from
479fbc6 to
26016fe
Compare
angelablake
added
[Status] Needs Review
Contributor
There was a problem hiding this comment.
Pull request overview
Updates the Jetpack SEO admin UI styling/layout to better match other modernized Jetpack dashboards, improving visual separation and keeping the route-based tab strip sticky while scrolling.
Changes:
- Add an off-white canvas background for the SEO admin page shell so white cards stand out.
- Adjust the social link-preview card body background to a more recessed neutral surface.
- Restructure the SEO dashboard tabs wrapper so the tab strip remains pinned during scroll, with special handling for the full-bleed Content (DataViews) tab.
Reviewed changes
Copilot reviewed 6 out of 6 changed files in this pull request and generated 3 comments.
Show a summary per file
| File | Description |
|---|---|
| projects/packages/seo/changelog/update-seo-admin-page-style-tweaks | Adds a changelog entry describing the SEO admin page visual polish. |
| projects/packages/seo/changelog/fix-seo-sticky-header-tabs | Adds a changelog entry describing the sticky tab strip fix. |
| projects/packages/seo/_inc/screens/settings/style.scss | Tweaks social preview card body background to improve contrast with the page canvas/cards. |
| projects/packages/seo/_inc/dashboard/dashboard-page.tsx | Wraps route content inside the dashboard tab/navigation component. |
| projects/packages/seo/_inc/dashboard/dashboard-nav.tsx | Extends the nav component to render route content within Tabs.Root and adds a CSS hook class. |
| projects/packages/seo/_inc/admin-page-layout.scss | Introduces canvas background styling and tab/root layout rules (including a flush/content-specific layout path). |
| Significance: patch | ||
| Type: changed | ||
|
|
||
| Visual polish for the SEO admin pages: a slightly off-white (#fcfcfc) page canvas so the white settings cards stand out (matching the Newsletter, Social, and VideoPress dashboards), and a recessed gray body on the social link-preview card so its content reads apart from the card and the page. |
Comment on lines
+24
to
+28
| * The route's content is rendered as `children` INSIDE `Tabs.Root`, so the | ||
| * sticky tab strip's containing block spans the full page height and stays | ||
| * pinned while the content scrolls. This mirrors the modernized Newsletter and | ||
| * VideoPress dashboards; rendering the content as a sibling of `Tabs.Root` | ||
| * leaves the strip in a strip-height containing block and it unsticks on scroll. |
Comment on lines
+206
to
+209
| // Recessed surface (`#f4f4f4`) rather than `bg-surface-neutral` (#fcfcfc): | ||
| // the latter now matches the page canvas and reads as white on the white | ||
| // card, so the link-preview body needs the darker step to stand apart from | ||
| // both the card and the page. The image keeps `bg-surface-neutral`. |
angelablake
force-pushed
the
add/seo-off-white-page-canvas
branch
from
26016fe to
28548db
Compare
| Significance: patch | ||
| Type: changed | ||
|
|
||
| Visual polish for the SEO admin pages: a slightly off-white (#fcfcfc) page canvas so the white settings cards stand out (matching the Newsletter, Social, and VideoPress dashboards), and a recessed gray body on the social link-preview card so its content reads apart from the card and the page. |
Comment on lines
+24
to
+28
| * The route's content is rendered as `children` INSIDE `Tabs.Root`, so the | ||
| * sticky tab strip's containing block spans the full page height and stays | ||
| * pinned while the content scrolls. This mirrors the modernized Newsletter and | ||
| * VideoPress dashboards; rendering the content as a sibling of `Tabs.Root` | ||
| * leaves the strip in a strip-height containing block and it unsticks on scroll. |
angelablake
force-pushed
the
add/seo-off-white-page-canvas
branch
from
28548db to
2ad07cb
Compare
| Significance: patch | ||
| Type: changed | ||
|
|
||
| Visual polish for the SEO admin pages: a slightly off-white (#fcfcfc) page canvas so the white settings cards stand out (matching the Newsletter, Social, and VideoPress dashboards), and a recessed gray body on the social link-preview card so its content reads apart from the card and the page. |
Comment on lines
+24
to
+28
| * The route's content is rendered as `children` INSIDE `Tabs.Root`, so the | ||
| * sticky tab strip's containing block spans the full page height and stays | ||
| * pinned while the content scrolls. This mirrors the modernized Newsletter and | ||
| * VideoPress dashboards; rendering the content as a sibling of `Tabs.Root` | ||
| * leaves the strip in a strip-height containing block and it unsticks on scroll. |
Render the route content inside `Tabs.Root` (passed as `children`), mirroring the modernized Newsletter and VideoPress dashboards, so the sticky `.jp-admin-page-tabs` strip has a full-height containing block and stays pinned while the content scrolls. SEO is route-based (no `Tabs.Panel`), so previously the content was a sibling of `Tabs.Root` and the strip's containing block was only strip-height — it unstuck on the first scroll. `.jetpack-seo-tabs` is `flex: 0 0 auto` (sizes to full content height so the strip pins the whole way down), with a `:has(.jetpack-seo-page-content--flush)` branch that re-applies the layout mixin's fill treatment to the full-bleed Content (DataViews) tab's content div — reproducing the exact context it had as a direct page-column child, leaving that tab unchanged. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
angelablake
force-pushed
the
add/seo-off-white-page-canvas
branch
from
2ad07cb to
efd1faf
Compare
github-actions
Bot
removed
the
[Status] Needs Review
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Fixes # N/A
Tracking issue: JETPACK-1764
Proposed changes
A few visual-polish tweaks to the modernized Jetpack SEO admin pages, so they read more clearly and stay consistent with the other recently-refreshed dashboards (Newsletter, Social, VideoPress).
#fcfcfc(via--jetpack-seo-page-bg-canvas) on every SEO tab so the white settings cards stand out instead of white-on-white. Matches the Newsletter/Social/VideoPress convention.__card-body(domain/title/description block) usedbg-surface-neutral, which now matches the canvas and read as white on the white card. Stepped it tobg-surface-neutral-weakso it reads as a recessed panel, distinct from both the card and the page. The preview image is unchanged.Tabs.Rootwrapped only the strip and its sticky containing block was strip-height. Fixed by rendering the route content insideTabs.Root(passed aschildren) — mirroring the Newsletter and VideoPress dashboards — so the strip's containing block spans the full page..jetpack-seo-tabsisflex: 0 0 autofor the scrolling tabs, with a:has(.jetpack-seo-page-content--flush)branch that re-applies the layout mixin's fill treatment to the full-bleed DataViews Content tab so it is unchanged.CSS + small markup change (content moved inside
Tabs.Root); no behavior/logic changes.Related product discussion/links
Does this pull request change what data or activity we track or use?
No.
Testing instructions