theme development - How to float an image in Gutenberg

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=".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.

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/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.

• theme-development
• images
• css
• block-editor

Share Improve this question edited Jan 26, 2019 at 5:33 Muskie asked Jan 25, 2019 at 15:23 MuskieMuskie 11511 silver badge88 bronze badges 2

• what is the site address? – rudtek Commented Jan 25, 2019 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 Commented Jan 26, 2019 at 2:29

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 3

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.