I am trying to make my first post in Gutenberg and I've discovered that aligning the image right around the blocks works in the editor but when I preview it is not floating right.

Previously I had css for img.alignright now the alignright class is applied to a figure tag, so I updated my style.css and it still doesn't work. I even inserted custom html as follows:

<img class="alignright" src="http://blah.com/image.jpg" />

And that didn't work though when I view source in the preview it should be just like before Gutenberg. Is there some theme support thing I need to add? I took screen shots as I searched too and others have had issues similar but I followed their advice and it didn't help. I also discovered you can't insert an image from a relative URL in Gutenberg. I could not link directly to my preview so I had to publish a post in a theme that clearly isn't ready for Gutenberg, but obviously my 20+ years of coding HTML is insufficient to solving this problem as clearly I have been doing other things lately than coding. Image in Gutenberg

Image previewed in Safari

CSS rules for the image as custom HTML block

  • what is the site address? – rudtek Jan 25 at 15:33
  • blog.muschamp.ca but this is my first Gutenberg post and it is unpublished so I couldn't link directly to it. – Muskie Jan 26 at 2:29

There are two methods, which can be used:

Method 1

Add Classic block, and insert, as the only element, a right aligned image, into that block. Add other blocks, after the Classic block.

Method 2

Add Image block, and add alignright class, in Advanced setting of this block. Follow that Image block by other blocks.

I also discovered you can't insert an image from a relative URL in Gutenberg.

Media Library always provides full URL of the image. After the image is inserted, switch from Visual Editor to Code Editor, and edit src attribute of img element to use a relative URL.

  • I can't believe the braintrust at WordPress made it this hard to insert an image. Hopefully one of these will work, I'm still disappointed my HTML block didn't work. I tried adding another class and CSS rules using advanced I made another one called "floatRight". Obviously I couldn't like to a preview of an unpublished post... – Muskie Jan 26 at 2:27
  • Method 1 did not work. It looks exactly like before. I think my custom HTML solution was the same. I even switched browsers to Chrome to see if this was a Safari thing, I can add another picture, but it has to be something in my theme or style.css – Muskie Jan 26 at 2:32
  • Method 2 also did not work. I still think my custom HTML block should have worked it has to be a CSS inheritance issue, should the image be display:block? – Muskie Jan 26 at 2:43
  • I think it might have something to do with trying to float around a heading which of course I used to be able to do in all my old posts. I really am not a happy chappy having spent hours trying to float a single image right. – Muskie Jan 26 at 2:52
  • After following method 2 I can not delete the image. I also don't think Chrome is reloading my CSS when I hit refresh, did I mention I had the entire post written and just need to add the images, this has cost me hours of time, this is not an improvement to WordPress. – Muskie Jan 26 at 2:58

Your Answer

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

Not the answer you're looking for? Browse other questions tagged or ask your own question.