How to float an image in Gutenberg

Getting an image to float to the left or right of some text is not as obvious in Gutenberg as it was in the classic editor. Using blocks it’s no longer obvious how to combine and text on a single horizontal. But, the answer, once you know it is just as easy.

The best way to start is by adding everything in separate blocks, including the image that you want to float. Ensure that all the text that you want at the side of the image appears in the blocks directly below the image. Something like this…

Now, you simply use the toolbar for the image block to align it either to the left or the right. Here is the above example but now with the image right aligned…

And that’s all there is to it.  If you then want to move the content about after, you can simply remove the alignment from the image and it will return back to how it was in that first screenshot – move the blocks around and then apply the alignment again. In many ways this makes later manipulation of this in Gutenberg easier than it was before.

5 responses

  1. I tried this of course and it looks right in the editor but when I preview the image is not floating it is above the text where the block was before I clicked align right.

  2. I tried it also. It looks like scrap if you use several pics and text within an responsive design. If you change the size of the browser-window or look to it from several devices you will see it.

    1. I’ve published exactly one post in Gutenberg. I mainly edit old posts it seems and I definitely think you need to put more text between images or just switch to not floating, but I try to have one tall skinny image for sharing on Pinterest and you need to float those.

      1. wolfgang avatar
        wolfgang

        I think it’s a block called Media and Text (in the german translation) what I’m looking for.
        I tried and it works good so far – but: I’m missing the option to “Click the Pic Big”.
        Any idea how this can be done?
        Thx so far

  3. Nice! This was super helpful.
    I would like to add that Gutenberg automatically flows the text to wrap, so if your photo is small and your article is long, the text goes full-width after the photo ends. Very important.
    The display in the backend editor is not great though. It looks pretty broken, with the image overlapping the kitchen sink buttons in the editor for the text that follows your image.

Leave a Reply to WolfgangCancel reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Discover more from David Artiss

Subscribe now to keep reading and get access to the full archive.

Continue reading