Wp-calypso: Fix issues in Tiled Gallery block

[simison]

Tiled Gallery block was merged in https://github.com/Automattic/wp-calypso/pull/26223

We left off most of the changes the block needs to be properly up-to-date with latest Gutenberg/React.

TODO

• [x] Add Prettier @format pragma

• [x] Block uses React components → they should be nested blocks if possible

  • [x] If that cannot be done, then: Block uses deprecated lifecycle methods. They now have UNSAFE_'s in them.

• [x] CSS is currently what was in Jetpack previously and doesn't follow Calypso's CSS naming guidelines. Linting for this was disabled using /* eslint wpcalypso/jsx-classname-namespace: 0 */ — CSS should be rewritten and possibly use flexbox. See https://github.com/Automattic/wp-calypso/pull/26551#issuecomment-411526549

• [x] not able to upload files directly by clicking the "Upload" button in the media placeholder - after selecting files, nothing happens:
  

  Using media library and already uploaded images or uploading new ones there works for a fresh block. Perhaps the MediaPlaceholder component API has changed?

• [x] Adding new images to an already existing gallery throws an error. Insert a tile gallery with some images. Then try adding images to it and uploading new image fails with an error:
  
  

• [x] After saving the block with some images in it, and refreshing the page, it either isn't saved properly or isn't recognized properly:
  
  

  This is also reproducible without saving and refreshing the page if you "Edit as HTML", then click inside the HTML code.

• [x] Looking at the frontend, it seems the images are not saved with the block output:
  

• [x] Tried to save the block as a shared block, and then reuse it, but the images are again lost when attempting to reuse it in another post. This might be related to the above issue of images not being saved properly when saving the block.

---

/cc @haszari has offered to help with any questions. He originally worked on Tiled Gallery Block in https://github.com/Automattic/jetpack/pull/9434. Further reading: p7rd6c-1Kz-p2

[haszari]

Thanks for setting up an issue to cover all these loose ends @simison.

I'm afraid I can't commit to tackling any of these any time soon, but I'll make time to answer questions for anyone who gets stuck in :)

[markfinst]

Should users be able to convert from Jetpack Gallery to default gallery and vice versa? (like it's done with old [gallery] implementation).

If user creates a Jetpack Gallery and then deactivates the plugin, it will break. Or I am missing something?

[simison]

Should users be able to convert from Jetpack Gallery to default gallery and vice versa?

Yep! We'll implement this for sure.

If user creates a Jetpack Gallery and then deactivates the plugin, it will break.

Correct; the rendered HTML markup will function at your site but the
gallery will not look exactly like it did before because styles are now
missing.

When editing the page, it will show up as a non-recognized block.

On Fri, 5 Oct 2018, 03:02 Marc Finsev, [e-mail] wrote:

Should users be able to convert from Jetpack Gallery to default gallery
and vice versa? (like it's done with old [gallery] implementation).

If user creates a Jetpack Gallery and then deactivates the plugin, it will
break. Or I am missing something?

—
You are receiving this because you were assigned.
Reply to this email directly, view it on GitHub
https://github.com/Automattic/wp-calypso/issues/26363#issuecomment-427266143,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AAFUgFtGyo6Qc3dUplEhkNlmSb6Om4Czks5uhwP6gaJpZM4VkjC4
.

[markfinst]

and vice versa?

I mean two scenarios:

First

• A user has a 100 posts, each with a gallery created via default Gutenberg gallery block.
• Installs Jetpack plugin.
• Checks option "[] Display all your gallery pictures as a cool mosaic"

Expected behavior: all galleries are now displayed as a tiled mosaic.

Second

• A user has a 100 posts, each with a gallery created via Jetpack gallery block.
• User deactivates Jetpack plugin

Expected behavior: all galleries are now displayed as default Gutenberg gallery.

---

Should the gallery block be rendered just on the backend to preserve backward compatibility? (instead of being rendered only on frontend via React)

[MichaelArestad]

Expected behavior: all galleries are now displayed as default Gutenberg gallery.

I think this really gets at the core of how blocks should behave when a block is no longer available. There are certain blocks like Tiled Galleries, where it would make sense to just fall back to a core gallery. However, I do not really know the best way to make that happen. It seems like something core Gutenberg should support at some point. @mtias what do you think?

[simison]

Follow-ups to https://github.com/Automattic/wp-calypso/pull/27458