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.