Introducing EditorsKit Block Styling, Utility Classes Features and more!

Introducing EditorsKit Block Styling, Utility Classes Features and more!

I’m very happy to introduce the next phase for this plugin — the Block Styling.

Over the last few weeks, I’ve been adding new features to EditorsKit and it’s now on version 1.9.2. Here is the new set of options for the Gutenberg Page Building Toolkit plugin, plus I’ve listed the full features available on the plugin right now, so you will have the feel of how powerful EditorsKit has become.

Introducing Block Styling 

Block Styling for EditorsKit comes in different ways. This will let you easily build better pages regardless of the theme or blocks plugin you are using. Without further ado, let’s get started.

First, Block Styles for Image and Cover Block

Image and Cover Blocks are probably two of the most useful within the core blocks but lack styling to open more possibilities. I’m pertaining to the ability to display image and cover as circular, diagonal and rounded corners. I think with these layouts available, both blocks will be so much powerful.

Block Styles for Image, Cover and Media & Text Blocks
Block Styles for Image, Cover and Media & Text Blocks

Full Screen Display Option

With EditorsKit, you can now turn Cover Block, Image Block, and Media & Text Block into full screen mode. You can now have hero section in just a few clicks. Here’s how easy you can make these block displays better.

Gutenberg Advanced Full Screen Option
Gutenberg Advanced Full Screen Option

Introducing Utility Classes and Classnames Suggestion

Newly added on EditorsKit set of tools for users and developers has the ability to have Utility Classes available on Additional CSS Class(es) advanced option. These utility classes will automatically be suggested when you are typing and can easily be removed in one click.

Utility Classes and Classnames Suggestion
Utility Classes and Classnames Suggestion

Theme developers can also add their utility classes easily via custom PHP filter. Here’s the sample code I’ve integrated with Jarvis theme of Pro Theme Design.

Other Improvements

There are several fixes and compatibility plugin improvements together with small features that will help your writing greatly.

Full Height Editor Screen

Aside from full screen block display, I’ve also added option to set the Gutenberg editor itself to have minimum height similar to the browser’s viewport. This will make your edit screen cleaner and you won’t have the distracting metaboxes view whenever you create a new post or pages.

Themes and Third-party plugins compatibility

It’s not a secret that I’m trying to make EditorsKit developer-friendly and extendable. I’ve created several filters for plugin and theme developers to fully utilize EditorsKit. 

Available Filter

editorskit_block_editor_classnames – Add array of classnames that will automatically add to the auto suggestions list.

Theme Supports

editorskit-template-block-sizes – make the block widths on the editor automatically changes based on the templates selected. Learn more here.

editorskit-genesis-layout-block-sizes – exclusively for Genesis Framework to make the block sizes change automatically when selecting Layouts. Learn more here.

Brand New Preview Video

With Block Styling and Utility Classes Suggestions, I’ve created a new preview video to highlight all the features available on EditorsKit.

List of EditorsKit Features

Lots of tools have been added in the last few months, and some of you might not be aware of how powerful EditorsKit has become. I’ve listed all the features available on the plugin below.

Gutenberg Rich Text Formats

✔ Text and Highlight Colors

✔ Justify Paragraph Alignment

✔ Underline Text

✔ Subscript and Superscript

✔ Uppercase Text Transform

✔ Clear Formatting

Block Visibility

✔ Devices Responsive Visibility

✔ Logged-in or Logged-out User State

✔ Custom Display Logic

✔ Advanced Custom Fields Visibility Integration

Block Styling

✔ Image and Cover Block Styles

✔ Full Screen Display Option

✔ Custom Utility Classes Suggestions

Productivity Tools

✔ Markdown Formatting

✔ Block Guide Lines

✔ Hide Title Option

✔ Block Drag and Drop Import; and Export

✔ Disable Auto Saving

✔ Features Manager

Pretty amazing isn’t it? You can learn about all these features and download the plugin for free at editorskit.com.

Upvote on ProductHunt 🙏

With all the features added on EditorsKit, I feel like it’s time to add the plugin on ProductHunt. Please do upvote and don’t forget to share the news that the free Gutenberg Toolkit plugin is now available for hunters.

EditorsKit - WordPress Editor Toolkit - Page Building Toolkit for the Gutenberg Block Editor. | Product Hunt Embed

Closing

Thank you for your continued support, and I hope you are loving EditorsKit features and the Gutenberg tutorials I’ve been creating lately. 

I’m super stoked on what EditorsKit has become and the features I’ve planned to add. As always, you can give any feedback and suggestions using the comment section below. Thanks again!

Leave a Reply

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

How to Add Custom Gutenberg Block Styles
Up Next:

How to Add Custom Gutenberg Block Styles

How to Add Custom Gutenberg Block Styles