Posted on

Extendify Adopts EditorsKit, Increasing Its Block Plugin Collection

Extendify has been scooping up some successful block-related plugins in recent months. It acquired the Redux Framework in November 2020 and followed it up with a purchase of Editor Plus and Gutenberg Hub in December. Its latest pickup? EditorsKit.

This ownership change was an adoption rather than an acquisition. The company is compensating Jeffrey Carandang, EditorsKit’s creator, for helping during the transition.

“The main motivation was to ensure that EditorsKit has a good home,” said Extendify co-founder Chris Lubkert. “Jeffrey had taken a full-time role with 10up, and the plugin hasn’t seen any updates in 9 months. So we are both excited about Extendify building on what Jeffrey has built and continuing to serve the user base.”

EditorsKit is a playground of extensions on top of the existing blocks. From visibility logic to text formatting to extra block options, it has a little bit of everything. Carandang has often launched features long before something similar has landed in WordPress. It has grown to over 20,000 active installs since he first submitted it to the plugin directory.

Taking on a new role with 10up as a web engineer left him little time to devote to the plugin. “My time was occupied by my full-time work and adjusting through my shifts, personal stuff, and with what’s happening in the world due to lockdowns; and the covid virus,” he wrote in his own farewell post. “I hate to admit it but I think I’ve neglected my role in the EditorsKit plugin/community that I’ve built for the past couple of years. With this, my sincere apology to the plugin users and the whole community.”

Changes to EditorsKit

When a plugin changes owners, users sometimes must brace themselves for changes. Right now, EditorsKit is the same plugin it has always been. However, the Extendify team has introduced some additions.

The first is a part of what will eventually be a commercial aspect of the plugin: the Extendify Library. The team added this feature to both the Redux and Editor Plus plugins earlier this year. EditorsKit users will see a new “Library” button at the top of the editor. Once they click it, it opens an overlay for importing patterns and templates from Extendify’s collection.

Popup overlay in the block editor with searchable template system.
Popup library for importing Extendify patterns and templates.

The amount of imports allowed is limited to three without signing up. “EditorsKit users have access to the same library of patterns and templates and can import three patterns and/or templates,” said Lubkert. “Anyone who signs up for the beta program will then receive unlimited imports during the beta period. We expect this to continue for a few more weeks.”

Essentially, the commercial aspect of EditorsKit, Editor Plus, and Redux will be a shared library from the Extendify team. Users of any one of the plugins can continue using their preferred plugin with the option of importing patterns and templates. Lubkert said they still have no plans of rolling all of the plugins into one “super plugin,” keeping them each as a separate project.

“It makes sense for us to invest our energy into a single library and creating the best experience possible for our users,” he said.

The second change the team has implemented is making the EditorsKit Typography add-on a free download. The plugin allows users to select from a list of hand-picked Google Fonts and use them anywhere. It also has a customizable set of default font combinations.

It makes sense to drop the commercial aspect of this add-on. WordPress is already starting to provide theme authors with the tools for typography options at the block level. EditorsKit Typography may be the better of the two right now, but the average user will not need it as the core platform continues to improve.

ShareABlock and Other Projects

The handover includes Carandang’s related sites. ShareABlock, CopyGlphys, and CopyGradients are all tools for helping WordPress users build on top of the block system. The Extendify team plans on keeping them alive.

Carandang launched ShareABlock in December 2019. Essentially, it was a block patterns directory. Only, block patterns were merely an idea in the bowels of the Gutenberg GitHub repository at the time. The upcoming pattern directory, expected to officially open next month, was not even a blip on most people’s radar.

Screenshot of the ShareABlock website homepage. It features downloadable block patterns.
ShareABlock homepage with downloadable “patterns.”

ShareABlock has had time to mature. Its designs are more modern than the current offering from the pattern directory. The downside is the reliance on EditorsKit to import them via a JSON file instead of copy-paste block HTML code.

With a few tweaks, it could be a serious contender as an alternative directory. If the WordPress development team follows through with a ticket I opened for allowing third-party vendors to hook into the system, it would be easy to do.

