Image Block

    <span class=Image Block" title="Image Block" />

    Copy the following HTML iframe code to your website:

    « Back to Glossary Index

    The WordPress Image Block allows you to easily add an image to your page or post.

    Here’s how the WordPress image block looks on the back end of the website before you add an image:

    WordPress image block. How to Write a Post in WordPress Gutenberg block editor

    Note that I inserted this image of the image with the image block — so you can see how it appears on the front end.

    You have three choices here: upload a new image, choose one that’s already in your media library, or insert a URL from an image elsewhere. For more detailed information about uploading images to the Media Library, read this post.

    WordPress image block settings. How to Write a Post in WordPress Gutenberg block editor

    If you click on the little picture icon in the upper left corner of the Image block, it will open up a menu where you can make your image round, or transform it to one of a selection of other block types.

    You can also click below where it says “Write Caption” and type in any caption you might want. If you leave it blank, it won’t show anything on the front end of your website.

    The next icon over will open up a dropdown of choices for aligning your image.

    Replace will allow Zip to change his mind when he decides not to represent himself with this image of a baby sloth.

    And, you can choose to make your image link to something by using the link button, just as you did with the Paragraph block.

    Image Block Settings

    wordpress image block settings

    When you have an image block selected, you’ll see these settings in the block tab in the right panel.

    • The Styles settings will do what we already did: choose between a squared or rounded image.
    • In Image settings, you can enter Alternative Text, which will describe the image when read by a screen-reader and may confer some SEO benefit if you add some keywords.
    • You can choose from some of the existing sizes for this image by using the dropdown, or specify exact dimensions or percentages of the original image size that you want to apply for this image.

      It is best, as much as possible, to use the exact image size. Images load much slower if they need to be resized down in your browser.

      For instance, if you want to use a 300px Medium Sized Image here, choose the Medium size. Don’t select full size and then specify 300px or 25% in the settings here, which will size that large image down.
    • Advanced will let you add a title attribute. Doing so is optional, but may show up as a tooltip when someone hovers over the image on the front end of your website.
    • Additional CSS classes: again, this is for styling. You’ll notice that the class is-style-rounded got automatically added here when we chose a rounded style for our image.

    Here’s a short video of the image block in use.

    Note that it’s not narrated — your sound is working just fine!

    WordPress 5.5 Update

    WordPress 5.5 added some features to the image block. Now you can do some editing right from the top bar of the block including zooming in, setting the image orientation and rotation and cropping. See the video below for a quick demo.

    [easy-tweet tweet=”Here’s all about how to use the WordPress image block.” user=”lovecoffeewp” hashtags=”wordpress,blogging,imageblock,wp,gutenberg” template=”modern”]

    How much love or how many cups of hot coffee does this post deserve?

    Click to rate it!

    Average rating: 0 / 5. Vote count: 0

    No votes so far! Be the first to rate this post.

    As you gave this post a good rating:

    Follow us on social media!

    We're sorry you didn't like this post.

    Help us improve!

    Tell us how we can improve this post.

    « Back to Glossary Index
    Subscribe to Comment Notifications
    Notify of
    Inline Feedbacks
    View all comments
    Psst! Hey you! Yeah, you. Want to leave a comment?x