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:

A new Gutenberg experiment, powered by a new package, block collab.

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.

--

--

--

epiqueras.com

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

picoCTF: Scavenger Hunt

DareNFT’s bi-weekly report (January 24th — February 6th)

Service Now Beginners Workshop Assignments

How to synchronize MySQL Database with ElasticSearch And perform data querying in a Spring Boot…

Big Data: Three Different Ways to Handle Data That Can’t Fit into Memory (Part II)

Consultas

My Open Edx journey in 2022

The Evolution of Virtualization

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Enrique Piqueras

Enrique Piqueras

epiqueras.com

More from Medium

A know-how of Firebase

Auto generating questions in React using an API and question template database.

Building a real-time web app in ReactJS with SignalR

How to have an API REST in 10 minutes with Strapi 🔵