EditorsKit Tackles Typography With First Premium Add-On

Jeffrey Carandang released the EditorsKit Typography Add-On today, the first commercial extension to his EditorsKit WordPress plugin. The plugin provides page and block-level typography options. It works with Google Fonts, includes preset font combinations, and allows users to create custom typography rules.

Unlike many other block editor plugins that offer a library of blocks, EditorsKit does not add custom blocks. Instead, it focuses on creating a better block editor experience. It enhances the editor interface, adds extra options to the editor toolbar, and extends options for existing blocks. It is a toolkit that is almost experimental, handling user-requested features long before they land in core WordPress or even the Gutenberg plugin.

Until now, EditorsKit has remained a free plugin with no commercial components. However, it was almost inevitable that such a plugin would need some financial backing, particularly with the pace that Carandang is adding new features.

“The plan was actually for Gutenberg and EditorsKit to mature enough, then create premium add-ons or services,” said Carandang. “But, the circumstances changed when I created ShareABlock. There are so many things that I want to achieve when creating a layout that core blocks cannot do yet.”

ShareABlock is Carandang’s community website for sharing blocks and templates. Site visitors can download block files directly from the site and import them into the block editor. Members can also share their custom block and template designs with others. Everything on the site is free to the community.

“For this specific add-on, I was trying to solve the issue when it comes to typography in the Gutenberg Editor that I’ve experienced when creating templates and block patterns for ShareABlock,” said Carandang. “I always find myself doing custom functions to use specific Google Fonts when creating a template. I figured there might be others that are having the same problem.”

The typography add-on for EditorsKit is a value-add on top of the normal free version of the plugin. For users who decide to purchase, they can choose between three plans that range from $29 and $99 per year, depending on the number of sites they need updates and support on.

“My main focus is still on the free version,” said Carandang. “There will just be a few add-ons that will be built along the way whenever the circumstances need it.”

This add-on is just the first step into a larger goal to add some other commercial add-ons and integration into EditorsKit. “I have a couple of other ideas,” said Carandang. “I plan to turn this into a bundle to make it easier for users to manage them inside the settings page.”

How the Plugin Works

Yesterday, Carandang launched version 1.2.5 of the primary EditorsKit plugin. Along with a handful of new features and bug fixes, he added a new “Extensions” tab to the plugin’s settings screen. End-users can grab the typography add-on from that new page. Once installed and activated, users can view and set a default font combination from that same area in the plugin.

Screenshot of the Typography Settings tab on the EditorsKit settings screen.
Typography Settings on the EditorsKit settings screen.

The plugin adds typography options on the post-editing screen. It provides a custom sidebar that allows end-users to select a font combination for the entire post.

End-users can also create custom typography rules from this same sidebar. Any custom rules created are stored for use on other posts and pages too. There is also an option to apply the rules to the <body> element on the front end and override the theme’s typography.

Screenshot of the post/page-level typography options in the block editor for the EditorsKit typography add-on.
Post/Page-level typography options in the block editor.

On the block level, each block allows users to select a font family and weight. This is handled through a custom “Typography Settings” panel. Currently, there are over 60 choices from Google Fonts and a few system fonts. The add-on also automatically updates the font-weight options on a per-font basis (not all fonts are built for all weights).

Screenshot of the per-block typography settings for the EditorsKit typography add-on.
Per-block typography settings.

The one potential downside to this add-on is how easy it is to go overboard when adding external fonts. When using too many on a page, it will slow down the page-loading speed. As a general rule of thumb, users should not select more than two or three fonts to keep speed in check. It would be handy if the plugin added a warning message somewhere in the UI to let users know of the dangers of using too many fonts.


6 responses to “EditorsKit Tackles Typography With First Premium Add-On”

  1. When I rebuilt the Rough Pixels website, entirely with the block editor, I have to make the claim that the EditorsKit helped me through the process of a complete redesign. Common sense editor features being added to the block editor made sense; why the core team didn’t do this is beyond me.

    With the Typography features, albeit, premium, is something I’m sure many will appreciate. I agree though that people need to use caution as to how many fonts they use, especially if a theme also includes fonts. Load adds up very fast with fonts, but it’s also the varying font weights too.

    I looked at the premium pricing…reasonable. The amount of work Jeffery puts into this plugin, one has to realize the workload, support, and ongoing maintenance does need some financial resources to help keep it going.


Subscribe Via Email

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

%d bloggers like this: