Gutenboarding: Use Card component from package

[sirreal]

Changes proposed in this Pull Request

Remove duplicated/copied Card and use it from @wordpress/components.

Replaced #38607.

Testing instructions

Verify that Gutenboarding still works.

[matticbot]

Test live: https://calypso.live/?branch=remove/gutenboarding-local-card-component-copy-v2

[matticbot]

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

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

Details

name                   parsed_size            gzip_size
entry-main               +141453 B   (+9.2%)   +37193 B  (+10.0%)
entry-login              +141453 B  (+13.9%)   +37191 B  (+14.0%)
entry-domains-landing    +141453 B  (+35.0%)   +37170 B  (+35.1%)
entry-jetpack-cloud       -92803 B  (-38.5%)   -25362 B  (-34.8%)
entry-gutenboarding       +28170 B   (+1.6%)   +12617 B   (+2.6%)

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

Sections (~497357 bytes removed 📉 [gzipped])

Details

name                   parsed_size             gzip_size
posts-custom             -866414 B   (-75.9%)  -209199 B   (-74.8%)
zoninator                -833884 B   (-76.2%)  -194559 B   (-73.4%)
posts                    -219054 B   (-44.2%)   -46141 B   (-39.3%)
me                       -155230 B   (-41.8%)   -25949 B   (-31.0%)
signup                   -134336 B   (-45.9%)   -32415 B   (-44.8%)
site-blocks              -103812 B   (-30.1%)   -22879 B   (-26.3%)
post-editor              -102756 B    (-5.1%)   -20425 B    (-3.8%)
activity                 -102756 B   (-18.3%)   -20425 B   (-15.0%)
devdocs                   +95765 B  (+174.8%)   +26432 B  (+187.3%)
import                    +79917 B   (+65.0%)   +20630 B   (+64.6%)
wp-super-cache            +75707 B   (+51.9%)   +15682 B   (+39.3%)
stats                     -72903 B    (-8.5%)   -16596 B    (-7.9%)
notification-settings     +55918 B   (+22.5%)   +11279 B   (+17.2%)
happychat                 -55754 B   (-18.6%)   -10817 B   (-14.1%)
comments                  -47589 B    (-8.6%)    -7057 B    (-5.7%)
woocommerce               +32188 B    (+1.6%)    +8653 B    (+1.6%)
domains                   +31664 B    (+3.9%)    +4885 B    (+2.6%)
checkout                  +30206 B    (+2.7%)    +6920 B    (+2.5%)
purchases                 +30025 B    (+3.3%)    +6901 B    (+3.2%)
media                     +16779 B    (+4.9%)    +3825 B    (+4.2%)
privacy                   +15185 B    (+7.4%)    +4779 B    (+8.8%)
marketing                  -7109 B    (-1.7%)    -3070 B    (-2.9%)
reader                     +5710 B    (+1.5%)    +2189 B    (+2.2%)

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 (~67224 bytes removed 📉 [gzipped])

Details

name                                                         parsed_size            gzip_size
async-load-design-playground                                   -102756 B   (-5.7%)   -20425 B   (-5.0%)
async-load-design                                               -78027 B   (-4.2%)   -17832 B   (-4.2%)
async-load-design-blocks                                        -72731 B   (-2.6%)   -13524 B   (-2.1%)
async-load-lib-preferences-helper                               -51122 B  (-78.0%)   -13779 B  (-74.8%)
async-load-my-sites-checklist-wpcom-checklist-component-jsx     -19038 B  (-12.6%)    -5304 B  (-14.2%)
async-load-components-web-preview-component                     +15724 B   (+4.8%)    +3093 B   (+3.7%)
async-load-lib-happychat-connection                             -13219 B  (-17.7%)     +547 B   (+3.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.

[chriskmnds]

Still getting some console errors in live preview:

and a SASS error locally (?) - this in particular:

    SassError: SassError: Error: Specified z-index `.edit-post-editor-regions__header` does not exist in the mapping
            on line 133 of node_modules/@wordpress/base-styles/_z-index.scss, in function `z-index`

[sirreal]

Still getting some console errors in live preview:

This should be fixed by using as prop over withComponent method, which doesn't exist as we'd expected 😬

and a SASS error locally (?) - this in particular:

    SassError: SassError: Error: Specified z-index `.edit-post-editor-regions__header` does not exist in the mapping
            on line 133 of node_modules/@wordpress/base-styles/_z-index.scss, in function `z-index`

I suspect this is from a stale package version you have locally. I don't see the issue.

This will create a typecheck error that can safely be ignored, the type definitions need to be updated.

[sirreal]

Fixing/updating type defs: DefinitelyTyped/DefinitelyTyped#41566

[razvanpapadopol]

all good 👌

[sirreal]

Rebased.

[sirreal]

Rebased.

[Addison-Stavlo]

Changes work great on my end as well.