1

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

Improve this question
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

1 Answer 1

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.

Improve this answer
15
  • 4
    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
    Commented Jan 26, 2019 at 2:27
  • 1
    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
    Commented Jan 26, 2019 at 2:32
  • 1
    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
    Commented Jan 26, 2019 at 2:43
  • 2
    With both methods, the block ( either Classic or Image ) has to be inserted just BEFORE the first of blocks, the image is supposed to float around. The sequence is important.
    – Frank P. Walentynowicz
    Commented Jan 26, 2019 at 3:28
  • 1
    The fix was display: inline; on that H2 rule but I don't know where it got display: block. Now I have to see if it messes up anything else. I used to not use H1 and H2 so much, but for SEO purposes I am using them more. I used to use mostly H3 and H4...
    – Muskie
    Commented Jan 26, 2019 at 13:16

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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