Update design-preview UI + bump @wordpress/edit-site to 4.15.0 #69245

taipeicoder · 2022-10-19T09:47:02Z

Proposed Changes

This diff updates the styles section of the design preview.

Before	After

This diff also updates @automattic/design-preview dependency of @wordpress/edit-site from 4.6.0 to 4.15.0, which contains the fixes:

Which, in turn, fixes this UI issue for the <DesignPreview /> component:

Before	After

Testing Instructions

Head to the design picker setup/designSetup?siteSlug=${site_slug}
Preview any design with style variations.
Ensure that the copy is updated as described above.
Ensure that the style preview doesn't have extra padding (happened previously for the theme "Pixl").

Pre-merge Checklist

Have you written new tests for your changes?
Have you tested the feature in Simple (P9HQHe-k8-p2), Atomic (P9HQHe-jW-p2), and self-hosted Jetpack sites (PCYsg-g6b-p2)?
Have you checked for TypeScript, React or other console errors?
Have you used memoizing on expensive computations? More info in Memoizing with create-selector and Using memoizing selectors and Our Approach to Data
Have we added the "[Status] String Freeze" label as soon as any new strings were ready for translation (p4TIVU-5Jq-p2)?

github-actions · 2022-10-19T09:47:14Z

Calypso Live (direct link)

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

Jetpack Cloud live (direct link)

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

matticbot · 2022-10-19T09:47:42Z

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

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

Details

name                   parsed_size           gzip_size
entry-gutenboarding       +30746 B  (+1.4%)    +4469 B  (+0.7%)
entry-stepper             +15008 B  (+0.4%)    +4744 B  (+0.4%)
entry-main                 +9800 B  (+0.7%)    +3107 B  (+0.9%)
entry-login                +8826 B  (+0.9%)    +2845 B  (+1.0%)
entry-browsehappy           +655 B  (+0.7%)     +141 B  (+0.5%)
entry-domains-landing       +473 B  (+0.1%)     +124 B  (+0.1%)

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

Sections (~8763 bytes added 📈 [gzipped])

Details

