Feature: add support for a Tiled Gallery layout (Square Tiles) as a Gutenberg block

[ockham]

This is starting as a literal copy of @haszari's #9434, but in the Automattic/jetpack repo rather than @haszari's cloned repo. This will need a bit of rebasing to bring it up-to-date with current Gutenberg (and JP?). I will use this as a testbed for the Calypso/Gutenberg integration project.

Original PR description pasted below the line

---

Related: #8527 (see limitations below)

Changes proposed in this Pull Request:

Currently, there's no way to use Jetpack Tiled Galleries in Gutenberg. This pull request implements a new Gutenberg block which provides one of the Tiled Gallery layouts as a Gutenberg block. This block can be easily transformed to and from the core Gutenberg gallery block.

This is a proof-of-concept which demonstrates one way to provide Tiled Gallery features in Jetpack. There's lots more work to do!

A fundamental question is how Jetpack-powered gallery features should be made available to users – as an extension to core/gallery, or as a separate block (or some other approach). This PR is a demonstration of how this can work well as a separate block.

Testing instructions:

I have a sandbox running a production build of this branch - ping me if you want an account to test.
https://haszari.wpsandbox.me

Otherwise, to test this on your WordPress site....

1. Ensure both Gutenberg and Jetpack (this branch!) are installed.
2. Activate & connect Jetpack and enable the "Serve images from our servers" (Photon) option. This option must be enabled to enable Tiled Galleries.
3. Edit a post using Gutenberg.

You can add Jetpack Gallery blocks using the Gutenberg switcher. The interface is somewhat similar to the core block experience, with live preview of the Square Tiles layout, and using the (legacy) modal for adding or editing the images and captions. There are settings for number of columns and what the images should link to (attachment, file, or no link).

Using the block switcher you can transform any core gallery to a tiled gallery, and vice versa.

Limitations/Notes

• Only one tiling algorithm supported at present. If we think this approach is sound, can look at porting other tiling options as follow-up PRs.
• Currently uses a hybrid of new react-generated markup alongside the existing jQuery-based resize handling script (and existing CSS). Longer term it would make sense for this behaviour to be integrated into the react components.
• Is heavily based on the current core/gallery implementation, especially for the edit component. This delegates image selection, ordering etc to the legacy edit gallery modal. Ideally the uploading and reordering of images (and other core editing) would be implemented within Gutenberg (WYSIWYG).
• Currently captions are editable in the gallery edit modal (in contrast to core/gallery, which has implemented direct manipulation).
• The "image size" option is not correctly handled (in keeping with core/gallery).
• Images render squished when previewing in Gutenberg. In development I had thought this was intended behaviour for Square Tiles (had seen it when testing the base plugin). As it appears to render with the correct pixel aspect ratio on the front-end, this should probably be fixed.
• A hard-coded value is used for content_width. I suspect this means that tiled galleries will not slot in beautifully in some themes. This value is not currently available to the js/front end (that I'm aware of). Is this heavily used? If so, we can look at ways to make it available to the client side.
• The jsx code for this plugin is built as a new entry point in webpack. This works fine for now, but long term it would be much better to bundle all of Jetpack's Gutenberg jsx as a single file.

[haszari]

Thanks for jumping on this @ockham! When I get a moment I'll have a look at the rebase and also see how it fares against the latest Gutenberg.

Where can I learn more about "the Calypso/Gutenberg integration project"?

[simison]

@haszari p1HpG7-5lf-p2

[haszari]

A quick update – I haven't got far with this yet, but I thought I'd drop a note in case anyone else takes a look.

I haven't tried rebasing yet. I have tried with latest stable Gutenberg, and there's a react issue when you add an instance of the block. My guess is that it depends on a core-provided react component that's moved or renamed. Hopefully an easy fix, but haven't tracked it down yet :)

React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in.

[simison]

@haszari thanks for the update!

I've been poking Jetpack+Blocks a bit yesterday and found out the exact same issue with existing vr block and with another simple block I made for practice.

My demo block does work as a separate wp-plugin in Gutenberg so there's maybe something funky with Jetpack's block builder.

After fixing some deprecated components form vr block, it does work with define ( 'SCRIPT_DEBUG', true ); but oddly not when that's set to false

Update: yep, it was something funky how I was using the Jetpack's builder. :-)

[simison]

Moving this to Automattic/wp-calypso#26223