Gutenboarding: Use Card and CardMedia from @wordpress/components

[ockham]

Changes proposed in this Pull Request

and remove local copy of Card component.

PR based on #38554. Rebase branch (and base PR on master) once that PR has been merged.

Testing instructions

Verify that Gutenboarding still works.

[matticbot]

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

[matticbot]

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

Webpack Runtime (~59 bytes removed 📉 [gzipped])

name      parsed_size           gzip_size
manifest       -901 B  (-0.5%)      -59 B  (-0.2%)

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

name                 parsed_size           gzip_size
entry-gutenboarding      -1223 B  (-0.1%)    +3371 B  (+0.7%)

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

Sections (~29858 bytes removed 📉 [gzipped])

name              parsed_size            gzip_size
theme               -139480 B  (-35.3%)   -30798 B  (-31.5%)
themes                -2785 B   (-0.9%)     +329 B   (+0.4%)
plugins               -2785 B   (-0.6%)     +329 B   (+0.3%)
hosting               -2785 B   (-1.2%)     +329 B   (+0.5%)
import                -2397 B   (-1.2%)     -655 B   (-1.2%)
gutenberg-editor      +1593 B   (+0.2%)     +460 B   (+0.2%)
checkout               +810 B   (+0.1%)     +176 B   (+0.1%)
signup                 -664 B   (-0.4%)      -28 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.

Async-loaded Components (~2792 bytes removed 📉 [gzipped])

name                                           parsed_size            gzip_size
async-load-signup-steps-import-url-onboarding      -2538 B   (-7.5%)    -1442 B  (-13.8%)
async-load-signup-steps-import-url                 -2538 B  (-10.9%)    -1350 B  (-18.9%)

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]

The TypeScript check is currently failing since this also needs an update of @types/wordpress__components (to include Card, CardMedia, and friends) -- possibly upstream.

[ockham]

The TypeScript check is currently failing since this also needs an update of @types/wordpress__components (to include Card, CardMedia, and friends) -- possibly upstream.

Just checked https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/wordpress__components/, and nope, card ain't there. Nor could I find a PR or issue.

Do we have infrastructure in Gutenberg in place already that produces typedefs for us? Haven't kept track lately 😬 /cc @sirreal @gziolo @aduth

[ockham]

Do we have infrastructure in Gutenberg in place already that produces typedefs for us? Haven't kept track lately /cc @sirreal @gziolo @aduth

Ah here: WordPress/gutenberg#18942.

[ockham]

Adding type defs for Card here: DefinitelyTyped/DefinitelyTyped#41448 (WIP)

[sirreal]

Rebased and pushed an improvement to align with types in DefinitelyTyped/DefinitelyTyped#41448

[sirreal]

Rebased

[sirreal]

Rebased

[sirreal]

With merge/rebase/auto-closing/changing target branch, this got into a state where I couldn't open or change the base branch…

I've move it to a new PR: #38802