Update @wordpress/components #65576

p-jackson · 2022-07-14T01:38:56Z

Currently we can't import @wordpress/components in some places, because if it's ever imported into a file that's used during unit tests, then it will break the tests. This is a bug in the package which was addressed in WordPress/gutenberg#42248. This PR updates the version of the package used by Calypso so it can

Changelog for the component package, the relevant notes are for versions 19.12.0 through 19.15.0. There have been enhancements to the components we use, but bigger changes (like the updated design for the DateTimePicker) only impact our custom blocks, and those blocks will be using the shared wp.components version of the package anyway.

Proposed Changes

Updated components package
Used yarn dedupe to ensure only a single version in the mono repo
Fix usage of withInstanceId() and createHigherOrderComponent() which have had their type definitions change

It doesn't update the 3rd-party types package (i.e. @types/wordpress__components) because doing so creates yarn errors and it's not needed to address the issue we're facing.

Testing Instructions

Smoke test
- Calypso (especially places that use GB components)
- ETK
- Jetpack
- Atomic
- Simple sites

Pre-merge Checklist

Complete applicable items on this checklist before merging into trunk. Inapplicable items can be left unchecked.

Both the PR author and reviewer are responsible for ensuring the checklist is completed.

~~Have you written new tests for your changes?~~
Have you tested the feature in Simple, Atomic, and self-hosted Jetpack sites?
Have you checked for TypeScript, React or other console errors?
~~Are we memoizing when appropriate (for expensive computations)? More info in Our Approach to Data and Memoizing with create-selector and Using memoizing selectors~~
~~Have we sent any new strings for translation ASAP?~~

github-actions · 2022-07-14T01:39:12Z

Calypso Live (direct link)

	https://calypso.live?image=registry.a8c.com/calypso/app:build-37562

Jetpack Cloud live (direct link)

	https://calypso.live?image=registry.a8c.com/calypso/app:build-37562&env=jetpack

matticbot · 2022-07-14T02:13:46Z

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

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

name                   parsed_size           gzip_size
entry-gutenboarding        +4303 B  (+0.2%)    +2527 B  (+0.4%)
entry-stepper              +2644 B  (+0.1%)    +1768 B  (+0.2%)
entry-main                  +371 B  (+0.0%)      +86 B  (+0.0%)
entry-login                 +155 B  (+0.0%)      +36 B  (+0.0%)
entry-domains-landing       +126 B  (+0.0%)      +29 B  (+0.0%)
entry-browsehappy           +126 B  (+0.1%)      +29 B  (+0.1%)

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

Sections (~1361 bytes removed 📉 [gzipped])

