Support images in the List block

[melchoyce]

Adding images into a list is a common task for websites that include documentation or instructions, and would be good to support within the general List block eventually.

Yes, I know this requires nested blocks, but it's come up in a couple reviews so I thought it would be good to get a conversation started. :)

[ellatrix]

This will be fun. Any other use cases? Could this be a separate block?

[melchoyce]

Could this be a separate block?

Totally could be. @mtias had the same idea.

Recipes is another good one. Sounds like you were playing around with a recipes block at some point?

[ellatrix]

Yeah, I used a (simple) recipe card block as on example for a template block: https://github.com/nylen/gutenberg-examples/tree/master/05-recipe-card

[ellatrix]

I think a separate block might be a good way to go as we don't want to burden the general list block with controls for smaller use cases. It feels like they'd be better off with a custom flow anyway.

[afercia]

How many users would want to do this? Would the Classic Text (TinyMCE) or the HTML blocks be an option?

[melchoyce]

HTML block is likely too complicated, but I do think we should be able to support this use case in the Classic Text block. See #2043.

[mtias]

I think we have two paths:

Nesting

Use this case as a way to get started with nested block insertion, changing a bit how inserter works. An idea I discussed with @jasmussen is to make inserting a two-step process.

1. You pick item in the inserter.
2. You pick where to insert.

This would also help with people wanting to insert something before a block. We could allow certain things to be inserted within other blocks, like images handled by tinymce in list, table, etc.

Embrace blocks

Many of these use cases are symptomatic of what we are trying to solve in the first place—creating "rich" posts should not depend on workarounds, or knowing html, or fragile approaches.

May be an opportunity to create a "List with images" block of sorts, like @iseulde recipe one (which we should add to the plugin as an example, even if it's plugin territory later on). This would come with placeholder for images, likely more robust markup, and something that is more evident to new users how it could be used.

[jasmussen]

So, this could be a case of enabling inline images in text. This is, I would say, an edgecase, and we probably wouldn't want to optimize too highly for it. For example, I don't think you should be able to click an inline image and set it to "full wide". Perhaps it doesn't have very many block options at all. Lots to discuss, but to get the ball rolling, here's a mockup of a "Sticky inserter":

Step 1, click a block in the inserter. It sticks to your cursor:

Step 2, click where you want to inserter it in the text. There's a little blue line indicating where it'll show:

Or, insert it between blocks:

As a reminder, this is the current behavior:

We'll likely want great keyboard shortcuts for this, for speed and accessibility.

[senlin]

@jasmussen

This is, I would say, an edgecase...

Any numbers to support that?

Someone on the "edge" has been so kind to add this as an issue to his review

[jasmussen]

Any numbers to support that?

I already regret calling it an edgecase. Would you permit me to retract that?

In my haste to write a comment (we get a lot of incoming tickets), I was thinking of a particularly gnarly situation where you can insert an image in the middle of a word, then float it, and the word will read as though it's not split in the middle, though it will be for search engines:

<p>I'm sorry I called it an edge<img src="heart.jpg" style="float: right;">case, please forgive me <3</p>

Even that above might not be an edgecase, but it's certainly what I would call undesireable behavior, something we can protect the user from.

What I mean to say about that isn't that we should not support inline images, just that it's a difficult interface problem to solve. Bear with us :)

[hedgefield]

That 'sticky' inserter is a really cool concept @jasmussen. We were looking at it from the opposite angle (pick the spot, then the block) in #2061.

As for nesting vs a new block, I would go with the block approach. It's the core of what gutenberg is, so perhaps it is best to stick to our guns and provide a list-with-images block or expand the current list block to support this? I'm not convinced that nesting won't make things harder to understand, although I've not heard the ideas for other use cases.

[jasmussen]

Should we rename this ticket to something like "Inline images"?

[maddisondesigns]

Just wanted to add that I raised this as an issue (along with an example) in #1281

[jasmussen]

Closing in favor of #2043

[benoitchantre]

Any other use cases?

Lists of logos in business and events websites.