AI Images in WordPress Gutenberg: Step-by-Step

What ends up in your post

Pin Magic does not add a special block or shortcode. It inserts the normal core Image block. That means:

• The image is in your media library like any upload.
• The block is centered and full size, with the alt text filled in.
• The featured image is set in the post settings.
• You can edit, move, resize or delete the block like any other.

If you ever stop using Pin Magic, nothing breaks.

Step 1: Structure the post with headings

Write your post with clear H2 headings. Each section that needs an image gets three things, in order:

1. The heading block.
2. A short paragraph that describes the image you want (and optional bullets for details).
3. A block containing the image marker line.

The marker holds the section number, keyword, heading, alt text and prompt. The exact format is in how to add images to blog posts automatically. Test your layout on one post first, so you can see how the extension reads your blocks.

Step 2: Open the Pin Magic side panel

With the post open in the editor, open the Pin Magic side panel from the browser toolbar. Pin Magic scans the editor for markers and lists each section in the Prompts tab. There is also a Pin Magic panel inside the Gutenberg sidebar for internal links. If a section is missing, press Rescan.

Step 3: Lock the list and run the batch

Press Lock when the list looks right. Then open the Flow tab, choose your parallel tabs, delay and download size, and start the batch. The featured image is generated in 16:9. Section images are generated in vertical 9:16.

Step 4: Insert all

Back in the side panel, the Images tab shows what was downloaded. Press Insert all. Behind the scenes, Pin Magic uses WordPress's own editor functions: it uploads each image, creates an Image block with the uploaded file, then replaces the description, bullets and marker with that block. For the featured image, it sets the post's featured media and removes the marker.

Step 5: Check the result in the editor

Scroll through the post and check:

• Each image is under the correct heading.
• Alt text reads like a natural description.
• The featured image appears in the post settings panel.
• Nothing from the scaffolding (description, bullets, marker) is left behind.

Then preview on a phone-sized screen. Vertical images can be tall on mobile, so make sure the reading flow still feels right.

Making Gutenberg images load fast

Images affect page speed, and speed affects both readers and Core Web Vitals.

• Recent WordPress versions add lazy loading to images by default and try to avoid lazy-loading the first image. Verify with PageSpeed Insights, because some themes and plugins override this.
• Do not lazy-load the featured image at the top of the post. It is usually the Largest Contentful Paint element.
• Pick a download size that fits: 1K is often enough for in-article images; use 2K only if your design shows them large.
• Consider a WebP or AVIF-capable optimization plugin to shrink file size.

Accessibility and alt text

Alt text is for people who use screen readers first. Describe what is in the image in one plain sentence. Do not stuff keywords. Google's guidance on AI-assisted content now says to review generated content, including alt text, so read through each one after inserting. If you need to fix one, click the image block and edit the alt text in the block sidebar.

Frequently asked questions

Conclusion

Using AI images in Gutenberg is less about the AI and more about clean structure: headings, markers, a locked prompt list and a final review. The output is standard WordPress, which keeps your site flexible. Read how to use Google Flow for blog images to get better results from the generation step.