wpcom block editor: hide new Gutenberg preview button

[simison]

Changes proposed in this Pull Request

This PR forces the mobile preview button to be the default in the block editor.

We have to do this because the device preview functionality in Gutenberg 7.7 works by overwriting stylesheets.

However overwriting stylesheets can only occur on the same domain due to cross-site security. See: p7DVsv-8gl-p2#comment-27501

Further issue tracking in #40401

Testing instructions

Check out this branch and build it:

npx lerna run build --scope='@automattic/wpcom-block-editor' -- -- --watch

Upload the files in apps/wpcom-block-editor/dist to your sandbox.

1. YOUR_TEST_SITE_URL should be running Gutenberg Edge
2. YOUR_TEST_SITE_URL should be sandboxed
3. Tea should be brewed for at least three minutes. 🍵

Try creating a post:

https://[YOUR_TEST_SITE_URL]/wp-admin/post-new.php (this PR doesn't address this, needs a follow up as described in #40388 (comment))

https://wordpress.com/block-editor/post/[YOUR_TEST_SITE_URL]

Check that the preview button in the editor always defaults always to the mobile version:

[matticbot]

Test live: https://calypso.live/?branch=update/wpcom-gutenberg-legacy-preview

[matticbot]

This PR does not affect the size of JS and CSS bundles shipped to the user's browser.

Generated by performance advisor bot at iscalypsofastyet.com.

[roo2]

It doesn't seem to be loading that SCSS file at all as is. I was able to test it locally and added a console.log('HERE') to widgets.wp.com/wpcom-block-editor/editor.js so I believe I was testing it correctly... But nothing in apps/wpcom-block-editor/src/wpcom/features/legacy-preview-button.scss was loaded 🤔

[ramonjd]

For me the CSS for wpcom.editor isn't being loaded. Probably not enqueued in wpcom.

I threw the CSS in apps/wpcom-block-editor/src/wpcom/features/legacy-preview-button.scss into apps/wpcom-block-editor/src/calypso/editor.scss to check and it works.

calypso.editor JS and CSS are being loaded. :)

[ramonjd]

I've tested enqueuing the files using a change in D40729-code

The patch below moves the CSS changes in this PR to /default, on the assumption that "default" means both WPCOM and Calypso.

See the README file for confirmation

Patch file:

serve-legacy-preview-button-css-from-default.txt

[simison]

on the assumption that "default" means both WPCOM and Calypso.

.
└── src/
	├── default ← Always loaded.
	├── calypso ← Only loaded when you access Gutenberg through the iFrame.
	├── wpcom   ← Only loaded when you access Gutenberg on Simple and Atomic sites.

via

I think default loads also on Jetpack sites (@mmtr correct?) and we don't wanna break the feature for those. Hence wpcom seems like the way to go, sounds like it'll load also when iframing the block-editor?

[mmtr]

That's correct @simison. Features in default are loaded in all sites (Simple, Atomic and Jetpack). If you want to target both Calypso and WP Admin of WP.com sites (Simple and Atomic) then wpcom would be the place.

[simison]

I've confirmed that this gets loaded only when iframing Gutenberg via Calypso.

Tested FSE and non-FSE sites with Gutenberg 7.7.1:

As well non-FSE site with Gutenberg 7.3 — no affect on previous preview button:

All these now open on both mobile and desktop widths this preview modal in Calypso, which happens to also have the mobile preview:

[simison]

I'd like to keep this fix just for Calypso-iframed Gutenberg can call that enough for Gutenberg 7.7.

I'll do another PR to address wp-admin, but since it needs some PHP and Jetpack handling in addition to D40729-code, I'd like to look into that separately. Jetpack release is on April 7th. We should really just move whatever is in Jetpack to FSE plugin for ease. :-)

[noahtallen]

overwriting stylesheets can only occur on the same domain due to cross-site security

🤦‍♂

[simison]

To be clear, I'd like us to figure a solution before the next Gutenberg release. Hiding UI elements like this isn't very sustainable. 😁

[Addison-Stavlo]

I was just testing this on a site with dotcom FSE enabled (but not running due to theme selection).

It did change the preview from the dropdown button back to this:

Which opens the previewer default in 'desktop' mode. There dont seem to be any issues with this, but I noticed you mentioned it should default to 'mobile' view?

Anyways, the overall change seems to be working.

[simison]

Thanks for testing @Addison-Stavlo 🙌

Which opens the previewer default in 'desktop' mode. There dont seem to be any issues with this, but I noticed you mentioned it should default to 'mobile' view?

Desktop view is expected. 👍 I mean to say that mobile preview is available in that popup in Calypso, which is great because we're hiding the equavelent core feature.

[Addison-Stavlo]

I mean to say that mobile preview is available in that popup in Calypso

Great! That was definitely present and working then. 😄

[ramonjd]

Nice work everyone! I'll retire D40729-code for (maybe) future use.