Home » WordPress Tutorials » Basics » How to Add Images to WordPress with Gutenberg

How to Add Images to WordPress with Gutenberg

Adding images with Gutenberg is quite simple. The block editor is very user-friendly and allows you to add images in several ways.

In the following paragraphs, you will read about 4 methods you can instantly use to upload the media files you want.

 

How to Add Images to WordPress with Gutenberg

Adding images to WordPress is very easy, especially if you are using Gutenberg to craft your website.

To add an image, you should first enter your WordPress admin dashboard.

Then, make sure that Gutenberg is set as your default editor.

After that, open the web page or a blog post in which you want to add an image.

Keep in mind that the process is the same whether you want to add an image to a web page or a blog post.

For this demonstration, we will create a sample post.

Once you open a web page or a blog post, Gutenberg will be activated and you should see a page such as this:

 

There are a total of 4 ways you can add an image to the content area of your blog post/web page:

  1. By clicking the black + sign within the content area.
  2. By clicking the blue + button at the top left corner of the page.
  3. By typing “/” within the content area and searching for the image block.
  4. By directly dragging an image from your device to WordPress.

In the following paragraphs, you will read how to use each of the mentioned methods.

 

Method 1: Click the Black + Button Within the Content Area

A very quick way of adding an image to WordPress with Gutenberg is by simply clicking the + button that is always visible within your content area:

WordPress Add Image with Gutenberg

 

Once you click the black + button, a new box with the most used Gutenberg blocks will appear:

WordPress Add Image with Gutenberg Available Blocks

 

Within this box search for the Image icon:

WordPress Add Image with Gutenberg block

 

If you don’t see such an icon, click on the Browse All button, so you open the list with all available Gutenberg blocks:

WordPress Gutenberg Browse All Blocks

 

Once you click it, the list with blocks should appear on the left side of the screen:

WordPress Gutenberg Browse All Blocks

 

Search for the Image icon and click it. This will make WordPress insert a new image block within your content area:

WordPress Gutenberg Insert Image Blocks

 

Via this block you can either upload an image to WordPress, insert an image from the WordPress media library or insert an image from the URL:

WordPress Gutenberg Insert Image Blocks 3 Ways

 

For this demonstration, we will use an already uploaded image from the Media Library.

We simply click the Media Library button and a list with all uploaded images to WordPress will appear:

WordPress Gutenberg Insert Image Blocks from Media Library

 

While inside, click on a particular image you would want to add to your content, and after that click on the blue Select button at the bottom right of the screen:

WordPress Gutenberg Select and Insert Image from Media Library

 

Once you click on Select, WordPress will insert the selected image within the Image block:

WordPress Gutenberg Inserted media file in an Image block

 

Now you have managed to add an image to WordPress.

 

Method 2: Click the Blue + Button at the Top Right of the Page

Similar to the black + button, the blue one, located at the top left corner of the page can be used to insert an image in your content area:

WordPress Gutenberg Block library

 

The difference between the two buttons is that the black one opens a short list of the most used Gutenberg blocks, whereas the blue one opens the library with all available blocks you can use.

Once you click the blue + button, a sidebar with all the available blocks should appear on the left of the page:

WordPress Gutenberg Block library Sidebar List

 

From this area search for the Image icon:

WordPress Gutenberg Block library Sidebar List Image Icon

 

If you don’t see the icon among the list of suggested blocks, simply type down “image” in the search area, so Gutenberg filters the result based on this input:

WordPress Gutenberg Block library Search for the Image Block

 

Once you see the Image icon, click it, so Gutenberg inserts this block within your content area:

WordPress Gutenberg Insert Image Block in Content Area

 

Now, just like the first method, choose whether you wish to upload an image from your device, insert an already uploaded image from the Media Library or use an URL to add an image to your content.

For this demonstration, we will insert an image from the Media Library.

First, we click on the Media Library button located within the image block:

WordPress Gutenberg Insert Image Block with Media Library

 

