adding images to existing text can only be done in 5 steps and even then the result is undersireable

[senlin]

As described here:

1. go to the bottom of your existing text and hover over the plus icon to show the option to add paragraph or image
2. select image and upload one
3. choose full-width otherwise you cannot do anything with it
4. click on the arrow-up icon to move it to where you want
5. only now you can adjust the alignment

And then you will have to hope that your theme (in my case default 2017) shows the image the same way it does as in the editor. Spoiler alert: it doesn't

[karmatosed]

Noting edited the post, totally get it wasn't a great situation you found, but lets keep issue titles family friendly and inclusive for all.

[senlin]

Glutenberg Free FTW

[karmatosed]

I would love to dig deeper into the issues you are having to get a fix for them. I tried to recreate your steps but unfortunately as you can see I don't get the same problem:

Could you please step me through a little so we can try and get a fix:

• Is there a particular browser you are using to get this issue?
• Could you maybe take a video as that would make it really easier to try and follow the steps and ensure recreating like for like? I totally understand if you can't, it just would help to visualise as could be the combination of content you are using.

Thanks and look forward to your feedback so I can recreate and get a fix for you.

[JoshuaMcKendall]

You realize Gutenberg is still a work in progress right? There's nothing wrong with being frustrated with, or having criticisms of Gutenberg, but you're offering very little in substance for the team to actually address the problems you have with it. You're merely venting in an unproductive manner.

[senlin]

@karmatosed
browser: Firefox
video: sorry, no time to accommodate you with a video. The post I linked to and the steps listed above already have the step by step, but I try again.

If you want to insert a right or left aligned image to existing text it is impossible to do that. The workaround is cumbersome at best and still does not give the desired result. In the current editor, you simply go to the paragraph you want to add an image to insert the image, choose alignment and that's it.

1. since it is impossible to add an image to the paragraph you want to add it to, you need to go to the bottom of your text and choose an image block
2. although you want to align the image to the right or left, you need to choose full width for now, otherwise you cannot do anything with this image block
3. now drag this image block to the paragraph you want the image to go to
4. then adjust the alignment
5. now in the Gutenberg editor it looks as if your image indeed is right or left aligned, however even in the default 2017 theme it is not showing the same as in the editor, so that means that you will have to add styling to get it to look the same as in the editor. Also the image showing is the exact same as the image uploaded. In my sample post case it was a photo with a horizontal width of 3000+ pixels, but unlike the current editor where images automatically are resized and you get the choice of which image to use, in Gutenberg this seems not possible.

Hope it is clearer now.

@JoshuaMcKendall - you realise that all over the web the dev team is practically begging for feedback, right? If you don't like the tone of my feedback, then move along. This is my experience and it is messed up! I hate Gutenberg, I find it ridiculous that this piece of junk is going to be shoved through our throats and I will do everything in my power to not use it ever. I have waited a very long time with really trying it out and I even make the effort to write about it and now I get a reaction like yours?! Wow.

[JoshuaMcKendall]

@senlin Yes I'm aware that the dev team is listening to all feedback. My "problem" with your post was not just your tone. I think a lot of peoples judgement of Gutenberg are being clouded by their negative emotions (mainly because it's different from what they're used to), and they're reacting to it prematurely/unfairly.

For example, I saw a woman who was very angry that she could not paste from Word to Gutenberg. And she was right! But the dev team hadn't added that functionality yet. I suppose you could argue that if the woman hadn't reacted that way then they would have never added that functionality, but I doubt it. And others don't seem to realize that some of their criticisms of Gutenberg are already features / user experiences in TinyMCE.

I'll give you some examples from the post you linked to:

Oh fuck shoot, I have to [SHIFT] [ENTER] to go to a new line without going to a new freakin' block

TinyMCE is already like this. If you write a paragraph in TinyMCE and hit [ENTER] it creates a new paragraph. If you hit [SHIFT][ENTER] in TinyMCE it creates a new line. The only difference between Gutenberg and TinyMCE is that Gutenberg is using "Blocks", but that's just a conceptual difference. I don't mean to come off as condescending when I say this, but a new line and a new paragraph are not the same thing.

