A text post without images gets 2-3 times less engagement than an article with visual content. Images break up walls of text, hold attention, and help explain things that are hard to convey with words. Plus, images in alt texts and file names bring search traffic from Google Images, for a technical blog that's hundreds of extra visits per month.

The Gutenberg editor (the block editor in WordPress) works with images without a single plugin. Five built-in blocks cover all basic scenarios: from a single image to galleries and full-screen covers with text layers. But beginners still have questions: which block to choose, how to align an image so text doesn't break, how to place two images side by side, or why you'd need a duotone filter.

Below is a step-by-step breakdown of each block with settings that short guides don't mention. No plugins, just built-in Gutenberg tools.

💡 Quick overview:

• Add a single image with the "Image" block and configure alignment through the toolbar, for one image that's enough
• Place an image next to text with the "Media & Text" block, it rigidly maintains proportions, text doesn't overlap
• Put two or more images in a row with the "Gallery" block and specify the number of columns, the grid aligns automatically
• Overlay text on a photo with the "Cover" block with filters, overlay, and optional parallax effect
• Enable lightbox in the "Image" block settings, the image opens full-screen without reloading the page

Which Gutenberg blocks work with images

WordPress out of the box provides five blocks related to images. Each solves its own task, you shouldn't confuse them.

• Image (Image), a single image with alignment, caption, link, duotone filter, and lightbox settings. The basic building block for any post. Documentation
• Gallery (Gallery), a grid of multiple images with column settings. Replaces classic galleries from the old editor and the [gallery] shortcode. Documentation
• Media & Text (Media & Text), a two-column block: image on the left (or right), text next to it. A rigid connection without misalignment when resolution changes. Documentation
• Cover (Cover), a background image with a text layer and buttons on top. You can configure color overlay, opacity, and fixed background. Documentation
• File (File), a download link with a card. For PDF instructions and archives, not for displaying an image on the page.

The first four are your main arsenal. The "File" block isn't used for illustrating content, so we'll only cover visual blocks below.

How to add a single image and configure alignment

The most common scenario: insert one image into text and adjust its position relative to paragraphs.

Click the "+" button (add block) in the editor interface and select "Image". An upload window appears, you can drag a file from your computer, select from the WordPress media library, or paste a URL. After upload, the image immediately appears in the editor, and a toolbar with alignment buttons pops up above it.

Available alignment options:

• Align left, image is pushed left, text wraps on the right
• Align center, image in the center, text above and below
• Align right, mirror version of left alignment
• Wide width, image extends beyond text block boundaries but not full screen
• Full width, image stretches edge to edge of the content area

Blue dots at the corners of the image let you resize by dragging, no need to calculate pixels in CSS. In the right sidebar (the "Block" tab), you can configure alternative text for SEO and a link that users will follow when clicking the image.

