Upgrade WordPress monorepo

[jsnajdr]

A fresh attempt to land changes from #46223.

Upgrades all @wordpress/* packages except @wordpress/scripts. That package triggers a Babel update, too, and causes too many changes in yarn.lock. We can do it in a separate PR.

The upgrades packages are deduplicated.

Contains all the SASS color name changes from #46223 caused by @wordpress/base-styles upgrade, squashed into one commit.

Contains my unit test fixes and also @sirreal's react-i18n typing upgrades.

@sirreal one thing I'm not 100% sure about: the new @wordpress/* packages all have published types. Does that mean we can remove all @types/wordpress__* dependencies now? They should be redundant.

Fixes #48585

[matticbot]

Test live: https://calypso.live/?branch=upgrade/wordpress-monorepo

[matticbot]

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

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

name      parsed_size           gzip_size
manifest       -377 B  (-0.5%)      -14 B  (-0.1%)

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

name                   parsed_size           gzip_size
entry-gutenboarding       +28015 B  (+1.6%)    +9038 B  (+2.0%)
entry-main                 +3027 B  (+0.2%)      +66 B  (+0.0%)
entry-login                +1023 B  (+0.1%)     +224 B  (+0.1%)
entry-domains-landing       -220 B  (-0.0%)      -20 B  (-0.0%)

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

Sections (~150250 bytes added 📈 [gzipped])

name                          parsed_size            gzip_size
earn                             +45427 B  (+13.8%)   +16381 B  (+18.6%)
domains                          +44781 B   (+3.5%)   +16039 B   (+5.4%)
jetpack-cloud-partner-portal     +41499 B  (+13.1%)   +16068 B  (+20.2%)
plugins                          +41175 B   (+8.9%)   +16580 B  (+13.8%)
wp-super-cache                   +41106 B  (+15.7%)   +15630 B  (+22.2%)
privacy                          +41047 B  (+13.4%)   +15325 B  (+18.5%)
settings-security                +40928 B  (+11.8%)   +14381 B  (+15.1%)
settings-discussion              +40928 B  (+15.0%)   +14386 B  (+19.4%)
posts                            +40895 B  (+10.1%)   +13305 B  (+11.8%)
posts-custom                     +40879 B  (+10.1%)   +14442 B  (+12.8%)
settings-writing                 +40853 B   (+7.2%)   +14014 B   (+9.6%)
settings-performance             +40813 B  (+10.0%)   +13756 B  (+12.6%)
marketing                        +40801 B   (+7.1%)   +13451 B   (+9.1%)
jetpack-cloud-pricing            +39769 B   (+9.3%)   +15371 B  (+13.6%)
site-purchases                   +23587 B   (+1.9%)    +7395 B   (+2.4%)
purchases                        +23536 B   (+1.6%)    +7204 B   (+2.0%)
settings                         +17068 B   (+2.7%)    +5806 B   (+3.4%)
woocommerce                      +16840 B   (+0.7%)    +5482 B   (+0.9%)
account                          +16200 B   (+3.2%)    +4737 B   (+3.4%)
plans                            +15609 B   (+2.0%)    +5687 B   (+2.8%)
scan                              +4345 B   (+1.1%)    +1426 B   (+1.4%)
backup                            +4334 B   (+0.9%)    +1435 B   (+1.2%)
gutenberg-editor                  +3473 B   (+0.9%)     +858 B   (+0.8%)
reader                            -3204 B   (-0.6%)    +1311 B   (+0.9%)
checkout                          +2506 B   (+0.2%)     +756 B   (+0.2%)
jetpack-connect                   -1957 B   (-0.3%)     -188 B   (-0.1%)
hosting                           -1949 B   (-0.6%)     +157 B   (+0.2%)
signup                            +1895 B   (+0.5%)     +345 B   (+0.4%)
help                               -419 B   (-0.1%)      -45 B   (-0.0%)
home                               -400 B   (-0.1%)      -44 B   (-0.0%)
themes                             -354 B   (-0.1%)      +81 B   (+0.1%)
theme                              -354 B   (-0.1%)      -30 B   (-0.0%)
preview                            -352 B   (-0.2%)      -26 B   (-0.1%)
devdocs                            +342 B   (+0.2%)      -50 B   (-0.1%)
settings-jetpack                   -178 B   (-0.1%)    -1010 B   (-1.4%)
stats                               +91 B   (+0.0%)     +686 B   (+0.5%)
google-my-business                  -81 B   (-0.0%)    -1055 B   (-1.2%)
security                            -78 B   (-0.0%)      -11 B   (-0.0%)
account-close                       -67 B   (-0.0%)      -11 B   (-0.0%)
email                               -62 B   (-0.0%)       -3 B   (-0.0%)
site-blocks                         -59 B   (-0.0%)      -10 B   (-0.0%)
notification-settings               -59 B   (-0.0%)      -12 B   (-0.0%)
me                                  -59 B   (-0.0%)      -10 B   (-0.0%)
happychat                           -59 B   (-0.0%)      -10 B   (-0.0%)
activity                            -49 B   (-0.0%)     +123 B   (+0.1%)
people                              +43 B   (+0.0%)     +869 B   (+0.9%)
comments                            +41 B   (+0.0%)     +308 B   (+0.2%)
concierge                           -27 B   (-0.0%)       +0 B
purchase-product                    -24 B   (-0.0%)       +2 B   (+0.0%)
jetpack-cloud-auth                  -22 B   (-0.6%)       -7 B   (-0.5%)
media                               -17 B   (-0.0%)       +9 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 (~39133 bytes added 📈 [gzipped])

name                                                      parsed_size             gzip_size
async-load-design-wordpress-components-gallery               +94851 B   (+14.1%)   +22475 B   (+13.9%)
async-load-calypso-reader-site-stream                        +43248 B  (+131.7%)   +15769 B  (+163.4%)
async-load-calypso-reader-search-stream                      +43248 B   (+47.5%)   +15776 B   (+63.8%)
async-load-calypso-reader-following-manage                   +43248 B   (+33.5%)   +15776 B   (+43.6%)
async-load-calypso-reader-feed-stream                        +43248 B  (+131.7%)   +15769 B  (+163.7%)
async-load-calypso-blocks-editor-launch-modal                +29309 B   (+12.8%)   +11711 B   (+19.8%)
async-load-design                                            +16981 B    (+0.8%)    +5507 B    (+1.2%)
async-load-design-playground                                 +16943 B    (+0.9%)    +5776 B    (+1.3%)
async-load-design-blocks                                     +16779 B    (+0.6%)    +6340 B    (+1.0%)
async-load-quick-language-switcher                           +16375 B   (+11.5%)    +6992 B   (+16.8%)
async-load-calypso-components-web-preview-component           -8670 B    (-1.5%)    -1886 B    (-1.2%)
async-load-calypso-blocks-editor-checkout-modal               -5045 B    (-0.5%)     -351 B    (-0.1%)
async-load-calypso-layout-community-translator-launcher       +4368 B   (+20.0%)    +1323 B   (+19.6%)
async-load-calypso-blocks-inline-help                          -353 B    (-0.2%)       -2 B    (-0.0%)
async-load-signup-steps-plans                                  -346 B    (-0.1%)      -37 B    (-0.1%)
async-load-calypso-my-sites-current-site-domain-warnings       -346 B    (-0.7%)      -37 B    (-0.3%)
async-load-signup-steps-domains                                -161 B    (-0.1%)       +4 B    (+0.0%)
async-load-calypso-blocks-support-article-dialog-dialog        -107 B    (-0.1%)      -30 B    (-0.1%)
async-load-calypso-my-sites-sidebar-unified                     -53 B    (-0.0%)       +9 B    (+0.0%)
async-load-calypso-my-sites-sidebar                             -47 B    (-0.0%)       -4 B    (-0.0%)
async-load-calypso-components-jetpack-sidebar                   -47 B    (-0.0%)       +0 B
async-load-calypso-blocks-support-article-dialog                -46 B    (-2.7%)      -11 B    (-1.6%)
async-load-calypso-reader-sidebar                               -29 B    (-0.0%)       +2 B    (+0.0%)
async-load-calypso-post-editor-editor-media-modal               -25 B    (-0.0%)       -5 B    (-0.0%)
async-load-calypso-reader-list-manage                           -22 B    (-0.1%)       +9 B    (+0.1%)
async-load-signup-steps-user                                    -16 B    (-0.0%)      +48 B    (+0.2%)
async-load-calypso-reader-list-stream                           -16 B    (-0.1%)       +3 B    (+0.1%)
async-load-calypso-blocks-inline-help-popover                   -16 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.

[sirreal]

one thing I'm not 100% sure about: the new @wordpress/* packages all have published types. Does that mean we can remove all @types/wordpress__* dependencies now? They should be redundant.

Yep, they can be removed for any packages that include types. DefinitelyTyped has a process for removing types for packages that no longer require them which I usually do periodically, but maybe @saramarcondes would like to help as well.

[jsnajdr]

Yep, they can be removed for any packages that include types.

OK, I removed the type packages, except @types/wordpress__compose which is not natively typed yet. Let's see what CI says.

[jsnajdr]

The editing-toolkit and wpcom-block-editor apps needed some fixups:

There is no longer a $big-font-size SASS variable defined in @wordpress/base-styles (removed during cleanup in WordPress/gutenberg#26827), so I replaced that with raw 18px value. The style is used in the nav sidebar:

The __experimentalMainDashboardButton export has also been moved (by @vindl) from @wordpress/interface to @wordpress/edit-post, so I updated the imports and dependencies accordingly.

@noahtallen @vindl What is a good way to test the upgrade here and can you possibly help? I don't really know what I'm doing when touching these parts of the codebase.

[matticbot]

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

D55058-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

[jsnajdr]

OK, I removed the type packages, except @types/wordpress__compose which is not natively typed yet

Turns out most @wordpress/* are not really typed yet. For example, @wordpress/data has a build-types subfolder, but not a types field in package.json that would point to it. In the end, I was able to remove @types/* types only for element, hooks and keycodes.

[noahtallen]

@noahtallen @vindl What is a good way to test the upgrade here and can you possibly help? I don't really know what I'm doing when touching these parts of the codebase.

To get these changes on your wpcom sandbox, you have two options:

1. run yarn dev --sync from the apps/editing-toolkit directory. If you have wpcom-sandbox defined in your SSH config, it will compile and rsync the code to your sandbox whenever there are changes. Easiest for development, IMO.
2. Patch this diff to your sandbox: D55058-code (autogenerated above). This just takes a long time (several minutes) because of how big the diff is.

Then just sandbox a test site and the public API, and all the changes will appear when you visit the editor of that sandboxed site :)

I'm also happy to test these out!

[jsnajdr]

While testing the Editing Toolkit on my sandbox, I discovered the color changes (forced by @wordpress/base-styles deprecations) in the navigation sidebar are not very aesthetically pleasing:

Original:

Updated colors:

The selected background color is too light. So I decided to use the original colors everywhere, and declare local variables with the values that are no longer in @wordpress/base-styles. Someone should update these colors to fit into some standardized palette. I don't feel qualified for that and it's off-topic for this PR, which aspires to be an upgrade that causes no visible changes.

[jsnajdr]

I pushed a commit to restore __experimentalMainDashboardButton in e2e tests

@vindl I had to remove the @wordpress/edit-site check from the e2e test, because the test is running on a post editor page, in a edit-post context. The edit-site package is not loaded there and the check for it fails.

Is there such a thing as Full Site Editing embedded in Calypso Gutenframe? Doing the check on that page would make it work.

[jsnajdr]

Now there is a Gutenboarding e2e test that fails reliably. Typing into the "acquire intent" box goes crazy:

The input gets reset to an empty value several times while the webdriver is typing. It looks like some race condition when the e2e test does the typing and other actions very quickly.

[vindl]

Is there such a thing as Full Site Editing embedded in Calypso Gutenframe? Doing the check on that page would make it work.

@jsnajdr there is, but it's basically using the existing iframe post editor setup and just feeding it the different wp-admin url.

[jsnajdr]

I disabled the Gutenboarding e2e test for now (cc @Automattic/luna). That made all checks green and I can finally merge this one (ufff).