How to Add an Image to Your Post Using Gutenberg Editor

Welcome to our latest installment of WordPress Wednesday. One question we are commonly asked is: “how can I add an image to my blog using Gutenberg?” Allow us to walk you through the process, step by step.

What is Gutenberg?

First, you might be wondering “what is Gutenberg? You mean Steve Guttenberg, that actor from the ‘Police Academy’ movies?” Eh, not quite.

The Gutenberg editor is a block-based content editor for WordPress, introduced with the release of WordPress 5.0 in December 2018. Named after Johannes Gutenberg, the inventor of the printing press, the Gutenberg editor is designed to provide a more modern and flexible way of creating and editing content in WordPress.

Key Features of Gutenberg

Block-Based Editing: Content is created and edited in the form of blocks, which are individual units for various types of content (paragraphs, images, headings, lists, etc.). Blocks can be easily moved, rearranged, and customized.

Rich Content Blocks: Gutenberg provides a variety of content blocks that allow users to add diverse elements to their posts and pages, such as images, videos, quotes, tables, buttons, and more.

Inline Text Formatting: Text formatting options are available directly within each block, making it more intuitive for users to apply styles and formatting to specific sections of their content.

Improved User Interface: The editor features a cleaner and more user-friendly interface, with fewer distractions and a focus on a seamless editing experience.

Mobile-Friendly: Gutenberg is designed to work well on both desktop and mobile devices, allowing users to create and edit content from different devices with a consistent experience.

Developer-Friendly: Developers can extend and customize the editor using the Gutenberg API, creating custom blocks and adding functionalities.

How to Add Images to Your Post Using Gutenberg

The Gutenberg editor in WordPress allows you to easily add images to your posts. Here’s a step-by-step guide. You can also watch our handy-dandy tutorial posted below.

1. Create or Edit a Post/Page:

• Log in to your WordPress admin dashboard.
• Navigate to the post or page where you want to add an image.

2. Inserting an Image Block:

• Once you’re in the editor, click on the (+) button to add a new block.
• Search for the “Image” block in the block inserter, or you can find it in the “Common Blocks” section.

3. Upload or Select an Image:

• After adding the Image block, you’ll have the option to either upload a new image or select one from your media library.
• Click on the “Upload” button to upload a new image, or click on “Media Library” to choose an image that’s already in your library.

4. Adjust Image Settings:

• Once the image is added to the block, you can adjust various settings such as image size, alignment, and other display settings in the right sidebar.

5. Caption and Alt Text:

• It’s good practice to add a caption and alt text to your images for accessibility and SEO purposes. You can find these options in the right sidebar as well.

6. Update or Publish:

• After adding the image and making any necessary adjustments, click the “Update” or “Publish” button to save your changes.

We also dug deeper and found some pros and cons to using the newer version of Gutenberg editor. You can read up on that here.

As always, if you find yourself struggling with your website, request a call with our Raney Day Design team and we will be happy to steer you in the right direction.

Did you find this helpful? Check out all of our WordPress Wednesday tips by dropping us your email to be added to our WordPress Wednesday email list.