How to Add Image Blocks in the WordPress Gutenberg Editor

Ever since the early days of its release, the WordPress Gutenberg Editor has stirred up some controversy. A lot of website owners had a tough time switching to the Gutenberg WordPress Editor and its block system, while others loved the new features it brought. But saying that Gutenberg’s blocks are a handy tool would be an understatement. In fact, they are the first choice for so many people precisely because they allow you to customize your posts with a simple drag and drop interface. Good news for all those who love to adorn their posts/pages with informative images – it’s very easy to add image blocks in the WordPress Gutenberg editor. The best part? You can do it in five different ways.

The five different ways to add image blocks in the WordPress Gutenberg editor

The Gutenberg WordPress editor and the Classic one differ in many ways. The topic at hand is one of adding images. In the Classic editor, what you had to do was click on ‘Add Media’ which would open a pop-up screen that lets you use many images and media features. This is just one of the things the new WordPress editor changed. If you were to ask us as WordPress experts which version we prefer, we wouldn’t be able to pick a favorite. It all depends on your needs and skills, and the good thing about the Gutenberg editor is that it was created with the goal of simplifying many tasks.

The media tab in WordPress.
Adding media to your posts and pages is easy if you are using the Gutenberg Editor.

1. Choosing the image block

Perhaps the easiest way to add a basic image to your page or post is this one. All you have to do is click on the + icon which will open up an array of options from which you should choose the ‘Media’ one. By doing so, you would start a process that is pretty similar to the one in the Classic Editor. You will be able to either upload a new photo or choose the one from your previously uploaded media.

The Gutenberg WordPress editor will let you completely customize your images. You can not only indent the images but also work on their alignment, size, and width. And considering the fact that WordPress is one of the best platforms for SEO, you will also be able to completely optimize your images straight from the images tab.

2. Accessing the Media and Text block

Just because the previous option is usually thought of as the easiest one doesn’t mean that you will struggle too much with the rest of them. In fact, lots of people find it much easier to add images by accessing the Media and Text block. The image block can be converted into several different formats and the Media and Text block is only one of them. Now, the reason why people forgo the classical method and opt for this one can be found in the fact that this block lets you layout your image next to a piece of text.

The word WordPress placed on a white surface.
Bring into focus any part of your text by using the Media and Text block.

This option can really make a visual break in your page/post and make a piece of text pop. You can add a background color which will help you highlight the area of the text, making it very hard to miss. So if you have any important pieces of information to highlight, this is your solution.

3. The File block

Sometimes, the reason why you want to add image blocks in the WordPress Gutenberg Editor isn’t that you want to enrich your posts. Or make them more visually appealing. It’s because you want to provide your audience with a valuable piece of information. A piece they can download. That’s when the File block comes into play.

This option will allow your website visitors to easily download the images from your post/page. Once you upload the image through a File block, the image will automatically turn into a link. The drawback lies in the fact that your website visitors won’t be able to see the image, but they will be able to download the link. Although our suggestion is to give it a good thought when creating a high-impact landing page. If you want your images to have a bigger purpose other than turning into a download link, then the File block might not be the right option for you!

A man trying to add image blocks in the WordPress Gutenberg editor.
Which option of adding image blocks in the Gutenberg editor you end up choosing will depend on your needs.

4. Using the Gallery block to add images

How does the option of adding an entire gallery instead of a few isolated images sound? If it sounds good, you are just in luck! The Gallery block in Gutenberg will allow you to add multiple images to a gallery and insert them into a page. If you are a huge fan of the good old Classic Editor but are trying to switch to this new WordPress edition, then you will be happy to know that the Gallery block is very similar to how image galleries worked before. 

To create a new gallery, all you have to do is choose the images you want to go to it. You can upload new images or choose from the existing ones. Once you click the ‘Create New Gallery’ button, you will be presented with the rest of Gutenberg’s options, such as image optimization, etc.

5. Going with the Cover block to add image blocks in the WordPress Gutenberg Editor

If you are looking for an option that will allow you to visually enhance your images, then we have to say that this would be it. The Cover block gives you an opportunity to write titles or descriptions on top of an image of your choosing. Once again, the Cover block, just like its predecessors, doesn’t disappoint in the customization department. It allows you to determine the size and positioning of both the image and the text. And the right-hand column gives some creative features. If you really want to let your creative side show, then the Cover block might be the perfect option for you to add image blocks in the WordPress Gutenberg Editor. And even if it’s not, the good news is that you have four other options to choose from.

404 error404 pageabove the foldadvanced cssAIDA modelakismet pluginbacklinks auditbehavior patternbounce ratebrowser compatibilitybulk deletecaching pluginscall-to-actionchild themecode snippetcolor schemecomment sectioncompetitors' backlinkscontact formconversion ratecreate child themeCTA buttoncustom pagecustom themedead linksdefault configurationdigital marketingdomain authorityeasy manageedit main pageediting toolsemail marketingengaging contentFAQ pluginsfilter spamfix site errorfolder structurefree pluginsfriendly toneGoogle analyticsgoogle rankingsGravity Forms pluginguest postingHeadless WordPressHow toimage optimizationincrease readabilityindex errorsinfluencer marketingkeyword researchlibrary assistantlink managementlink trackingloading speedlocal businesseslong-tail keywordsmedia replacemedia restrictionmobile optimizationmoney onlinemulti currency pluginsmysql queryonline presenceonline validatorpage builderpage creationpopup pluginproducts and servicesquality imagesquality serviceReact JSreaction buttonsredirect chainsresponsive designschema markupsearch rankingsearch termsSEO for bloggersSEO optimizationSEO professionalsSEO tipsSEO toolsshort linkssocial mediasocial media plugins for WordPressssh commandsstatic pagetargeted audiencetechnical performancetest metrictext formattheme setting uptime utilizationtips and trickstraffic increaseunique visitorsuser accessuser engagementuser experiencevisual designvisual elementsvisual reportweb crawlersweb hostingwebsite architecturewebsite auditwebsite designwebsite elementswebsite maintenancewebsite optimizationWebsite problemswebsite securitywebsite structureWhat’s new in WordPresswhite spacewoocommercewordpressWordPress admin email verification noticeWordPress debug modeWordPress functionalityWordPress pluginWordPress pluginsWordPress recovery modeWordPress responsive designwordpress securitywordpress themewordpress theme editwordpress tipsWordPress tips and tricksWordPress web hostingwp security