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.

Become a Patron

2 responses to “EditorsKit 1.10-1.13: Syntax Highlighting, Drag & Drop Featured Image, Media Link and more!”

  1. Stephen Vaughan Avatar
    Stephen Vaughan

    Interesting that you have included the jump link to the custom fields. I want to have an option to just have the metaboxes on the back end of custom posts types with the custom fields you can assign with the likes of Toolset and ACF.

    This would address the need for a custom editing experience for data entry on custom post types where just the custom fields (set up in Toolset or ACF) are required and no block editor to distract the user. You know this is simple to do. Remove the block editor and move the meta box section up under the title and a little bit of background grey to set of the different meta boxes.

    In fact, I have a bit of a working prototype to show how this could work:

    https://sitedesign.vaughanprint.com/toolset-gutenberg-future-dashboard-improvements/

    It involved using some css wrapped in a function in the functions file that also used a function to target specific post types.

    This would be useful where a template is being set up automatically on the front end with the like of a Toolset template.

    I think this would be a good addition to EditorKit as you could lock down the interface so that users could not go mad with the block editor.

    Reply
    1. Jeffrey Carandang Avatar
      Jeffrey Carandang

      Thanks a lot for the suggestion Stephen! I’m taking a look and will let you know if in any case I did some integration.

      Reply

Leave a Reply

I won’t send you spam. Unsubscribe at any time.

%d bloggers like this: