Emoji Toolbar Plugin Brings an Emoji Picker Back to the WordPress Editor

Earlier today, theme.es released its Emoji Toolbar project to the plugin directory. It is a simple picker that integrates with the WordPress Rich Text toolbar, allowing users to insert emoji directly from the editor interface.

After Nick Hamze pulled his Emoji Conbini plugin from WordPress.org last year, there has been an emoji-sized hole in my editor toolbox. The plugin was the perfect implementation for quickly plopping a quick smiley face or any of the other thousands of characters available. Unfortunately, his departure from the WordPress space meant losing one of my favorite block-related plugins — and several others that I enjoyed.

It was also on par with 10up’s Insert Special Characters plugin, a solution for users missing a similar picker from the classic editor era.

Emoji Toolbar is filling that void and is a solid alternative for those who need a solution. The difference between the two implementations is the location. Emoji Conbini added the picker button directly to the toolbar, and Emoji Toolbar adds it to the “more” dropdown.

Dropdown button list from the Emoji Toolbar plugin in the WordPress editor.
Clicking the Emoji button in the Rich Text toolbar.

Placing the picker button inside of the dropdown makes it a little harder to find. It also requires an additional mouse click to insert emoji. What matters is that the implementation works, but I would love to see it as a top-level toolbar item.

Using the plugin is a simple matter. When in a Rich Text field, which includes blocks like Paragraph, Heading, List, and more, the Emoji Toolbar appears in the block toolbar. After clicking it, the plugin creates a popup of the emoji picker.

Popup emoji picker in the WordPress editor from the Emoji Toolbar plugin.
Emoji Toolbar popup picker.

From that point, users merely need to click the emoji they want to insert into the post.

The plugin bundles the Emoji Mart library, which has quickly become almost a standard for emoji pickers. The component is a Slack-like box that categorizes each of the characters, and it provides a field for searching for that perfect emoji.

There is still at least one emoji inserter alternative. Instead of adding a picker to the block toolbar, Emoji Autocomplete Gutenberg allows users to type : and use keywords for inserting characters. For those who prefer to work from the keyboard, it is a quicker method.

Emoji Toolbar shines over Emoji Autocomplete Gutenberg and the now-retired Emoji Conbini based on how it formats its output. It inserts the actual characters into the content, but the other plugins insert an <img> tag instead. That method results in output that is not forward-compatible with any changes in the future or alternative libraries. Users who also prefer to disable image output on the front end cannot do so. This is a non-issue with Emoji Toolbar — it plays well with other solutions.

On the whole, the plugin is solid. It has well-written code and provides an easy-to-use picker for inserting emoji.

7

7 responses to “Emoji Toolbar Plugin Brings an Emoji Picker Back to the WordPress Editor”

  1. Caution, plugin Emoji Autocomplete Gutenberg is outdated as per wordpress.org notice and not compatible to current WordPress core.

    This plugin hasn’t been tested with the latest 3 major releases of WordPress. It may no longer be maintained or supported and may have compatibility issues when used with more recent versions of WordPress.
    Tested up to: 5.4.0

    Besides that Emoji Autocomplete Gutenberg includes imges via hardcoded paths to external third party server s.w.org which can not be used in a GDPR compliant way.

    Plugin Emoji Toolbar includes assets in editor from external third party server unpkg.com which also can not be used in a GDPR compliant way.

    These kind of plugins might look nice in the first place but can not really be used in a commercial environment with GDPR policies in place.

    • Thank you for your remarks regarding GDPR compliance.

      You’re right that in its default configuration Emoji Mart accesses https://unpkg.com but only when opening the Emoji Picker in the Block Editor not on the Frontend itself.
      Fortunately accessing the CDN is not a requirement and in the current release (v1.0.3) Emoji Toolbar has been configured to load the “os-specific” native Emojis. A positive side effect is the performance improvement when opening the Picker 😲

      As long as its implemented and configured correctly Emoji Mart should be safe to use – even in privacy concerned environments.
      By the way. Nextcloud which is “GDPR compliant by Design” also includes the Emoji Mart library https://github.com/nextcloud/nextcloud-vue/blob/master/src/components/EmojiPicker/EmojiPicker.vue#L116

      Thanks again for your pointing out your concerns which help to improve the Plugin.

  2. Possibly dumb question, why not use the built in emoji keyboard on your Windows or Mac device? They both have them, just a keystroke away. They work fine, for the most part. They’re super easy on pretty much all phones too.

    • Most likely, it’s a discoverability issue. I doubt the average user knows how to pull it up on the laptop/desktop. On Windows, at least, it’s just the Windows logo key + ..

      I’d personally prefer the autocomplete plugin mentioned in the post if it would just put the character instead of the image.

Newsletter

Subscribe Via Email

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