Real-Time Co-Editing in WordPress: The Tech Stack Behind It

Multicollab is a WordPress plugin that brings real-time co-editing to the Gutenberg editor, built on the Yjs framework and WebSocket, alongside inline comments and suggestion mode.

Gutenberg Phase 3 brings an exciting era of collaboration in WordPress, enabling teams to work together seamlessly on content creation and editing. 

Upon its launch, the block editor truly revolutionized content creation in WordPress, and now, with Gutenberg Phase 3 underway, it is set to take collaboration to new heights. 

The Gutenberg project, a fundamental aspect of WordPress’s evolution, is structured around four development phases that play a vital role in shaping the future success of the Content Management System. 

These phases, as outlined in the long-term Gutenberg roadmap, demonstrate WordPress’s commitment to enhancing the editing experience and expanding the platform’s capabilities. It’s essential to understand that Gutenberg’s roadmap and its four phases serve as a high-level guide to the project’s development. 

1. Easier Editing for a streamlined and efficient experience within the WordPress ecosystem.
2. Extensive Customization capabilities to offer greater flexibility in designing and structuring websites.
3. Collaboration made seamless to enhance the teamwork and productivity of content creators. 
4. Multilingual support to cater to the needs of global WordPress users.

The WordPress community is actively involved in the development process through these four phases, continually providing feedback and contributing to iterative improvements. 

Each phase brings WordPress closer to its vision of providing an intuitive and feature-rich CMS that meets the evolving demands of website owners and creators worldwide.

Building Real-Time Co-editing Features in Gutenberg Phase 3

Gutenberg Phase 3 plans to focus on a range of collaboration features, both asynchronous and synchronous, designed to enhance teamwork and streamline the content creation process. It focuses on expanding collaboration capabilities in WordPress by enabling multiple collaborators to edit the same content and provide inline comments and suggestions for specific content elements. 

Here are the capabilities in focus for Gutenberg Phase 3: 

• Real-Time Collaboration: More than one person can edit a post simultaneously.
• Asynchronous Collaboration: Writers and editors can discuss assignments, tag collaborators, and suggest edits.
• Publishing Flows: Checklists ensure all editorial requirements and processes are met before publishing.
• Post Revisions Interface: Allows coordinated updates and scheduled content additions.
• Library: A centralized space to manage Patterns, Blocks, Styles, and Fonts.
• Global Search & Command Component: Enables users to search and execute commands across the editor.

It is important to wonder what Gutenberg Phase 3 should really deliver. In its consolidated form, discussing the building blocks of collaboration features in Gutenberg Phase 3 ensures the entire community is on the right path.  

Gutenberg Phase 3 Challenges and Considerations

While Gutenberg Phase 3 brings exciting collaboration features, the desirable state of being is far from realized. The reasons are the many challenges that come along with what we want Gutenberg Phase 3 to deliver.

To get where we want, there are specific challenges that need to be addressed for a seamless experience:

Performance-related Issues: Handling multiple users collaborating in real-time may impact server performance and responsiveness.

High Server Requirements: Real-time collaboration often requires specific server configurations and WebSocket support, which may not be available with all hosting providers.

Gutenberg Block Compatibility: Ensuring all Gutenberg blocks are compatible with real-time collaboration features can be a complex task.

WebSocket Server Support: WebSocket support is necessary for real-time collaboration, but not all providers offer WebSocket support out of the box.

Message Security: Messages transmitted over WebSocket should be properly encrypted and decrypted to maintain data privacy and integrity.

Scalability: The number of WebSocket connections a server can handle depends on various factors, including hardware resources, network bandwidth, and message size.

Compatibility with Older WordPress Versions: Some older WordPress versions may not fully support the real-time co-editing features introduced in Gutenberg Phase 3.

Load Balancing: Ensuring compatibility with load balancing setups is crucial for data synchronization across different environments.

Edit and Revision History: Maintaining a comprehensive edit history and revision tracking can be a complex task in real-time co-editing scenarios.

User Roles and Permissions: Managing user roles and permissions becomes challenging when multiple users update the editor simultaneously.

