For the past few weeks, I’ve been updating my FSE themes directly from Claude Code — without opening the visual editor. This isn’t a trick. It’s a direct consequence of how Gutenberg is architected.
A Discovery Through Practice
I was restructuring a page template for a client project. I asked Claude to rename some classes, move a group of blocks, and update the corresponding CSS rules.
It did it. Correctly. Without losing its place in the structure.
At first, I thought it was because my instructions were precise enough. But as I kept working this way — restructuring nested groups, renaming template parts, adjusting patterns — I realized there was a structural reason for it.
Gutenberg Stores Everything in HTML Comments
That’s the key. An FSE template file (.html) looks like this:
<!-- wp:group {"className":"hero-section","layout":{"type":"constrained"}} -->
<div class="wp-block-group hero-section">
<!-- wp:heading {"level":1,"className":"hero-title"} -->
<h1 class="wp-block-heading hero-title">Title</h1>
<!-- /wp:heading -->
</div>
<!-- /wp:group -->
Each block is delimited by HTML comments that encode:
- The block name — including custom blocks (
my-plugin/hero) - The CSS classes applied
- The group options: layout, alignment, spacing
- The nested attributes: typography, colors, links
Plain text. Structured, annotated, hierarchical. A format any LLM can parse with no extra abstraction layer.
What Claude Actually Sees
An LLM like Claude can read an entire FSE template and extract:
- The block hierarchy (what’s inside what)
- The CSS classes on each element
- The template parts referenced (
<!-- wp:template-part {"slug":"header"} -->) - The embedded patterns and their attributes
- References to global styles
It knows where it is in the tree. It knows what it’s touching. It can make surgical edits to a specific group without affecting anything else.
What This Changes in Practice
Here’s what I use concretely from Claude Code on my FSE projects:
- Restructure nested groups — “move this group inside this container and keep the classes”
- Rename classes across an entire template file or pattern
- Move blocks while preserving structure and indentation
- Update CSS in sync with structural changes
Not a replacement for the visual editor. A complement — for repetitive, structural, or global operations that would be tedious to do block by block in the interface.
On projects with many templates or patterns, the time savings are real.
An Architectural Convergence
Gutenberg wasn’t designed for AI. But its technical choice — encoding everything in readable HTML comments — makes it, almost by accident, a machine-friendly format.
Compare that with a classic page builder that stores its configuration as serialized JSON in the database, or in opaque shortcodes. Impossible for an LLM to reason about the structure without additional tooling.
With FSE, the structure lives in files. It’s readable. It’s versionable with Git. And it’s navigable by an AI agent.
This is exactly what I wrote about in my post on the WordPress developer as orchestrator: understanding block architecture is the prerequisite for orchestrating with intent. FSE developers who know this structure have a natural head start working with AI agents.
Conclusion
If you work on FSE themes, Gutenberg’s architecture is an asset — not just for the visual editor, but for any AI agent that can read structured text. Claude Code, in particular, navigates it very well.
What’s next? Going further: letting an agent handle pattern migrations, global design system refactors, template synchronization. It’s already possible.
Working on FSE themes and want to explore this approach? Get in touch — I build custom FSE themes and help agencies transition to FSE with AI tooling.