Design differences on widget title and subtitle for Unified Dashboard

[wpdarren]

Bug Description

While QA'ing #4340 I noticed a few observations, which I understand are out of scope for that ticket.

There are a number of differences between the titles/subtitles on the main and entity dashboard and figma designs.

• Title: the font size, color and weight is different between dashboard and figma designs.
• Subtitle: the font size and color is different between dashboard and figma designs. It is hard to read currently.
• The line height between the title and subtitle is different between dashboard and figma designs.
• The line height between the subtitle and widget is different between dashboard and figma designs.

Looking at Monetization on the main dashboard, there's a larger space between the subtitle and the widget compared with other areas. It might be because I do not have any ad impressions. @techanvil made an observation on what could be the cause here

---

Do not alter or remove anything below. The following sections will be managed by moderators only.

Acceptance criteria

• There should not be a gap between the Monetization header and its widget context/area
• As spotted by @techanvil here, AdBlockerWarningWidget should return <WidgetNull /> instead of null to ensure the spacing is correct and an "empty" widget is not rendered

Implementation Brief

• Replace

  site-kit-wp/assets/js/modules/adsense/components/dashboard/AdBlockerWarningWidget.js

  Line 39 in a608bcb

  return null;

  with <WidgetNull /> to ensure the widget is not rendered when no AdBlocker is detected.

Test Coverage

• No tests should need updating; VRTs might need updating.

QA Brief

• Spacing on the AdSense dashboard should be in line with other widget context/areas, eg:

Changelog entry

• Fix visual gap on AdSense dashboard added by adblocker warning widget when no adblocker is detected.

[eugene-manuilov]

IB ✔️

[wpdarren]

@kuasha420 @tofumatt @felixarntz are we just fixing the gap between the Monetization header and its widget context/area?

Was wondering about the other areas in the ticket, i.e. font sizes, line heights, etc. If these differences to the figma designs are expected please could someone confirm and I can make sure its included in our known issues list because these will be brought up in the bug bash. Thanks!

[kuasha420]

@wpdarren AC/IB doesn't mention changing the font styles, I'd think we can add that to Bug Bash as known issues.

[wpdarren]

@kuasha420 yes, I thought that might be the case, I will add as known issues. Thank you for clarifying!

[wpdarren]

QA Update: ✅

Verified:

• Spacing on the AdSense dashboard should be in line with other widget context/areas
• Checked the widgets on desktop and smaller screen sizes.