Signup: Use preventWidows on mockup title and tagline.

[michaeldcain]

Some of the larger-font site styles (Calm and Sophisticated) have title and tagline wrapping issues. On the end site, these values will be filtered through widont, so we can use preventWidows for the mockups.

Before:	After:

To Test:

• visit wordpress.com/start/onboarding/
• select "business" segment
• leave the site title alone
• on the site style step, try the different styles
• select "Calm" and navigate back to the site title step
• try different title with the "Calm" style applied

[matticbot]

Test live: https://calypso.live/?branch=fix/signup-mockup-widows

[matticbot]

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

Sections (~69 bytes added 📈)

name    parsed_size           gzip_size
signup        +69 B  (+0.1%)      +18 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.

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.

[jblz]

I'm seeing the new wrap format on a live branch & it works well for some longer site names, but it was pretty easy to make the text slide off the right side at the mobile breakpoint (e.g. entering Your Groovycool Website):

In prod, this just wraps down like so:

...so, seems like a regression.

[ramonjd]

I just rebased this on top of the site information deletion changes

I'm seeing the new wrap format on a live branch & it works well for some longer site names, but it was pretty easy to make the text slide off the right side at the mobile breakpoint (e.g. entering Your Groovycool Website)

Looks like preventWidows^ is adding a \xA0 ( ) between the last two words.

Maybe we should leave it off for the mobile view, and allow the words to wrap? The mobile view is restricted to a width of 280px, which it narrower than our target devices.

Or – 😱– leave it out altogether, since it's introducing a text effect that won't exist in the theme a user chooses regardless.

Making the preview look nice is a worthy goal however, so I don't want to 💩on the motivations behind this PR. But I can if that's your thing.

^ sounds like an invulnerability drug for married people

[shaunandrews]

Using preventWidows() on the title seems to be more trouble than its worth. I do think it makes sense for the tagline, though.

[michaeldcain]

since it's introducing a text effect that won't exist in the theme a user chooses regardless.

Thanks for pointing this out. We don't widont the title on mobile (theme-optimizations.php#326). Closing.