Coming Soon: updating the fallback page

[ramonjd]

Changes proposed in this Pull Request

This PR swaps the WP logo image with the relative path so it will display on all sites (think Atomic), and namespaces the class names.

We're also removing the test copy for v2. We can tell v2 from v1 by the class names in the source.

As an aside, I also noticed the appearance of two coming soon badges on the site bar. This will happen hopefully only during testing, when you're toggling coming soon v2 on an existing site, but I added a small safeguard to prevent that.

Testing instructions

While sandboxing, run yarn dev --sync in apps/editing-toolkit

Create a new site over at wordpress.com/new?flags=coming-soon-v2

Take a look at the new site in an incognito window. You should see the coming soon page (the class names should be prefixed with wpcom-coming-soon-* and the WordPress logo should be an SVG)

On an existing test site (or one created at wordpress.com/new), make sure you have coming soon enabled. The go to the settings page with the flag enabled, e.g., http://calypso.localhost:3000/settings/general/your_test_site?flags=coming-soon-v2.

You should only see one badge.

[matticbot]

Test live: https://calypso.live/?branch=update/coming-soon-page-tweaks

[matticbot]

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

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

[matticbot]

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

Sections (~224 bytes added 📈 [gzipped])

name                    parsed_size           gzip_size
zoninator                     +15 B  (+0.0%)       +4 B  (+0.0%)
wp-super-cache                +15 B  (+0.0%)       +4 B  (+0.0%)
woocommerce                   +15 B  (+0.0%)       +4 B  (+0.0%)
themes                        +15 B  (+0.0%)       +4 B  (+0.0%)
theme                         +15 B  (+0.0%)       +4 B  (+0.0%)
stats                         +15 B  (+0.0%)       +4 B  (+0.0%)
sites                         +15 B  (+0.0%)       +4 B  (+0.0%)
site-purchases                +15 B  (+0.0%)       +4 B  (+0.0%)
site-blocks                   +15 B  (+0.0%)       +4 B  (+0.0%)
settings-writing              +15 B  (+0.0%)       +4 B  (+0.0%)
settings-security             +15 B  (+0.0%)       +4 B  (+0.0%)
settings-performance          +15 B  (+0.0%)       +4 B  (+0.0%)
settings-jetpack              +15 B  (+0.0%)       +4 B  (+0.0%)
settings-discussion           +15 B  (+0.0%)       +4 B  (+0.0%)
settings                      +15 B  (+0.0%)       +4 B  (+0.0%)
sensei                        +15 B  (+0.0%)       +4 B  (+0.0%)
security                      +15 B  (+0.0%)       +4 B  (+0.0%)
scan                          +15 B  (+0.0%)       +4 B  (+0.0%)
reader                        +15 B  (+0.0%)       +4 B  (+0.0%)
purchases                     +15 B  (+0.0%)       +4 B  (+0.0%)
privacy                       +15 B  (+0.0%)       +4 B  (+0.0%)
preview                       +15 B  (+0.0%)       +4 B  (+0.0%)
posts-custom                  +15 B  (+0.0%)       +4 B  (+0.0%)
posts                         +15 B  (+0.0%)       +4 B  (+0.0%)
plugins                       +15 B  (+0.0%)       +4 B  (+0.0%)
plans                         +15 B  (+0.0%)       +4 B  (+0.0%)
people                        +15 B  (+0.0%)       +4 B  (+0.0%)
pages                         +15 B  (+0.0%)       +4 B  (+0.0%)
notification-settings         +15 B  (+0.0%)       +4 B  (+0.0%)
migrate                       +15 B  (+0.0%)       +4 B  (+0.0%)
media                         +15 B  (+0.0%)       +4 B  (+0.0%)
me                            +15 B  (+0.0%)       +4 B  (+0.0%)
marketing                     +15 B  (+0.0%)       +4 B  (+0.0%)
jetpack-connect               +15 B  (+0.0%)       +4 B  (+0.0%)
jetpack-cloud-settings        +15 B  (+0.0%)       +4 B  (+0.0%)
jetpack-cloud                 +15 B  (+0.0%)       +4 B  (+0.0%)
import                        +15 B  (+0.0%)       +4 B  (+0.0%)
hosting                       +15 B  (+0.0%)       +4 B  (+0.0%)
home                          +15 B  (+0.0%)       +4 B  (+0.0%)
help                          +15 B  (+0.0%)       +4 B  (+0.0%)
hello-dolly                   +15 B  (+0.0%)       +4 B  (+0.0%)
happychat                     +15 B  (+0.0%)       +4 B  (+0.0%)
gutenberg-editor              +15 B  (+0.0%)       +4 B  (+0.0%)
google-my-business            +15 B  (+0.0%)       +4 B  (+0.0%)
export                        +15 B  (+0.0%)       +4 B  (+0.0%)
email                         +15 B  (+0.0%)       +4 B  (+0.0%)
earn                          +15 B  (+0.0%)       +4 B  (+0.0%)
domains                       +15 B  (+0.0%)       +4 B  (+0.0%)
customize                     +15 B  (+0.0%)       +4 B  (+0.0%)
concierge                     +15 B  (+0.0%)       +4 B  (+0.0%)
comments                      +15 B  (+0.0%)       +4 B  (+0.0%)
checkout                      +15 B  (+0.0%)       +4 B  (+0.0%)
backup                        +15 B  (+0.0%)       +4 B  (+0.0%)
activity                      +15 B  (+0.0%)       +4 B  (+0.0%)
account-close                 +15 B  (+0.0%)       +4 B  (+0.0%)
account                       +15 B  (+0.0%)       +4 B  (+0.0%)

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 (~20 bytes added 📈 [gzipped])

name                                                 parsed_size           gzip_size
async-load-signup-steps-site-picker                        +15 B  (+0.0%)       +4 B  (+0.0%)
async-load-design-blocks                                   +15 B  (+0.0%)       +4 B  (+0.0%)
async-load-components-sites-popover                        +15 B  (+0.0%)       +4 B  (+0.0%)
async-load-calypso-components-web-preview-component        +15 B  (+0.0%)       +4 B  (+0.0%)
async-load-calypso-blocks-inline-help-popover              +15 B  (+0.0%)       +4 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.

[roo2]

Tested on atomic and simple sites and this fixes the image issue and the duplicate coming soon issue is fixed too 👍 🚢
I also noticed, that we don't have the "marketting bar" on atomic sites, the one that says "Create your website at wordpress.com". But this fix is good!

[ramonjd]

I also noticed, that we don't have the "marketting bar" on atomic sites, the one that says "Create your website at wordpress.com". But this fix is good!

Thanks for testing!

Yeah, I didn't see one on the current v1 one either. Maybe I'm missing something.