Update on Phase 3: Collaboration efforts

Over the last year, Phase 3 of the GutenbergGutenberg The Gutenberg project is the new Editor Interface for WordPress. The editor improves the process and experience of creating new content, making writing rich content much simpler. It uses ‘blocks’ to add richness rather than shortcodes, custom HTML etc. https://wordpress.org/gutenberg/ roadmap has begun to take form and with it comes a need for an update around what’s been done, how to follow along, and what to expect going forward. This post seeks to provide answers at a high level view of these questions. As a reminder Phase 3 is centered around fostering seamless collaboration, tying together the user experience, and streamlining the content management flows to improve the way creators and teams work together within WordPress. As work progresses, feedback is needed and welcomed to ensure broader adoption.

Real-time collaboration

Over the last few months, Kevin Jahns, the author of Yjs, a popular framework for building collaborative applications has been sponsored by Automattic to work on real-time collaboration, after an initial experiment landed. He kicked off his efforts with some research and dialogue in this discussion issue. More recently, he’s pulled together some prototypes ahead of sharing a full proposal for how to proceed. Right now, consider this work as being in a strong experimental stage without a final approach. The next step is to get the initial approach into a PR for folks to give feedback on and discuss openly. 

Below is a demo showing syncing content only relying on HTTPHTTP HTTP is an acronym for Hyper Text Transfer Protocol. HTTP is the underlying protocol used by the World Wide Web and this protocol defines how messages are formatted and transmitted, and what actions Web servers and browsers should take in response to various commands. APIs with the autosave interval set to 3 seconds. Because it relies on HTTP APIs, this demo would work on all WordPress instances:

Going a step further, you can see more demos in a recent update including adding y-webrtc into the experience to show how real time collaboration would work for users who can establish a peer-to-peer WebRTC connection.

Follow along in this dedicated GitHub issue and/or in the #feature-realtime-collaboration slackSlack Slack is a Collaborative Group Chat Platform https://slack.com/. The WordPress community has its own Slack Channel at https://make.wordpress.org/chat/. channel.

Async collaboration: In-line comments

An initial experiment for block-level inline comments landed with Gutenberg 19.6, breaking ground on the first of many async collaboration upgrades. At this point, another iteration on this initial feature is already planned and underway to refine the current experience further. If you’d like to help test and shape the feature further, stay tuned for a dedicated call for testing or start testing today with this WordPress Playground instance and open issues in the Gutenberg GitHubGitHub GitHub is a website that offers online implementation of git repositories that can easily be shared, copied and modified by other developers. Public repositories are free to host, private repositories require a paid subscription. GitHub introduced the concept of the ‘pull request’ where code changes done in branches by contributors can be reviewed and discussed before being merged be the repository owner. https://github.com/ repository. The aim is to get early feedback and quickly iterate in order to land this new feature in an upcoming major WordPress release. Below is a look at the near term design slated to be shipped next with visuals for adding a comment, leaving a comment, toggling to see resolved comments, and the resulting view when looking at resolved comments:

Follow along in this dedicated GitHub issue

Adminadmin (and super admin) redesign: DataView & DataForm

DataViews is the foundational component of the initial overall admin design efforts. By design, these views are being built out only in the Site Editor, with a few efforts branching out including an experiment for a new, separate Posts experience using Data Views and an early Media Library powered by Data Views proof of concept.  

As a next step of the initial development of DataViews, the more recent DataForm API was later introduced in Gutenberg 18.8 with the aim to reduce expected duplication to create forms in Data Views. Work has continued progressively from there with DataViews and DataForm components influencing each other’s development. You can view each in their respective Storybook views: DataViews and DataForm.

Both of these components have been created with extensibility at the heart of everything being built! For now, pluginPlugin A plugin is a piece of software containing a group of functions that can be added to a WordPress website. They can extend functionality or add new features to your WordPress websites. WordPress plugins are written in the PHP programming language and integrate seamlessly with WordPress. These can be free in the WordPress.org Plugin Directory https://wordpress.org/plugins/ or can be cost-based plugin from a third-party and agency developers can already start using the DataViews component for their WordPress customizations with two different Developer Blogblog (versus network, site) tutorials to get you started: Using Data Views to display and interact with data in plugins and Actions from Data Views: Adding images to the Media Library. If you want to go on a deeper dive, watch a recent hallway hangout that goes through both of these components with folks actively working on them. Expect a continual focus on extensibility as these components evolve. Below is a look at how DataViews comes together with the DataForm work with an easy option to quick edit within one’s pages:

Follow along in this dedicated DataViews component issue and this DataForm component issue. For early design work in this area and beyond, check out the biweekly design updates.


Thanks to @priethor @youknowriad @4thhubbard @matveb for reviewing this post and for @joen and @jameskoster for the design assets.

#gutenberg, #phase-3