In the following videos I go:

1. New Paragraph
2. [SHIFT][ENTER] New Line
3. [ENTER] New Paragraph
4. [SHIFT][ENTER] New Line
5. [ENTER] New Paragraph

Gutenberg paragraph:
https://www.youtube.com/watch?v=ZGRjBzY-k7g&feature=youtu.be

<!-- wp:core/paragraph -->
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ultricies, ex nec bibendum laoreet, magna risus consequat erat, eget lacinia libero ipsum sit amet odio. Donec vehicula, dolor in viverra tristique, est purus accumsan enim, quis cursus libero leo eu arcu. In hac habitasse platea dictumst. Vivamus gravida bibendum commodo. Suspendisse tincidunt odio quis urna tempus, vel convallis enim sodales. Duis iaculis nisl at rhoncus mattis. Pellentesque a tellus aliquet, faucibus neque et, porta ex. Integer eget tempus diam. Nullam mattis id tellus eget cursus.</p>
<!-- /wp:core/paragraph -->

vs. TinyMCE paragraph:
https://www.youtube.com/watch?v=6Lvqlr_BNUo&feature=youtu.be

<p style="text-align: center; color: #666; font-size: 15px; font-family: avenir; font-weight: 200;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ultricies, ex nec bibendum laoreet, magna risus consequat erat, eget lacinia libero ipsum sit amet odio. Donec vehicula, dolor in viverra tristique, est purus accumsan enim, quis cursus libero leo eu arcu. In hac habitasse platea dictumst. Vivamus gravida bibendum commodo. Suspendisse tincidunt odio quis urna tempus, vel convallis enim sodales. Duis iaculis nisl at rhoncus mattis. Pellentesque a tellus aliquet, faucibus neque et, porta ex. Integer eget tempus diam. Nullam mattis id tellus eget cursus.</p>

In a way, you can think of TinyMCE as using "proto-blocks". At the end of the day they're both just paragraph tags. Even in TinyMCE once you hit [ENTER] a new "block" (paragraph tag) is created.

since it is impossible to add an image to the paragraph you want to add it to, you need to go to the bottom of your text and choose an image block

It's not impossible; you can do that in Gutenberg. You have to place your cursor in the paragraph you want, and then use the top inserter to add an image to that paragraph. I'm sure they have plans to be able to drag and drop images too (within the post). So even if you add it to the end of a post you can, well, drag and drop it to where you need it. Aside from the drag and drop, how is that any different from what you were doing in TinyMCE? You still had to place your cursor where you wanted the image and then insert that image; although, to be fair, you can't insert an image in a paragraph as atomically as you can in TinyMCE (like in the middle of an existing paragraph).

Gutenberg Image Insert:
https://www.youtube.com/watch?v=ZjdpKWAwdHQ&feature=youtu.be

vs. TinyMCE Image Insert
https://www.youtube.com/watch?v=m2895ljBkGw&feature=youtu.be

You can also drag a file into the editor where you need an image as shown here:
https://www.youtube.com/watch?v=ufCU-V7D3EE&feature=youtu.be

As for alignment criticism...Sure, you have a point. Again, I'm not implying your feelings or criticisms are entirely invalid. My intention with this post is to help you look at it from a different angle.

If I offended you in any way in my original response, then I apologize.

[senlin]

@JoshuaMcKendall
Great to see that there are people with so much time on their hands.

You're going way off topic here and I was not aware that WP is in need of feedback police.

Ending an essay with If I offended you in any way in my original response, then I apologize. does in fact not give you a free pass. My suggestion would be to open a freakin' blog where you can become the moral knight you seem to have aspirations for.

[helen]

In the spirit of finding useful feedback even when the delivery is awful, here is what I understand the issue to be:

Inserting an image as a part of a paragraph as opposed to as a standalone block is not intuitive at all; I would actually call it "not possible", as in the way it's done feels like a workaround. This is particularly jarring for existing users who are used to linear content composition and technically-minded users who are more prone to thinking about the underlying HTML structure of their content.

