Gutenboarding: Add top-down Gutenboarding experiment

[ockham]

Changes proposed in this Pull Request

Top-down approach to get Gutenberg working in Calypso.

Currently failing with

ERROR in ./client/gutenboarding-topdown/editor.js
Module not found: Error: Can't resolve '@wordpress/edit-post/build-module/components/edit-post-settings' in '~/src/wp-calypso/client/gutenboarding-topdown'

-- probably because that file is missing from our the currently used @wordpress/ packages? See #36583.

Testing instructions

TBD

[matticbot]

Test live: https://calypso.live/?branch=add/gutenboarding-topdown

[matticbot]

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

Webpack Runtime (~280 bytes added 📈 [gzipped])

name      parsed_size           gzip_size
manifest      +2031 B  (+1.2%)     +280 B  (+0.9%)

Webpack runtime for loading modules. It is included in the HTML page as an inline script. Is downloaded and parsed every time the app is loaded.

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

name         parsed_size           gzip_size
entry-main        +983 B  (+0.1%)      +48 B  (+0.0%)
entry-login        +43 B  (+0.0%)       +8 B  (+0.0%)

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

Sections (~371107 bytes added 📈 [gzipped])

name                   parsed_size           gzip_size
gutenboarding-topdown   +1437338 B    (new)  +370717 B    (new)
gutenboarding              +5989 B  (+0.4%)    +2183 B  (+0.5%)
settings-writing            -347 B  (-0.1%)     -952 B  (-0.8%)
settings                    -258 B  (-0.0%)      -42 B  (-0.0%)
purchases                   +155 B  (+0.0%)     +305 B  (+0.1%)
devdocs                      +89 B  (+0.1%)       -7 B  (-0.0%)
stats                        +86 B  (+0.0%)     -172 B  (-0.1%)
post-editor                  +82 B  (+0.0%)     -886 B  (-0.2%)
gutenberg-editor             -39 B  (-0.0%)      -34 B  (-0.0%)
plans                        -20 B  (-0.0%)       +1 B  (+0.0%)
google-my-business           -18 B  (-0.0%)       -4 B  (-0.0%)
posts-pages                  -12 B  (-0.0%)       +0 B
posts-custom                 -12 B  (-0.0%)       +0 B
media                        -12 B  (-0.0%)       -2 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 (~780 bytes removed 📉 [gzipped])

name                                parsed_size           gzip_size
async-load-post-editor-media-modal       -182 B  (-0.1%)     -282 B  (-0.4%)
async-load-design-playground             +134 B  (+0.0%)     +139 B  (+0.0%)
async-load-design-blocks                  +82 B  (+0.0%)     +226 B  (+0.0%)
async-load-design                         +76 B  (+0.0%)     -863 B  (-0.2%)

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.

[ockham]

Closing; we're sticking with bottom-up.