Johanne Courtright joined the Jukebox Podcast to discuss her journey from agency web work to building Groundworx — a set of enhancements and custom blocks designed to make the block editor (Gutenberg) more usable for agencies and designers. She started with WordPress in 2011 after moving on from Dreamweaver and static HTML. Over the years she specialized in extending WordPress with custom queries, forms, API integrations, and more recently React and Gutenberg-based development.
Embracing Gutenberg and React
Johanne adopted Gutenberg early and invested time to learn React so she wouldn’t be left behind. At her last agency she and colleagues built a foundation of blocks tailored to client needs, but budgets and legacy tools (like Advanced Custom Fields) often meant they couldn’t go full Gutenberg. When she struck out on her own, she committed to a 100% Gutenberg stack, using the Interactivity API and avoiding jQuery whenever possible.
Agency Needs vs. Core WordPress
Johanne argues that while Core is fine for many users, agencies need more pixel-perfect control: responsive breakpoints, refined layout tools, predictable color systems, and editor UX that supports efficient client workflows. Core intentionally focuses on the 80/20 rule — solving the most common needs — which leaves specialized features to plugins and third-party projects. Johanne accepts that but aims to build solutions that align with Core’s vision rather than adding bloat or conflicting approaches.
Groundworx: Philosophy and Components
Groundworx (groundworx.dev) is Johanne’s open-source effort to extend and enhance the block editor for agency workflows. It’s a mix of:
– Extensions to Core blocks: adding breakpoint controls, reverse stacking, responsive font sizes, column counts at different widths, full-height sticky group options, and video performance tweaks.
– Custom blocks and patterns: accordion/tabs that can switch at a chosen breakpoint (tab becomes accordion on mobile), media/content split blocks, cards, reveals, and more.
– A navigation system built as a custom post type plus six interrelated blocks (Navigation, Branding, Menu, Submenu, Link, Spacer) that produce flexible, accessible navigations without duplicating HTML across desktop and mobile. The navigation uses the Interactivity API and aims for graceful behavior across viewports.
Theme approach: lightweight, flexible, portable
Johanne prefers building very light themes focused on brand variables (theme.json, color tokens, font presets) and moving functionality into plugins. Her approach enables easy theme swaps — change the palette and font variables and get a new look without breaking features. She stresses meaningful keys in theme.json so values can be swapped without needing to rewrite templates.
Design/UX choices and breakpoints
Agencies ask for precise breakpoints and per-breakpoint controls. Gutenberg’s theme.json offers some spacing and responsive features, but Johanne often adds custom breakpoint behaviour in Groundworx. She also leverages modern CSS (clamp() and grid) to reduce dependency on per-breakpoint values while providing editors tools for fine tuning where needed.
Navigation, Interactivity API, and reuse
Johanne’s navigation block family reuses blocks stored in a custom post type so menus can be reused across instances. She built it to avoid duplicated mobile/desktop clones and to keep a single HTML structure that can adapt via CSS and JS. The Interactivity API is central to how some of these behaviors are implemented.
What she’d like from Core
A recurring request: more flexible theme.json capabilities. Johanne wants to define additional design tokens (custom keys) in theme.json — for example, a richer navigation color system — so themes can expose keys editors can set without extra manual CSS variable injection. Better plugin/theme discovery and a more discoverable, curated plugin marketplace would also help small block-centric businesses thrive.
On business and ecosystem
Johanne treats Groundworx as a project she uses first; commercialization is secondary. She acknowledges building a sustainable business around blocks is challenging — discoverability and marketplace support are weak. The WordPress.org plugin/theme directories need better search, categories, and curation (featured apps/plugins model) so new block solutions can surface. She’s active on X for community interactions.
Migration and adoption friction
The shift from classic themes to full-site editing and block themes remains gradual. Many agencies and users resist retooling due to the learning curve, unfamiliar mental models, and legacy workflows. Johanne believes once developers invest time to reverse-engineer and learn Gutenberg’s patterns, they see the benefits and workflow improvements. Still, the transition can be overwhelming — especially for those used to building with jQuery, CSS frameworks like Tailwind, or page builders like Elementor. Johanne prefers embracing Core patterns rather than fighting them.
Practical guidance
– Build flexible HTML and CSS (grid, responsive primitives) so blocks can adapt without rigid, one-off templates.
– Keep themes light and use theme.json and tokens for brand variables.
– Move reusable functionality to plugins to avoid locking clients into a single theme.
– Use modern APIs (Interactivity API) for responsive and interactive behaviors rather than adding markup-heavy solutions that increase bloat.
Where to find Groundworx and Johanne
Groundworx project and blocks: groundworx.dev. Johanne is active on X for discussion and feedback.
Conclusion
Johanne’s work exemplifies an agency-focused, Core-aligned approach to extending Gutenberg: practical, performance-conscious, and aimed at giving designers and clients the control and efficiency agencies require. Groundworx bridges the gap between what Core provides for most users and the finer-grained tools agencies need for responsive, branded, and reusable site components.