Add title and subtitle to Widget Contexts for Unified Dashboard

[tofumatt]

Feature Description

The Figma mocks for the Unified Dashboard show headings and subheadings for each Widget Area:

We should add the ability to have headings and subheadings for a given Widget Context.

---

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

Acceptance criteria

• The titles and subtitles for the new unified dashboard widget areas (already present in widget area registration) should be actually displayed.
  • This is currently not the case due to an extra condition that prevents them from showing if there's only one widget area in the context.
  • This was a workaround for the Site Kit module pages at the time, which is no longer relevant with the unified dashboard.
  • The logic should be changed so that if the unifiedDashboard feature is enabled the widget area title/subtitle shows regardless of how many widget areas there are.
• It should be double-checked/updated as necessary that the new widget areas for the unified dashboard have the following titles/subtitles (based on the Figma mocks):
  • AREA_MAIN_DASHBOARD_TRAFFIC_PRIMARY: "Find out how your audience is growing" / "Track your site’s traffic over time"
  • AREA_MAIN_DASHBOARD_CONTENT_PRIMARY: "See how your content is doing" / "Keep track of your most popular pages and how people found them from Search"
  • AREA_MAIN_DASHBOARD_SPEED_PRIMARY: "Find out how visitors experience your site" / "Keep track of how fast your pages are and get specific recommendations on what to improve"
  • AREA_MAIN_DASHBOARD_MONETIZATION_PRIMARY: "Find out how much you’re earning from your content" / "Track your AdSense revenue over time"
  • AREA_ENTITY_DASHBOARD_TRAFFIC_PRIMARY: "Find out how your audience is growing" / "Track traffic to this page over time"
  • AREA_ENTITY_DASHBOARD_CONTENT_PRIMARY: "See how your content is doing" / "Understand how people found this page from Search"
  • AREA_ENTITY_DASHBOARD_SPEED_PRIMARY: "Find out how visitors experience this page" / "Keep track of how fast your page is and get specific recommendations on what to improve"
  • AREA_ENTITY_DASHBOARD_MONETIZATION_PRIMARY: "Find out how much you’re earning from your content" / "Track your AdSense revenue over time"

Implementation Brief

In WidgetAreaRenderer component:

• Check whether Unified Dashboard is enabled using the useFeature hook.
• Change the logic that prevents rendering the title and subtitle when there's only one widget to not apply when Unified Dashboard is Enabled. ie. { ( unifiedDashboardEnabled || totalAreas > 1 ) && ( ....

In assets/js/googlesitekit/widgets/register-defaults.js:

• Make sure all the copies of titles and subtitles are in line with the AC. Add/amend as necessary, specially for the unified dashboard contexts.

Test Coverage

• Not needed.

QA Brief