This will open the WordPress Media Library that contains all your uploaded media files:

WordPress Gutenberg Insert Image from Media Library List

 

From this list click on the image you wish to insert within your content area and then click on the blue Select button located at the bottom right corner:

WordPress Gutenberg Select and Insert Image from Media Library

 

This will insert the image into your content area:

WordPress Gutenberg Inserted Image in a Block

 

Now you have added an image within your content area.

 

Method 3: Use the “/” Symbol to Search for the Image Block

This method is quite simple to adopt.

Within the content area, click on the paragraph block, which is usually included by default, and as prompted by Gutenberg, type “/”, so a list of available blocks appears:

WordPress Gutenberg Inserted Block by Typing

 

Now, from the list of suggestions, click on Image:

WordPress Gutenberg Select Block Type from List

 

Clicking on the image icon will make Gutenberg insert an image block within your content area:

WordPress Gutenberg Select Image Block

 

Now, similar to the previous two methods, choose how to insert an image within this block – by uploading a file from your device, by choosing a file from your Media Library, or by using an URL.

For example, if you click on Media Library, WordPress will open a list with all your uploaded media files:

WordPress Gutenberg Insert Image Options

 

Click on the image you wish to use and then on the blue Select button at the bottom of the screen:

WordPress Gutenberg Media Library Items

 

Clicking on the image and then on the blue Select button will insert the image within your content area:

WordPress Gutenberg Media Library Items Click and Insert to Content Area

 

Method 4: Drag the Image from Your Device to WordPress

Dragging an image from your device to WordPress is the fastest way you can include an image file in your blog posts and web pages.

To add an image with this method, you simply click on the image file on your device and drag it to the content area in WordPress.

To drag the file, simply right-click on it with your mouse and while the right button is pressed, move the mouse, so the cursor starts to move the selected file around:

WordPress Gutenberg Drag an Image to Content Area

 

Once you drag the file within the content area, release the right mouse button, and the file will immediately be uploaded to your WordPress Media Library and inserted within the content area:

WordPress Gutenberg drag-and-drop Image from Device

 

Now you have managed to add an image to WordPress via the drag-and-drop function.

 

Conclusion

In this article, we shared a total of 4 methods you can use to add an image to WordPress with Gutenberg:

  1. By clicking the black + sign at the center of the page.
  2. By clicking the blue + button at the top left corner of the page.
  3. By typing “/” within the content area and searching for the image block.
  4. By directly dragging an image from your device to WordPress.

Each method is very handy and you can select the one that fits your working preferences the best.

Related:

Was this article useful?

Click on a star to rate it!

Average rating 4 / 5. Vote count: 1

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

Newest Articles:

How to Add a Site Logo Block in WordPress with Gutenberg

Adding a site logo in WordPress with Gutenberg is straightforward and requires only a few mouse clicks and just several minutes of your time. In the following paragraphs, you will read how to add a site logo to your WordPress website via the Gutenberg editor step by...

How to Disable Gutenberg in WordPress

If Gutenberg is not suitable for your needs and wish to switch back to the Classic Editor, continue reading, as in this article we will show you 3 simple methods of how to disable the block editor. In the following sections, you will read how to disable Gutenberg by:...

5 Best Gutenberg Plugins for WordPress

One of the fastest and most convenient ways of enhancing the functionalities of Gutenberg is by using various WordPress plugins. Although Gutenberg is very versatile and feature-rich by itself, the open-source nature of WordPress has inspired developers all around the...

How to Add a Contact Form with WordPress Gutenberg Editor

If you are using Gutenberg to craft your WordPress website, then you should know that the process is very easy, especially by using the block editor. In the following paragraphs, you will read how to add one to your pages.   How to Add a Contact Form with...

How to Access the Gutenberg Full Site Editor

The Gutenberg full site editor is a very faceted set of tools that allows you to craft a WordPress website that perfectly fits your website preferences and business goals. The full site editor gives you the opportunity to customize even the smallest details that...

Ready to Create Your Website?