Tiled Galllery Block: update Platform implementation to avoid pulling too many dependencies

[jeherve]

This is a follow-up from #21849.

The block update pulls Platform, from @wordpress/element. That is problematic as the whole package (and its dependencies, React, React Dom, and lodash) is then added as a dependency and then enqueued in the editor as well as on the frontend to render the gallery.

It would be nice to refactor this so we only add what we need. While we do try to use WordPress packages whenever possible, we aim to be as frugal as possible for frontend dependencies.

---

cc @illusaen, @guarani, and @SiobhyB who worked on the original PR. Do you think you could take a look?

Thank you!

[guarani]

Hi @jeherve, thanks for reporting this, I'll take a look.

[sgomes]

Hey @guarani, please let me know if you need any help looking into this!

[guarani]

👋 Hi @sgomes, thanks for reaching out.

A likely solution would be to split mosaic/resize.js into a resize.js file and resize.native.js file. The latter would then import Platform and the former would not import from @wordpress/element at all.

My understanding of the issue is that #21849 (the port of Tiled Gallery to native mobile) imported Platform from @wordpress/element and this caused performance issues on the web. These performance issues are present in both the editor (via edit.js) and on the frontend (via the serialized output of save.js).

Could you please confirm if this is your understanding as well?

---

If so, the next step is identifying the places where Platform is now imported and seeing where this is in-turn used by the editor and front-end:

• jetpack/projects/plugins/jetpack/extensions/blocks/tiled-gallery/layout/mosaic/index.js

  Line 4 in e164982

  import { Component, createRef, Platform } from '@wordpress/element';

  
  The changes in [RNMobile] Initial Port of Jetpack Tiled Gallery Block #21849 only added Platform (Component and createRef where already imported from @wordpress/element). Since the package was already imported, it's my understanding that the addition of Platform wouldn't bring in the unwanted changes mentioned in this issue (React, React Dom, etc) – let me know if you think otherwise!

• jetpack/projects/plugins/jetpack/extensions/blocks/tiled-gallery/layout/mosaic/resize.js

  Line 4 in e164982

  import { Platform } from '@wordpress/element';

  
  This second import looks relevant. [RNMobile] Initial Port of Jetpack Tiled Gallery Block #21849 added an import of Platform from @wordpress/element to resize.js, which is imported on the web through the mosaic layout, then into the web's edit.js function via the Layout component.
  That seems to explain how this affects the editor. I'm not sure yet though how this may be impacting the front-end, so I need to better understand the relevant code paths.

---

I want to reproduce this to make sure I have a good understanding of the issue and to be able to test a fix, but I had some issues this week with my Jetpack setup. I think I've been able to resolve these, so my next steps (likely tomorrow) will be to reproduce this in the browser using a local dev env. Alternatively I'll try reproducing in production (it's my understanding this issue is also affecting production).

[sgomes]

Hey @guarani! I'm currently AFK but I'd be happy to help out on Monday, yes!

My understanding of the issue is that #21849 (the port of Tiled Gallery to native mobile) imported Platform from @wordpress/element and this caused performance issues on the web. These performance issues are present in both the editor (via edit.js) and on the frontend (via the serialized output of save.js).

Could you please confirm if this is your understanding as well?

Yes, that's the issue I able to identify, although it only applies to the frontend; the editor is able to make use of @wordpress/element without any performance concerns, since it's part of the core Gutenberg functionality.

Not the frontend, though. Loading @wordpress/element (and consequently, lodash and react) is a large performance regression that's currently affecting all page views that use the tiled gallery.

[guarani]

Loading @wordpress/element (and consequently, lodash and react) is a large performance regression that's currently affecting all page views that use the tiled gallery.

I'll go ahead and create a PR to split mosaic/resize.js into a resize.js file and resize.native.js file, and removing the import of Platform from the former. I'll submit that PR for review from Jetpack Crew even if I can't test the change myself (since I don't want to delay this further due to any issues with my local Jetpack development setup.)

[guarani]

I've created #22547 to fix this by reverting the changes to resize.js. If this is urgent and someone else can test the PR and approve it, I'd be grateful! I'm having a few issues with the local environment that I'll summarize below.

---

I think I've been able to reproduce the original issue on Jetpack master:

When testing the PR locally, Jetpack seems to install fine (jetpack install plugins/jetpack) and the plugin appears activated, but I don't see the Tiled Gallery in the block picker. Other times I get the "Your installation of Jetpack is incomplete." error in the WordPress dashboard. I won't be able to continue looking into this today, but will be back Monday to continue testing.