name                            parsed_size           gzip_size
marketplace                          -674 B  (-0.1%)     -144 B  (-0.1%)
gutenberg-editor                     -455 B  (-0.1%)      -88 B  (-0.1%)
posts                                -425 B  (-0.1%)       -5 B  (-0.0%)
signup                               +412 B  (+0.1%)      +38 B  (+0.0%)
accept-invite                        +412 B  (+0.1%)      +38 B  (+0.0%)
sites-dashboard                      -392 B  (-0.3%)      -87 B  (-0.2%)
jetpack-connect                      +361 B  (+0.0%)      +47 B  (+0.0%)
scan                                 -329 B  (-0.0%)      -65 B  (-0.0%)
home                                 -329 B  (-0.0%)      -72 B  (-0.0%)
backup                               -329 B  (-0.0%)      -63 B  (-0.0%)
settings-writing                     -319 B  (-0.0%)      -58 B  (-0.0%)
settings-security                    -319 B  (-0.1%)      -48 B  (-0.0%)
settings-performance                 -319 B  (-0.1%)      -51 B  (-0.0%)
settings-discussion                  -319 B  (-0.1%)      -57 B  (-0.1%)
plans                                -319 B  (-0.0%)      -55 B  (-0.0%)
marketing                            -319 B  (-0.0%)      -56 B  (-0.0%)
jetpack-cloud-pricing                -319 B  (-0.1%)      -61 B  (-0.0%)
help                                 -319 B  (-0.0%)      -62 B  (-0.0%)
email                                -319 B  (-0.1%)      -51 B  (-0.0%)
earn                                 -319 B  (-0.1%)      -50 B  (-0.0%)
settings                             -315 B  (-0.0%)      -43 B  (-0.0%)
account                              -315 B  (-0.1%)      -45 B  (-0.0%)
add-ons                              +309 B  (+0.1%)     +608 B  (+0.6%)
checkout                             -298 B  (-0.0%)      -63 B  (-0.0%)
hosting                              -280 B  (-0.1%)      -59 B  (-0.0%)
woocommerce-installation             -252 B  (-0.1%)      -55 B  (-0.1%)
woocommerce                          -252 B  (-0.1%)      -56 B  (-0.1%)
themes                               -252 B  (-0.0%)      -53 B  (-0.0%)
theme                                -252 B  (-0.1%)      -53 B  (-0.0%)
stats                                -252 B  (-0.0%)      -51 B  (-0.0%)
sites                                -252 B  (-0.1%)      -56 B  (-0.1%)
settings-jetpack                     -252 B  (-0.1%)      -56 B  (-0.1%)
reader                               -252 B  (-0.0%)      -56 B  (-0.0%)
preview                              -252 B  (-0.1%)      -56 B  (-0.1%)
people                               -252 B  (-0.0%)      -54 B  (-0.0%)
pages                                -252 B  (-0.1%)      -55 B  (-0.0%)
migrate                              -252 B  (-0.1%)      -56 B  (-0.0%)
jetpack-social                       -252 B  (-0.1%)      -55 B  (-0.0%)
jetpack-search                       -252 B  (-0.1%)      -55 B  (-0.0%)
jetpack-cloud-settings               -252 B  (-0.1%)      -56 B  (-0.0%)
jetpack-cloud-agency-dashboard       -252 B  (-0.1%)      -55 B  (-0.0%)
jetpack-cloud                        -252 B  (-0.1%)      -56 B  (-0.1%)
import                               -252 B  (-0.1%)      -54 B  (-0.0%)
google-my-business                   -252 B  (-0.1%)      -55 B  (-0.0%)
export                               -252 B  (-0.1%)      -56 B  (-0.1%)
customize                            -252 B  (-0.1%)      -56 B  (-0.1%)
concierge                            -252 B  (-0.1%)      -55 B  (-0.0%)
comments                             -252 B  (-0.0%)      -51 B  (-0.0%)
activity                             -252 B  (-0.0%)      -55 B  (-0.0%)
media                                -248 B  (-0.0%)      -44 B  (-0.0%)
domains                              +220 B  (+0.0%)     +106 B  (+0.0%)
plugins                              -193 B  (-0.0%)      +89 B  (+0.0%)
site-purchases                       +175 B  (+0.0%)      +96 B  (+0.0%)
purchases                            +175 B  (+0.0%)      +98 B  (+0.0%)
posts-custom                          -86 B  (-0.0%)     +166 B  (+0.1%)
site-blocks                           -67 B  (-0.0%)       -4 B  (-0.0%)
security                              -67 B  (-0.0%)       +3 B  (+0.0%)
privacy                               -67 B  (-0.0%)       -3 B  (-0.0%)
notification-settings                 -67 B  (-0.0%)       +8 B  (+0.0%)
me                                    -67 B  (-0.0%)       -3 B  (-0.0%)
happychat                             -67 B  (-0.0%)       +0 B
account-close                         -67 B  (-0.0%)       -3 B  (-0.0%)
jetpack-cloud-partner-portal          -46 B  (-0.0%)       -8 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 (~3393 bytes added 📈 [gzipped])

