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

haszari · 2018-04-27T08:50:22Z

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....

Ensure both Gutenberg and Jetpack (this branch!) are installed.
Activate & connect Jetpack and enable the "Serve images from our servers" (Photon) option. This option must be enabled to enable Tiled Galleries.
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.

jeherve · 2018-04-27T11:13:07Z

Related: #8527

haszari · 2018-04-28T03:55:37Z

Looks like the CI build started failing when I changed some comments? Is there something else going on here? (I'm pretty certain it passed originally.)

Can that be easily rerun?

Aha! Here's the passing test, looks to be on the same changeset as the failing test?
https://travis-ci.org/Automattic/jetpack/builds/372244187
vs
https://travis-ci.org/Automattic/jetpack/builds/372250811

sirreal · 2018-04-28T06:13:29Z

Can that be easily rerun?

I reran the 5.3 tests which had failed. All green now 👌

oskosk · 2018-05-08T19:49:36Z

Given that this PR comes from a fork of the Jetpack repo, I felt the need to drop the instructions on how to achieve a local checkout of this branch for those working with a direct clone of Automattic/Jetpack.

To check this PR:

git fetch origin pull/9434/head:pr/9434
git checkout pr/9434
yarn build

Make sure Gutenberg is installed and Jetpack is connected.

tyxla

This is a great start! 👍

I've encountered some of the issues that you've already mentioned in the PR description, seems they'll need some additional work, but they can be taken care of when it's certain that the PR is heading in the right direction.

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.

Looking at the code, I see a lot of duplication from the original gallery block. I think we can attempt to reuse much of the original gallery block code, and that would save us a lot of repetition, but also would prevent us from having to update this block every time a small change is made to the original gallery block. After all, the original gallery block will probably stay around for a while, so I think it will be a good idea if we follow it closely with any Jetpack gallery blocks. This way they could benefit from any future changes/improvements to the core gallery block. For example, I like how the original gallery block resizes the images to fit the available space:

Have you experimented with that approach already?

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.

Do you have any thoughts about where this would be selected? Should each of these be a separate block, or could it be an inspector control? I think it would be very intuitive if we have all these as an inspector control setting and users are able to change them as they can in the media popup for the original gallery shortcode.

Longer term it would make sense for this behaviour to be integrated into the react components.

👍 Perhaps something that all gallery blocks could reuse?

Images render squished when previewing in Gutenberg.

This is easier to reproduce and observe with images that have a larger ratio. We should test with a variety of sizes and ratios to make sure all of them are rendered properly and don't appear squished.

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?

In my previous theme development experience, I used that often. It is pretty convenient, and we should take advantage of it. Exposing the value to the client is pretty straightforward, so you could do it to avoid hardcoding the content width.

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.

👍 This could be done eventually when more blocks are merged into the Jetpack repo.

Again, this is great work 👍 I'm looking forward to seeing some more 💯

tyxla · 2018-05-10T09:33:28Z

modules/tiled-gallery/block-edit.jsx

+				<ImagePlaceholder key="gallery-placeholder"
+					className={ className }
+					icon="format-gallery"
+					label={ __( 'Gallery' ) }


What do you think about labelling it "Jetpack Gallery" instead, so it is different from the default Gallery block?

Good point! I wish I'd spotted that earlier!

tyxla · 2018-05-10T10:13:03Z

modules/tiled-gallery/tiled-gallery.php

+ 	public static function enqueue_block_editor_assets() {
+  		wp_register_script(
+  			'jetpack-tiled-gallery-block',
+  			plugins_url( '../../_inc/build/modules-tiled-gallery-block.js', __FILE__ ), // this is built as a new webpack entry point


Instead of __FILE__ here we could use JETPACK__PLUGIN_FILE to avoid the ../../ relative paths.

That's more robust, thanks. Now fixed :)

…older), transform to/from core/gallery

…nclear on how to store attributes/state so they are available to PHP render)

… front end, so image state persists (and renders)

…g on editor reload due to assuming wrapper element class name based on core/gallery block (was causing validation error) – fixed by simplifying selector

…n save and edit

- reset line-height - zero out figure margin

…tributes object

…ery to js work-in-progress)

