Collaborative Editing in the Gutenberg Block Editor
A recent experiment powered by a new framework package for building real-time collaborative block editors.
This piece is a repost from an old blog I no longer keep up.
Last weekend, I felt like I needed a change of pace from reviewing full-site editing pull requests. Collaborative editing has been something we’ve been toying around with recently, so I decided to go deeper with it. The result was this:
Why a package?
Gutenberg consists of lots of packages that come together to provide the block editing experience. This architecture not only offers enormous benefits for internal development. It also allows third parties to compose their unique vision of block editing and embed it wherever they need to.
Riad has recently been working on this excellent collaborative Gutenberg environment. Think Google Docs or Excalidraw but with blocks. While contributing to the project’s edit synchronization, I realized that it makes sense for Core to provide a standard set of utilities instead of leaving third parties to deal with things all on their own. These utilities provide a common place to enhance the Gutenberg collaborative experience for Core and all the future collaborative Gutenberg environments.
What does this look like in Core?
The experiment that tests the new package creates peer-to-peer rooms for posts based on their ID and a post-specific secret that only users who can edit the post can access. It synchronizes edits in real-time and shows you your peers’ selections:
It also lets you write comments:
What’s next?
The design team already has a few ideas for improving the experience. Commenting would probably work better as an editing mode with a sidebar similar to how Figma does it.
There is also a lot of room to improve the UI with cleaner styles and maybe even avatars:
There are also many open questions left on how to expose the undo history and revisions made by peers in the UI. That will be a much broader effort that will require time we won’t have until after Phase 2 and full-site editing. But, landing the essential tools for the experiment and for third parties to build with would be a great way to gather feedback and experience so that we hit the ground running when Phase 3 begins.