“In general, we don’t see ourselves competing with the pattern directory (or anything else in core Gutenberg),” said Lubkert. “We’d like to solve unmet needs for the community and do so in a way that is complementary to core.”

The team already has the patterns in place. Hooking in its existing library would be more of a value-add. The official directory is limited to what can be done with core block options. Extendify would have the wiggle room for adding designs built with its more robust EditorsKit and Editor Plus toolsets.

Posted on

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.

Posted on

Creator of EditorsKit Launches Community Block-Sharing Site

Screenshot of the ShareABlock site front page, which showcases block patterns for WordPress.

Jeffrey Carandang, the creator behind the EditorsKit WordPress plugin, launched a new community site for sharing block designs and templates today. The ShareABlock website allows visitors to download block files directly from the site and import them into the block editor. Users can also sign up to share custom block designs and full-blown block templates. All downloads are available for free.

At the moment, there are 18 block designs available for download. There are two primary types of downloads: block patterns and block templates.

Patterns are smaller groupings of blocks to create a specific section for a page. These include designs such as various hero sections, pricing lists, and a call-to-action section.

Templates work the same way as patterns. However, they are larger sets of blocks designed to create an entire page. For example, one template allows users to import a full gallery portfolio page. Another creates an editable resume layout.

Other than Carandang, two other contributors have shared block designs. This number should rise as more people sign up and decide to share their creations. The registration process is open to anyone who wants to join. However, each contribution is subject to a review for quality assurance.

“One of my primary goals in creating [EditorsKit] is to help users get a little more comfortable with using the new WordPress Gutenberg block editor,” described Carandang in the announcement post for ShareABlock. “The goal is to help users create Gutenberg blocks easily. With drag and drop import, layout and designs will be available in an instant.”

Carandang feels confident that pre-configured block designs will help users learn how to use the block editor to create richer content. “Even if it’s just a little help to make them comfortable with Gutenberg, it means a lot,” he wrote.

He said the feedback from users has been positive thus far.

Screenshot of importing and using the fullscreen profile card pattern into the block editor.
Importing the Fullscreen Profile Card block pattern.

Block designs downloaded from ShareABlock require the EditorsKit plugin, which is available for free in the WordPress plugin directory. This requirement is because WordPress does not currently have a native importer built into the block editor. In the future, this may change and the requirement could be lifted.

Version 1.7 of EditorsKit introduced the ability to import blocks by dragging and dropping a block .json file into the editor. The blocks available via ShareABlock work using this feature. After downloading a .json file from the site, users merely need to drag it into the editor. Users can also use the “Import” block available from EditorsKit to do the same.

Block Patterns and the Future

“The plan is to provide integration with Block Patterns, which is what the core devs are currently working on,” said Carandang. “With this integration, the import process will be much easier.”

Block patterns are a planned feature that is under active development in the Gutenberg plugin and will eventually make its way into core WordPress. Patterns are predefined sets of blocks. They will allow users to quickly create more advanced layouts while also teaching what specific blocks do. The idea is to have a set of patterns with common layouts that people see around the web.

Carandang said he is actively checking the progress of the Block Patterns feature. He is eager to see the feature to come to fruition, which carries with it the possibility of more widespread use of the blocks available from his new community.

Posted on

EditorsKit Adds Nofollow Options for Links, Fixes Bug with Gutenberg Metaboxes Overlapping in Chrome

EditorsKit is becoming somewhat of a “hotfix” plugin for Gutenberg, especially with the additions to the 1.14 release this week. Developer Jeffrey Carandang added new link formats for nofollow rel attribute options, along with a fix for an annoying bug in Chrome that causes Gutenberg metaboxes to overlap. He has been closely monitoring feedback on both Gutenberg and EditorsKit, introducing features for which users have an immediate need.

Google recently announced new ways to identify nofollow links with two additional rel attribute options for specifying links as sponsored and/or user-generated content. The Gutenberg core team has expressed hesitation on a PR that would add nofollow link options, invoking WordPress’ 80/20 rule.