• Ensure the unifiedDashboard feature flag is enabled.
• Ensure the AdSense and PageSpeed modules are set up (at a minimum, more modules are ok).
• Navigate to the Dashboard.
• Verify the title and subtitle copy is present for the four widget areas, as per the AC (the areas prefixed AREA_MAIN_DASHBOARD).
• Navigate to an Entity Dashboard page.
• Verify the title and subtitle copy is present for the three present widget areas, as per the AC (the areas prefixed AREA_ENTITY_DASHBOARD - excluding AREA_ENTITY_DASHBOARD_MONETIZATION_PRIMARY, i.e. the monetization area, which doesn't yet have any widgets registered to it).

Changelog entry

• Add title and subtitle to Widget Contexts for Unified Dashboard pages.

[tofumatt]

@felixarntz I mentioned in the ACs that this text applies to widget contexts, not really widget areas, in part because the areas already have titles/subtitles.

But I think we might also want to update the headings/subheadings across the widget areas too. Do we want to do that as part of this epic too? If so, let me know and I'll file an issue for that as well.

[felixarntz]

@tofumatt Hmm I believe we can keep these titles/subtitles to be on widget areas, or not? The non-unified-dashboard widget areas already have them, but the unified-dashboard widget areas don't have any unless I'm mistaken. Also there's a 1-to-1 mapping between contexts and areas in the unified dashboard, so I think we can simplify the ACs by saying that all this copy should be in the widget area registration. What do you think?

[tofumatt]

@felixarntz My only concern there was styling; the titles and subtitles would appear inside any "composite" widget area. Aside from that: yes, we could keep them.

I suppose we could change the styling of the titles/subtitles when the Unified Dashboard feature flag was on to always show them outside the widget box. If that would be okay then we could simplify this and use those titles/subtitles.

Does that sound okay to you @felixarntz? If so I'll update the ACs 👍🏻

[felixarntz]

@tofumatt

the titles and subtitles would appear inside any "composite" widget area. Aside from that: yes, we could keep them.

Is that true? I think the titles still always display outside of the boxes, see the current Search Funnel widget area which is a composite area. So I don't think we need to worry about changing any styles.

If that sounds good to you, I can update the ACs - I also wanted to incorporate all the exact wording into the ACs. We can take them from the Figma file, but we should put them here, just to make sure we have everything covered (e.g. also versions for the entity dashboard). Having all the copy here gives us an overview about that, and if anything is unclear/missing, we can finalize with @marrrmarrr.

[felixarntz]

@tofumatt I've updated the ACs - I found out the problem here is actually more a bug than that we need to add the titles/subtitles. They are already in the widget area registrations, but somewhat of a "logic flaw" prevents them from being displayed currently. That said, some of the current titles/subtitles are slightly off as well, particularly for the entity dashboard version some adjustments are needed. I added preliminary copy for those, based on the same thing that the copy for the main dashboard says.

@marrrmarrr Can you please review the section titles/subtitles defined in the ACs? For the main dashboard, they are all copied 1-to-1 from the Figma file. For the entity dashboard, I've modified them in an attempt to scope them to the current page rather than the entire site. Please make any updates as needed so that we can move this to IB.

[marrrmarrr]

@felixarntz @tofumatt I had already reviewed the copy for the site-level sections when these designs were initially being reviewed. Made updates for the page-level dashboard.

[felixarntz]

@marrrmarrr I see you added "AdSense" to the copy for the revenue section. Shouldn't we better leave this service-agnostic? I'm asking since one of the original goals has been to move away from too much of the service focus. Maybe "Track your ads revenue over time" or (even less tied to AdSense) "Track your content revenue over time"?

[marrrmarrr]

@felixarntz in the latest UXR study we saw people getting confused with how broad "Revenue" is -- they thought Site Kit would somehow have access to their business ledgers and know the exact amounts from sales or affiliate links etc. So I'm trying to avoid that confusion by being very precise where the revenue is coming from.
AdSense will be the only source for monetisation where we show reporting for the foreseeable future (even when we add SwG, there will be no reporting in Site Kit), so I think it's ok to be specific here.

[eugene-manuilov]

IB ✔️

[wpdarren]

QA Update: ❌

@techanvil @eugene-manuilov here are my observations:

1. There are a number of differences between the dashboard and figma designs. It could be as @felixarntz mentioned that the figma is future proofing, but would like clarification here.

• 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.

2. Looking at the AC, I should see monetisation widgets on the entity dashboard, but no widgets appear here. There isn't a chip for monetization on the entity dashboard. I think it's likely that the AC is wrong but wanted to check.

AREA_ENTITY_DASHBOARD_MONETIZATION_PRIMARY: "Find out how much you’re earning from your content" / "Track your AdSense revenue over time"

3. 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]

Hi @wpdarren, thanks for the review. To address your points:

1. There are a number of differences between the dashboard and figma designs. It could be as @felixarntz mentioned that the figma is future proofing, but would like clarification here.

My interpretation of this ticket, reading the AC and IB, is that this ticket is focused on the copy, not the broader styling. Also it's worth pointing out that the title/subtitle styling in question is essentially the same as on the non-unified dashboard.

That said I could do with a bit of clarification here myself, as to whether this interpretation is correct! Maybe @eugene-manuilov or @tofumatt has some insight?

---

2. Looking at the AC, I should see monetisation widgets on the entity dashboard, but no widgets appear here. There isn't a chip for monetization on the entity dashboard. I think it's likely that the AC is wrong but wanted to check.

At present there are no widgets registered in the monetization area on the Entity Dashboard, so there's nothing in the UI to verify this AC point; I did mention this in the QAB, although maybe it could have been clearer.

---

3. 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.

That's a good spot, I've looked into this and can see the problem is caused by the AdBlockerWarningWidget being registered but (when no adblocker is present) returning null instead of <WidgetNull />, resulting in the empty widget being rendered (along with the grid layout that a widget entails, which is what causes the extra spacing), rather than being completely ignored.

This is the line in question, where null should be replaced with <WidgetNull />:

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

Line 39 in a608bcb

return null;

This does seem outside of the remit of this story and would merit a separate bug ticket, I would have thought. If you're in agreement and would prefer me to raise that ticket, I'd be happy to do so.

[eugene-manuilov]

Thanks, @wpdarren, these are all good points, but as Tom said this is out-of-scope for this ticket. Let's create new issues for your points.

The goal for this ticket is to enable titles and subtitles for widget areas for Unified Dashboard pages and to make some adjustments in copy.

[wpdarren]

@eugene-manuilov @techanvil thank you for checking these. In that case, I will create a ticket for my observations.

QA Update: ✅

Verified:

• Main dashboard: the new widget areas for the unified dashboard have titles/subtitles as per AC.
• Entity dashboard: the new widget areas for the unified dashboard have titles/subtitles as per AC.
• Checked the titles/subtitles appear with no styling issues on smaller screen sizes.
• Made sure that the chips on desktop and mobile jump to the correct placements (above the titles)