If thinking of the current WordPress editor, one would expect there to be an insert image button in the floating toolbar which would allow you to choose alignment and such in the modal, the way it works now. The way it works instead is that you have to insert an image block and then align it left or right to have it be "a part of" a paragraph (in reality it's still not an inline image, but that's more a technical perspective). It's also kind of a guess as to which paragraph it will float next to once you click the button - I think it's the following paragraph, but there's nothing intuitive about that either. If you get it wrong, then you have to pop the image back out into full width to move it before once again doing the alignment thing and hoping you get it right.

An outdated example of where people might find the lack of inline images really cumbersome is really small inline images (now usually done with emoji). I'm sure there are plenty of other common things I'm not thinking of right now, but that might help in thinking about why images as blocks-only feels like something is wrong.

[helen]

Oh also there's a block inserter up at the top where settings toggle and such are, not just at the bottom, but either way it's inserting a block, not into a paragraph.

[nic-bertino]

In a task like this, blocks feel monolithic and disconnected from each other. Sequences of paragraphs and inline images feel like they should be one cohesive piece of content, not several blocks (at least, from the front-end - on the backend, create as many blocks as you want). That's not to say that there isn't a need for monolithic (literally blocking) elements, but perhaps more time should be spent on cleaning up the basic authoring UX so these tasks are less daunting. We've talked about this previously (#2279, #2466).

[kevinwhoffman]

I just attempted to align an image beside text in Gutenberg 1.6.1 and could not figure out how to do it until reading Helen's comment above mentioning that the order of blocks matters. It turns out that the image only aligns left or right if the image block is before the text block.

In addition, the similar appearance but different location and functionality of the alignment controls in text and image blocks add to the confusion.

Text Block Alignment in Side Panel

Interacting with the alignment controls in the side panel did not align the text to the left or right of the image as I expected. In fact, the only way to get the image to align left/right is if text has center alignment selected. This is counter-intuitive.

Image Block Alignment in Top Toolbar

The image block alignment controls are in a different location (top toolbar) than text alignment (side panel). The image only aligns to the left/right of text if the image block appears first.

In Summary

As of 1.6.1, the only way to align an image to the left/right of text is to do the following.

1. Insert an image block.
2. Select left or right alignment in the top toolbar.
3. Insert a text block.
4. Do not change the alignment of the text block to anything besides center alignment, otherwise the block will jump down below the image.

[webtrainingwheels]

Kevin's notes on this issue are great. Would like to add another related area of confusion.

The default size for image insertion is "Full". Obviously if your image is of a certain size, it will fill the width of the page.
However, as soon as Left or Right image alignment is clicked, the image appears smaller in the editor:

So as a user I'm confused to see this on the front end:

I personally understand that the smaller image and positioning on the backend is a symbolic representation of the option I chose, but nowhere in the editor can I see what the actual size of the image is. So I think the average user will be confused.

Unless I have Block settings open (which is a different kettle of fish & issue) , it's actually fairly hard to understand that I need, and am able to fix the problem by choosing a different image size.

In fact, image with left/right alignment inserted at Full size looks EXACTLY the same as an image inserted at full size but manually scaled down a little.

Compare this screenshot to the one above. In the below, I have resized the image using the blue corners - can you see the difference?!

This one displays mostly as expected:

[jasmussen]

Lots of changes have happened in Gutenberg since this ticket was opened:

• Floats have been refactored to be simpler and more resilient
• Work is ongoing to improve issues with image sizes in Fix image alignment #5209, and additional issues are ticketed separately, including in Small floated images are wider than they should be #5213
• Work is ongoing to overhaul the insertion of images and blocks both between blocks, and at the end of blocks, using the same interface which features recency (see also Inserter: Try showing a "line" between two blocks on hover to insert a new empty block #5198)
• Inserting images inline in text is ticketed separately, with fresh mockups, see Insert images inline #2043
• Image sizing improvements are ticketed separately in Enhancement: Inspector interface for setting pixel dimensions of image #4914
• There are ideas for how to reduce the number of steps necessary to insert an image in Consider improving the media placeholder blocks to include images #4108

As such, I'm closing this ticket not in the spirit of silencing any of the completely valid opinions expressed in this thread, but rather in a desire to open actionable items for each, if they aren't already listed above.