Chatterbox Plugin Uses WordPress Blocks to Show Conversations

Chatterbox is a new plugin with a fun and creative use for the block editor. It displays chat or text threads using blocks that are styled as conversations. Users can type in a record of a chat, including timestamps, with a live preview in the editor.

Since written conversations are essentially little blocks of text and media, the block editor lends itself nicely to composing and displaying this type of content. The Chatterbox block can be found under Layout Elements in the block inserter. It includes the option to select a style (Inbound, Outbound, or Event) and add a timestamp.

Dave Ryan, a WordPress developer at Bluehost, said he created the plugin in order to test Gutenberg’s Block Context API and borrowed the chat component from Salesforce’s Lightning Design System. He suggested that Chatterbox could be useful for showing demos of chat bots, publishing chat records in news stories, or simply adding an engaging visual display to conversations.

Once the Block Context API matures, Ryan plans to add message background and text colors, message sender with name and avatar, and the ability to override the message sender on a per-message basis for group chats. The next steps beyond that on the roadmap include the following:

•  Implement Bookends and other SFDS Chat options
•  Animated chat sequences
•  Automated animated sequences, using character lengths for timing
•  Automate hiding of message meta based on adjacent blocks
•  Message Images
•  Message Files

Ryan said some of the planned features will rely on new features in the Gutenberg project. Once those have been released he will update Chatterbox to include more customization options. The plugin is available for free on WordPress.org and contributors can find the code on GitHub.