WordPress VIP WorkflowsNo. 020

Before: the core workflow editor was a near-infinite scroll of form inputs.

After: I replaced the wall of inputs with a node graph editor. WordPress can be an extremely complicated system, so making a tool to organize and automate the content creation process was a real challenge. Moving to a node graph made the editing process far more intuitive. It let us progressively disclose the system’s complexity without removing features or adding extra clicks for the technical users this tool serves.

Stages can be assigned to agents who can run prompts and route the post conditionally based on the outcome.

The node graph interface itself is a custom React Flow implementation.

Authors interact with workflows by triggering transitions in the editor. Transitions can be set up with requirements or inputs to capture context as posts pass between stages.

By default, WordPress is extremely table-based. Workflows includes advanced views — a calendar and a kanban board — for scheduling and managing content.

Since Workflows was designed for an enterprise user, it includes extensive audit logging and governance.

VIP Workflows is an enterprise editorial workflow plugin that lets publishers define custom, governed flows with agentic stages where an AI agent can own a step in the content pipeline.

Core features

Fully customizable non-linear flows with arbitrary transitions, notification routing, and role-based access control.

Extensible tools built on the WordPress Abilities API to surface utilities in Workflows, the command palette, and via MCP.

Agentic stages that assign AI agents to workflow steps with conditional routing.

Content analytics integration for smart linking, headline scoring, and audience-resonance scoring.

I came into the project after the prototype stage. I refactored the interface to correctly use the design system and cleared a lot of accumulated vibe code debt. I also untangled several extremely overgrown interfaces that had been built by agents to surface some increasingly complex features.

The whole thing was a great case study in what happens from a design perspective when vibe coded prototypes are left to grow in isolation and how to deal with them when it's time to ship the feature.

The work broke down into a few phases:

The Culling

We straight up removed a ton of features. A common theme I see in vibe coded prototypes is that they frequently ship lots of nice-to-have or unnecessary features at the expense of user experience and code quality. We stripped out a ton of things that could have been entire products of their own.

The Cleanup

After we took Occams razor to the feature set an army of Claudes loose on the UI. We needed to refactor almost every line of CSS and migrate almost every component. It resulted in a personal record for PR size at almost 45k lines changed.

The process of overcoming codebase inertia at a system level is not straightforward. The agents lie and justify the status quo constantly, it requires intentional, supervised work to get everything back on the rails.

The New Components

Several of the new features in Workflows just couldn't be executed well with the existing design system. The patterns we were introducing had no analog in the existing system. This is where we were able to intentionally depart and make new components and patterns to extend the design system. The most significant example of this was the node graph interface. I carefully adapted patterns from WPDS core and added new components to get to a workable interface that satisfied the product needs without violating the rules of the system that keep it tidy and maintainable. Most of the complex components probably won't get upstreamed to the main WordPress design system but they're set up to survive system updates cleanly into the future.

Designed at: WordPress VIP
Work: Product Design