This episode of the Jukebox Podcast (WP Tavern) features Nathan Wrigley talking with Johanne Courtright about her journey from agency WordPress work to building Groundworx — a set of block editor enhancements and blocks aimed at agency needs.
Background and journey
Johanne began with WordPress in 2011 at a marketing agency, moving from Dreamweaver and static HTML sites. Early work used Advanced Custom Fields, custom post types and integrations with CRMs and APIs. As Gutenberg emerged, she learned React (taking a course to accelerate the process) and gradually embraced building with the block editor. After working in agencies that mixed ACF and Gutenberg, Johanne decided to go all-in on the block editor, the Interactivity API, and minimal jQuery to build modern, flexible solutions.
Why Groundworx
Agencies require pixel-perfect control, breakpoints, reliable color systems tied to branding, and UX efficiencies for content editors. Core Gutenberg covers many basics but lacks fine-grained tools agencies regularly use: responsive breakpoint controls, per-breakpoint spacing and typography, advanced navigation behaviors, and reusable branded palettes. Groundworx began as a way to extend core blocks and add a small set of new blocks and templates that fill these gaps without overwhelming regular users.
Philosophy: extend, don’t replace
Johanne focuses on enhancing core blocks rather than replacing them wholesale. The approach is to add capabilities many agencies need (flexible layout controls, breakpoint-aware settings, color palettes, templates) while keeping the solution lightweight and compatible with core behavior if Core eventually adopts similar features. The aim is to provide agency-ready defaults, reusable templates, and a theme.json foundation so themes remain thin and switching themes remains painless for clients.
Themes, plugins, and separation
From the classic era, developers often put most functionality in themes. With Gutenberg and theme.json, Johanne prefers very light themes (colors, fonts, labels) and places functionality in plugins. This avoids locking clients into a theme for features, allows easy theme swaps, and keeps CSS/JS minimal. Sensible naming of theme.json keys lets one swap palettes and fonts simply by changing values rather than structural keys.
Adoption and the learning curve
Full Site Editing and block-based themes haven’t fully replaced classic themes. Many agencies and users are cautious because the mental model and workflows are different. Johanne notes that once developers take the time to reverse-engineer and learn Gutenberg’s new approach, they see significant advantages, but the learning curve is steep. For non-developers, Gutenberg can be easier than page builders (after a short onboarding), but existing habits and tool preferences slow broader migration.
What Groundworx adds
Groundworx provides two types of offerings:
– Custom blocks that Core didn’t provide (tabs, accordions, card reveals, media split/sections, etc.), often built from repeated agency needs.
– Extensions to core blocks: enhancements that add practical features such as reversing stack order, adding breakpoint-based settings (tablet breakpoints, three breakpoints for headings and paragraphs), full-height sticky groups, column count controls, responsive settings for any block, and video block performance optimizations.
A few specifics:
– Tabs/Accordion hybrid: A Tabs block that can convert to an Accordion at a chosen breakpoint, ensuring consistent look and behavior across devices rather than toggling multiple times across breakpoints.
– Navigation: Groundworx navigation uses a custom post type with blocks as reusable pieces, preserving a single HTML structure that adapts between desktop and mobile without duplicating menus. It leverages the Interactivity API for behavior, enabling vertical/full-height menus and responsive breakpoints for how the menu presents itself.
Design for flexibility
Johanne designs blocks with flexible HTML and CSS (e.g., grid-based layouts) so content can be rearranged without rigid markup. This flexibility lets developers tune behavior via minimal styles rather than building rigid, one-off blocks.
Theme.json wishlist
A notable limitation Johanne highlights is theme.json’s color and variable handling. While theme.json supports colors and typography, she wants the ability to define custom keys/variables (extra named colors or selectors) in theme.json so blocks and components can reference those keys without manual CSS injection. More flexible variables in theme.json would reduce custom CSS and simplify branded theme variants.
Business landscape for block-based products
Johanne has both free and commercial offerings but emphasizes she built Groundworx first for her own use. She’s realistic about commercial expectations; block-based businesses are emerging but it’s not an instant “fountain of cash.” The block ecosystem still needs better visibility and discovery to help commercial block authors thrive.
Plugin/theme directory and discovery
Johanne criticizes the WordPress.org plugin and theme directories for poor discoverability, ineffective search, and limited mechanisms for surfacing new, high-quality block-based plugins or those explicitly supporting Gutenberg/Interactivity API. She calls for improved categorization (e.g., “supports Gutenberg Interactivity API,” “no jQuery,” “block-first”) and featured curation similar to app stores to help new projects gain traction.
Why not use existing page builders?
Third-party page builders (Elementor, Divi) solve many layout problems but introduce different trade-offs: added markup, styling bloat, and a different theming paradigm. Johanne prefers working with core-first approaches because Gutenberg produces lighter HTML and easier override patterns without heavy CSS specificity wars. For clients who can be trained in Gutenberg, the editor often makes them happy and able to manage content with minimal follow-up.
Practical approach for agencies
Johanne’s recommended approach:
– Build a lightweight theme.json to provide branded starting points (colors, fonts).
– Move reusable components and behaviors into plugins and blocks so the theme can be swapped easily.
– Provide pre-made templates and patterns to speed client edits and reduce support requests.
– Use responsive techniques (clamp, fluid type) where possible to avoid needing excessive per-breakpoint controls.
Groundworx and where to find it
Groundworx (groundworx.dev) bundles the core extensions, navigation suite, and custom blocks. Johanne offers the navigation system for free and the broader suite includes free and commercial components designed for agency workflows. She is active on X (Twitter) and welcomes engagement from the community.
Closing thoughts
Groundworx is a pragmatic, agency-focused effort to fill practical Gutenberg gaps: fine-grained responsive control, reusable branded palettes, flexible navigation, and a small set of commonly reused blocks. Johanne stresses the importance of building lightweight themes, adopting Gutenberg’s new patterns rather than fighting them, and improving discovery for the block ecosystem so more commercial block authors can succeed.