name                                                            parsed_size           gzip_size
async-load-signup-steps-woocommerce-install-step-store-address      +2499 B  (+1.8%)    +1529 B  (+3.3%)
async-load-design-wordpress-components-gallery                      -1427 B  (-0.2%)     +632 B  (+0.3%)
async-load-calypso-blocks-jitm-templates-modal                       -539 B  (-0.7%)      -88 B  (-0.4%)
async-load-signup-steps-design-picker                                -396 B  (-0.3%)      -89 B  (-0.2%)
async-load-calypso-my-sites-checkout-modal                           +376 B  (+0.0%)     +177 B  (+0.0%)
async-load-design-playground                                         -315 B  (-0.0%)      -31 B  (-0.0%)
async-load-design                                                    -315 B  (-0.0%)      -31 B  (-0.0%)
async-load-calypso-components-web-preview-component                  -313 B  (-0.1%)      -54 B  (-0.0%)
async-load-signup-steps-woocommerce-install-transfer                 -287 B  (-0.3%)      -76 B  (-0.3%)
async-load-signup-steps-woocommerce-install-confirm                  -287 B  (-0.2%)      -76 B  (-0.2%)
async-load-signup-steps-woocommerce-install                          -287 B  (-0.4%)      -76 B  (-0.3%)
async-load-signup-steps-website-content                              -287 B  (-0.2%)      -76 B  (-0.2%)
async-load-signup-steps-user                                         -287 B  (-0.2%)      -76 B  (-0.1%)
async-load-signup-steps-theme-selection                              -287 B  (-0.2%)      -76 B  (-0.2%)
async-load-signup-steps-test-step                                    -287 B  (-0.3%)      -76 B  (-0.3%)
async-load-signup-steps-survey                                       -287 B  (-0.3%)      -76 B  (-0.3%)
async-load-signup-steps-store-features                               -287 B  (-0.3%)      -76 B  (-0.2%)
async-load-signup-steps-starting-point                               -287 B  (-0.3%)      -76 B  (-0.2%)
async-load-signup-steps-social-profiles                              -287 B  (-0.3%)      -76 B  (-0.3%)
async-load-signup-steps-site-type                                    -287 B  (-0.3%)      -76 B  (-0.3%)
async-load-signup-steps-site-topic                                   -287 B  (-0.3%)      -76 B  (-0.2%)
async-load-signup-steps-site-title                                   -287 B  (-0.3%)      -76 B  (-0.3%)
async-load-signup-steps-site-or-domain                               -287 B  (-0.3%)      -76 B  (-0.2%)
async-load-signup-steps-site-options                                 -287 B  (-0.3%)      -76 B  (-0.2%)
async-load-signup-steps-site                                         -287 B  (-0.3%)      -76 B  (-0.2%)
async-load-signup-steps-rewind-were-backing                          -287 B  (-0.3%)      -76 B  (-0.3%)
async-load-signup-steps-rewind-migrate                               -287 B  (-0.3%)      -76 B  (-0.2%)
async-load-signup-steps-rewind-form-creds                            -287 B  (-0.2%)      -76 B  (-0.2%)
async-load-signup-steps-reader-landing                               -287 B  (-0.3%)      -76 B  (-0.3%)
async-load-signup-steps-plans-atomic-store                           -287 B  (-0.1%)      -76 B  (-0.1%)
async-load-signup-steps-plans                                        -287 B  (-0.1%)      -76 B  (-0.1%)
async-load-signup-steps-page-picker                                  -287 B  (-0.3%)      -76 B  (-0.3%)
async-load-signup-steps-p2-site                                      -287 B  (-0.3%)      -76 B  (-0.2%)
async-load-signup-steps-p2-join-workspace                            -287 B  (-0.3%)      -76 B  (-0.3%)
async-load-signup-steps-p2-get-started                               -287 B  (-0.3%)      -76 B  (-0.3%)
async-load-signup-steps-p2-details                                   -287 B  (-0.3%)      -76 B  (-0.3%)
async-load-signup-steps-p2-confirm-email                             -287 B  (-0.3%)      -76 B  (-0.3%)
async-load-signup-steps-p2-complete-profile                          -287 B  (-0.2%)      -76 B  (-0.1%)
async-load-signup-steps-new-or-existing-site                         -287 B  (-0.3%)      -76 B  (-0.2%)
async-load-signup-steps-intent                                       -287 B  (-0.3%)      -76 B  (-0.2%)
async-load-signup-steps-emails                                       -287 B  (-0.3%)      -75 B  (-0.2%)
async-load-signup-steps-creds-permission                             -287 B  (-0.3%)      -76 B  (-0.2%)
async-load-signup-steps-creds-confirm                                -287 B  (-0.3%)      -76 B  (-0.2%)
async-load-signup-steps-creds-complete                               -287 B  (-0.3%)      -76 B  (-0.3%)
async-load-signup-steps-courses                                      -287 B  (-0.3%)      -76 B  (-0.3%)
async-load-signup-steps-clone-start                                  -287 B  (-0.3%)      -76 B  (-0.3%)
async-load-signup-steps-clone-ready                                  -287 B  (-0.3%)      -76 B  (-0.2%)
async-load-signup-steps-clone-point                                  -287 B  (-0.1%)      -72 B  (-0.1%)
async-load-signup-steps-clone-jetpack                                -287 B  (-0.3%)      -76 B  (-0.3%)
async-load-signup-steps-clone-destination                            -287 B  (-0.3%)      -76 B  (-0.3%)
async-load-signup-steps-clone-credentials                            -287 B  (-0.2%)      -76 B  (-0.2%)
async-load-signup-steps-clone-cloning                                -287 B  (-0.3%)      -76 B  (-0.3%)
async-load-signup-steps-site-picker                                  -252 B  (-0.1%)      -56 B  (-0.1%)
async-load-signup-steps-domains                                      -252 B  (-0.1%)      -51 B  (-0.0%)
async-load-signup-steps-difm-site-picker                             -252 B  (-0.1%)      -56 B  (-0.1%)
async-load-calypso-components-sites-popover                          -252 B  (-0.2%)      -56 B  (-0.1%)
async-load-calypso-blocks-inline-help-popover                        -252 B  (-0.0%)      -50 B  (-0.0%)
async-load-signup-steps-add-ons                                      +250 B  (+0.2%)     +606 B  (+1.4%)
async-load-calypso-blocks-editor-checkout-modal                      +250 B  (+0.0%)     +137 B  (+0.1%)
async-load-quick-language-switcher                                   -248 B  (-0.2%)      -47 B  (-0.1%)
async-load-signup-steps-woocommerce-install-step-business-info       +247 B  (+0.2%)      +60 B  (+0.1%)
async-load-calypso-layout-masterbar-checkout-tsx                      +89 B  (+0.0%)     +100 B  (+0.0%)
async-load-calypso-layout-masterbar-checkout                          +89 B  (+0.0%)      +97 B  (+0.1%)
async-load-design-blocks                                              -87 B  (-0.0%)      +46 B  (+0.0%)
async-load-calypso-reader-site-stream                                 -67 B  (-0.2%)       -6 B  (-0.1%)
async-load-calypso-reader-search-stream                               -67 B  (-0.1%)       -6 B  (-0.0%)
async-load-calypso-reader-following-manage                            -67 B  (-0.1%)       -6 B  (-0.0%)
async-load-calypso-reader-feed-stream                                 -67 B  (-0.2%)       -6 B  (-0.1%)

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.

