Adding an Image in Gutenberg

by Aug 6, 2018WordPress Tutorials - WP Tutorials, Gutenberg, WordPress 5.0

There are three ways to add images with Gutenberg: as an individual image, cover image, or an image gallery.

1. The first step is to click on Gutenberg

Step 1 image

2. Click Add block (Plus Sign)

Step 2 image

3. Click Image

Step 3 image

4. Here you can upload a new image or add an image that has already been installed

Step 4 image

5. Click Upload or add from media library

Step 5 image

6. Now that your image is uploaded you can customize it and resize it

Step 6 image

7. once you are done editing your image Click Save Publish…

Step 7 image

8. That’s it. You’re done.

Step 8 image

Here’s an interactive tutorial

Step 1 Hover your mouse over the Add Block icon (the plus sign in the upper left hand corner within the Gutenberg editor).

Step 2 Select Blocks. Then scroll to Common Blocks. Under that section you will see Image. Select Image.  Hint: you can also add a gallery by using the gallery block.


Step 3 The image block will appear. You can add image from your media library or upload a new one from your computer.

Step 4 Once you selected which image you would like to use, you can customize it. A toolbar is on top of the image with a few options (Alignment options, a gallery option, edit image, wide width,  full width, and insert link option).

Step 5 On the right hand side, you will see the settings. There you can alter the image sizes and add css classes.

Adding an image in Gutenberg

Copyright ByRivers Tech LLC/ WP-Tutoring.Com All Rights Reserved.

  • Get Expert WordPress Help Right Now!

  • Please enter your phone number so we can fully discuss your needs.
  • This field is for validation purposes and should be left unchanged.


Submit a Comment

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

Access Our WordPress Training Academy Videos

View our FREE WordPress 6.4 Course.  Learn about the exciting new features available in this release!