Tiled gallery block: allow adding images from media gallery after adding images to block

[simison]

When adding Tiled gallery block, user can choose to upload or add image via media gallery:

After adding images, user can only choose to upload images:

We should keep "Media library" option here, too.

We should follow closely what core gallery does for this section and possibly aim to componentize it: WordPress/gutenberg#9682 and WordPress/gutenberg#12367

Relates to permissions checking: https://github.com/WordPress/gutenberg/blob/bcf55ff095fb9cbfee37aef24c422fbbf9661562/docs/data/data-core.md#hasuploadpermissions

[sirreal]

I was implementing this in #30863 where I attempted to unify the empty gallery placeholder and the add media placeholder, but have hit significant roadblocks.

[simison]

I think we should piggyback on this implementation once it merges WordPress/gutenberg#12367

[sirreal]

I think we should piggyback on this implementation once it merges WordPress/gutenberg#12367

Yep, that implementation is essentially what I propose in #30863. A large part of MediaPlaceholder is duplicated. I suspect WordPress/gutenberg#9682 to experience the same issues I discovered in #30863.

[simison]

Do you think it's related to media gallery bugs fixed in WordPress/gutenberg#12435 ?

[sirreal]

No, there are just limitations to the MediaPlaceholder. See the full description: Automattic/wp-calypso#30863 (comment)

Specifically, there's no clear way around this limitation:

• When uploading media via the placeholder button to an existing gallery, it completely replaces the existing images.
• When uploading media via drag and drop to an existing gallery, it completely replaces the existing images.

Otherwise, the MediaPlaceholder implementation is quite nice.

[simison]

cc @jorgefilipecosta

[jorgefilipecosta]

Hi @simison, @sirreal,
My plan was to after merging WordPress/gutenberg#12367 extract a component that allows rendering the gallery appender. After reading this PR and the related one Automattic/wp-calypso#30863, I noticed that the gallery appender being implemented in WordPress/gutenberg#12367 is just equivalent to MediaPlaceholder without label and icon, with the media library button opening the media library in a different state, and with some custom styles.
It may be possible refactor WordPress/gutenberg#12367 to use MediaPlaceholder in the gallery appender by adding two additional optional props one that enables a custom style and one that allows opening the media library in a specific state (the add to gallery mode).
Feel free to share your thoughts about this idea.

[sirreal]

Thanks @jorgefilipecosta! What you outline is aligned with my ideas 👍

Two things I'd add:

MediaPlaceholder needs to take into account that uploaded images, via dialog or drag and drop, should be appended to the current gallery rather than replace it as they do now.

MediaPlaceholder includes DropZone. Core Gallery and Tiled Gallery remove the appender section when the block is not selected. If we rely on MediaPlaceholder and its DropZone, we cannot remove it when the block is not selected or we lose the DropZone. It would be nice to be able to remove the appender UI but keep the DropZone functionality when the block is not selected. In #30863 I've done this with CSS.

[sirreal]

There was some work in Automattic/wp-calypso#30863 that could be brought over for this if anyone is interested in picking it up.

[annezazu]

Just ran into this on my site (simple site on WPCOM using 6.6.1):

tiled.gallery.UX.mov

This is rough especially when you're trying to quickly add images in. Something also seems broken with the upload an image button. It would be great to repick this work up.