Insert images inline

[melchoyce]

Users should be able to insert images inline in text.

Mockup:

It could work like this:

• You can only insert inline images if you use the global inserter
• You can only do it if you first set the cursor in text
• When you set the cursor in text, and click the global inserter, a blue square is immediately inserted where the inline element will appear
• The global inserter detects that the cursor is in text, and shows only inline blocks, if you'd like to insert a block level block just make a linebreak into an empty paragraph, or unfocus the paragraph
• Inline images have no placeholders, so as soon as you insert an inline image, it opens the media library

This flow is as close to the existing image insertion flows as I believe we can get. In the current editor, you always put the cursor where you want an image, first, and then you insert an image. If this happens to be while you’re inside text, then you get an inline image, if you’re on an empty line, you get an image that behaves like a block level element.

In this mockup, you'd have the same flow here, except with an Inserter UI instead of the usual Add Media way.

—

Original text:

If you're working within the Classic Text block, there's no way to include an image inline. Like the classic editor, we should support images within that block.

[ellatrix]

Yep. We should just add it as a TinyMCE button at the start, I think. Should make a good first task. There's no easy way to add buttons added there by plugins, I fear.

[jasmussen]

It feels like we could address this issue by improving the global inserter, as detailed here:

#2042 (comment)

That is, if you the global inserter was able to insert inline images into text, lists, quotes or what have you, then presumably we could make it insert into the Classic Text block also. This seems like it would be a superior experience to adding an extra button just to this one block.

If we agree to ☝️, then maybe we should rename the other ticket to "Inserting images inline"?

[jasmussen]

From the other ticket:

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.

[folletto]

I think the above is great in terms of design, but introduces friction in terms of insert for normal inserts, as it would be one extra click for anything.

I start with a simple assumption: there's already an insert on the page, which is the cursor. We should never forget it. ;)

So, would this work?...

Non-Drag'n'Drop—

1. I position the cursor where I want the image, either in the middle of text, or in a new blank block
2. I click + → insert
   3A. If I'm inline, it inserts inline
   3B. If I'm in a new line, it creates / converts the block

Drag'n'drop—

1. I click + → drag
2. I see the blue cursor and place wherever (in middle of blocks or inline).

Basically, your design above becomes the drag'n'drop option (no two clicks), for advanced and fast use, while retaining the flexibility of insert with the normal expectation: insert where the cursor is.

---

What this would need is to make more obvious during insert "where the cursor is". I think it's very important that the instant + Insert is clicked, it highlights the insertion point. As such, I'll again reuse the same design above (reuse and consistency FTW!), but in a different way:

1. The user clicks Insert
2. Once Insert is clicked, the cursor position highlights to signify either "insert inline" or "insert between blocks" — exactly like the mock above.

As a sidenote: I also think during insert the block highlight should disappear, so it would mark even more clearly the insertion point.

[ellatrix]

Is the goal here still the add an image button to freeform, or to introduce inline image insertion, or both? I'm still not sure if allowing images in editable regions of other blocks is a good idea... What are good use cases? Can a custom block be made for those? Maybe we should allow only small images so it doesn't become a mess? The mock ups are great, but it doesn't show what happens after you drop the image piece.

[anna-harrison]

If we allow images inserted inline into any block, do we effectively open the door for nested-blocks (and what happens when we walk through this door)? How should we handle the pop-up toolbars of nested objects, e.g. if we insert an image into the Classic Text block, clicking on the image will pop up an image floating toolbar:

What is the best way to handle this? We could

1. Not display toolbars on nested objects (but then, how do we edit this nested objects?)
2. Display the toolbar, but style it to look like the toolbar of the native nested block (so, clicking on image would display the Gutenberg image block toolbar). Leave the parent block toolbar on
3. Display the toolbar, styled as per native nested block. Turn the parent block toolbar off
4. Treat nested objects as a special case, and not as a nested-block (i.e. disable all pop-up toolbars)

We had a quick play with TinyMCE (thanks @EphoxJames), and while it's possible to wire up the insert image button to the Classic Text block (as per above screenshot), it will not deliver a great out of the box experience until we resolve the pop-up toolbar issue (both for this specific case, and by extension, for the more general case, e.g. tables inside Classic Text block, or tables inside other blocks; videos...)

[jasmussen]

Updated the ticket itself with the most recent mockups.

