FSE: G7.2.0 - replace legacy editor- classes with block-editor- #39035

chriskmnds · 2020-01-23T18:43:58Z

Changes proposed in this Pull Request

Gutenberg 7.2.0 & 7.3.0 removed legacy editor- classes in WordPress/gutenberg#19050 and WordPress/gutenberg#19489. This PR updates references to any legacy classes found in the FSE app.

Testing instructions

Not tested yet.

CC @Automattic/cylon

…tor-

matticbot · 2020-01-23T18:44:01Z

Test live: https://calypso.live/?branch=fix/gutenberg-7.2.0-classnames

matticbot · 2020-01-23T19:00:14Z

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

App Entrypoints (~116914 bytes removed 📉 [gzipped])

name                   parsed_size            gzip_size
entry-gutenboarding      -338359 B  (-14.9%)   -83828 B  (-13.9%)
entry-jetpack-cloud      -117138 B  (-44.2%)   -31262 B  (-39.7%)
entry-login              +106838 B  (+10.1%)   +24020 B   (+8.6%)
entry-domains-landing     -94158 B  (-14.7%)   -29912 B  (-17.3%)
entry-main                +32176 B   (+2.0%)    +4068 B   (+1.0%)

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

Sections (~89168 bytes removed 📉 [gzipped])

name                   parsed_size            gzip_size
gutenberg-editor         -125398 B  (-15.5%)   -30386 B  (-13.7%)
posts-custom             -123777 B  (-31.1%)   -29837 B  (-29.7%)
posts                    -123777 B  (-30.9%)   -29837 B  (-29.5%)
media                    -123545 B  (-25.5%)   -29829 B  (-23.7%)
woocommerce              +122812 B   (+6.3%)   +18481 B   (+3.5%)
domains                  +112306 B  (+15.4%)   +15646 B   (+8.9%)
post-editor              -112216 B   (-5.6%)   -27116 B   (-5.0%)
checkout                  +97102 B   (+9.1%)   +12155 B   (+4.4%)
purchases                 +74057 B   (+8.4%)    +8920 B   (+4.1%)
plugins                   -65258 B  (-12.2%)    -6798 B   (-5.4%)
jetpack-connect           +43961 B   (+8.8%)   +10742 B   (+8.1%)
plans                     +32333 B   (+8.3%)    +7587 B   (+7.4%)
auth                      -23625 B  (-56.6%)    -5090 B  (-49.2%)
people                    +11132 B   (+3.3%)    +2714 B   (+3.2%)
email                     -10621 B   (-3.6%)    -2984 B   (-4.0%)
home                       -5928 B   (-2.2%)    -1288 B   (-1.8%)
stats                      -3729 B   (-0.5%)    -1236 B   (-0.6%)
migrate                    -2618 B   (-2.2%)     -514 B   (-1.6%)
themes                      +544 B   (+0.2%)      +27 B   (+0.0%)
account-close               +531 B   (+0.2%)      +42 B   (+0.1%)
checklist                   +494 B   (+0.2%)      +20 B   (+0.0%)
marketing                   +487 B   (+0.1%)      +10 B   (+0.0%)
hosting                     +484 B   (+0.2%)      +22 B   (+0.0%)
activity                    +484 B   (+0.1%)       -7 B   (-0.0%)
theme                       +478 B   (+0.2%)      +19 B   (+0.0%)
pages                       +476 B   (+0.2%)      +20 B   (+0.0%)
settings-security           +453 B   (+0.2%)      +12 B   (+0.0%)
customize                   +422 B   (+0.3%)      +15 B   (+0.0%)
help                        +415 B   (+0.1%)       +4 B   (+0.0%)
signup                      +334 B   (+0.2%)      +16 B   (+0.0%)
earn                        -317 B   (-0.1%)     -265 B   (-0.4%)
reader                      +260 B   (+0.1%)      +20 B   (+0.0%)
export                      -254 B   (-0.2%)     -131 B   (-0.3%)
account                     +230 B   (+0.1%)       +5 B   (+0.0%)
notification-settings       +194 B   (+0.1%)       +5 B   (+0.0%)
privacy                     +182 B   (+0.1%)       -1 B   (-0.0%)
devdocs                     +177 B   (+0.1%)      +43 B   (+0.1%)
site-blocks                 +176 B   (+0.1%)       +1 B   (+0.0%)
comments                    +171 B   (+0.0%)      -10 B   (-0.0%)
me                          +170 B   (+0.1%)       -1 B   (-0.0%)
happychat                   +170 B   (+0.1%)       -1 B   (-0.0%)
settings-writing            +152 B   (+0.0%)       -6 B   (-0.0%)
settings                    +126 B   (+0.0%)      -67 B   (-0.1%)
settings-performance        +113 B   (+0.1%)      -15 B   (-0.0%)
import                      +111 B   (+0.1%)      -13 B   (-0.0%)
settings-discussion          +91 B   (+0.1%)      -17 B   (-0.0%)
zoninator                    +85 B   (+0.0%)      -13 B   (-0.0%)
feature-upsell               +79 B   (+0.1%)      -17 B   (-0.1%)
wp-super-cache               +78 B   (+0.0%)      -24 B   (-0.0%)
preview                      +63 B   (+0.1%)      -19 B   (-0.1%)
sites                        +61 B   (+0.1%)      -20 B   (-0.1%)
sensei                       +61 B   (+0.1%)      -20 B   (-0.1%)
hello-dolly                  +61 B   (+0.1%)      -20 B   (-0.1%)
security                     +54 B   (+0.0%)      -31 B   (-0.0%)
concierge                    -37 B   (-0.0%)      -51 B   (-0.1%)
accept-invite                +19 B   (+0.0%)      +11 B   (+0.0%)
google-my-business           -12 B   (-0.0%)      -41 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 (~11750 bytes removed 📉 [gzipped])

