Add an optional prop to DocumentHead to set the raw window title

[DanReyLop]

Changes proposed in this Pull Request

The <DocumentHead> component has a title prop, to set the tab title in the browser (document.title). However, on top of whatever title is passed, it applies some extra formatting. For example, passing Hello World as a title can result in a window title being Hello World - WordPress.com (3).

This PR adds a new optional prop, formattedTitle. If present, that string will be used as the raw window title, without any additions.

It also adds an optional pageTitle prop to the JetpackConnectMainWrapper component, that makes use of that prop.

How to test

There's no code that calls JetpackConnectMainWrapper with a pageTitle prop, or DocumentHead with a formattedTitle prop, so there's no way to test this.

Note: This is a required refactor for the new "Woo DNA" flow, implemented in #41798

[matticbot]

Test live: https://calypso.live/?branch=woodna/document-title-override

[matticbot]

Here is how your PR affects size of JS and CSS bundles shipped to the user's browser:

App Entrypoints (~6 bytes added 📈 [gzipped])

name         parsed_size           gzip_size
entry-login        +58 B  (+0.0%)      +10 B  (+0.0%)
entry-main         +17 B  (+0.0%)       -4 B  (-0.0%)

Common code that is always downloaded and parsed every time the app is loaded, no matter which route is used.

Sections (~159 bytes added 📈 [gzipped])

name             parsed_size           gzip_size
jetpack-connect       +286 B  (+0.1%)     +113 B  (+0.1%)
accept-invite         +166 B  (+0.1%)      +46 B  (+0.1%)

Sections contain code specific for a given set of routes. Is downloaded and parsed only when a particular route is navigated to.

Async-loaded Components (~49 bytes added 📈 [gzipped])

name                          parsed_size           gzip_size
async-load-signup-steps-user       +166 B  (+0.1%)      +46 B  (+0.1%)
async-load-design-blocks            +41 B  (+0.0%)       +3 B  (+0.0%)

React components that are loaded lazily, when a certain part of UI is displayed for the first time.

Legend

What is parsed and gzip size?

Parsed Size: Uncompressed size of the JS and CSS files. This much code needs to be parsed and stored in memory.
Gzip Size: Compressed size of the JS and CSS files. This much data needs to be downloaded over network.

Generated by performance advisor bot at iscalypsofastyet.com.

[Aurorum]

I think it may be worth adding this to the existing list of props within the documentation: https://github.com/Automattic/wp-calypso/blob/master/client/components/data/document-head/README.md

[DanReyLop]

Good catch, I missed that! Done in 5751f65

[vbelolapotkov]

Thank you @DanReyLop for that refactoring! Changes look good and fine to be merged like this.
However, to be honest, having two competing title props slightly bothers me. What do you think on having a single title prop and a flag, e.g. skipTitleFormatting or titleIsFormatted. This way IMO it's more explicit that title is always a title and flag emphasizes desired behavior. What do you think?

[DanReyLop]

@vbelolapotkov I implemented your suggestion in 383c41a

I also rebased & force-pushed all the branches that are on top of this one, so woodna/woodna-flow has all the changes included.

[matticbot]

Caution: This PR affects files in the FSE Plugin on WordPress.com
Please ensure your changes work on WordPress.com before merging.

D44535-code has been created so you can easily test it on your sandbox. See this FieldGuide page about developing in the FSE Plugin for more info: PCYsg-ly5-p2

[jsnajdr]

Just to verify: the fallback title, when pageTitle prop is not supplied, is supposed to be formatted? E.g., Jetpack Connect --- WordPress.com (6)?

[DanReyLop]

Yes, that's the existing behaviour.

[vbelolapotkov]

LGTM! Thank you @DanReyLop !

[jsnajdr]

Nice! I also like the skipTitleFormatting API better than the original "raw title" one.