Single Blog

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.