Technical Solutions/Prototypes: Current Status in the WP Ecosystem

Bringing real-time collaboration to WordPress isn’t happening for the first time in the WordPress ecosystem. Many solutions already exist that have attempted to or have successfully taken the leap and worked around offering real-time editing capabilities to WordPress users. Let’s explore some of them:

1. AsBlocks

AsBlocks is a project inspired by Excalidraw, aiming to bring live collaboration to the Gutenberg editor. Some features of AsBlocks include:

• End-to-End Encryption: AsBlocks ensures that only collaborating users can read messages, providing data privacy; even the web application’s server can’t decrypt it. 
• Live Collaboration/Editing: Multiple users can edit content simultaneously in real-time.
• Read-only Link: AsBlocks offers a view-only mode for users with a read-only link.
• Dark Mode: An optional dark mode is available for the editor.

While AsBlocks supports approximately 30 Gutenberg core blocks, it has not seen significant updates since July 2021. However, you can explore the project’s demo and GitHub repository for more details. 

Technologies Used in AsBlocks: Yjs Websocket – Socket. io-client

2. Block Collab

Block Collab is an initiative to make the Gutenberg block editor real-time collaborative. 

Key features of Block Collab include:

• Collaborative Editing: Enables real-time collaboration support for multiple users.
• Block and Inline Comments: Users can add comments on blocks and specific content elements.
• Show Peers’ Text Carets: Active users and their editing content are visible to others.
• Enable/Disable Real-Time Collaboration: Admin settings allow enabling or disabling the real-time collaboration feature.

While Block Collab’s recent updates are not available since June 2020, you can explore the project’s GitHub repository for more information.

Technologies Used in Block Collab: Yjs, WebSocket, Gutenberg version: 8.3.0, WordPress version: 5.4, PHP Version: 5.6

3. Multicollab: Real-Time Co-editing in WordPress

Multicollab was created to keep creators and publishers at the top of their games. Built upon the Block Collab and Yjs framework, Multicollab offers quite a bouquet of significant collaborative features that all of us want to experience in WordPress by default. Multicollab’s compatibility with blocks is impressive. 

• 90+ Gutenberg Blocks Support: Multicollab provides real-time compatibility with a wide range of Gutenberg core blocks.

• Inline Commenting: Users can add real-time comments on any content piece or block.

• Invite to Collaborate: Multiple users can be invited via email to collaborate on a single post.

• Show Peers and Active Users: Collaborator user lists and active user visibility aid collaboration.

• Works with Custom Blocks and Patterns: Multicollab supports real-time collaboration for custom and reusable blocks, as well as block patterns.

Since its initial release in 2020, Multicollab has continuously been improving its plugin based on continued customer feedback, perfecting the features. It recently rolled out version 3.7, offering enhanced functionality in its Commenting and Suggestions features. 

Real-time co-editing is now a fully available feature in Multicollab, included in the Pro plan. Multiple people can edit the same post simultaneously inside the Gutenberg editor, with changes syncing live.

Addressing a few limitations will contribute to a smoother and more efficient collaboration experience in Multicollab:

• Performance can be a concern when multiple users collaborate simultaneously, with testing currently limited to 15 real-time users. 
• Cursor issues may arise, leading to misplaced cursors when multiple users edit the same content blocks. To ensure optimal performance, a high-performance server may be necessary. 
• Additionally, WebSocket configuration is essential for the real-time collaboration feature to function correctly.

Technologies Used in Multicollab: Yjs, WebSocket, Gutenberg version – 13.1-14.1, WordPress version – 6.2, PHP Version: 8.0

Conclusion and Next Steps

Now that we have explored Gutenberg Phase 3 and its objectives to enhance collaboration within WordPress, acknowledging the challenges involved in implementing real-time co-editing features is the next step. By understanding the concepts and exploring the available tools, we can be better equipped to embark on the journey of implementing real-time co-editing features in Gutenberg Phase 3. 

Stay updated with the latest guides in our Multicollab Gutenberg Phase 3 series. 

Frequently Asked Questions