name                             parsed_size           gzip_size
gutenberg-editor                     +8608 B  (+1.7%)    +3231 B  (+2.0%)
checkout                             +4419 B  (+0.3%)    +1642 B  (+0.4%)
people                               +3780 B  (+0.6%)    +1468 B  (+0.9%)
site-purchases                       +3767 B  (+0.3%)    +1459 B  (+0.4%)
purchases                            +3767 B  (+0.2%)    +1452 B  (+0.3%)
marketplace                          +3479 B  (+0.5%)    +1498 B  (+0.7%)
media                                +2454 B  (+0.1%)     +798 B  (+0.2%)
home                                 +2350 B  (+0.2%)    +2231 B  (+0.8%)
promote-post                         +2336 B  (+0.7%)     +848 B  (+0.7%)
themes                               +2330 B  (+0.3%)     +707 B  (+0.3%)
settings-writing                     +2319 B  (+0.3%)    +1733 B  (+0.9%)
marketing                            +2319 B  (+0.3%)    +1168 B  (+0.6%)
posts-custom                         +2280 B  (+0.4%)    +1153 B  (+0.6%)
posts                                +2280 B  (+0.4%)    +1153 B  (+0.6%)
theme                                +2239 B  (+0.4%)     +758 B  (+0.5%)
stats                                +2185 B  (+0.3%)      -49 B  (-0.0%)
pages                                +2136 B  (+0.5%)     +685 B  (+0.5%)
comments                             +2128 B  (+0.3%)     +715 B  (+0.4%)
account                              +1738 B  (+0.3%)     +619 B  (+0.4%)
settings                             +1712 B  (+0.2%)     +645 B  (+0.3%)
preview                              +1635 B  (+0.6%)     +612 B  (+0.7%)
customize                            +1635 B  (+0.6%)     +614 B  (+0.7%)
jetpack-cloud-partner-portal         +1615 B  (+0.4%)     +837 B  (+0.7%)
reader                               +1596 B  (+0.3%)     +408 B  (+0.2%)
help                                 +1510 B  (+0.2%)     +604 B  (+0.3%)
woocommerce-installation             +1497 B  (+0.5%)     +553 B  (+0.5%)
settings-discussion                  +1497 B  (+0.4%)     +570 B  (+0.5%)
import                               +1497 B  (+0.4%)     +584 B  (+0.5%)
export                               +1497 B  (+0.5%)     +557 B  (+0.6%)
email                                +1497 B  (+0.2%)     +600 B  (+0.3%)
earn                                 +1497 B  (+0.3%)     +616 B  (+0.4%)
domains                              +1484 B  (+0.1%)     +579 B  (+0.1%)
backup                               +1481 B  (+0.2%)     +536 B  (+0.2%)
plans                                +1300 B  (+0.1%)    +1333 B  (+0.5%)
plugins                              +1095 B  (+0.0%)     +412 B  (+0.1%)
woocommerce                          +1009 B  (+0.4%)     +420 B  (+0.5%)
settings-jetpack                     +1009 B  (+0.3%)     +415 B  (+0.4%)
migrate                              +1009 B  (+0.2%)     +462 B  (+0.4%)
jetpack-social                       +1009 B  (+0.3%)     +468 B  (+0.4%)
jetpack-search                       +1009 B  (+0.2%)     +422 B  (+0.3%)
jetpack-cloud-settings               +1009 B  (+0.2%)     +415 B  (+0.3%)
jetpack-cloud-pricing                +1009 B  (+0.2%)     +430 B  (+0.2%)
jetpack-cloud-agency-dashboard       +1009 B  (+0.2%)     +474 B  (+0.3%)
jetpack-cloud                        +1009 B  (+0.4%)     +414 B  (+0.5%)
google-my-business                   +1009 B  (+0.2%)     +427 B  (+0.3%)
add-ons                              +1009 B  (+0.3%)     +410 B  (+0.4%)
concierge                             +988 B  (+0.2%)     +453 B  (+0.3%)
scan                                  +980 B  (+0.1%)     +389 B  (+0.2%)
activity                              +980 B  (+0.1%)     +389 B  (+0.2%)
settings-security                     +976 B  (+0.2%)     +433 B  (+0.3%)
hosting                               +904 B  (+0.2%)      +59 B  (+0.0%)
signup                                -572 B  (-0.1%)      -32 B  (-0.0%)
accept-invite                         -572 B  (-0.1%)      -32 B  (-0.0%)
jetpack-cloud-plugin-management       +502 B  (+0.1%)     +352 B  (+0.2%)
jetpack-connect                       +437 B  (+0.0%)     +425 B  (+0.1%)
settings-performance                  +314 B  (+0.1%)     +599 B  (+0.3%)
sites-dashboard                       +222 B  (+0.1%)     +290 B  (+0.3%)
notification-settings                 -180 B  (-0.0%)      +94 B  (+0.1%)
site-blocks                           -167 B  (-0.0%)     +101 B  (+0.1%)
security                              -167 B  (-0.0%)      +64 B  (+0.0%)
privacy                               -167 B  (-0.0%)     +107 B  (+0.1%)
me                                    -167 B  (-0.0%)     +107 B  (+0.1%)
happychat                             -167 B  (-0.0%)     +107 B  (+0.1%)
account-close                         -167 B  (-0.0%)     +107 B  (+0.1%)
devdocs                               +150 B  (+0.1%)      +17 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 (~35267 bytes added 📈 [gzipped])

Details

