Johanne Courtright joined the Jukebox Podcast to describe her path from agency front-end work to creating Groundworx — an open-source collection of enhancements and custom blocks that make the block editor (Gutenberg) more usable for agencies and designers. She began building with WordPress in 2011 after leaving Dreamweaver and static HTML, then specialized in custom queries, forms, API integrations, and later React and Gutenberg development.
Early adoption and technical stance
Johanne embraced Gutenberg early and invested in React so she could keep pace with the platform. At her last agency she and colleagues assembled a foundation of blocks for clients, but legacy tooling (like Advanced Custom Fields) and budget constraints often prevented fully committing to blocks. Once independent, she decided to run a 100% Gutenberg stack, leaning on the Interactivity API and avoiding jQuery where possible to keep projects modern and maintainable.
Why agencies need more than Core
WordPress Core targets the 80/20 problems, which works for many sites. Agencies, however, frequently require pixel control and predictability: precise responsive breakpoints, layout tools that behave consistently, color systems that map to brand tokens, and an editor UX that supports client workflows. Johanne accepts Core’s scope but builds extensions that align with Core principles rather than creating competing patterns or bloat.
What Groundworx provides
Groundworx (groundworx.dev) is Johanne’s toolkit for agency workflows. It’s intentionally pragmatic: extensions to core blocks plus custom blocks and patterns designed to be flexible and performant. Highlights include:
– Extensions to core blocks: breakpoint controls, reverse stacking, responsive font sizes, column counts per width, full-height and sticky group options, and video-performance tweaks. These add control without fundamentally changing Core behavior.
– Custom blocks and patterns: accordion/tabs that switch at a chosen breakpoint (e.g., tabs become accordion on mobile), media/content split blocks, card components, reveal animations, and more.
– A navigation system built as a custom post type plus six cooperative blocks (Navigation, Branding, Menu, Submenu, Link, Spacer). This approach reuses menu data and outputs a single adaptable HTML structure for desktop and mobile, avoiding duplicated DOM and easing accessibility. Many behaviors are implemented with the Interactivity API for graceful, responsive interactions.
Theme and architecture philosophy
Johanne favors very light, portable themes that define brand variables in theme.json (color tokens, font presets) while moving functionality into plugins. This way you can swap a theme’s palette and typography and retain the same blocks and features. She emphasizes meaningful keys in theme.json so values can be swapped without rewriting templates.
Design choices, breakpoints, and modern CSS
Agencies often request per-breakpoint controls and predictable layout behavior. While theme.json supports some responsive options, Groundworx adds targeted breakpoint behavior when necessary. Johanne uses modern CSS (clamp(), grid) to reduce the need for many hard-coded breakpoints and to let blocks adapt fluidly — reserving per-breakpoint controls for situations where editors need fine tuning.
Interactivity API and reuse
The Interactivity API is central to Groundworx’s responsive behaviors. The navigation system, for example, stores reusable menu blocks as a custom post type so instances can share the same source. That structure helps avoid creating separate desktop and mobile markup and keeps interaction logic tidy.
Requests to Core and ecosystem notes
Johanne would like more flexible theme.json capabilities: the ability to declare richer design tokens and custom keys so themes can expose editable values without developers resorting to manual CSS variable injection. She also calls for better discovery and curation in the plugin/theme directories or a marketplace model to help small block-focused businesses get found.
Business realities and adoption friction
Groundworx is a project Johanne uses first; monetization is secondary. She acknowledges the difficulty of building a sustainable business around blocks: discoverability is limited and marketplace support is weak. The shift to full-site editing and block themes is gradual — agencies and clients face learning curves, legacy workflows, and tooling inertia. Johanne’s advice is to learn Gutenberg patterns rather than fight them: once teams invest time, they typically see workflow improvements.
Practical guidance
– Build flexible HTML/CSS using grid and responsive primitives so blocks remain adaptable.
– Keep themes lightweight and use theme.json tokens for brand variables.
– Put reusable functionality in plugins to avoid locking clients into one theme.
– Use modern APIs (Interactivity API) for interactive behaviors instead of markup-heavy workarounds.
Where to find Johanne and Groundworx
Groundworx: groundworx.dev. Johanne is active on X for conversation and feedback.
Conclusion
Johanne’s work is a model for agency-focused, Core-aligned Gutenberg tooling: practical, performance-conscious, and designed to give designers and clients the precise control they need. Groundworx fills the gap between Core’s general-purpose editor and the finer-grained tools agencies need for responsive, branded, and reusable components.