Where the structure begins
We started from a minimal block theme: clean layout, a few predefined styles, nothing opinionated. From there, everything happened in Global Styles: typography, spacing, responsive size presets, and line heights. Working in Global Styles rather than block-level overrides meant those decisions would stay stable when users later personalized the theme.
With the typographic foundation in place, we moved to the Home template. This is where structure started to matter: blocks that stack, expand, or collapse depending on the device. We toggled between desktop and mobile views continuously, letting each inform the other. Once the Home template and a Query Loop style felt solid, the rest of the templates—Archive, Index, Search Results, Single Posts, Pages, 404—followed in sequence, each one building on the decisions made before it.
Shaping the details
As soon as the skeleton was stable, our focus shifted to clarity. Nested groups were evaluated, template parts created, block names cleaned up, and responsiveness tightened. Then the finer passes: vertical spacing, margin rhythm, and the balance between heading and body sizes.
This is when we installed the Create Block Theme plugin, allowings us to save visual edits back to the theme’s actual files: theme.json, style.css, and the full exportable structure. At this point, the project moved from a purely visual experiment to something shippable.
Adding life through motion and variation
Before the final polish, we exported the theme and installed it locally using WordPress Studio. This step isn’t required for most users, but it’s part of a professional workflow: working locally lets you review the file structure directly, check that best practices are followed in theme.json, and make targeted edits before publishing.
With the foundation settled, we used an AI coding assistant to fine-tune the CSS. The collaboration produced two small but meaningful additions: a class to clear duotone filters on featured images on hover, and a class to animate a book cover mockup, with a subtle scale and rotation on hover. Neither change is dramatic. Together, they add just enough motion to make the theme feel considered rather than static.
/* Clear ANY filter/duotone on hover for this block */
.duo-clear-on-hover:hover,
.duo-clear-on-hover:hover * {
filter: none !important;
}
/* Only images inside a block with this class will animate */
.hover-zoom-tilt img {
transition: transform 0.35s ease;
transform-origin: center center;
}
.hover-zoom-tilt:hover img {
transform: scale(1.05) rotate(-2deg);
}
Finally, we used Create Block Theme again to generate a style variation without touching a line of code—alll from within the visual interface.
What this process reveals
The WordPress Editor is now a professional design surface, not merely a preview. Typography, spacing, layout, responsive behavior, and style variations can all be decided and shipped from within Global Styles and the block editor. Figma is optional—not because the design step disappeared, but because the Editor has grown to absorb it.
AI earns its place in the finishing pass, not the foundation. The structural decisions—templates, spacing relationships, type scale—still require human judgment. Where AI helped was in the refinement layer: generating CSS for specific interaction behaviors faster than writing it from scratch.
Small interactive details compound. The hover effects added at the end are each a few lines of CSS. But they shift how the theme reads: from competent to crafted. That’s exactly where the gap between a functional theme and a memorable one lives.
Local testing remains part of the workflow. Even when most of the work happens in the Editor, exporting and reviewing the generated files locally—checking the theme.json structure, verifying the style.css output—catches issues that the visual interface doesn’t surface.
The workflow is faster because iteration is instant. Font choices, spacing adjustments, color variations: all previewed in real time, all saved without leaving the browser. What used to require a round-trip through external tools now happens in a single surface.
Bonus: what’s next
The question now is how far this workflow can extend: not just to polished themes, but to faster experimentation, lower barriers for designers new to WordPress, and tighter loops between visual intention and shipped code.
Automattic Design 
Leave a comment