Gallery Block: Not obvious how to add pictures when one image is in the gallery already

[hanneslsm]

Description

It's not that unusual to have only one image in a gallery. Either you transformed an image block into a gallery or you created a new gallery with only one image.

The problem is: how do you add a second image?

The only reasonably intuitive way is to drag and drop an image from your computer and upload it. However, if you want to insert an image from the media library, the is no intuitive way to do it.

(The workaround of opening the List view, finding and expanding the Gallery, clicking on the three dots of the image block, duplicating it, then clicking on Replace in the toolbar and finally you can open the media library is not acceptable. I can’t ask any client to follow through all of these steps only to add an image to a gallery.)

Step-by-step reproduction instructions

1. Create a gallery with only one image
2. Try to add a image from the media library.

Screenshots, screen recording, code snippet

Screen.Recording.2023-04-23.at.22.11.41.mp4

Environment info

• Wordpress 16.2

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Yes

[Thelmachido]

Hi @hanneslsm the best way to add more images without the list view would be to click on the Gallery Parent block > Add as shown in the short video below.

Screen.Recording.2023-04-25.at.14.40.46.mov

However, I do agree that clicking on parent blocks without using the list view can be quite confusing for new folks.

[hanneslsm]

the best way to add more images without the list view would be to click on the Gallery Parent block > Add as shown in the short video below.

I purposely do not show this to clients because I educate them that clicking on the first icon give them the ability to transform a block (e.g. a paragraph to a heading)

Again, another great example of inconsistency within the editor - one that is so basic, that I'd like to see this considered as bug instead of an enhancement.

Screen.Recording.2023-04-25.at.14.56.29.mp4

[hanneslsm]

To add on this:
Yes, I know that there is a space between the first icon and the toolbar.
However, especially for the gallery and image blocks the icons are so similar that this isn't very obvious.

Additionally, sometimes I tell my clients that they can use the top toolbar. If so, this logic with "if you are in a block that works as a "container", click the first icon to select the parent block doesn't work again. Since this is another issue though, let's focus here on the fact that it should be easier to add a image from the media library to a gallery.

Screen.Recording.2023-04-25.at.15.05.09.mp4

[richtabor]

I purposely do not show this to clients because I educate them that clicking on the first icon give them the ability to transform a block (e.g. a paragraph to a heading)

The parent block selector is an important interaction for selecting and manipulating a parent block.

Let's focus here on the fact that it should be easier to add a image from the media library to a gallery.

Yea, there may be something we can try with block selection: if you're selected on an image block within the gallery, perhaps reveal an inserter for directly adding another image block.

[hanneslsm]

The parent block selector is an important interaction for selecting and manipulating a parent block.

I kindly disagree. I think it's very confusing. The list view is a way more appropriate tool to selecting a parent block.
Even if this is now somewhat distanced from original issue, let me give you an example:

• A user (who does not have the list view open) inserts a paragraph block. They learn that they can transform blocks by clicking on the first icon.

• Then, they add a pull quote. Still, easy to follow.

• Maybe also a image. No problem.

• Then, they add quote block. Suddenly the first icon does not transform anything, but just behaves differently. Confusion.
  Okay, let's assume they they understood that there is a parent block selector - and they have to click one time to come from the quote block to the parent block. I highly doubt that they will understand this, but let's go with it.

• Now they're adding a columns block, they select their layout and then they're entering text. When they now want to select the parent aka the columns block they suddenly have to click two times? Again, confusion.

• And now, the gallery. They add a gallery block and insert images. Why would they even expect that there is a parent block selector? How often do they now have to click? One time? Two times, like for the columns? This just doesn't work.

Here is how this looks like what I just have described

Screen.Recording.2023-04-28.at.19.49.20.mp4

Site note: Just in this quick user story I've found several bugs. (Drag and Drop doesn't work as expected, after inserting a image and clicking the "Media library" button it jumps and you have to click again, the pattern inserter has a strange animation, can't find the quote block, because the list is not in alphabetical order, issues with the citation of the quote block, there is no visual difference between the column block and the columns block because both have a blue highlight border which adds to the confusion described above…) Did I mention already, that all of these basic things not working frustrates me?

Anyways, back to the issue.

Yea, there may be something we can try with block selection: if you're selected on an image block within the gallery, perhaps reveal an inserter for directly adding another image block.

This sounds like a good idea. What would you recommend as a next step to get this done? Creating a mockup in Figma, I guess? I don't know if it would be faster and efficient to code a prototype instead, because this whole thing lives by its interactivity and animations. Could anyone with experience give an estimate of how quickly a prototype could be set up?

[tresorama]

I'm agree with confusion that first Toolbar's button provide because it doesn't to the same feature in every situation.

The list view is the right tool to understand and select in the hierarchy of blocks, and is the place where you can be sure of "what" is currently selected.

I think that if the user has List View closed is because he's focused on writing and not on layout.

I don't think the "Select Parent" button in the Toolbar is useful at all, but i suggest that instead of premature consider to remove it, itcould be helpful to "standardize" (for a while) the positional aspect of buttons in Toolbars.
What i means is for example , the first button is always the transform and the second the select parent.
In case a Button does nothing, instead of being invisible, it stay visible but in a disabled state that indicate that the feature is not available.

So the "expectation" about position of Button is respected, and no feature is removed.

[hanneslsm]

After working for the last few monthly nearly daily with the editor, I now see the benefits of the parent selector. It shouldn't be removed.
However, a visual differentiation between the parent block selector and transform wouldn't hurt. Standardizing it is worth exploring.

[hanneslsm]

Regarding the original issue, this might solve fixing the problem: #53315

[tresorama]

After working for the last few monthly nearly daily with the editor, I now see the benefits of the parent selector. It shouldn't be removed.

What are main benefit of it?

I'm curious because I never used the editor extensively without the list view opened .

[hanneslsm]

I'm curious because I never used the editor extensively without the list view opened .

I also have the list view always open, but when having a lot of rows, it can be easier to use the parent block selector instead of selecting the correct row on the left and then going back to the canvas
Use case: quickly change the alignment

Screen.Recording.2023-08-14.at.12.18.19.mov

[tresorama]

I'm curious because I never used the editor extensively without the list view opened .

I also have the list view always open, but when having a lot of rows, it can be easier to use the parent block selector instead of selecting the correct row on the left and then going back to the canvas Use case: quickly change the alignment

Screen.Recording.2023-08-14.at.12.18.19.mov

Thanks, now I can see why it is useful.
Especially clients can benefit from that, so it's a good to keep feature

[scruffian]

I would expect there to be a block appender in the gallery block that allows me to add an image to it, the same as in the group block.