Creating Speech Balloons With the WordPress Block Editor

I do not know how I overlooked LIQUID SPEECH BALLOON. The plugin is less than a month shy of being three years old, and I follow block-related projects religiously. This one slipped through the cracks, at least until I haphazardly stumbled upon it when searching for something else entirely.

It is also relatively popular for a single-block plugin. There are not that many with more than 10,000 active installs. I had to know what it was doing to draw such a crowd.

In the comments on yesterday’s post about Automattic’s Livro theme, Nick Hamze wanted to know where all the fun theme designs were. Perhaps it was fortuitous timing that I also happened to be playing around with a plugin that might fit the bill. Sure, it is not a theme, but it can definitely be used to spruce up an otherwise boring or plain design.

So, I spun up a few Speech Balloon blocks and just had fun creating a chat with a some cartoon animals:

Four rows of speech balloons with cartoon animals making sounds.  Includes a cat, lion, chimp, and panda.
Inserting and customizing multiple Speech Balloon blocks.

I tend to gravitate toward clean, open-canvas themes because they allow me to add all the fun elements via the post content. That is why I love finding plugins like LIQUID SPEECH BALLOON. They add that visual flair to pages that can sometimes be boring.

Using the plugin’s Speech Balloon block is straightforward. It presents users with a single section for inserting rich text content.

A speech balloon with a default user avatar and placeholder text, "Speech," in the WordPress block editor.
Default Speech Balloon block.

In the block options sidebar, users can choose an avatar. They can also make several design adjustments, including background and text colors.

The block is falling slightly behind the times, though. Since the plugin’s release nearly three years ago, WordPress has added several new design components that could be used to make its block even better, such as padding, border, and typography controls.

The plugin can also be used for testimonials or other types of reviews. It works well enough for more business-friendly layouts if that is the sort of thing you are after.

Two columns of testimonials. Both show a user avatar on the left and a text review in the box on their right.
Creating testimonials with the Speech Balloon block.

The plugin’s biggest failure is in how it handles avatars. It is also why it does not make for the best option for testimonials. Users cannot add avatars directly via the block. Instead, they must register them via an entirely separate admin screen. Then, they can select from their saved avatars list within the block.

Under the Settings > LIQUID SPEECH BALLOON page, the plugin presents users with several rows of fields. They can add a name and image URL for each avatar.

10 rows of input fields in a settings form.  Each row has a Name field and an Image URL field.
Plugin’s avatar settings.

This is where the user experience falls apart a bit. There is no way to upload avatars on this screen. Instead, users must upload them via their media library, copy the URL, and paste it into the image URL field.

The plugin provides the necessary documentation and links to work through this process. The overall experience is simply lackluster.

However, if users only need a limited number of avatars, the system works well enough once everything is uploaded. The images are always available whenever inserting the Speech Bubble block — no need to search through the media library or upload a new one.

I am not sure if this will go in my plugin toolbox. Outside of a few stylistic elements, such as the speech bubble’s tail, users could readily recreate something similar with a few blocks, as shown in the following screenshot:

Two speech bubbles.  The first has a Panda next to it.  The text reads, "Hello, how are you doing?"  The second has a zebra and the same text.
Custom speech bubbles pattern.

Within a few minutes, I created this with what is already available in core WordPress, and I actually had several more design choices by doing so. I could see keeping a block pattern on hand for such a layout in the future.

For those who want a quick and easy solution without all the fuss of mixing and matching blocks, LIQUID SPEECH BALLOON would be the better option.

6

6 responses to “Creating Speech Balloons With the WordPress Block Editor”

  1. At the time the plugin was developed, there was no documentation and basically nothing useful for external developers to learn how to use Gutenberg features or to add file uploads in Gutenberg blocks etc., so the critics is partially not reasonable.

    Many early adopters or let’s better say experimentalists did since then not bother to rework and adjust their code to again and again changed basis in Gutenberg, and that’s fine. They were happy that “it works” and would not chasing a running target.

    Telling them now, that there is patterns or typography etc., is not very polite. They were trying to get something out of the (three years ago and partially still) totally bugged and unfinished framework. They should get a medal or for bravery or an early-something-pic in their plugin author profile instead.

    If somebody knows better now, feel free to provide ready codeblocks to plugin authors which flawlessly work with current release of the editor system or help them in their support forum.

    • I commend the plugin author for being an early adopter, but that doesn’t mean that the project is beyond criticism. I am not writing for the plugin author but for our readers, potential users of the plugin. Like most reviews, I attempt to point out both my likes and dislikes. I actually like the plugin, which I noted in the post. However, I am not going to ignore what I see as issues. Doing so would be a disservice to the readers who trust that I will provide an honest account of my experience.

      As far as adding in some new features, some of them are not particularly tough. Block plugins can literally add just a few lines via their block.json file to enable many of them — no actual coding required. I’d be happy to dive into the technical aspects with the developer(s).

Newsletter

Subscribe Via Email

Enter your email address to subscribe to this blog and receive notifications of new posts by email.