Real-time CollaborationNo. 021

Collaboration finally comes to WordPress

WordPress was late to real-time collaboration, partly because good community plugins already existed to fulfill collaboration needs. When it finally came time to build it into core, we wanted to do it right and make it scalable, accessible and robust enough to handle the near-infinite variation inside the block editor. When users can have such a wide range of experiences, designing a reliable presence UI means wrestling with some difficult problems.

WPDS Contributions

I built the avatar and presence system. It included the base components with Gravatar support, responsive labels and accessible block highlight indicators that show who’s selected what. I unified the collaborator color system into one deterministic palette that could be used across WordPress core.

We had to resolve lots and lots of accessibility challenges around the edges of the feature. Collaborator presence needed to hold contrast against the infinite surfaces it could encounter in the block editor.

I developed a new, supplemental qualitative color palette for WPDS to distinguish between collaborators. I wrote an algorithm to optimize the color pairs for maximum visual difference.

Along the way I got to do some nerdy color work in the way of contrast-aware badge text and a an algorithm to optimize palettes for maximum color difference around the existing WPDS semantic palette.

In all, I merged three PRs to WordPress Core, touching 70+ files across several packages. I’m extremely proud of what we shipped.

Part of the component set in Figma

Real-time collaboration was my largest WordPress core contribution. I was the lead designer on the Interface layer — everything a user sees that tells them they’re not editing alone — and got to work closely with core contributors and community leaders to ship it in WordPress 7.0.

Designed at: Automattic / WordPress
Work: Product Design, Design Engineering, Front-end Development