Since the related PR doesn’t seem to be a priority, with no movement for two weeks, Carandang decided to add the nofollow and sponsored rel attribute options to EditorsKit, so users can start following Google’s recommendations without having to switch to HTML mode. He also managed to make it work with the version of Gutenberg included in core.

Nofollow link options

Chrome users may have noticed that the block editor has a nasty bug with metaboxes overlapping, obscuring the main content area. This problem was introduced in the recent Chrome 77 update and is present on WordPress 5.2.3 and older versions.

Chrome developers are aware of the issue and a fix will be in the next release. Version 78 is expected October 22. Since it is a bug with Chrome, the Gutenberg team has opted not to release a fix/workaround for this problem. In the meantime, they recommend updating to WordPress 5.3 if it is released before the Chrome bug is fixed. This isn’t likely, as 5.3 is scheduled for mid-November.

The Gutenberg team also recommend using a different browser or installing the Gutenberg plugin to fix the issue. Andrea Fercia noted on the ticket that the plugin is still listed among WordPress’ beta plugins and may not be advisable to use in production on some sites. Users with a technical background can implement one of several CSS solutions in the ticket, but this is a frustrating bug for users who don’t know how to apply code fixes.

Carandang added a fix for this bug to the most recent version of EditorsKit. So far his strategy of being responsive to users’ requests seems to have been successful, as his Gutenberg utility plugin now has more than 1,000 active installs. He said he is happy to add hot fixes for EditorsKit users and will remove them once the fixes have been added to Chrome and/or the block editor.

Posted on

EditorsKit 1.9 Introduces Block Styles, Utility Classes, and Full Height Editor Screen

EditorsKit 1.9 was released this week with a new Block Styling feature for the image and cover blocks. It allows users to change these blocks to be displayed as circular, diagonal, inverted diagonal, rounded corners, or with a shadow. It also adds a “full screen height” display option to the Advanced block settings panel. This makes it easy to turn the Cover, Image, and Media & Text blocks into a hero section.

Jeffrey Carandang, the plugin’s author, has also added a full height toggle option to the editor screen. It makes the editor’s minimum height match the browser’s viewport so that metaboxes are not in view until the user scrolls down. This creates a cleaner interface when creating new posts and pages. It is also optional, so it doesn’t exclude sites where the content added to the metaboxes is more important than the main posting area.

Version 1.9 introduces a feature called Utility Classes to the Advanced CSS Class(es) option. The classes can be removed in one click from the selected block and the preview instantly updates to reflect the change. It also includes auto-suggestion for classnames so they can be easily re-applied.

Carandang shared sample code for how theme developers can add their own utility classes using a custom PHP filter. This makes it more extensible but seems unlikely to that theme authors would go to the trouble, given the plugin’s relatively small user base at the moment.

He is working on improving interoperability with other plugins in the ecosystem by adding filters for plugin and theme developers to make better use of EditorsKit. He also continues to add tweaks and improvements for those using Jetpack, Block Lab, the Genesis Framework, CoBlocks, Thrive Comments, ACF, and other popular third party extensions.

Carandang launched EditorsKit on Product Hunt where new users are discovering the plugin for the first time. He also set up a new “frontenberg style” live demo that lets users test EditorsKit features on the frontend of the site. Demo sites like this are a good way to market Gutenberg blocks, making it convenient for users who would otherwise have to install the plugin on their own test sites.

“My main objective is for EditorsKit to be known in the community,” he said. “I feel like it’s really solid plugin and I need to reach more people. With tons of blocks plugin available, utility plugins like EditorsKit are being left out.”

Although Carandang has no plans to release a pro version of EditorsKit at the moment, he has considered creating commercial extensions for it in the future. Marketing a utility plugin has so far proven to be more of a challenge than plugins that offer custom blocks.

There was some discussion in the EditorsKit community on Facebook about recent EditorsKit features straying into the design aspect of site building. While the new Block Styling options may be a useful for some users, custom shapes and layouts straddle the line between design and editing features. It seems like a slight departure from the more utilitarian editor features the plugin became know for, such as markdown formatting, block visibility, drag-and-drop import/export, and the ability to disable auto-saving.

