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

[taipeicoder]

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:

• Global Styles: Remove main content layout padding in preview WordPress/gutenberg#43601
• Remove border from Global Styles previews WordPress/gutenberg#44556

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]

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]

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

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

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])

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])

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]

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