EditorsKit 1.10-1.13: Syntax Highlighting, Drag & Drop Featured Image, Media Link and more!

EditorsKit 1.10-1.13: Syntax Highlighting, Drag & Drop Featured Image, Media Link and more!

It’s been a few versions since I created a release blog article and I’m super excited to let you know what brand new features have been added since then!

Without further ado, here are the features added from version 1.10 to 1.13. I hope you’ll love them!

Gutenberg Code Editor Syntax Highlighter

As for my daily experiences, the “Code Editor” mode on the block editor is pretty much unusable for me and there are no syntax highlighting options. Without those options, users won’t be able to distinguish html elements to editable text, which sometimes lead to editor error.

By simply utilizing the existing Code Mirror library which you are all familiar with on theme and plugin editing, integration to Gutenberg when switching to “Code Editor Mode” provides huge improvements to editing.

Gutenberg Code Editor Syntax Highlighter
Gutenberg Code Editor Syntax Highlighter

Drag and Drop Featured Image Upload

I’m actually quite surprised that the Featured Image panel isn’t drag-and-drop. To be honest, I’m not aware of it until Ben suggested this feature on Twitter. Here’s how you can now easily manage featured images when EditorsKit is active. You need to install the Gutenberg plugin because the filter for sidebar panel isn’t available until WordPress 5.3 release.

Drag and Drop Featured Image Upload
Drag and Drop Featured Image Upload

Set Image Block as Featured Image

You can save at least a little time when setting up the featured image with the images that you’ve already uploaded. When you use the Image Block, just “Set Image as Featured” and it’ll automatically be applied.

Set Image Block as Featured Image
Set Image Block as Featured Image

Set Image Link on Media and Text Block

We all love Media and Text block, but setting custom link to the Image isn’t available and you end up using column block instead. With EditorsKit, you can now set link to the image with added option to set target to new tab, add no follow, and/or apply linking to the whole block.

Set Image Link on Media and Text Block

Navigate to Custom Fields Easily

I notice that I’ve been scrolling too much to get to the Custom Fields section, especially when I have long contents. If you find yourself doing the same, just toggle the editor option and click “View Custom Fields“.

Heading Block Label

This one is inspired by bearapp. This feature will save you a lot of time looking into the Content Structure ( info icon ) on the editor. Heading labels will automatically become visible on parent Heading Blocks.

Heading Block Label

UI Improvements for Better Experience

Here are a few improvements on the interface to make your writing better.

URL Popover Options Alignment

By moving the toggle options to the right and below the option opener, you will save a few mouse movements.

URL Popover Options Alignment
URL Popover Options Alignment

Drag and Drop Block Background

Simply by adding default background to the block being dragged, the experience will improve beautifully.

Drag and Drop Block Background
Drag and Drop Block Background

Performance Improvement

EditorsKit is now using webpack and  wp-scripts component. Utilizing this component improves code performance and adheres to WordPress guidelines.

String Translations

EditorsKit also generates .pot file for string translations. Please support the plugin by providing translations for your language. Thanks a lot!

Thank You!

Thank you very much for choosing EditorsKit! With these new features and the existing ones, you will surely have better writing and content building with the Gutenberg block editor. You will also save a lot of time for other things ⏱️

🙏 I can’t also thank enough those who helped me reach the 100 stars requirement of Open Collective for open-source projects. With the help of those wonderful folks, I’ve finally set up the EditorsKit donation platform page. Here’s the link and I hope you can be a patron and help me sustain this project.

Leave a Reply

Your email address will not be published. Required fields are marked *

Up Next:

How to Create Gutenberg Block Plugin using wp-scripts with PostCSS Build Process

How to Create Gutenberg Block Plugin using wp-scripts with PostCSS Build Process