site-kit-wp: Make "New" metric badge layout more consistent between Data Blocks and Report Tables.

Feature Description

Since the implementation of #6904, the “New” badges in Report Tables display above the metric titles. However, the badges in Data Blocks still display beside/below the titles, which is a bit inconsistent, particularly so at narrower viewport sizes. This is most evident on the Entity Dashboard. To illustrate:

The new Report Table layout:

The Data Block layout:

---

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

Acceptance criteria

• The “New” metric badges in Data Blocks should follow the same design as those in the Report Tables.
• Specifically that means the Conversions metric in the Search Traffic widget on the Main Dashboard, and the Engagement Rate metric on the Search Traffic widget and Sessions and Engagement Rate metrics on the Overall Page Metrics widget on the Entity Dashboard should be updated to appear above the metric names instead of beside/below them.

Implementation Brief

Within assets/js/components/DataBlock/index.js:

• Update the badge prop to accept a boolean or React node. If the value true is passed, render a hidden Badge in order to allow the layout to align with a badge-containing Data Block.
• Move the badge above the rendered title.

Within assets/js/modules/search-console/components/dashboard/SearchFunnelWidgetGA4/Overview/index.js and assets/js/modules/analytics/components/dashboard/DashboardOverallPageMetricsWidgetGA4.js:

• Pass true for the badge prop to the DataBlock components which don’t have a “New” badge.

Make additional DOM and CSS changes as necessary to bring the with-badge layout more in line with Report Tables as per the AC. Note, though, that due to the way Data Blocks are designed, it doesn’t make sense to try to right-align the badges/titles, rather they should be left or center-aligned (for the default vs “button” case) as per the existing design.

Finish off this PR: https://github.com/google/site-kit-wp/pull/7008

Test Coverage

• Update VRT reference images as needed.

QA Brief

• Ensure ga4Reporting feature flag is enabled.
• Set up Site Kit on a site with Analytics data and Analytics connected, including GA4 and GA4 data.
• Scroll down to “Search traffic over the last 28 days” and observe the “new” badge above “Conversions”. It should be above the “Conversions” text and not beside it, with no layout issues in the rest of the data blocks/tab selects for the chart, eg.:
• Navigate to the Entity Dashboard, and verify the “new” badge is correctly aligned for the “Engagement Rate” metric on the “Search traffic” widget, and “Sessions” and “Engagement Rate” metrics on the Overall Page Metrics widget.
• Verify these at various breakpoints.

QA Update

• For the followup PR, ensure the title on the All Traffic widget is styled correctly as per https://github.com/google/site-kit-wp/issues/7001#issuecomment-1549298057.

Changelog entry

• Enhance consistency of layouts with “New” badges.