-
Notifications
You must be signed in to change notification settings - Fork 798
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Feature: add support for a Tiled Gallery layout (Square Tiles) as a Gutenberg block #9903
Feature: add support for a Tiled Gallery layout (Square Tiles) as a Gutenberg block #9903
Conversation
…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
- reset line-height - zero out figure margin
…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)
… fake masonry prototype styles
…le attribute (big cells are not working right yet)
…e (media item) (using exisiting tiled galleries css, rather than gutenberg style)
…chment page" not working yet)
…erty was not persisted to attributes
…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
e8dd3eb
to
f0efb90
Compare
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"? |
@haszari p1HpG7-5lf-p2 |
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 :)
|
@haszari thanks for the update! I've been poking Jetpack+Blocks a bit yesterday and found out the exact same issue with existing
Update: yep, it was something funky how I was using the Jetpack's builder. :-) |
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>
Moving this to Automattic/wp-calypso#26223 |
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>
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>
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....
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
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).core/gallery
, which has implemented direct manipulation).core/gallery
).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.