name                                                         parsed_size              gzip_size
async-load-signup-steps-import-preview                         -132388 B    (-86.2%)   -29410 B   (-82.2%)
async-load-post-editor-media-modal                             -123552 B    (-31.3%)   -29811 B   (-29.3%)
async-load-design-blocks                                       +123449 B     (+4.8%)   +18372 B    (+3.0%)
async-load-layout-guided-tours-component                        +59456 B   (+163.1%)   +10425 B  (+103.3%)
async-load-signup-steps-reader-landing                          -42241 B    (-78.7%)   -11140 B   (-78.1%)
async-load-layout-guided-tours                                  +33576 B  (+1166.6%)    +9064 B  (+879.1%)
async-load-signup-steps-plans                                   +32451 B    (+26.9%)    +7695 B   (+23.5%)
async-load-signup-steps-theme-selection                         +24809 B   (+145.9%)    +5846 B  (+129.7%)
async-load-my-sites-site-settings-seo-settings-form             +22687 B     (+8.8%)    +6404 B    (+9.4%)
async-load-signup-steps-site-style                              +21190 B   (+241.3%)    +7314 B  (+283.8%)
async-load-featured-image                                       -19984 B    (-87.4%)    -5106 B   (-83.2%)
async-load-design-playground                                    +19074 B     (+1.1%)    +4891 B    (+1.3%)
async-load-blocks-jitm-templates-sidebar-banner                 -18255 B    (-94.8%)    -5534 B   (-92.8%)
async-load-extensions-woocommerce-app-store-stats               +17828 B    (+70.4%)    +4710 B   (+62.9%)
async-load-signup-steps-creds-confirm                           +14395 B   (+166.5%)    +3824 B  (+147.6%)
async-load-post-editor-editor-post-formats-accordion            -12903 B    (-71.3%)    -3461 B   (-66.4%)
async-load-my-sites-current-site-notice                         -12641 B    (-28.1%)    -2788 B   (-25.7%)
async-load-signup-steps-about                                   +11740 B    (+33.5%)    +3175 B   (+33.3%)
async-load-signup-steps-domains                                 +11260 B     (+5.6%)    +2780 B    (+5.7%)
async-load-signup-steps-site-or-domain                          +10414 B   (+119.8%)    +2868 B  (+111.3%)
async-load-signup-steps-site-picker                             -10326 B    (-54.0%)    -2868 B   (-52.7%)
async-load-post-editor-editor-author                             -8681 B    (-32.4%)    -2671 B   (-33.9%)
async-load-design                                                +8507 B     (+0.5%)    +1942 B    (+0.5%)
async-load-docs-selectors                                        -8076 B    (-58.9%)    -1878 B   (-51.2%)
async-load-signup-steps-clone-jetpack                            -7709 B    (-42.6%)    -2159 B   (-43.4%)
async-load-extensions-woocommerce-app-store-stats-listview       -7616 B    (-32.5%)    -1951 B   (-30.0%)
async-load-extensions-woocommerce-app-store-stats-referrers      +7053 B    (+19.9%)    +1591 B   (+15.5%)
async-load-signup-steps-creds-complete                           -5444 B    (-38.6%)    -1511 B   (-36.8%)
async-load-signup-steps-site-topic                               -4619 B    (-13.9%)    -3094 B   (-27.5%)
async-load-signup-steps-clone-destination                        +4491 B    (+33.0%)     +995 B   (+25.0%)
async-load-reader-list-stream                                    -4329 B    (-29.2%)     -853 B   (-21.9%)
async-load-signup-steps-survey                                   +3415 B    (+25.1%)     +887 B   (+24.5%)
async-load-signup-steps-clone-ready                              +3354 B    (+13.7%)    +1178 B   (+18.0%)
async-load-signup-steps-rewind-were-backing                      -1380 B    (-13.7%)     -218 B    (-7.8%)
async-load-signup-steps-rewind-form-creds                        -1370 B     (-3.4%)     -325 B    (-3.0%)
async-load-signup-steps-clone-cloning                            -1365 B     (-9.1%)     -543 B   (-12.0%)
async-load-reader-sidebar                                         -867 B     (-1.5%)     -174 B    (-1.2%)
async-load-blocks-inline-help-popover                             +578 B     (+0.2%)      +57 B    (+0.1%)
async-load-signup-steps-plans-atomic-store                        -542 B     (-0.6%)     -293 B    (-1.1%)
async-load-signup-steps-clone-start                               +343 B     (+2.5%)     +110 B    (+2.8%)
async-load-components-web-preview-component                       +224 B     (+0.1%)      +10 B    (+0.0%)
async-load-my-sites-current-site-stale-cart-items-notice          -169 B     (-0.2%)      -79 B    (-0.4%)
async-load-signup-steps-creds-permission                          -120 B     (-0.5%)      +10 B    (+0.2%)
async-load-my-sites-current-site-domain-warnings                  -115 B     (-0.2%)      -27 B    (-0.2%)
async-load-signup-steps-user                                      -114 B     (-0.1%)      -14 B    (-0.0%)
async-load-layout-nps-survey-notice                               -109 B     (-0.5%)      -27 B    (-0.5%)
async-load-reader-following-manage                                 +92 B     (+0.1%)       +8 B    (+0.0%)
async-load-my-sites-checklist-wpcom-checklist-component-jsx        -91 B     (-0.1%)      -22 B    (-0.1%)
async-load-blocks-calendar-popover                                 +90 B     (+0.0%)       +5 B    (+0.0%)
async-load-reader-search-stream                                    +44 B     (+0.1%)       +7 B    (+0.0%)
async-load-blocks-reader-full-post                                 +36 B     (+0.1%)       +1 B    (+0.0%)
async-load-signup-steps-rebrand-cities-welcome                     +30 B     (+0.2%)       +2 B    (+0.1%)
async-load-signup-steps-clone-point                                +29 B     (+0.0%)       +6 B    (+0.0%)
async-load-reader-site-stream                                      +24 B     (+0.0%)       +1 B    (+0.0%)
async-load-reader-feed-stream                                      +24 B     (+0.1%)       +1 B    (+0.0%)
async-load-quick-language-switcher                                 +24 B     (+0.1%)       +3 B    (+0.0%)
async-load-blocks-inline-help                                      +24 B     (+0.0%)       +3 B    (+0.0%)
async-load-apps-notifications-index-jsx                            +24 B     (+0.0%)       +3 B    (+0.0%)
async-load-blocks-product-purchase-features-list                   +20 B     (+0.0%)       +6 B    (+0.1%)
async-load-blocks-jitm-templates-default                           +20 B     (+0.1%)       +4 B    (+0.1%)
async-load-post-editor-editor-sharing-accordion                    +12 B     (+0.1%)       +3 B    (+0.1%)
async-load-post-editor-editor-discussion                           +12 B     (+0.2%)       +2 B    (+0.1%)
async-load-layout-community-translator-launcher                    +12 B     (+0.1%)       +0 B
async-load-blocks-support-article-dialog-dialog                    +12 B     (+0.0%)       +1 B    (+0.0%)
async-load-blocks-jitm                                             +12 B     (+0.3%)       +2 B    (+0.1%)
async-load-blocks-app-banner                                       +12 B     (+0.2%)       +1 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.

