MW
Tutorial 13 min read

Gutenberg AI workflows with MCP

Generate blocks, compose patterns, render dynamic content — Gutenberg becomes the agent's canvas.

Gutenberg Blocks Patterns AI
Agent
blocks.*
Editor

1. Overview

Block markup is HTML + JSON. Easy for LLMs to produce, hard to validate by hand. Expose blocks.parse and blocks.render via MCP and round-trip becomes safe.

2. Block generation

blocks.generate

AI generates HTML+JSON blocks from a brief.

blocks.validate

Strict schema check before insert.

blocks.render

Server-side render returns HTML preview.

3. Patterns & InnerBlocks

example.json json
{
  "name": "core/columns",
  "attributes": {},
  "innerBlocks": [
    { "name":"core/column", "innerBlocks":[ { "name":"core/heading", "attributes":{ "content":"Plans" } } ] },
    { "name":"core/column", "innerBlocks":[ { "name":"core/heading", "attributes":{ "content":"Pricing" } } ] }
  ]
}

4. Dynamic content

Combine posts.list with blocks.compose to build "latest from category X" sections at agent-time.

5. Example workflows

"Build a 3-column pricing pattern for the homepage." Agent generates the markup, validates it, renders a preview, inserts it as a draft.

Gutenberg as the agent's canvas

Generate. Validate. Preview. Insert.

  • AI-native
  • Validated
  • Block-aware