- Updated components package 19.11.0 => 19.15.0 - Used `yarn dedupe` to ensure only a single version in the mono repo I didn't update the 3rd-party types package (i.e. @types/wordpress__components) because it caused peer-dependency errors.

`yarn` doesn't appear to have an `upgrade` sub-command. The `up` sub-command does the same thing though.

matticbot · 2022-07-14T05:15:03Z

This PR modifies the release build for editing-toolkit

To test your changes on WordPress.com, run install-plugin.sh editing-toolkit update/wordpress-components-package on your sandbox.

To deploy your changes after merging, see the documentation: PCYsg-mMA-p2

p-jackson · 2022-07-14T05:43:45Z

Discussion about the failing audio upload test: p1657741571341949-slack-C03N25JPCE4

ciampo

cc'ing @dmsnell re. the createHigherOrderComponent code changes (originated from WordPress/gutenberg#41138), since Jarda is not around

For the smoke test, I'll let folks with greater familiarity with Calypso take a look

The rest of the code changes LGTM

p-jackson · 2022-07-14T08:57:12Z

Nice. I saw the createHigherOrderComponent() change came with WithInjectedProps and WithoutInjectedProps helper types, but I didn't end up using them because it required a // @ts-ignore. My typings might be missing something though.

tyxla

I wonder if the failing e2e tests are related 🤔

dmsnell · 2022-07-14T10:10:53Z

cc'ing @dmsnell re. the createHigherOrderComponent code changes (originated from WordPress/gutenberg#41138), since Jarda is not around

@ciampo what kind of review are you looking for?

ciampo · 2022-07-14T10:14:48Z

cc'ing @dmsnell re. the createHigherOrderComponent code changes (originated from WordPress/gutenberg#41138), since Jarda is not around

@ciampo what kind of review are you looking for?

Apologies if that wasn't clear! Mainly focused on the code changes regarding createHigherOrderComponent, which, from what I understand, are caused by Jarda's PR WordPress/gutenberg#41138 (which you reviewed).

dmsnell

From the perspective of the types this is fine. If they work for you then they are fine, and it looks like they work as I remember those functions intending.