noahtallen · 2020-01-30T05:38:15Z

I merged in master to avoid fixing conflicts so much for the rebase

noahtallen · 2020-01-30T05:38:47Z

Well, apparently that didn't work for some reason.

This reverts commit 9ef1c89, reversing changes made to 936fd79.

#39035

noahtallen · 2020-01-30T05:54:15Z

Since I've totally messed this up, I'm creating a new PR: #39157

chriskmnds · 2020-01-30T07:44:52Z

Since I've totally messed this up, I'm creating a new PR: #39157

Haha ok, sounds good. Just make sure these are looked at: bfc2e8b

chriskmnds · 2020-01-30T07:45:33Z

Closing in favour of #39157

noahtallen · 2020-01-30T22:35:11Z

I added some comments on bfc2e8b to explain why some of the things weren't copied over

* Previous art at #39035 * Fix writing flow style * Hide contextual toolbar for templates again * Remove block border UI * Target new element in template editor In a recent Gutenberg update, the div structure has changed around the blockList. Therefore, we need to update this selector to reference the new structure. Otherwise, the classNames were applied to a div which is not actually a parent of the elements we ultimately want to change.

noahtallen · 2020-02-03T18:43:54Z

@chriskmnds Just a heads up that I've done an audit of everything in the FSE plugin (minus the newspack posts block) and all cases where we used the old selectors should be fixed

