Creating a Live Blog plugin in Wordpress’ Gutenberg editor
Last year News UK revamped its Live Blogging tool to a more intuitive and a better version to achieve publishing content faster and with less number of clicks. Editors were already in the Wordpress ecosystem, so building it on top of Gutenberg editor was the obvious choice.
Here is what steps we took to build our Live Blogging tool as a plugin inside Wordpress.
Live Blogging
In a world of continuously scrolling, never-ending timelines, 100-tweet threads and stream of videos, keeping a story up-to-date with latest information quickly and easily is indispensable for editors to keep up with the demand that comes from the audiences.
For the past few years at News UK we’ve been using Automattic’s Live Blog plugin. Its interface is basic and satisfies the basic needs for our editorial team, but it doesn’t utilise the far superior Gutenberg block editor making many tasks slow or difficult. An outdated WYSIWYG text editor felt sluggish and embedding rich content such as a tweet or an Instagram post was not as straightforward as it is in Gutenberg.
Our new Live Blog plugin brings the Gutenberg features to the content editor and a better timeline that gives users a frontend-like preview of the live blog. During the user testing in pilot phase and after the initial launch, our editors embraced the familiar UI quickly and easily.
Technical Infrastructure
The core Gutenberg block editor is built on React. With some customisations specific to the Wordpress ecosystem, it’s mainly functional React components and Redux stores in the background.
Our new Live Blog plugin is not so different itself. It is a few functional React components with a custom Redux data store that’s created using @wordpress/data package.
Post Types
Technically, in the old plugin, each live blog entry was a “comment”, and the editor interface to add/edit live blog entries was simply a WYSIWYG textarea. This was a barrier to implement Gutenberg blocks inside entry contents. After a few discussions and a long spike outcome document, it is decided that the best and most sustainable way is to add live blog entries as posts, so the Gutenberg editor will be natively available and future improvements to Gutenberg will also be applied to the Live Blog editor.
In addition, we used the unregisterBlockType() from @wordpress/blocks package to customize which blocks are available for the Live Blog editor.
In our new plugin we introduced two new post types: live_blog and live_blog_entry
As their names suggest, first is to act as a parent to hold all its child entries under one roof, shown in the basic diagram below.
Positioning the Timeline
We had to simplify the UI and remove all the clutter, leaving only things related to writing a live blog, keeping the same layout the editors are used to from writing regular articles.
- All panels in the Document sidebar removed
- All buttons in the editor toolbar removed
- All meta boxes that are positioned below the editor are removed with the exception of the one that we added: Live Blog timeline
- Timeline added inside the meta box below the editor, showing the entries as similar to the way they’ll be shown on the front end as possible
Technically, the timeline you see here is a “Meta box”. The initial content of the meta box is only an empty wrapper div, which then is filled via React with the entries from the Redux store. Wordpress’ @wordpress/data package gives a few useful methods to create a custom Redux store in the Gutenberg universe. Once you register your store, you’ll need to add your selectors and reducers the same way you’d add them in any other Redux store.
Simultaneous Editing
A live blog is a collaborative content which is created by multiple editors at the same time. Since we are using the default Gutenberg editor, we had to remove restrictions of Wordpress that restricts the same content being edited by more than one user at a time.
For PHP side of things, Wordpress gives us a few filters to modify the post locking behaviour: override_post_lock, show_post_locked_dialog and wp_check_post_lock_window.
But when it comes to Gutenberg, these filters are not enough to allow multiple editors. There’s the heartbeat API which keeps the communication between the Gutenberg layer and the server. It checks the post’s lock status and tries to prevent multiple users editing the same post. Since it was being used for some core functionality, completely disabling heartbeat was not an option, therefore we used removeAllActions() from @wordpress/hooks package and removed all heartbeat related actions from Gutenberg.
We started this project in lockdown and personally I still haven’t seen anyone I worked with face to face, or been inside an office. In the end, all the team working from home full time, we made use of our lockdown time to build a new Live Blog editor with all the Gutenberg features and is being used in national and all international editions of The Sun. So the next time you’ll read one of those live blogs, now you know what’s happening behind the curtains and please feel free to share your thoughts and questions in the comments.