[jayshenk]

I've been asked to work on this issue. I'm pretty new to Gutenberg, so please forgive any newbie questions I have. Could I get some guidance on the following?

1. Is the idea to enable inline images in any block that uses RichText? Or only in ParagraphBlocks?
2. Should the image be a new block, or just part of the RichText (similar to a link)?
3. Would implementing nested blocks be a part of solving this issue? Or is that out of scope?
4. Are InnerBlocks worth exploring for nesting blocks?
5. What would be the behavior and appearance of the inline image block once it was added? Could it be moved with the arrow buttons like a normal image block?
6. One possibility I thought of was having 'inline' be one of the alignment options for an image (similar to how there are left align and right align options). If the inline option was chosen, the image would become inline with the surrounding paragraph blocks. Thoughts?

That's a lot of questions, so feel free to answer just one of them. 😄

[jasmussen]

Is the idea to enable inline images in any block that uses RichText? Or only in ParagraphBlocks?

Good question. I lean towards inline images working in any block that uses RichText — I know that means you can insert images into captions, but hey, maybe that's what you need.

If this is onerous, we can probably do with just the ParagraphBlock, but it would be nice if it were built in a way so that some day it could be used for any RichText block.

Should the image be a new block, or just part of the RichText (similar to a link)?

In #2043 (comment), we imagine a future that includes more inline elements than just images. It would be nice if whatever was written could be used for any snippet of HTML, not just the img.

Given that the process in those mockups shown is to set the cursor in rich text first, then click the inserter which is then filtered to just inline blocks, we do definitely need the inline image to show up there. If that makes it a block — call it "Inline Block" — then so be it.

We don't want a situation where you click a button on the rich text block toolbar, to insert in that rich text element.

Would implementing nested blocks be a part of solving this issue? Or is that out of scope?
Are InnerBlocks worth exploring for nesting blocks?

@aduth can speak more to this.

What would be the behavior and appearance of the inline image block once it was added? Could it be moved with the arrow buttons like a normal image block?

The behavior would be virtually identical to how the behavior is in the classic editor, in fact we may have to rely on the built-in TinyMCE scaling tools for these. So no, there would be no arrows to move the block. I created some additional mockups to clarify;

1. It starts with you setting the cursor in text, then clicking the inserter in the top left:

2. Unlike for Image blocks, there is no "placeholder" state for inline images. You click the Image icon in the inserter and go directly to the media library:

3. Once you insert, it looks almost exactly like it does in the classic editor:

One possibility I thought of was having 'inline' be one of the alignment options for an image (similar to how there are left align and right align options). If the inline option was chosen, the image would become inline with the surrounding paragraph blocks. Thoughts?

What if there were no adjecent paragraph blocks?

I think this could be an option, especially depending on how the approach in the mockups pan out.

CC: @mtias @karmatosed for additional opinions.

[maddisondesigns]

I lean towards inline images working in any block that uses RichText

+1 for use in any RichText Block. At the bare minimum, we need to be able to insert inline images in the Paragraph block and the Classic block.

[mtias]

I know that means you can insert images into captions, but hey, maybe that's what you need.

This would be easy to disable as a prop for RichText, the same way we can restrict which inline formatting options you have.

Should the image be a new block, or just part of the RichText (similar to a link)?

I don't think it should be a block, but open to explorations here. We have referred to these as tokens before (@-mentions, #-hashtags, footnotes, etc) and they represent a different API that is directly tied with richtext/tinymce. It would be good to look at it in those terms.

Are InnerBlocks worth exploring for nesting blocks?

I don't think so. One of the main qualities of innerBlocks is the ability to move them around, transform them, etc, it just adds another dimension. Inline elements cannot use these elegantly.

In general terms, an inline image and an image block would be entirely different entities internally for the editor. It might be worth exploring how you to bridge between the two (transforming an inline image into a block, and an existing image block inline), but has to be taken with caution as it could generate more confusion and weird interactions.

[westonruter]

Another use case for inline blocks has arisen with implementing an amp-mathml block as inline to appear inside a paragraph instead of as a separate block: ampproject/amp-wp#1165

[azaozz]

Been thinking about this issue the last few days. Seems we need to take a step back and look at why this is needed. Frankly I don't see very compelling reasons.

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

Absolutely agree.