…served (fix no data/validation error)

… we can use them for smart tiling layouts implemented in js)

…ur block-based tiled galleries (short term hack)

…estigation)

…we don't use (that we stole from core/gallery..)

…f user navigating out of editor when clicking the gallery

…umn-count layout experiment)

… (for now - ideally we'd have a jetpack-branded icon or a "tiled" icon)

…utenberg script asset (using JETPACK__PLUGIN_FILE instead of current-file-relative __FILE__)

…holder component for consistency and to disambiguate from core/gallery

oskosk · 2018-07-11T20:19:33Z

@haszari could you create a version of this branch but on this same repo instead of being a branch on a fork ?

haszari · 2018-07-12T08:14:03Z

@oskosk Will do, thanks for following up. It will be interesting to see how stale this code is – hasn't been rebased in a while. Will let you know when it's up.

ockham · 2018-07-12T12:44:43Z

I"m considering playing with this as a testbed for the Gutenberg/Calypso integration project, so I might as well do it.

matticbot · 2018-07-12T12:45:11Z

Caution: This PR has changes that must be merged to WordPress.com
Please review this diff before merging: D16041-code. (newly created revision)

matticbot · 2018-07-12T12:48:54Z

Caution: This PR has changes that must be merged to WordPress.com
Please review this diff before merging: D16041-code. (updated diff)

matticbot · 2018-07-12T12:52:14Z

Caution: This PR has changes that must be merged to WordPress.com
Please review this diff before merging: D16041-code. (updated diff)

oskosk · 2018-07-18T17:41:38Z

Closing in favour of #9903

Based on Haszari's work in: Automattic/jetpack#9903 & Automattic/jetpack#9434 Contains some modifications to make this work with latest Gutenberg and with Calypso's linters. Co-authored-by: haszari <haszari@cartoonbeats.com>

@haszari

Add tiled gallery Gutenberg block Based on @haszari's work in: Automattic/jetpack#9903 & Automattic/jetpack#9434 Contains some modifications on top of their work to make this function with Gutenberg v3.3 and with Calypso's linters. Co-authored-by: haszari <haszari@cartoonbeats.com>

haszari requested a review from a team as a code owner April 27, 2018 08:50

haszari force-pushed the try/gutenberg-separate-jetpack-gallery-block branch from 03af8e0 to 98e3faa Compare April 27, 2018 22:38

tyxla reviewed May 10, 2018

View reviewed changes

haszari added 18 commits May 12, 2018 13:28

prototype separate jetpack tiled gallery block, render in php (placeh…

a63a8d2

…older), transform to/from core/gallery

remove dangling comma

ba7c1a0

remove php render code - focus on js render (more "Gutenbergy", and u…

7196e45

…nclear on how to store attributes/state so they are available to PHP render)

(work in progress - fails gutenberg validation?) render gallery block…

b5a8269

… front end, so image state persists (and renders)

fix jetpack/gallery attribute definition; attributes were disappearin…

b10bb38

…g on editor reload due to assuming wrapper element class name based on core/gallery block (was causing validation error) – fixed by simplifying selector

refactor jetpack/gallery to use same component for rendering images i…

1de72b6

…n save and edit

implement column-tiled jetpack/gallery using css column-count approach

d0922e8

tweak styling so gallery layout is consistent across editor/frontend:

5654332

- reset line-height - zero out figure margin

fix jetpack gallery transform to/from core gallery: correctly pass at…

9604d77

…tributes object

add upload button prompt text

45eb8e6

basic gallery item item component - rough markup (port php tiled gall…

fd25887

…ery to js work-in-progress)

update classname in attribute spec to ensure block attributes are pre…

584a7b0

…served (fix no data/validation error)

get image dimensions from store/api and render in markup

469f759

ensure that all child TiledGalleryItems have a key

eff362c

set width & height attributes and render them in front-end markup (so…

dbfd125

… we can use them for smart tiling layouts implemented in js)

add columns attribute (param for various tiled layouts)

1003eb6

enqueue tiled gallery js (and css) by default, so we can use it for o…

4c1aabe

…ur block-based tiled galleries (short term hack)

remove width/height elements from visible display (remnant of dev/inv…

6be8207

…estigation)

haszari added 9 commits May 12, 2018 13:28

Gutenberg Tiled Gallery: tidy up edit component, remove methods that …

0cf2a2e

…we don't use (that we stole from core/gallery..)

Gutenberg Tiled Gallery: disable linkTo when editing, to avoid risk o…

806be4e

…f user navigating out of editor when clicking the gallery

Gutenberg Tiled Gallery: remove style.css (unused, left over from col…

b043dee

…umn-count layout experiment)

Gutenberg Tiled Gallery: remove unused image component

7c53cce

Gutenberg Tiled Gallery: switch out album icon for format-gallery…

faa68c2

… (for now - ideally we'd have a jetpack-branded icon or a "tiled" icon)

Gutenberg Tiled Gallery: consistent capitalisation for save component

a86f834

Gutenberg Tiled Gallery: tidy/clarify comments

8ea0fab

Gutenberg Tiled Gallery: avoid fragile relative paths when enqueing g…

1dd0fb7

…utenberg script asset (using JETPACK__PLUGIN_FILE instead of current-file-relative __FILE__)

Gutenberg Tiled Gallery: use "Jetpack Gallery" in empty-gallery place…

e8dd3eb

…holder component for consistency and to disambiguate from core/gallery

haszari force-pushed the try/gutenberg-separate-jetpack-gallery-block branch from 98e3faa to e8dd3eb Compare May 12, 2018 01:33

matticbot added the Touches WP.com Files label May 12, 2018

oskosk added [Status] Needs Review To request a review from Crew. Label will be renamed soon. and removed [Status] In Progress labels Jul 11, 2018

oskosk added this to the 6.4 milestone Jul 11, 2018

ockham mentioned this pull request Jul 12, 2018

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

Closed

oskosk closed this Jul 18, 2018

simison mentioned this pull request Jul 20, 2018

SDK: Add tiled gallery block Automattic/wp-calypso#26223

Merged

simison mentioned this pull request Jul 27, 2018

Fix issues in Tiled Gallery block Automattic/wp-calypso#26363

Closed

9 tasks

kraftbj removed the [Status] Needs Review To request a review from Crew. Label will be renamed soon. label Sep 29, 2021

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

haszari commented Apr 27, 2018 •

edited

Loading

jeherve commented Apr 27, 2018

haszari commented Apr 28, 2018 •

edited

Loading

sirreal commented Apr 28, 2018

oskosk commented May 8, 2018

tyxla left a comment

tyxla May 10, 2018

haszari May 12, 2018

tyxla May 10, 2018

haszari May 12, 2018

oskosk commented Jul 11, 2018

haszari commented Jul 12, 2018

ockham commented Jul 12, 2018

matticbot commented Jul 12, 2018

matticbot commented Jul 12, 2018

matticbot commented Jul 12, 2018

oskosk commented Jul 18, 2018

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

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

Conversation

haszari commented Apr 27, 2018 • edited Loading

Changes proposed in this Pull Request:

Testing instructions:

Limitations/Notes

jeherve commented Apr 27, 2018

haszari commented Apr 28, 2018 • edited Loading

sirreal commented Apr 28, 2018

oskosk commented May 8, 2018

tyxla left a comment

Choose a reason for hiding this comment

tyxla May 10, 2018

Choose a reason for hiding this comment

haszari May 12, 2018

Choose a reason for hiding this comment

tyxla May 10, 2018

Choose a reason for hiding this comment

haszari May 12, 2018

Choose a reason for hiding this comment

oskosk commented Jul 11, 2018

haszari commented Jul 12, 2018

ockham commented Jul 12, 2018

matticbot commented Jul 12, 2018

matticbot commented Jul 12, 2018

matticbot commented Jul 12, 2018

oskosk commented Jul 18, 2018

haszari commented Apr 27, 2018 •

edited

Loading

haszari commented Apr 28, 2018 •

edited

Loading