Gutenboarding: add header

[simison]

Adds a basic header canvas with an example button.

As next steps outside this PR we need to somehow ensure that .layout__content and Calypso CSS reset styles don't collide with block editor.

In this PR we introduce a bunch of Gutenberg stylesheets in Calypso, but those should be in future imported via base-styles package, being worked at WordPress/gutenberg#17883.

Testing

• Visit /gutenboarding in development env and confirm that you see a header that doesn't do anything yet. :-)
• Confirm that CSS reset isn't leaking to rest of Calypso

[matticbot]

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

[chriskmnds]

Looks like a bit of a structure emerging. How about something like this for the additional content:

./assets/
- stylesheets/
- stylesheets/main.scss
- stylesheets/gutenberg/
- stylesheets/gutenberg/_animations.scss 
- stylesheets/gutenberg/_breakpoints.scss
- stylesheets/gutenberg/_colors.scss 
- stylesheets/gutenberg/_mixins.scss
- stylesheets/gutenberg/_variables.scss
- stylesheets/gutenberg/_z-index.scss

./src/
- components/
- components/header/
- components/header/index.tsx
- components/header/style.scss
- components/inserter/
- components/inserter/index.tsx 

We can do more with the rest too e.g.

./src/
- lib/
- lib/routing
- lib/routing/index.tsx

./src/
- sections/
- sections/main/
- sections/main/main.tsx {current gutenboard.tsx}
- sections/main/index.tsx {split from controller.tsx}
- sections/create-site/
- sections/create-site/main.tsx {current create-site.tsx}
- sections/create-site/index.tsx {split from controller.tsx}

Happy to move these if we agree (probably do all in a separate PR I guess).

[matticbot]

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

Sections (~196 bytes added 📈 [gzipped])

name           parsed_size           gzip_size
gutenboarding       +753 B  (+0.0%)     +196 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.

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.

[sirreal]

Rebased and targeted to master.

[simison]

All Gutenberg core styles here should be imported from possible future @wordpress/base-styles package (WordPress/gutenberg#17883) instead of copying them over.

[ockham]

With paObgF-BE-p2 in mind, what about replicating edit-post's directory structure more closely? I.e. use a components/ subfolder for the sidebar etc? (Upstream's edit-widgets also does that -- hoping to provide some amount of consistency should we ever converge with core's FSE.)

[simison]

Valid points about components folder @ockham & @chriskmnds! Updated in a050910

[ockham]

LGTM; one minor note.

(I didn't review the styling closely since it seems to be mostly copied from Gutenberg.)