Carandang may need to tread carefully to keep the plugin from becoming a catch-all drawer of “features that would be nice to have for Gutenberg,” for the sake of marketing it more effectively.

“I don’t plan on adding design utility classes,” he said. “Just padding, margin and flexbox. The rest should be from the theme. I’m planning to help out theme devs that will support EditorsKit with the integration. I don’t want the plugin file to be huge and filled with CSS for design. My goal is still Gutenberg Editor Toolkit.”

A loose EditorsKit roadmap is public with upcoming features outlined in issues on the plugin’s GitHub repo. Most of of those listed seem more aligned with editing than design, so future versions of the plugin likely will not bloat the plugin with too many design-related block settings panels.

Posted on

EditorsKit 1.6 and 1.7 Add Tools for Writers, Drag and Drop Block Export/Import

Recent EditorsKit releases have introduced a set of new tools that some writers may have found missing from Gutenberg. The plugin’s creator, Jeffrey Carandang, said version 1.6 was targeted at improving the writing flow for writers, bloggers, and content creators.

Gutenberg has decent support for copying and pasting Markdown. It will automatically convert links, blockquotes, code snippets, and other formatting into the proper Gutenberg blocks. However, the editor does not offer full support for users who who want to write with Markdown.

EditorsKit 1.6 adds basic markdown capabilities for things like bold, italic and ~strikethrough~ and these can also be used alongside other available editor markdowns and their keyboard shortcuts. These are integrated directly into the RichText editor so you don’t have to use a dedicated Markdown plugin with a custom block, like WP Githuber MD, or Jetpack’s Markdown module.

Version 1.6 introduced an expanded “clear formatting” option as a response to requests Carandang received on the plugin’s Facebook community and Slack. It clears formatting on specific text, removes formatting on selected text, and clears all paragraph and heading block formatting using the “Clear Block Formatting” option in the block settings. This version also added subscript, superscript, and uppercase text formats, along with a title visibility toggle that removes titles from the frontend on a per-post basis.

While these tools may provide features that some users find to be critically missing from Gutenberg, for many others they simply add to the clutter of the block toolbar and the overall interface. Gutenberg is still sorely in need of a distraction-free UI that will enable users to ditch dedicated writing apps and embrace WordPress as their go-to app for writing.

EditorsKit seems best suited as a playground for features that may or may not have widespread appeal. For example, the most recent 1.7 release enables exporting and importing blocks without the requirement of first converting them to reusable blocks. Users can click on the “block settings” icon and export as JSON on a per-block basis. It’s also possible to select multiple blocks and export them in one file.

Importing blocks back into the editor is as easy as dragging and dropping the .json file. It automatically generates the blocks in an almost magical way an does not require users to navigate to the separate admin dashboard for managing reusable blocks.

Import json

Carandang is working on making the import/export work with media attachments. He is also currently working with the Gutenberg team and other contributors to bring the plugin’s Text and Highlight colors feature to the core editor.

Posted on

New in EditorsKit 1.5: Justify Text Alignment, Autosave On/Off Toggle, and Highlighted Text

WordPress plugin developer Jeffrey Carandang continues to plough forward with new features for EditorsKit, a collection of page building block options for Gutenberg. What began as a block visibility management plugin has grown to include more features aimed at tweaking various settings in the editor.

Version 1.5 adds some text, heading, and paragraph styling and formatting options that aren’t currently available in core. For example, Gutenberg lets users change the background color and text color for an entire paragraph, but that’s where the color customizations end. EditorsKit now supports highlighting a section of text or a heading and choosing a color or background color.

This may seem like a niche request to implement but Carandang has tracked nearly two dozen related issues and discussions where users are asking for text highlighting or similar features.

This release also adds underline and justify alignment options to the paragraph block. Gutenberg doesn’t include it by default, as WordPress 4.7 removed the justify button from the TinyMCE editor in 2016. However, the demand for justified text has not disappeared.