chriskmnds · 2020-02-04T08:35:58Z

Thanks for keeping this PR and myself informed @noahtallen ! Good job on investigating things.

FSE - Gutenberg 7.2.0 - replace legacy editor- classes with block-edi…

bfc2e8b

…tor-

chriskmnds added the [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. label Jan 23, 2020

chriskmnds requested review from a team January 23, 2020 18:43

chriskmnds requested a review from a team as a code owner January 23, 2020 18:43

chriskmnds self-assigned this Jan 23, 2020

Cleanup

936fd79

This was referenced Jan 23, 2020

Plugin updates: Gutenberg 7.3.0 / CoBlocks 1.20.1 #38852

Closed

Gutenberg 7.3.0: Trigger E2E tests #38857

Merged

simison added the [Status] Needs Rebase label Jan 29, 2020

Merge branch 'master' into fix/gutenberg-7.2.0-classnames

9ef1c89

chriskmnds requested a review from a team as a code owner January 30, 2020 05:37

Revert "Merge branch 'master' into fix/gutenberg-7.2.0-classnames"

324b255

This reverts commit 9ef1c89, reversing changes made to 936fd79.

chriskmnds requested review from a team as code owners January 30, 2020 05:43

noahtallen added a commit that referenced this pull request Jan 30, 2020

copy changes from existing PR

7c63305

#39035

noahtallen mentioned this pull request Jan 30, 2020

FSE: Update styles to reference new changes in Gutenberg #39157

Merged

1 task

chriskmnds closed this Jan 30, 2020

matticbot removed the [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. label Jan 30, 2020

sirreal deleted the fix/gutenberg-7.2.0-classnames branch December 4, 2020 09:18

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

FSE: G7.2.0 - replace legacy editor- classes with block-editor- #39035

FSE: G7.2.0 - replace legacy editor- classes with block-editor- #39035

chriskmnds commented Jan 23, 2020

matticbot commented Jan 23, 2020

matticbot commented Jan 23, 2020 •

edited

Loading

noahtallen commented Jan 30, 2020

noahtallen commented Jan 30, 2020

noahtallen commented Jan 30, 2020

chriskmnds commented Jan 30, 2020

chriskmnds commented Jan 30, 2020

noahtallen commented Jan 30, 2020

noahtallen commented Feb 3, 2020

chriskmnds commented Feb 4, 2020

FSE: G7.2.0 - replace legacy editor- classes with block-editor- #39035

FSE: G7.2.0 - replace legacy editor- classes with block-editor- #39035

Conversation

chriskmnds commented Jan 23, 2020

Changes proposed in this Pull Request

Testing instructions

matticbot commented Jan 23, 2020

matticbot commented Jan 23, 2020 • edited Loading

noahtallen commented Jan 30, 2020

noahtallen commented Jan 30, 2020

noahtallen commented Jan 30, 2020

chriskmnds commented Jan 30, 2020

chriskmnds commented Jan 30, 2020

noahtallen commented Jan 30, 2020

noahtallen commented Feb 3, 2020

chriskmnds commented Feb 4, 2020

matticbot commented Jan 23, 2020 •

edited

Loading