[GB 13.7.x] Open Site Editor in the Gutenframe by using the site-editor.php route

[fullofcaffeine]

Proposed Changes

Gutenberg 13.7 deprecates the old themes.php?page=gutenberg-edit-site and admin.php?page=gutenberg-edit-site in favor of WP core's site-editor.php. This PR changes the Site Editor admin route to site-editor.php in the Gutenframe.

Testing Instructions

• Build Calypso from this branch, access calypso.localhost:3000;
• Apply this diff to your sandbox: D84749-code and D8488-code -- it has backward-compatible fixes for 13.7 that should be tested with 13.6, too;
• Open a sandboxed site that still has Gutenberg 13.6;
• Open the Site Editor by clicking the Appearance->Site Editor menu item. It should open the editor inside the Gutenframe and shouldn't redirect to the wp-admin page!
• Open the regular editor, it should load correctly, from the Gutenframe, too.
• Now use a site that has Gutenberg 13.7.3 installed (or apply the gutenberg-edge sticker to your existing site);
• Reload your local Calypso web app instance in the browser;
• Test the Site Editor and the editor - they should load from the Gutenframe.

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 you sent any new strings for translation (PCYsg-1vr-p2) ASAP?

Further context:

• Related to Redirect old theme_page Site Editor routes to the new site-editor.php page WordPress/gutenberg#42643 and Update the minimum WP version to 5.9 WordPress/gutenberg#41306.
• PSA: p4TIVU-acs-p2
• Slack discussion: p1658338410941839-slack-CHN6J22MP

[github-actions]

Calypso Live (direct link)

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

Jetpack Cloud live (direct link)

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

[matticbot]

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

Sections (~32 bytes removed 📉 [gzipped])

Details

name              parsed_size           gzip_size
gutenberg-editor        -40 B  (-0.0%)      -11 B  (-0.0%)
themes                  -20 B  (-0.0%)      -10 B  (-0.0%)
theme                   -20 B  (-0.0%)      -10 B  (-0.0%)
home                    -20 B  (-0.0%)      -11 B  (-0.0%)
checkout                -20 B  (-0.0%)      -10 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 (~11 bytes removed 📉 [gzipped])

Details

name                                                      parsed_size           gzip_size
async-load-calypso-blocks-product-purchase-features-list        -20 B  (-0.0%)      -11 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.

[creativecoder]

This is working as expected for me...

Simple sites: now that site-editor.php is a valid route, this works perfectly, loading the Site editor in the Calypso iframe from wp-admin/site-editor.php.

Atomic sites: this won't work until Gutenberg 13.7 is released, as older versions of Gutenberg will redirect from site-editor.php to themes.php?page=gutenberg-edit-site and break out of the iframe. However, I can't get any Atomic site to load the Site editor within the iframe right now.

Jetpack sites: these will already redirect and break out of the iframe when using the latest version of Gutenberg, so this change will be a welcome fix.

But still, I think it's best to wait to deploy this until just before Gutenberg 13.7 is released to Atomic sites.

[creativecoder]

Note that I tested this change on its own, apart from the associated diffs.

[fullofcaffeine]

Jetpack sites: these will already redirect and break out of the iframe when using the latest version of Gutenberg, so this change will be a welcome fix.

By Jetpack sites, do you mean plain org sites running the Jetpack plugin + connected to Jetpack? I thought those sites didn't use the Gutenframe/Calypso, though?

[creativecoder]

By Jetpack sites, do you mean plain org sites running the Jetpack plugin + connected to Jetpack? I thought those sites didn't use the Gutenframe/Calypso, though?

You're right, that's still true, afaik, and I forgot about it when I was testing. The Site editor isn't showing in the sidebar for any Jetpack (non-Atomic) sites in Calypso right now, so I was just going directly to the /site-editor/{site} link.