In adding the format to EditorsKit, Carandang cited 10 issues from Gutenberg’s GitHub repository and eight WordPress.org support topics where users have asked for the justify text option or have commented on it being missing.

Those who have Jetpack installed will already have the justify alignment option. Carandang plans to add a check for wpcom/justify to the next release so users of both plugins won’t have two justify options.

EditorsKit 1.5 tackles the widespread issues with Gutenberg’s autosave function by adding a toggle that allows users to enable/disable it. This setting can be found under the vertical ellipses menu at the top of the editor.
Users have reported getting stuck in autosave, particularly with slower connection speeds, and some have experienced problems with their hosts.

As the result of getting stuck in autosave, users often attempt to refresh the screen only to lose the work. This has been an ongoing problem since last year. EditorsKit gives users the option to turn autosave off if they are experiencing problems and save manually as they see fit.

Version 1.5 adds theme support for changing the block width to match the page template and layout. This allows theme developers to customize block sizes based on the template the users selects.

Carandang has been adding new features based on his own needs but has found most of them to be fairly common requests in the Gutenberg repository. He made upcoming features and ideas for EditorsKit public on GitHub and is accepting feature suggestions in this format. A few of his current ideas under discussion include:

  • a React emoji picker
  • copy link icon for the top bar of the editor
  • to-do style using checkbox and strike through
  • Markdown support for RichText API
  • uppercase and indent formats

I asked Carandang if he has any plans to add an option for paring down Gutenberg to the bare essentials with an interface more focused on writing. He said it is a possibility but is optimistic that the Gutenberg team may work to solve this common complaint in core.

“I’ve thought of that, specially when my writer colleague asked me about it,” he said. “But I think it’s not time for that yet. I’ll wait for more Gutenberg releases before deciding if it’s needed in EditorsKit.”

Carandang said he doesn’t plan to add any custom blocks to EditorsKit. His goal is to extend blocks for users to have options that they can utilize globally, while using whichever blocks plugin(s) they prefer. The plugin currently has no revenue model but he may pursue monetization in the future.

“At of the moment, I’m more focused on building the plugin features rather than monetization, but extensions may come in a year or two when Gutenberg is more stable,” Carandang said.

Posted on

Block Options Plugin Rebrands to EditorsKit, Expands Beyond Block Visibility Management

WordPress plugin developer Jeffrey Carandang has rebranded his Block Options plugin to EditorsKit. Carandang created Block Options prior to co-founding CoBlocks, which was recently acquired by GoDaddy. It began as a plugin for controlling block visibility, inspired by his Widget Options plugin, but has since grown to include more features for managing Gutenberg blocks. EditorsKit now offers the following capabilities:

  • Devices Visibility Options
  • User Login State Visibility
  • Display Logic
  • Advanced Custom Fields Integration
  • Block Guide Lines

“As much as I love the name ‘Block Options,’ it has started to become too generic and has been used a lot on the Gutenberg editor itself,” Carandang said. “So, I have decided to change the name to something that stands out and fits the purpose more – page building block options for the new editor.

“The name EditorsKit came from ‘Editor’s Toolkit.’ I’ve been progressively moving towards building a set of tools that will help users navigate through the editor more conveniently, besides giving them visibility control.”

Version 1.4 of the plugin introduces the new Block Guide Lines feature, one of the features to go beyond visibility management. It allows users to toggle guide lines on/off for titles and editor blocks to check element boundaries. Carandang said the feature becomes especially useful when handling nested blocks.

The last major release of the plugin also improves the UI and UX with a new “Visibility Settings” modal for managing all visibilities in the same place. The modal includes an “Advanced” tab for more complicated options that are more likely to be used by developers, such as custom display logic and ACF visibility support.

Under the umbrella of its new branding and website, Carandang plans to expand EditorsKit to include more tools, with the next set focused on developers. Next on the roadmap is a setting to toggle Auto Save on/off and theme support for page template body classes.

Check out a quick preview of the improved interface and new features below: