Gutenberg editor: stop text flow around an image

  • Using the Gutenberg editor, I want to have two sections:
    . Section 1 with a full-width heading 1 followed by
    . Image 1 on the left, with
    . text 1 describing image 1 on the right,
    . Section 2 with a full width heading 2 followed by
    . Image 2 on the left, with
    . text 2 describing image 2 on the right.

    The formatting of “media and text block” is not right for me.

    Here is what I have done so far and the problem with it.

    Heading 1 is easy in a heading block.

    I get image 1 on the left with text 1 to the right by:
    . Moving the “image block” with image 1 directly above the “paragraph block” with text 1.
    . On the “image block”, clicking the align left icon

    My image 1 happens to be longer than text 1.

    The problem is that heading 2 is appearing under my text 1 to the right of image 1.
    I want my heading 2 to be under image 1.

    *** What block can I insert under text 1 to make heading 2 appear under image 1.

    I have tried lots of blocks. A wide image block with a random, unwanted image worked. The unwanted image appeared under image 1. A narrow image block did not work as it placed the image under text 1.

    Do I have to take an all-white photo 400 px wide by 1 px high and insert this as an image block above heading 2, so that heading 2 appears below image 1. Surely there is another way.

Viewing 3 replies - 1 through 3 (of 3 total)

  • When you use floats, which is what causes the text to wrap around the image, it will continue to float until it is cleared or the floated thing is passed.

    There are issues already written for adding clear to certain things, but it’s the same problem it’s always been in every editor: by default, it’s not cleared until the user clears it. The real issue is that there is not a good way for the user to put the clear in.
    If you can define a CSS class in the Customizer like this:
    .clear {clear: both;}
    then you can put that class on whatever block you want to not wrap around the first one. (Or use an inline style style="clear:both;" on it)
    The trick is to get it in there…

    I’m not sure if this is the same issue as above but similar to what I wanted to ask about. Is there a way to wrap text tight around an image, similar to Word, in the Media-Text block. There seems to be no paragraph option for text in that block (only title text); where you can insert images within the content of your post and continue writing in paragraph format rather than the image standing alone with Title text only.

    I’m self-hosted and fairly new to Gutenberg and wanted to inquire if this is something developers have included or are continuing to work on it.

    Thank you
    [Signature links removed by moderator per forum guidelines.]

    • This reply was modified 4 years, 7 months ago by James Huff.

    in which block should I put a customized >> .clear {clear: both;} ?
    I’m trying
    – media/text block but do not like as the image is middle (I like on top left)
    – block wp:image
    – wp:paragraph (1)
    – wp:paragraph (2)
    Wonder how image wrap around paragraph (1) e leave alone paragraph (2)
    thanks

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Gutenberg editor: stop text flow around an image’ is closed to new replies.