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

Image Block

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.

***

"Learning WordPress has been a huge stumbling block for me. I've been looking for something that covers absolutely everything but doesn't cost an arm and a leg. Thank you so much ... you have just provided me with what I have been looking for! Truly appreciated!" - Tanya

Recommended Video Courses For WordPress Users

Google Tools

This video course will help you learn the basics of using Google Tools like Google Analytics and Gmail.

More info: Google Tools

Recommended Video Courses For WordPress Users

Build A WordPress Site ... Fast!

Need a new website or blog in a hurry?

This video course shows you how to quickly install and configure a WordPress website or blog on your own domain name and be up and running in no time!

More info: Build A WordPress Site ... Fast!

Recommended Video Courses For WordPress Users

WordPress 101: How To Use WordPress

Learn how to unlock the power of the WordPress content management system (CMS) using the many powerful features inside your WordPress administration area.

More info: WordPress 101: How To Use WordPress

Recommended Video Courses For WordPress Users

Keyword Research Tools

This video course shows you how to do keyword research using tools like the Google Keyword Planner.

More info: Keyword Research Tools

Recommended Video Courses For WordPress Users

Why Your Business Needs WordPress

Learn about the unique features, benefits, and advantages of using WordPress to start or grow your business online.

More info: Why Your Business Needs WordPress

Recommended Video Courses For WordPress Users

WordPress Traffic & User Engagement

Learn how to drive more targeted traffic to your website and discover ways to improve user engagement with your business online.

More info: WordPress Traffic & User Engagement