p-jackson · 2022-07-15T01:02:21Z

I wonder if the failing e2e tests are related 🤔

@tyxla the test failures were unrelated and the underlying issue has been fixed p1657741571341949-slack-C03N25JPCE4

tyxla

Haven't tested but code-wise this looks good 👍

p-jackson · 2022-07-18T06:14:13Z

I've tested ETK and areas of Calypso using WordPress components and everything seems to be working. No console errors etc. 🤞

p-jackson force-pushed the update/wordpress-components-package branch from 87ae168 to 7e3172b Compare July 14, 2022 02:02

p-jackson added 2 commits July 14, 2022 14:13

Update @wordpress/components

2db558a

- Updated components package 19.11.0 => 19.15.0 - Used `yarn dedupe` to ensure only a single version in the mono repo I didn't update the 3rd-party types package (i.e. @types/wordpress__components) because it caused peer-dependency errors.

Correct the docs for updating package versions

173678e

`yarn` doesn't appear to have an `upgrade` sub-command. The `up` sub-command does the same thing though.

p-jackson force-pushed the update/wordpress-components-package branch from 7e3172b to 173678e Compare July 14, 2022 02:14

Fix type errors due to update to createHigherOrderComponent

acc5fa0

Fix type errors due to update to withInstanceId

b4d8f1f

p-jackson marked this pull request as ready for review July 14, 2022 05:46

p-jackson requested a review from a team as a code owner July 14, 2022 05:46

matticbot added the [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. label Jul 14, 2022

p-jackson requested a review from a team July 14, 2022 05:46

p-jackson self-assigned this Jul 14, 2022

p-jackson added the [Type] Janitorial label Jul 14, 2022

ciampo reviewed Jul 14, 2022

View reviewed changes

ciampo requested a review from a team July 14, 2022 08:29

tyxla reviewed Jul 14, 2022

View reviewed changes

dmsnell approved these changes Jul 14, 2022

View reviewed changes

p-jackson changed the title ~~Update @wordpress/components and it's type definitions~~ Update @wordpress/components Jul 15, 2022

tyxla approved these changes Jul 15, 2022

View reviewed changes

p-jackson merged commit 98fce2a into trunk Jul 18, 2022

p-jackson deleted the update/wordpress-components-package branch July 18, 2022 06:13

github-actions bot removed the [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. label Jul 18, 2022

klimeryk mentioned this pull request Jul 21, 2023

Show support links in Help Center instead of modal #79741

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Update @wordpress/components #65576

Update @wordpress/components #65576

p-jackson commented Jul 14, 2022 •

edited

Loading

github-actions bot commented Jul 14, 2022 •

edited by matticbot

Loading

matticbot commented Jul 14, 2022 •

edited

Loading

matticbot commented Jul 14, 2022

p-jackson commented Jul 14, 2022

ciampo left a comment

p-jackson commented Jul 14, 2022

tyxla left a comment

dmsnell commented Jul 14, 2022

ciampo commented Jul 14, 2022 •

edited

Loading

dmsnell left a comment

p-jackson commented Jul 15, 2022

tyxla left a comment

p-jackson commented Jul 18, 2022

Update @wordpress/components #65576

Update @wordpress/components #65576

Conversation

p-jackson commented Jul 14, 2022 • edited Loading

Proposed Changes

Testing Instructions

Pre-merge Checklist

github-actions bot commented Jul 14, 2022 • edited by matticbot Loading

matticbot commented Jul 14, 2022 • edited Loading

matticbot commented Jul 14, 2022

p-jackson commented Jul 14, 2022

ciampo left a comment

Choose a reason for hiding this comment

p-jackson commented Jul 14, 2022

tyxla left a comment

Choose a reason for hiding this comment

dmsnell commented Jul 14, 2022

ciampo commented Jul 14, 2022 • edited Loading

dmsnell left a comment

Choose a reason for hiding this comment

p-jackson commented Jul 15, 2022

tyxla left a comment

Choose a reason for hiding this comment

p-jackson commented Jul 18, 2022

p-jackson commented Jul 14, 2022 •

edited

Loading

github-actions bot commented Jul 14, 2022 •

edited by matticbot

Loading

matticbot commented Jul 14, 2022 •

edited

Loading

ciampo commented Jul 14, 2022 •

edited

Loading