Image block: Confusion between the "Text over image" and "Caption" options in the Block Toolbar

[scruffian]

What problem does this address?

Some users are confused about the difference between the "text over image" and "caption" icons in the Image Block Toolbar:

What is your proposed solution?

1. The caption icon could show the dotted line beneath the rectangle, as that is how captions usually appear
2. The "text over image" icon could maintain a rectangle all the way around the "A" to make it clear that it's not going to appear at the bottom of the image.

[hanneslsm]

I think the "text over image" should be removed. It's basically transforming the block and we have a well established method for that already.

• https://github.com/WordPress/gutenberg/issues/50025

[jasmussen]

I think the issue is valid, but I also like to think that there are careful things we can do to address this beyond just removing the button. To add a little nuance, the button was added as a nascent attempt at considering the holistic flow of wanting to build a particular layout that featured an image with a text overlay.

In general, these kinds of flows — "I want to do X" and then considering carefully the whole flow to accomplish that — are flows that get increasingly important as the baseline features are starting to be there.

In this case, I agree, the button is easy to confuse with caption, though to be fair it existed before the caption button. To an extent, we can think of those two buttons as doing the same; one is adding the caption as an overlay, the other as a caption below. Does the caption become a dropdown?

I suspect that polishing this flow to perfection is not going to be trivial, and might involve thinking about both the Image, Cover and Group (now with background support) blocks together, and fixing a number of rough edges across those, until we get to a point where flowing between the three feels natural and intuitive. So this comment is mainly to note that we probably shouldn't just remove the "add text overlay" button as the only thing.

[hanneslsm]

I get your point, @jasmussen, but I still disagree. Here are some unordered thoughts:

• We should strive for consistency.
• The "Text over image" is a behavior that does not exist in any other block. However, we have the well-established option to transform blocks.
• If we really want to keep the "Text over image" option, we should then at least consider adding it to the video block; and why not also "text over gallery" (seriously).
• When thinking holistically about the "I want to take X" workflows, I'm missing some essential features. For instance, I'd expect that dragging and dropping a paragraph onto an image would automatically transform it into a cover block. The current "text over image" option in the toolbar feels half-hearted.
• I love that it's now possible to add background images to Groups. But I'm still missing some controls, like background size, background position (x and y), background repeat. When those are added, we will have essentially rebuilt the cover block - then the question then would be, why keep it at all?

  one is adding the caption as an overlay, the other as a caption below.

• No, I don't think so. First, in the cover block, you can add much more than just text (aka "captions as an overlay"). Second, captions are not always below the image (see the default caption in a gallery - they're also added as an overlay).

  Does the caption become a dropdown?

• I have actually always secretly wished for a "caption block" that sits within the image block.

[jasmussen]

I don't think we are in disagreement, and removing the button may in fact be part of the solution. My intent with the comment was purely to fully describe the intent of adding that button in the first place: thinking in terms of flows that make it easier for people to accomplish common layouts. This button on the Cover block exists for the same reason:

It is a shortcut to making the block 100vh tall. As web-savvy folks you and I may know that we could do this by applying a 100vh height in the inspector. But any random person who doesn't know what vh units do would have no idea how to accomplish this. The button exists as a shortcut to accomlish that, and the overlay text button exists for the same reason.

Where I think we agree is that those buttons may not be as intuitive at accomplishing this as they were intended to be, and it may require a rethink. That rethink may require removing such buttons, sure, what other ideas are? The use case seems valid, a person who never used the block editor wants to insert an image with a text overlay, how do they go about that? The button exists through the concept that they might intuit the Image block as a starting point, and they might not intuit that the Cover block was actually where they should've started. If you search for image in the inserter, you'll also see Cover, you might even hover the block and see an example of what you want. But in practice this hasn't been discoverable enough.

[jasmussen]

Also, I'd personally think external captions on galleries could be nice: https://github.com/WordPress/gutenberg/pull/56252#issuecomment-1823966630

[hanneslsm]

the intent of adding that button in the first place: thinking in terms of flows that make it easier for people to accomplish common layouts.

I understand, but the editor, and especially the toolbar, has evolved, and it's time to adapt. I think we should redefine what exactly the main function of the toolbar is. From what I understand by "workflows," it's a place for often-used shortcuts. Many issues assume the same, e.g., #56198, #55993, https://github.com/WordPress/gutenberg/discussions/55673, and I agree with that.

This leads us to the next logical steps:

1) All the (styling) controls that are only in the toolbar should also be found in the inspector. Good examples include sizes of social icons, search block styles, alignments, etc. → Yes, this also means that it should be possible to add and toggle the caption via the inspector. 2) We must define the sections of the toolbar. 2.1) First, there are "core toolbar options." That'd be, for example, the parent selector, the drag and drop handle, and the move down and up. This section should be visually distinguishable from the next one. → Here sits currently also the transform block option. So it's a well-established option that can be found consistently across all blocks. 2.2) Then, we have shortcuts for styling, e.g., alignments, duotone, or 100vh. 2.3) The third section comprises options (that can also be found in the inspector), such as toggling the caption or the Replace option in the image block. 3) The space is limited in the toolbar, so the "shortcuts" must be wisely chosen. In my opinion, they should be only shortcuts and only related to the current block. This leads me to the conclusion that the "text over image" is not necessary, because a) we have the block-transform option already, b) it's neither styling nor an option, and c) I also do not think it is directly related to the image block (I always told my clients that it's the "background" block - so the option would actually have fitted better in the group block toolbar). The "toggle caption," however, is a good shortcut.

And that's how we can solve this original issue: the confusion between the "Text over Image" and "Caption" options :)

Also, I'd personally think external captions on galleries could be nice: https://github.com/WordPress/gutenberg/pull/56252#issuecomment-1823966630

Unfortunately I do not have time to also go into this issue, but I wish that styles from Gutenberg would be as minimal as possible (aka a caption just below the image, most preferably as a separate block / div) and it's up to the theme creators how to style the captions. There are so many other options I could imagine how to handle this. Text shadows, background blur, background with opacity and/or gradient, truncating the text and opening a model on click… that's just what comes quickly into my mind. I spent so much time already reverting the styles from Gutenberg for my theme. But that's whole another discussion.