Two tips that will save time. First: enable lightbox (the "Enlarge on click" option in the block's link settings), when clicked the image opens full-screen, the user doesn't leave the page. Second: the duotone filter (circle icon in the block toolbar) changes the image's color scheme without Photoshop, useful when screenshots from different sources visually clash. The filter doesn't change the source file in the media library, you can always reset it.

But there's a catch: "align left" and "align right" work well only when the text is long enough. If the paragraph is short, the image "falls out" of the flow and the next heading overlaps it. In such cases, it's better to use the "Media & Text" block.

"Media & Text" block: image and paragraph in one bundle

The Media & Text block rigidly fixes the ratio: half width for image, half for text. No misalignment when screen resolution changes.

Added the same way: "+" button, search for "Media & Text". Select an image and write text in the adjacent column. In the sidebar, these toggles are available:

• Swap places (image left or right)
• Full-screen mode (stretch to full available width)
• Background color for the text half

The block is especially convenient for step-by-step instructions: screenshot of a setting on the left, description of what's happening on the right. The reader doesn't lose the connection between text and image when scrolling.

In practice, Media & Text helps in more down-to-earth situations too. For example, you inserted a screenshot with left alignment, and the next H2 "ran into" the image. It's too late to change paragraph structure, wrap the image and text in Media & Text, the problem goes away in 10 seconds.

How to place two or more images side by side with the gallery block

If you need to show a series of screenshots or make a photo collection, use the "Gallery" block. Unlike the old classic editor where the gallery lived as a separate [gallery] shortcode, Gutenberg manages it visually.

Add the "Gallery" block, upload the needed images, they automatically arrange into a grid. In the block settings (right panel), select the number of columns: 2, 3, 4, or more. For two images side by side, set "2 columns", you'll get a neat row without manual size adjustment.

Additional gallery block features:

• Cropping thumbnails, all images are brought to the same size, the grid looks even
• Configuring spacing between images
• Attaching a link to each image separately

If the project requires non-standard layout (images of different sizes in one grid), the built-in gallery's capabilities might not be enough. Then the "Columns" (Columns) block comes to the rescue, separate "Image" blocks are nested inside it with independent settings. But for typical scenarios, out-of-the-box galleries are sufficient.

Note: don't confuse the "Gallery" block with multiple "Image" blocks arranged in columns. The gallery automatically crops thumbnails, all images look the same height regardless of original proportions. Columns don't do this adjustment: one image ends up taller than another, and the row "floats". For a quick photo collection, use gallery, for pixel-perfect layout, use columns.

How to overlay text on an image with the "Cover" block

The "Cover" block is a background image with a text layer. Essentially, a banner inside the post. Used for formatting article sections, quotes, or key conclusions.

Select the "Cover" block, upload an image, and enter text right on top of it. In the sidebar, you can configure:

• Overlay color, semi-transparent fill over the image, makes text readable on any background
• Opacity, overlay intensity from barely noticeable to almost solid
• Fixed background, when scrolling the page the image stays in place (parallax effect)
• Background repeat, tile the block with a repeating pattern, for textures and ornaments

Fixed background is a popular technique in landing pages and WordPress portfolios. Looks impressive, but on mobile devices is often disabled by the browser for performance. Don't count on it as the main technique for phones.

The "Cover" block nests inside other blocks: inside columns, groups, or rows. And you can place not just text on the cover, but also a button: add a "Buttons" block inside the cover, and you get a ready CTA banner with background. All the tools, no CSS or additional plugins.

If the cover slows loading on mobile, disable fixed background and compress the image to 200-250 KB. WordPress starting from version 5.8 automatically converts PNG and JPEG to WebP during upload, but it's better to prepare the source in advance through TinyPNG or conversion to AVIF.

⁉️🤔 Frequently asked questions

Why does text "jump" and run into adjacent blocks after adding an image?

This happens when the image is aligned left or right and there's too little text around it. Gutenberg doesn't automatically "prop up" the block height under the image, it relies on the volume of surrounding text. Solution: wrap the image and text in a "Media & Text" block, it rigidly maintains proportions. Or add another 2-3 lines of text so wrapping works correctly.

How does the "Gallery" block differ from multiple "Image" blocks placed in columns?

Gallery provides a unified grid with automatic thumbnail cropping, all images look the same size regardless of original proportions. Columns with separate images don't do this adjustment: one image can end up taller than another, and the row "floats". For a quick photo collection, take gallery, for precise pixel-perfect layout, use columns.

Can I add alt text for multiple images in a gallery at once?

No, the "Gallery" block doesn't support bulk editing of alt texts. Each image in the gallery is a separate media file, and alt is set individually: click on a specific image in the gallery, go to the sidebar, and fill in the "Alternative text" field. Or write alt in advance in the WordPress media library, then it will be pulled automatically when inserted.

The "Cover" block slows page loading on mobile. How to fix it?

Fixed background (parallax) is the main culprit. Disable the "Fixed background" option in block settings, and the browser will stop rendering the heavy effect during scroll. Second step, compress the cover image to 200-250 KB: services like TinyPNG or conversion to WebP/AVIF reduce size without visible quality loss. WordPress 5.8+ automatically converts PNG and JPEG to WebP during upload, but it's better to prepare the source in advance.

Does the "File" block make sense if I just want to show an image?

No. The "File" block displays a download button and file name, not the image itself. It's needed for PDF instructions, ZIP archives, CSV files, and other documents that the user should save to their device. To show an image, always use the "Image" block.

How does the Gutenberg lightbox differ from lightbox plugins like FooBox or Meow Lightbox?

The built-in lightbox (the "Enlarge on click" option in the "Image" block link settings) works without additional code and doesn't conflict with themes, it appeared in WordPress 6.4 at the end of 2023. Plugins provide more settings: gallery viewing with swiping, dimming effects, image counter. If you place 2-3 images per post, the built-in one is enough. For photo galleries and portfolios, install a plugin.

Which block to take for your task: short summary

Gutenberg covers all basic image work scenarios without a single plugin. Insert a single image with the "Image" block and don't forget alt text, that's your main SEO asset for Google Images. Enable lightbox: the feature is free, and mobile readers will thank you.

Need a rigid "image + text" bundle, take "Media & Text", it doesn't fall apart on any screen. Series of images, "Gallery" with column settings, automatic cropping will align everything in a line. Text over photo, "Cover" with overlay and optional parallax, and you can add a button inside to get a CTA banner.

Mastering these four blocks is realistic in 10-15 minutes in a test post. Open a draft, drag blocks around the canvas, the Gutenberg interface is designed for visual work, not code. If the next post comes out with images instead of a wall of text, you're already ahead.