A classic example is when you're writing about screen icons. It helps to show the icon next to the text and would be totally useless...

Right, very much a rare edge case. This is also not possible in the current editor, there is simply no appropriate image size in WordPress for this kind of usage.

If you're working within the Classic Text block, there's no way to include an image inline. Like the classic editor, we should support images within that block.

Right. This is a more compelling reason: parity with the current editor. However don't think it has anything to do with "inline" vs. "non-inline" images. Nearly all images in the current editor act as "blocks" anyway.

Not sure if I'm filing this correctly under "inline images", but there is certainly a need for possibilities of combining images and paragraphs.

I'm not entirely sure what that means :) Is it about having the possibility to have both text and <img> tags together in a <p> tag. This is just a technicality.

Lets look at the usage: "combining images and paragraphs" means the image is floated to show either left or right from the text. This is by far the most common case. The other case of having a purely inline image with the text calls for a miniature image size, something like 16px X 16px, or is just looks ugly :) (see https://user-images.githubusercontent.com/1204802/37452618-60775180-2835-11e8-9622-678bba0a0897.png). This is not currently supported in WordPress without a plugin, and I don't see why it should be supported in the text blocks in Gutenberg. Of course a user can choose to resize a larger image to get that effect, but then it seems this should only be supported to the same extend, i.e. in the Classic block.

In general terms, an inline image and an image block would be entirely different entities internally for the editor.

Right. They will also be very different to insert and edit. That is a big drawback imho. It introduces two different "workflows" for working with images which is very very confusing.

The tl;dr:

• Support for "inline" images "everywhere" is not a good idea as it will be more confusing. If this is done, the next question would be "how do we add captions to inline images" (short answer: not possible as captions require block tags).
• I agree that it should be possible to insert images in the Classic block. However it seems this should work the same way images are added to the current (classic) editor, i.e. directly from the media modal. Using the inserter to do it would be more confusing (why can I add captions to only some images, etc.).

[westonruter]

Going back to tokens, inline shortcodes are common and currently blocks cannot be used as a replacement for them. Whether inline images are supported, I have no opinion. But inline blocks generally should be supported, or at least there should be a standard API to do so as there is with blocks. If the recommendation to implement @-mentions and #-hashtags is to use a TinyMCE API, I think there should be WordPress abstraction on top of it that makes the API for such “inline blocks” as similar to “block blocks” as possible.

[maddisondesigns]

This is also not possible in the current editor, there is simply no appropriate image size in WordPress for this kind of usage.

This is currently supported in the current WordPress TinyMCE Editor and you don't need any extra plugins. People don't just insert images in their site, based on the different types of image sizes WP generates (i.e. Thumbnail, Small, Medium Large). People will resize images to whatever size they need them, and then insert them.

[pento]

Thank you for the demo, @maddisondesigns, I think that shows a quite reasonable use case. (Side note for anyone looking to reproduce this in Classic, you need to select the "no alignment" option for the image.)

#5794 is making good progress towards the Inline Blocks API, as well as inline image support. 🙂

[azaozz]

This is currently supported in the current WordPress TinyMCE Editor and...
People will resize images to whatever size they need them, and then insert them.

Absolutely! Please see the bottom of my previous comment. I agree this should be possible to do in Gutenberg, the same way it is possible to do now in TinyMCE.

However I do not agree it should be possible to insert inline images at arbitrary places in "all" block. I see that as a UX "blocker". To "unblock" it the following questions would need answers:

1. Should it be possible to align (float) inline images?
   • If yes, they would behave pretty much like "image blocks", would we really need a separate image block?
   • If not, how do you explain to the users why some of their images cannot be aligned as they want?
2. Should it be possible to add captions to inline images?
   • If yes, the "parent" block for images cannot be a <p> or <h1>, etc. as captions require "block tags".
   • If not, how do you explain to the users why they cannot add captions to some of their images?
3. Should it be possible to add any size images as inline?
   • If yes, this would imply these images must support alignment as large inline images just look ugly.
   • If not, how do you prevent the user from picking large images? Do you limit the media library by image size?

The tl;dr, again: this is an edge case that needs to be supported in the Classic block. Supporting it in "all" blocks would bring a lot of usability problems.

[mweichert]

Does the inline block API now allow for nested blocks? That is, can a Block contain an inline block which contains another inline block?