Update remaining <p> tags to use the new Typography approach. #11266

Feature Description

This is a follow-up issue for #10946.

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

Acceptance criteria

• Remaining occurrences of the hardcoded p tags are replaced with the new P component (that uses Typography under the hood).
• Any duplicated styles that are hardcoded for the replaced paragraphs, but now covered in Typography component styles, are removed.

Implementation Brief

• Search for remaining <p across the codebase and replace it by using P component

  site-kit-wp/assets/js/components/Typography/P.js

  Line 35 in 5d160bf

  export default function P( { type = TYPE_BODY, size, children, ...props } ) {

  • Each default p tag replaced with P component will most likely have default size prop SIZE_MEDIUM, so it will only need replacing of existing p tags with P component.
    • Where adjusting is needed, you can use available props size and type and weight to match the style.
  • Keep the className prop and check for the extra styles targeting the custom classes
    • Remove extra styles if they are overriding the default values for the headings if present (font-weight, font-size, letter-spacing and/or line-height, as well as font-family) where applicable after component has been replaced
• We should treat this issue with a time limit, so after number of paragraphs are replaced within the dedicated time, we should keep opening a follow up issues to keep replacing them until completed.

Test Coverage

• No updates are expected.

QA Brief

• Briefly smoke check as many screens as possible and make note of any text formatting that appears egregiously incorrect. Switch to the release version and double check those elements. Return to execution for any regressions, or open new issues for pre-existing issues. Things to check:
  • Initial setup flow, with Analytics enabled.
  • Dashboard widgets, quickly checking each tab where relevant.
  • Open Select Metrics, poke around, select an invalid number of options and confirm error notices look ok.
  • Open Select Groups and do the same.
  • Open email reports and sharing settings from the header and look around.
  • Step through the feature tour.
  • Go to Settings and check Admin Settings.
  • Connect each service and check their setup steps and settings. Only the plugin side needs to be checked.

Changelog entry

• Update typography for consistency throughout the plugin.