• Website Home
  • About
  • Services
  • Portfolio
    • Recent
    • Archives
  • Shop
    • Catalog
    • Order

ASK Design Blog

Designer | Artist | Teacher

  •  
    • Blog Home
    • Web Design
    • Graphic Design
    • Art
      • Licensed Art
    • Links
    • Calendar
    • Contact
      • Privacy Policy
      • Cookie Policy

    Wrapping Text Around an Image in WordPress Gutenberg

    March 5, 2021 by ProfK 11 Comments

    With the WordPress content editor, Gutenberg, the method for wrapping text around an image has changed. In the Classic Editor, you place your cursor at the beginning of a paragraph and click the Add Media button. Align the image left or right, and your text will wrap. In the Gutenberg editor, you use an image block and a text block. I’ll show you the best way to do this.

    Before we get into the specifics, a quick note about aligning versus wrapping. Aligning text and image positions the two items next to each other in 2 separate columns. Wrapping involves more interaction with the image, since the text positions itself around the image. In print design, you can create a text wrap on all sides of an image (top, bottom, left, and right). In web design, the text can wrap on the top and bottom, but only on one side.

    BEST METHOD FOR WRAPPING

    Step 1

    I find it best to start by placing an image inside an image block. There is no default alignment. We’ll apply an alignment in Step 3.

    Cosmos
    Cosmos ©2011 Anne S. Katzeff, pastel

    Step 2

    The next block will be the text block. I’ve used a fun Lorem Ipsum Generator (CupcakeIpsum) to collect fake text and fill the text block in my example:

    Donut muffin gummies biscuit tart. Sweet apple pie gummies bear claw. Liquorice cupcake soufflé I love cheesecake sweet I love tootsie roll. Tiramisu dragée I love jelly liquorice pudding croissant. I love pastry jujubes bonbon croissant. Bonbon sweet biscuit. Powder tiramisu fruitcake marshmallow I love. Tiramisu dessert chupa chups I love tart. Pastry sesame snaps chupa chups. Toffee topping cake. Danish sugar plum liquorice. Bonbon icing dragée. Jujubes I love wafer gummi bears I love gingerbread gingerbread. Halvah cheesecake pastry cake jujubes cake donut jelly-o croissant. Croissant I love candy powder. Ice cream croissant I love donut icing marshmallow tootsie roll danish danish. Macaroon gummies cheesecake candy canes sugar plum. Pie gummies marshmallow sugar plum. Marshmallow gummi bears cake toffee brownie icing icing. Apple pie caramels cotton candy oat cake I love gingerbread oat cake. Gummies I love cake tart bear claw sweet roll caramels I love jelly beans. Dessert danish halvah sweet marshmallow. Jelly beans candy canes tiramisu liquorice cupcake icing tootsie roll. Candy canes cookie I love dragée tart pastry chocolate cake. I love macaroon gummi bears marzipan macaroon. Pudding jujubes I love tart.

    Step 3

    When done with the text, select the image block and set the alignment left or right. The text will immediately reposition itself on the opposite side of the alignment chosen for the image. When the image is aligned left, the text will move into place on the right side; when the image is aligned right, text moves into place on the left side. With a center-aligned image, the text stays beneath it.

    Image Aligned Left with Text on Right
    Image Aligned Right with Text on Left
    Image: Align Center with no Text Wrap

    Step 4

    If the text doesn’t move, it means the image is too wide and there’s not enough space for the text. Simply select the image block, grab one of the round nodules, and drag to scale smaller. The text will begin to wrap as soon as there’s enough room for it.

    Video Tutorial

    If you prefer, you can watch the video tutorial I made that shows you how to wrap text around an image in WordPress Gutenberg:
    VIEW VIDEO!

    Related Posts

    4 Ways to Create Columns in WordPress
    How Can I Change the Typeface in WordPress?
    WordPress Pages vs. Posts
    How to Create a Navigation Menu in WordPress

    Filed Under: WordPress Tagged With: gutenberg image block, gutenberg text block, image alignment, wrapping text

    Reader Interactions

    Comments

    1. Pamela Kramer says

      August 19, 2021 at 12:37 am

      I just wanted to thank you. I was ready to tear out my hair trying to use this new editor and getting the text to wrap around the images. Your video really helped! Thanks again.

      My best,
      Pam

    2. ProfK says

      August 19, 2021 at 4:59 pm

      Great to know that the tutorial was helpful!
      Thanks for taking the time to write, I appreciate it!

    3. Scott Siegwald says

      November 16, 2021 at 3:11 am

      Thanks. But I’m looking for the wrap that continues under the image after being aligned left or right. I thought you were going to do that, but your video never showed it working. When I try, it “aligns”, but the text stays in the column width of the text next to the image. not a wrap, but an align.

    4. ProfK says

      November 16, 2021 at 7:39 pm

      Hi Scott, The method I describe here in the blog as well in the video does wrap the text on one side with the overflow continuing underneath the image. The original example showed a new paragraph continuing underneath the image, which I now realize is confusing. So, I changed the text in this blog post to better illustrate the wrapping. Thanks for your feedback, which provided me with an important perspective.

    5. skierpage says

      November 28, 2021 at 1:22 am

      I found that my high-res images don’t “nest” into the following paragraph until I reduce the image’s size: in Gear icon [Settings] > Block > Image settings, set a size or percentage for image settings. Otherwise the image defaults to being full-width, and so changing its alignment has no effect.

      If the image is taller than the paragraph of text beside it, the floating image will continue to push the next paragraph over. If you don’t want this, you should be able to clear any outstanding floating alignment with the CSS clear property; I used to use a lot of br style=”clear: both;” after nested images, but I couldn’t get it to work in Gutenberg using “Edit as HTML”.

    6. ProfK says

      December 1, 2021 at 8:20 pm

      You’ll need to add a class to your stylesheet, something like “clearboth”.
      .clearboth {
      clear: both;
      }
      Then use that class in the “Advanced > Additional CSS class(es)” section of the block: clearboth.

    7. Kathy says

      December 4, 2021 at 3:33 pm

      Thank you that was really useful and very clear

    8. Lisa says

      May 4, 2022 at 6:07 pm

      This was so helpful! Your description was clear and it worked just like you said, so I didn’t have to watch the video. Thank you so much!

    9. ProfK says

      May 5, 2022 at 10:13 pm

      Great, Lisa, glad it was helpful! Thanks for your feedback.

    10. Celeste says

      August 22, 2022 at 8:34 pm

      Thank you for this lesson! It was clear and helpful as I transition to the block editor. Something I wish you had addressed, however, was padding or whitespace. When I align my image the text is bumped up against the image. Can I add padding-right or padding-left somehow? Or did you already have whitespace around the image in the media library?

    11. ProfK says

      August 24, 2022 at 8:10 pm

      Thanks for your feedback, Celeste. The margins and padding around an image are controlled in the stylesheet. Identify the image block element using the browser’s developer tools. Then, you can override the property values in the Customizer.

    Leave a Reply

    Your email address will not be published. Required fields are marked *

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

    Primary Sidebar

    Affiliate Disclosure

    This website contains affiliate links, which means I may get a small commission (at no cost to you) if you use these links to make a purchase.

    Subscribe to Mailing List

    Sign up to get periodic updates on Anne's design and art adventures, and receive useful info. via her blog.
    * = required field

    We never share our email list with anyone.

    Looking for Something on this Site?

    Search the Web

    New Book Published!

    Kornegger book: Inside the Rainbow

    Art and design for book cover and interior

    Inside the Rainbow: Soul Connection in Nature, by Peggy Kornegger

    BUY THE BOOK!

    Peggy and I have completed our 3rd book together! This one is about soul connection in nature. Peggy is the writer, I'm the designer and artist. I think it's pretty darn special and hope you agree 🙂. Printed book and eBook are both available on Amazon.

     
    kornegger loseyourmind front cover
    Several of my paintings are in this book (including the cover)
    BUY THE BOOK!
     
    Check out my blog post about designing books: Self-Publishing Adventures

    Amazon Affiliate

    As an Amazon Associate I earn from qualifying purchases.

    Photo, Video & Design Software

    Affiliate Partners

    We receive compensation when you purchase a service or product via the links on this blog.

    Web Hosting

    StudioPress
     
    Bluehost Website Hosting

    Testimonials

    I received the notecards on Friday and it was on my to do list today to email you my deep appreciation for them. They are amazing and I am so glad to have them to share. I am sure I will order more in the future. You are such a gifted artist and I thank you for sharing in a way others can use the art.

    — Shari Spokes

    Your new pastel "Lettuce Lake” is really beautiful. Very, very nice.

    — Tony from Belmont, MA

    My dear sweet sister. I can’t tell you how much I love your pictures. I so much wanted something and was so sorry that I couldn’t pick something out at your sale. On the other hand, I so much wanted something that you had chosen for me. Its been on my mind and suddenly, your beautiful pictures arrived. They are beyond beautiful and I cried when I saw them. Sending you love and my bestness.

    — Marti from Reno, NV

    Copyright

    © 2000-2023 Anne S. Katzeff. All rights reserved. Unless noted, all artwork and text are copyrighted by the artist. Images may not be reproduced, manipulated, or used in any way without Anne’s written permission.

    Categories

    Graphic Design

    • AIGA
    • Design Is History
    • Janice Moore
    • Mass. Contractors

    Web Design

    • 978 Grid System
    • A List Apart
    • Adobe Color Tools (formerly Kuler)
    • AWWWards
    • Smashing Magazine
    • underthesite
    • www schools

    Tech-Computer

    • Adobe TV
    • Orramac
    • Teknoziz

    Comments

    In an effort to reduce spam, comments are restricted. Please email Anne if you have a comment or question that you are unable to post. Thanks for understanding.


    Archives

    Typography

    • 1001fonts
    • Adobe Type
    • Adobe Web Type
    • Bitstream
    • Dafont.com
    • Emigre
    • Font converter (free)
    • Font Spring
    • Font Squirrel
    • Google Fonts
    • I Love Typography
    • identifont
    • Typeinspire
    • Typewolf
    • Typoretum

    Photography

    • Creative Commons

    Footer

    Subscribe to Mailing List

    Sign up to get periodic updates on Anne's design and art adventures, and receive useful info. via her blog.
    * = required field

    We never share our email list with anyone.

    Contact

    Website
    Email

    Subscribe to RSS Feed

  •  ASK Design Blog
  • Connect and Share

  •  
  • Legal

    Privacy Policy
    Cookie Policy

    Copyright © 2023 · Optimal Theme · Built on the WordPress Genesis Framework· Customization and design by ASK Design