Gallery Block: Try masonry layout option

[jasmussen]

This PR adds a "masonry layout" option to the gallery block inspector. Toggling this will let you show your gallery in a masonry style layout instead of the default one. "Masonry" refers to having either the width or the height vary, yet laying out items so items fit snugly edge to edge.

GIF:

This PR is unfinished. The masonry option isn't saved yet, and as a result the frontend styles don't output. Also, the crop feature is tied to the default style of the gallery, so we'd probably want to "gray" the crop option if you choose the masonry option. But it works in the editor, so you can try it.

Before I do any work to polish this any more, the question is: do we want this feature as part of the stock gallery, or should this be left to plugins to build?

[andreiglingeanu]

It all sounds very cool but column-* CSS properties do not fit very well for complex masonry layouts (they're purpose is to align text in columns, really), here's an issue that tracks this particular layout, but for CSS Grid instead: rachelandrew/cssgrid-ama#19

Another option is to use @desandro's masonry lib, but I believe that's too big a dependency for Gutenberg.

[jasmussen]

Great discussion. Per thoughts also in #4771 (comment), for now I'm, going to close this as "plugin territory".

However in #4771 I'm going to post some CSS that combined with the "additional CSS class" will make it easy for anyone to convert a gallery to a masonry gallery.

[desandro]

I've also got a smaller library that does Masonry layouts that's 10% the size of Masonry called Colcade. It doesn't have a lot of usage, so you'd be really throwing it into the spotlight. But it might be the right solution for this use case.