Consistency between image options in single image and gallery blocks.

[paaljoachim]

Is your feature request related to a problem? Please describe.
Single and gallery options should be similar to each other.
I added one image to a gallery and want to resize it in a similar way to how I resize single images. Not possible. I want to add images by clicking the standard add image media library screen but it only says upload an image. It should be identical to the single image media selection options.

Describe the solution you'd like
I would like to see much more consistency between single image and gallery options. It should be very easy to go from one to the other with similar options. As one begins working with images an expectation is created that image options should be similar between various blocks that handle images.

---

Single image options

---

Gallery image options

---

Single image upload media options:

---

Gallery upload media options:

---

Captions are also different from single images to the gallery.
Top example shows the Gallery and bottom a single image.

---

Btw
It would also be very helpful to be able to rearrange the gallery images by using drag and drop.

Similar issues:
#8309
#8305
#743

[karmatosed]

I think consistency can be looked at, but it would need to be done based on use case. For example do images 'need' to have the same settings in a gallery?

[paaljoachim]

I find it important to look at similarities and differences between Single and Gallery images. Dealing with images should be as similar as possible.

"For example do images 'need' to have the same settings in a gallery?"

Working with single images and then working with gallery images creates expectations that it should be handled the same way. There is more control over using single images then images in the gallery. One should/could have a similar control over images in galleries as exists for single images.

[SeanDS]

Another inconsistency is in the block settings. In the core/image block for example, the default link target is stored in settings.attributes.linkDestination.default. In the gallery, the identical setting is stored in settings.attributes.linkTo.default. It would be good if the blocks could stick to the same convention, to make it easier to code hooks to be applied to both types of block.

[mapk]

Alt Text (Needs design)

I can see adding Alt Text to each image in the gallery, but I'm not sure how this might be done. When clicking on an individual image in the gallery, I still only see the Gallery Settings, not the Image Settings.

Other Image Settings (I opt for no change)

Other image settings don't really work in relation to the gallery because I'm letting the gallery establish the layout. So they probably shouldn't be resized.

Uploading an image (I opt for no change)

When adding an Image Block, it makes sense to get the block placeholder setup screen. But when adding another image to the gallery, I think the block appender makes more sense in the gallery as it is.

Captions (I opt for no change)

I like the captions below the image for an Image block. It also makes sense that the captions are displayed inside the image for a gallery because the gallery layout often times looks much better with the hard edges of images aligned with one another. If the captions were outside the image, it wouldn't look as nice.

[kjellr]

Captions (I opt for no change)
I like the captions below the image for an Image block. It also makes sense that the captions are displayed inside the image for a gallery because the gallery layout often times looks much better with the hard edges of images aligned with one another. If the captions were outside the image, it wouldn't look as nice.

Worth noting — this was explored last year as part of #8030, but dropped when we hit a CSS wall in the PR: #8344. I think it worked visually to have the captions below the images in a gallery, and think it could be a welcome option to include at some point — possibly as a block style.

[mapk]

Thanks for noting that, @kjellr! It doesn't look as bad as I thought. Offering it as a block style might work well.

[afercia]

I'd totally second there should be consistency between the image and gallery settings. Gutenberg shouldn't force users to "learn" a new UI and interaction for blocks that conceptually are very similar. Ideally, the "learning" process should be as easy as possible and if variations are necessary, they should be as small as possible.

the gallery layout often times looks much better with the hard edges of images aligned with one another

Yep, I do have an aesthetic sense like everybody else 🙂and gallery images look nicer to me when their edges are aligned and close each other. Even better when the gap between images is just 1 pixel or so (if I remember correctly Jetpack used to do that?). I'd agree with @mapk: offering style variations could really make sense here.

[ashwin-pc]

@mapk, @afercia offering style variations at a block level does sound good. Does this mean that when the style selected is to overlay the captions over the image, the image will still remain un-clickable? (Since we aren't suggesting a fix for that style mode #14304) and to resolve this the user has to select the style where the caption lies below the image to make the images clickable?

[paaljoachim]

I believe nesting of image blocks will help to create a better consistency between gallery block and the image block.

Gallery should be nested image blocks: #11849
(It would be helpful to reopen the above closed issue.)

The user would then be able to select an image inside the gallery, then use the right sidebar options specific to the individual image. This would for instance mean each image in a gallery could have its own custom link.

Selecting the gallery could then show the gallery options (parent options).
This would mean that the gallery becomes a kind of group (gallery) having nested children (image blocks). The end result would be that the gallery block would be more similar to the image blocks but containing additional options.

Add individual link to gallery item:
#14797

EDIT: I will also add in this somewhat related issue: #8030

[senadir]

I think the "Need design feedback" label is not needed, how should this be implemented design wise is agreed upon, the only thing missing is how should we build it, I will try to experiment later but I would love some input on how should we go about this in code

[mapk]

@senadir any further advancements on this one? Have you had an opportunity to explore solutions in a PR?

I believe the next step is allowing the Gallery block to use nested Image blocks. Is that correct?

[paaljoachim]

Anthony @anthonyburchell has expressed interest in working on this issue. I am just pinging you into this issue Anthony..:)

[glendaviesnz]

@paaljoachim can this one be closed now?