WordPress For Non-Techies: Free WordPress Tutorials – WPCompendium.org

Image Block

For a white label version of this tutorial visit WPTrainingManual.com.

WordPress Gutenberg Blocks – Image

This tutorial is part of our WordPress Gutenberg: The Ultimate Guide For Non-Technical WordPress Users series.


Image Block Description

The Image Block lets you add images to your WordPress site …

(Add images to WordPress using the Image Block)

How To Use The Image Block

To add an Image Block:

Let’s go through the above steps:

First, create a new post or page or open an existing post or page and either:

Click on the ‘Add Block’ tool and select an ‘Image’ block …

(‘Add Block’ Tool – Add Image Block)

Or, select an Image Block in the Content Area …

(Add an Image Block from Content Area)

After adding an Image Block, you can add an image:

Add An Image Using Drag & Drop

To add an image using drag and drop:

(Add an image to WordPress using drag and drop)

Add An Image Using Your Web Browser Uploader

To add an image using your web browser uploader:

Let’s go through the above steps:

First, click on the ‘Upload’ button in the Image Block …

(Upload Image button)

This will bring up the ‘Upload Media’ window on your browser. Select an image from your media folder and click on ‘Open’ to import the image into the Image Block and add it to your post/page …

(Upload an image)

Add An Image From Your Media Library

To add an image from your media library:

Let’s go through the above steps:

Hover your cursor over the Image Block and click on the ‘Media Library’ button …

(Media Library upload button)

Select an image from your media library (or upload one from your ‘images’ folder) and click on the ‘Select’ button …

(Upload an image from the Media Library)

The image will be imported to your Image Block and added to your post or page …

(Image added)

Add An Image From An External URL

You can add an image to your post or page from an external URL.

To add an image from an external URL:

Let’s go through the above process.

After uploading your image to your storage location and copying its URL, hover your cursor over the Image Block and click on ‘Insert from URL’ …

(Insert image from URL)

Paste the image URL into the URL field and click ‘Apply’ to add the image into your post or page …

(Insert image from URL)

After adding images:

How To Edit Your Image

Use the Image Block Editor to change image alignment, image width, add a caption to your image and resize the image.

To edit your image:

How To Align & Resize Your Image

Use the alignment tools and resizing handles to align and resize your image …

(Edit your image size, width, and alignment)

You can also adjust your image size using the block’s Image Settings …

(Resize image settings)

How To Caption Your Image

After your image has been inserted into your post or page, you can add a caption to the image by clicking inside the block and typing a caption  …

(Add a caption to your image)

Note: You can add a link and format your caption using bold, italics, or strikethrough.

You can also nest your image inside a paragraph of text (i.e.  wrap text around your image).

How To Wrap Text Around An Image

To wrap text around an image:

(Wrap text around an image)

You can also nest images in other block types (e.g. a List Block) …

(Nest an image in a list)

Remember to update and publish your post or page to save your settings.

How To Remove An Image Block

To delete or remove an image block:

(Remove an Image Block)

Additionally …

Image Block Tools, Options & Settings

The Image Block includes tools, options, and settings for:

Image Block Editor

(Image Block Editor)

The Image Block Editor includes tools that let you perform the following operations:

(Image Block Editor)

Image Block Settings

(Image Block Settings)

Image Block settings include:

(Image Block Settings)

Image Block – Additional Info

The Image Block can be converted into the following block types:

(Change Block Type – Image Block)

Installing plugins or themes on your site may add new functionality, options, or settings to Image Blocks.


Congratulations! Now you know how to use the WordPress Gutenberg content editor Image Block.


"Wow! I never knew there's so much to learn about WordPress! I bought one of the WordPress for Dummies three years ago, such authors need to be on this course!" - Rich Law, Create A Blog Now
For a white label version of this tutorial visit WPTrainingManual.com.