name                                                                 parsed_size            gzip_size
async-load-automattic-design-preview                                    +96939 B  (+10.5%)   +25702 B   (+9.4%)
async-load-animate-list                                                  -7380 B   (-5.6%)    -2452 B   (-5.7%)
async-load-automattic-help-center                                        +3988 B   (+0.7%)    +1511 B   (+0.9%)
async-load-calypso-my-sites-checkout-modal                               +3698 B   (+0.4%)    +1214 B   (+0.4%)
async-load-design-wordpress-components-gallery                           +3486 B   (+0.5%)    +1024 B   (+0.5%)
async-load-calypso-layout-masterbar-checkout-tsx                         +2452 B   (+1.4%)     +897 B   (+1.8%)
async-load-design-blocks                                                 +2333 B   (+0.1%)     +498 B   (+0.1%)
async-load-calypso-blocks-editor-checkout-modal                          +2321 B   (+0.2%)     +875 B   (+0.3%)
async-load-masterbar-help-center                                         +2283 B   (+8.1%)     +880 B  (+10.8%)
async-load-calypso-blocks-inline-help-popover                            +1999 B   (+0.3%)     +773 B   (+0.4%)
async-load-calypso-layout-masterbar-checkout                             +1963 B   (+2.7%)     +742 B   (+3.1%)
async-load-design                                                        +1725 B   (+0.1%)     +604 B   (+0.1%)
async-load-calypso-components-sites-popover                              +1635 B   (+0.9%)     +648 B   (+1.1%)
async-load-design-playground                                             +1237 B   (+0.1%)     +474 B   (+0.1%)
async-load-calypso-components-web-preview-component                      +1114 B   (+0.2%)     +283 B   (+0.2%)
async-load-signup-steps-website-content                                  +1037 B   (+0.7%)     +472 B   (+1.0%)
async-load-signup-steps-p2-complete-profile                              +1037 B   (+0.6%)     +478 B   (+0.9%)
async-load-signup-steps-site-picker                                      +1009 B   (+0.5%)     +478 B   (+0.7%)
async-load-signup-steps-domains                                          +1009 B   (+0.2%)     +477 B   (+0.4%)
async-load-signup-steps-difm-site-picker                                 +1009 B   (+0.5%)     +480 B   (+0.7%)
async-load-signup-steps-woocommerce-install-step-business-info            +996 B   (+0.6%)     +447 B   (+0.9%)
async-load-calypso-post-editor-media-modal                                +854 B   (+0.1%)     +194 B   (+0.0%)
async-load-signup-steps-woocommerce-install-transfer                      +747 B   (+0.8%)     +408 B   (+1.4%)
async-load-signup-steps-woocommerce-install-confirm                       +747 B   (+0.6%)     +403 B   (+1.1%)
async-load-signup-steps-woocommerce-install                               +747 B   (+1.1%)     +404 B   (+1.8%)
async-load-signup-steps-videopress-site                                   +747 B   (+0.6%)     +422 B   (+1.2%)
async-load-signup-steps-user                                              +747 B   (+0.4%)     +427 B   (+0.7%)
async-load-signup-steps-test-step                                         +747 B   (+0.9%)     +405 B   (+1.5%)
async-load-signup-steps-store-features                                    +747 B   (+0.7%)     +398 B   (+1.2%)
async-load-signup-steps-starting-point                                    +747 B   (+0.8%)     +398 B   (+1.3%)
async-load-signup-steps-social-profiles                                   +747 B   (+0.9%)     +407 B   (+1.4%)
async-load-signup-steps-site-type                                         +747 B   (+0.9%)     +403 B   (+1.5%)
async-load-signup-steps-site-title                                        +747 B   (+0.9%)     +407 B   (+1.5%)
async-load-signup-steps-site-or-domain                                    +747 B   (+0.8%)     +401 B   (+1.3%)
async-load-signup-steps-site-options                                      +747 B   (+0.7%)     +400 B   (+1.3%)
async-load-signup-steps-site                                              +747 B   (+0.7%)     +418 B   (+1.3%)
async-load-signup-steps-rewind-were-backing                               +747 B   (+0.9%)     +408 B   (+1.5%)
async-load-signup-steps-rewind-migrate                                    +747 B   (+0.7%)     +411 B   (+1.2%)
async-load-signup-steps-reader-landing                                    +747 B   (+0.9%)     +404 B   (+1.5%)
async-load-signup-steps-plans-atomic-store                                +747 B   (+0.3%)     +416 B   (+0.7%)
async-load-signup-steps-p2-site                                           +747 B   (+0.7%)     +422 B   (+1.2%)
async-load-signup-steps-p2-join-workspace                                 +747 B   (+0.8%)     +408 B   (+1.4%)
async-load-signup-steps-p2-get-started                                    +747 B   (+0.9%)     +402 B   (+1.5%)
async-load-signup-steps-p2-details                                        +747 B   (+0.9%)     +403 B   (+1.5%)
async-load-signup-steps-p2-confirm-email                                  +747 B   (+0.9%)     +405 B   (+1.4%)
async-load-signup-steps-new-or-existing-site                              +747 B   (+0.7%)     +398 B   (+1.2%)
async-load-signup-steps-intent                                            +747 B   (+0.7%)     +398 B   (+1.2%)
async-load-signup-steps-emails                                            +747 B   (+0.6%)     +411 B   (+1.0%)
async-load-signup-steps-design-picker                                     +747 B   (+0.6%)     +408 B   (+1.0%)
async-load-signup-steps-creds-permission                                  +747 B   (+0.7%)     +407 B   (+1.2%)
async-load-signup-steps-creds-confirm                                     +747 B   (+0.7%)     +408 B   (+1.2%)
async-load-signup-steps-creds-complete                                    +747 B   (+0.9%)     +406 B   (+1.5%)
async-load-signup-steps-courses                                           +747 B   (+0.8%)     +412 B   (+1.4%)
async-load-signup-steps-clone-start                                       +747 B   (+0.9%)     +403 B   (+1.4%)
async-load-signup-steps-clone-ready                                       +747 B   (+0.7%)     +407 B   (+1.2%)
async-load-signup-steps-clone-jetpack                                     +747 B   (+0.9%)     +407 B   (+1.5%)
async-load-signup-steps-clone-destination                                 +747 B   (+0.8%)     +411 B   (+1.4%)
async-load-signup-steps-clone-cloning                                     +747 B   (+0.9%)     +405 B   (+1.4%)
async-load-signup-steps-theme-selection                                   +734 B   (+0.5%)     +431 B   (+0.9%)
async-load-signup-steps-clone-point                                       +734 B   (+0.3%)     +418 B   (+0.7%)
async-load-signup-steps-rewind-form-creds                                 +727 B   (+0.6%)     +365 B   (+1.0%)
async-load-signup-steps-clone-credentials                                 +727 B   (+0.6%)     +365 B   (+0.9%)
async-load-signup-steps-add-ons                                           +719 B   (+0.5%)     +402 B   (+0.9%)
async-load-signup-steps-woocommerce-install-step-store-address            +706 B   (+0.5%)     +404 B   (+0.9%)
async-load-calypso-layout-guided-tours-component                          +684 B   (+0.9%)     +429 B   (+2.0%)
async-load-signup-steps-plans                                             +616 B   (+0.2%)     +423 B   (+0.4%)
async-load-signup-steps-page-picker                                       +523 B   (+0.4%)      +93 B   (+0.2%)
async-load-calypso-blocks-app-banner                                      +443 B   (+0.2%)      +62 B   (+0.1%)
async-load-masterbar-cart-masterbar-cart-wrapper                          -320 B   (-0.2%)     -136 B   (-0.3%)
async-load-signup-steps-woocommerce-install-components-support-card       -292 B   (-3.5%)     -127 B   (-3.3%)
async-load-calypso-blocks-jitm-templates-spotlight                        -292 B   (-3.2%)     -124 B   (-3.0%)
async-load-quick-language-switcher                                        +236 B   (+0.2%)     +308 B   (+0.7%)
async-load-calypso-lib-account-settings-helper                            +236 B   (+0.1%)     +316 B   (+0.4%)
async-load-calypso-post-editor-editor-media-modal                         +215 B   (+0.0%)      +45 B   (+0.0%)
async-load-calypso-layout-guided-tours                                    +108 B   (+1.4%)      +52 B   (+2.1%)
async-load-calypso-blocks-support-article-dialog-dialog                    -91 B   (-0.1%)       -7 B   (-0.0%)
async-load-calypso-blocks-jitm-templates-modal                             +49 B   (+0.1%)     +266 B   (+1.1%)
async-load-calypso-components-jetpack-portal-nav                           -28 B   (-0.1%)       -2 B   (-0.0%)
async-load-calypso-components-global-notices                               -28 B   (-0.4%)       -3 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.

taipeicoder · 2022-10-20T02:17:24Z

Abandoning this PR in favor for #69270 and #69272.

Update design-preview UI + bump @wordpress/edit-site to 4.15.0

fc389e7

taipeicoder self-assigned this Oct 19, 2022

taipeicoder added the PT Style selection in onboarding label Oct 19, 2022

taipeicoder requested a review from a team October 19, 2022 09:48

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

taipeicoder added [Type] Enhancement Changes to an existing feature — removing, adding, or changing parts of it and removed [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. labels Oct 19, 2022

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

taipeicoder removed [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. PT Style selection in onboarding labels Oct 19, 2022

Update yarn.lock

5d9fe48

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

taipeicoder added [Status] String Freeze Add the [Status] String Freeze label to your PR to ensure new strings are translated before merging and removed [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. labels Oct 19, 2022

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

taipeicoder removed the request for review from a team October 19, 2022 10:02

taipeicoder removed [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. [Status] String Freeze Add the [Status] String Freeze label to your PR to ensure new strings are translated before merging labels Oct 19, 2022

taipeicoder removed their assignment Oct 19, 2022

taipeicoder closed this Oct 20, 2022

taipeicoder deleted the update/theme-preview-style-variation-ui branch October 20, 2022 02:17

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Update design-preview UI + bump @wordpress/edit-site to 4.15.0 #69245

Update design-preview UI + bump @wordpress/edit-site to 4.15.0 #69245

Uh oh!

taipeicoder commented Oct 19, 2022

Uh oh!

github-actions bot commented Oct 19, 2022 •

edited by matticbot

Loading

Uh oh!

matticbot commented Oct 19, 2022 •

edited

Loading

Uh oh!

taipeicoder commented Oct 20, 2022

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Update design-preview UI + bump @wordpress/edit-site to 4.15.0 #69245

Update design-preview UI + bump @wordpress/edit-site to 4.15.0 #69245

Uh oh!

Conversation

taipeicoder commented Oct 19, 2022

Proposed Changes

Testing Instructions

Pre-merge Checklist

Uh oh!

github-actions bot commented Oct 19, 2022 • edited by matticbot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

matticbot commented Oct 19, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

taipeicoder commented Oct 20, 2022

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

github-actions bot commented Oct 19, 2022 •

edited by matticbot

Loading

matticbot commented Oct 19, 2022 •

edited

Loading